이 페이지는 Cloud Translation API를 통해 번역되었습니다.

설치 전략을 정의하는 방법

Demián Renzulli

Pete LePage

이전에는 앱 설치가 플랫폼별 애플리케이션의 컨텍스트에서만 가능했습니다. 오늘날 최신 웹 앱은 플랫폼별 앱과 동일한 수준의 통합 및 안정성을 제공하는 설치 가능한 환경을 제공합니다.

다음과 같은 여러 가지 방법으로 이 작업을 수행할 수 있습니다.

브라우저에서 PWA 설치하기
앱 스토어에서 PWA 설치하기

서로 다른 배포 채널을 보유하는 것은 많은 사용자에게 도달할 수 있는 효과적인 방법이지만 PWA 설치를 촉진하는 올바른 전략을 선택하는 것은 어려울 수 있습니다.

이 가이드에서는 다양한 설치 옵션을 결합하여 설치율을 높이고 플랫폼 경쟁과 자기 잠식을 방지하기 위한 권장사항을 살펴봅니다. 여기에 포함된 설치 서비스에는 브라우저와 App Store 모두에서 설치된 PWA와 플랫폼별 앱이 포함됩니다.

웹 앱을 설치할 수 있도록 해야 하는 이유

설치된 프로그레시브 웹 앱은 브라우저 탭이 아닌 독립형 창에서 실행됩니다. 사용자의 홈 화면, 도크, 작업 표시줄, 앱 표시줄에서 실행할 수 있습니다. 기기에서 앱을 검색하고 앱 전환 기능을 통해 앱 간에 이동할 수 있어 앱이 설치된 기기의 일부인 것처럼 느껴집니다.

그러나 설치 가능한 웹 앱과 플랫폼별 앱이 모두 있으면 사용자에게 혼란을 줄 수 있습니다. 어떤 사용자에게는 플랫폼별 앱이 최선의 선택일 수 있지만, 어떤 사용자에게는 몇 가지 단점이 있을 수 있습니다.

저장용량 제약: 새 앱을 설치하면 다른 앱을 삭제하거나 중요한 콘텐츠를 삭제하여 여유 공간을 확보할 수 있습니다. 이는 특히 보급형 기기 사용자에게 불리합니다.
사용 가능한 대역폭: 앱을 다운로드하는 것은 비용이 많이 들고 느린 프로세스일 수 있으며, 인터넷 속도가 느리고 데이터 요금제를 비싼 데이터 요금제를 사용하는 사용자에게는 더욱 그러합니다.
마찰: 앱을 다운로드하기 위해 웹사이트를 떠나고 스토어로 이동하면 추가적인 마찰이 발생하고 웹에서 직접 수행할 수 있는 사용자 작업이 지연됩니다.
업데이트 주기: 플랫폼별 앱을 변경하려면 앱 검토 절차를 거쳐야 할 수 있으며 이 경우 변경 및 실험 (예: A/B 테스트) 속도가 느려질 수 있습니다.

경우에 따라 특정 플랫폼별 앱을 다운로드하지 않는 사용자의 비율이 높을 수 있습니다. 예를 들어 앱을 자주 사용하지 않는다고 생각하거나 몇 메가바이트의 저장용량이나 데이터를 소비하는 것이 타당하지 않은 사용자라고 생각합니다. 여러 가지 방법으로 이 세그먼트의 크기를 결정할 수 있습니다. 예를 들어 애널리틱스 설정을 사용하여 '모바일 웹 전용' 사용자의 비율을 추적할 수 있습니다.

이 세그먼트의 크기가 상당하다면 환경을 설치하는 다른 방법을 제공해야 한다는 의미입니다.

브라우저를 통해 PWA 설치 승격

고품질 PWA가 있는 경우 플랫폼별 앱보다 설치를 홍보하는 것이 더 나을 수 있습니다. 예를 들어 플랫폼별 앱에 PWA에서 제공하는 기능이 없거나 한동안 업데이트되지 않은 경우 플랫폼별 앱이 ChromeOS와 같이 더 큰 화면에 최적화되지 않은 경우 PWA 설치를 장려하는 것도 도움이 될 수 있습니다.

일부 앱의 경우 플랫폼별 앱 설치를 유도하는 것이 비즈니스 모델의 핵심 부분입니다. 이 경우 플랫폼별 앱의 설치를 홍보하는 것이 비즈니스상 타당하지만, 일부 사용자는 웹에 머무는 데 더 편안하게 머물 수 있습니다. 해당 세그먼트를 식별할 수 있는 경우 PWA 메시지는 해당 세그먼트에게만 표시됩니다('대체 PWA').

기본 설치 가능 환경으로의 PWA

PWA가 설치 가능성 기준을 충족하면 대부분의 브라우저에 PWA가 설치 가능하다고 표시됩니다. 예를 들어 데스크톱 Chrome에서는 주소 표시줄에 설치 가능한 아이콘이 표시되고 모바일에서는 미니 정보 표시줄이 표시됩니다.

표준 Chrome 설치 메시지(미니 정보 표시줄) — 미니 정보 표시줄입니다.

일부 환경에서는 이것으로도 충분할 수 있지만 PWA 설치를 유도하는 것이 목표라면 BeforeInstallPromptEvent를 수신 대기하고 PWA 설치 승격 패턴을 따르는 것이 좋습니다.

PWA가 플랫폼별 앱 설치율을 잠식하지 않도록 방지

경우에 따라 PWA를 통해 플랫폼별 앱의 설치를 홍보할 수도 있지만, 이 경우에도 사용자가 PWA를 설치할 수 있도록 하는 메커니즘을 제공하는 것이 좋습니다. 이 대체 옵션을 사용하면 플랫폼별 앱을 설치할 수 없거나 설치를 원하지 않는 사용자가 유사한 설치된 환경을 얻을 수 있습니다.

이 전략을 구현하기 위한 첫 번째 단계는 PWA의 설치 프로모션을 사용자에게 표시할 경우에 대한 휴리스틱을 정의하는 것입니다.

예: PWA 사용자는 플랫폼별 앱 설치 메시지를 보았지만 플랫폼별 앱을 설치하지 않은 사용자입니다. 사이트를 5번 이상 방문했거나 앱 배너를 클릭했지만 대신 계속해서 웹사이트를 사용한 사용자입니다.

그런 다음 휴리스틱을 다음과 같은 방식으로 구현할 수 있습니다.

플랫폼별 앱 설치 배너를 표시합니다.
사용자가 배너를 닫으면 해당 정보가 포함된 쿠키를 설정합니다 (예: document.cookie = "app-install-banner=dismissed").
다른 쿠키를 사용하여 사용자의 사이트 방문 수를 추적합니다 (예: document.cookie = "user-visits=1").
이전에 쿠키에 저장된 정보를 getInstalledRelatedApps() API와 함께 사용하여 사용자가 'PWA 사용자'로 간주되는지 확인하는 isPWAUser()와 같은 함수를 작성합니다.
사용자가 의미 있는 작업을 실행하면 isPWAUser()를 호출합니다. 함수가 true를 반환하고 PWA 설치 메시지가 이전에 저장된 경우 PWA 설치 버튼을 표시할 수 있습니다.

앱 스토어를 통해 PWA 설치 홍보하기

앱 스토어용 앱은 PWA 기법을 비롯한 다양한 기술을 사용하여 빌드할 수 있습니다. 네이티브 환경에 PWA 혼합하기에서는 이러한 용도에 활용할 수 있는 기술에 관한 요약을 찾아볼 수 있습니다.

이 섹션에서는 스토어의 앱을 두 그룹으로 분류합니다.

플랫폼별 앱: 이러한 앱은 대부분 플랫폼별 코드로 빌드됩니다. 크기는 플랫폼에 따라 다르지만 일반적으로 Android에서는 10MB, iOS에서는 30MB 이상입니다. PWA가 없거나 플랫폼별 앱에서 보다 완전한 기능을 제공하는 경우 플랫폼별 앱을 홍보하는 것이 좋습니다.
경량 앱: 이러한 앱은 플랫폼별 코드로도 빌드할 수 있지만 일반적으로 웹 기술을 사용하여 빌드되며 플랫폼별 래퍼에 패키징됩니다. 전체 PWA도 스토어에 업로드할 수 있습니다. 이 내용은 이 도움말 후반부에서 설명합니다. 일부 회사는 이를 '라이트' 환경으로 제공하는 것을 선택하고, 다른 회사는 플래그십 (핵심) 앱에도 이 접근 방식을 사용합니다.

경량 앱 홍보

Google Play 연구에 따르면 APK 크기가 6MB 증가할 때마다 설치 전환율이 1% 감소합니다. 즉, 10MB인 앱의 다운로드 완료율은 100MB인 앱보다 약 30% 더 높을 수 있습니다.

이 문제를 해결하기 위해 일부 회사는 PWA를 활용하여 Play 스토어에 신뢰할 수 있는 웹 활동 (TWA)을 사용하여 앱의 경량 버전을 제공하고 있습니다. TWA는 PWA를 WebView와 같은 구성요소로 래핑하므로 결과적으로 앱 크기는 일반적으로 몇 MB에 불과합니다.

인도 최대 숙박업체 중 하나인 Oyo는 라이트 버전의 앱을 빌드하고 TWA를 사용하여 Play 스토어에서 사용할 수 있도록 했습니다. 이 도움말이 작성된 당시 Oyo 앱은 850KB에 불과했으며, 이는 Android 앱 크기의 7% 에 불과했습니다. 또한 설치 후에는 Android 앱과 구별할 수 없습니다.

OYO Lite가 작동 중입니다.

Oyo는 플래그십 버전과 '라이트' 앱 버전을 모두 스토어에 유지하여 사용자에게 선택권을 제공했습니다.

가벼운 웹 환경 제공

직관적으로 볼 때 보급형 기기 사용자는 고급형 휴대전화 사용자보다 가벼운 버전의 앱을 다운로드하는 경향이 더 높습니다. 따라서 사용자의 기기를 식별할 수 있는 경우 플랫폼별 사용량이 많은 앱 버전보다 가벼운 앱 설치 배너를 우선시할 수 있습니다.

웹에서는 기기 신호를 가져와 기기 카테고리 (예: '높음', '미드롤', '낮음')에 대략적으로 매핑할 수 있습니다. 이 정보는 JavaScript API 또는 클라이언트 힌트를 사용하여 여러 방법으로 가져올 수 있습니다.

JavaScript 사용

navigator.hardwareConcurrency, navigator.deviceMemory 및 navigator.connection 같은 JavaScript 속성을 사용하여 기기 CPU, 메모리, 네트워크 상태에 관한 정보를 각각 얻을 수 있습니다. 예를 들면 다음과 같습니다.

const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`

클라이언트 힌트 사용

기기 신호는 클라이언트 힌트를 통해 HTTP 요청 헤더에서 추론할 수도 있습니다. 클라이언트 힌트를 사용하여 기기 메모리에 관한 이전 코드를 구현하는 방법은 다음과 같습니다.

먼저, 모든 퍼스트 파티 요청에 대한 HTTP 응답의 헤더에서 기기 메모리 힌트를 수신하고 싶다고 브라우저에 알립니다.

HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory

그러면 HTTP 요청의 요청 헤더에 Device-Memory 정보가 수신되기 시작합니다.

GET /main.js HTTP/1.1
Device-Memory: 0.5

백엔드에서 이 정보를 사용하여 사용자 기기 카테고리와 함께 쿠키를 저장할 수 있습니다.

app.get('/route', (req, res) => {
  // Determine device category

 const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';

  // Set cookie
  res.setCookie('Device-Category', deviceCategory);
  …
});

마지막으로, 이 정보를 기기 카테고리에 매핑하는 자체 로직을 만들고 각 케이스에 상응하는 앱 설치 메시지를 표시합니다.

if (isDeviceMidOrLowEnd()) {
   // show "Lite app" install banner or PWA A2HS prompt
} else {
  // show "Core app" install banner
}

결론

사용자의 홈 화면에 아이콘을 표시하는 기능은 애플리케이션의 가장 매력적인 기능 중 하나입니다. 지금까지는 앱 스토어에서 설치한 앱에만 이러한 기능이 가능했던 점을 감안할 때, 앱 스토어 설치 배너를 표시하는 것만으로도 앱 설치를 유도할 수 있다고 생각할 수도 있습니다. 현재는 스토어에서 간단한 앱 환경을 제공하고 사용자가 웹사이트에서 직접 PWA를 설치하라는 메시지를 표시하여 홈 화면에 PWA를 추가하도록 하는 등 사용자가 앱을 설치할 수 있도록 하는 옵션이 더 많이 있습니다.