이전에는 플랫폼별 애플리케이션의 컨텍스트에서만 앱 설치가 가능했습니다. 오늘날 최신 웹 앱은 플랫폼별 앱과 동일한 수준의 통합 및 안정성을 제공하는 설치 가능한 환경을 제공합니다.
다음과 같은 다양한 방법으로 이를 달성할 수 있습니다.
다양한 배포 채널을 갖추는 것은 많은 사용자에게 도달하기 위한 효과적인 방법이지만, PWA 설치를 촉진하는 올바른 전략을 선택하기는 어려울 수 있습니다.
이 가이드에서는 다양한 설치 옵션을 결합하여 설치율을 높이고 플랫폼 경쟁 및 카니발라이제이션을 방지하기 위한 권장사항을 살펴봅니다. 다루는 설치 서비스에는 브라우저와 App Store에서 모두 설치된 PWA와 플랫폼별 앱이 포함됩니다.
웹 앱을 설치 가능하게 만드는 이유는 무엇인가요?
설치된 프로그레시브 웹 앱은 브라우저 탭이 아닌 독립형 창에서 실행됩니다. 사용자의 홈 화면, 도크, 작업 표시줄 또는 섹션에서 실행할 수 있습니다. 기기에서 앱을 검색하고 앱 전환 도구를 사용하여 앱 간에 이동할 수 있으므로 설치된 기기의 일부처럼 느껴집니다.
하지만 설치 가능한 웹 앱과 플랫폼별 앱을 모두 제공하면 사용자에게 혼란을 줄 수 있습니다. 플랫폼별 앱이 일부 사용자에게는 가장 적합한 선택일 수 있지만 다른 사용자에게는 몇 가지 단점이 있을 수 있습니다.
- 저장용량 제약: 새로운 앱을 설치하면 다른 앱을 삭제하거나 가치 있는 콘텐츠를 삭제하여 공간을 확보하게 될 수 있습니다. 이는 특히 저가형 기기 사용자에게 불리합니다.
- 사용 가능한 대역폭: 앱 다운로드 프로세스는 비용이 많이 들고 속도가 느릴 수 있으며, 연결 속도가 느리고 데이터 요금이 비싼 데이터 요금제를 사용하는 사용자의 경우 더더욱 그러합니다.
- 불편함: 웹사이트를 떠난 후 앱을 다운로드하기 위해 스토어로 이동하면 추가적인 불편이 발생하고 웹에서 직접 수행할 수 있는 사용자 작업이 지연됩니다.
- 업데이트 주기: 플랫폼별 앱을 변경하려면 앱 검토 프로세스를 거쳐야 할 수 있으며, 이로 인해 변경 및 실험 (예: A/B 테스트)이 느려질 수 있습니다.
앱을 자주 사용하지 않을 것 같거나 몇 메가바이트의 저장용량이나 데이터를 소비할 가치가 없다고 생각하는 사용자 등 플랫폼별 앱을 다운로드하지 않는 사용자의 비율이 큰 경우도 있습니다. 애널리틱스 설정을 사용하여 '모바일 웹 전용' 사용자의 비율을 추적하는 등 여러 가지 방법으로 이 세그먼트의 크기를 확인할 수 있습니다.
이 세그먼트의 규모가 크다면 환경을 설치하는 다른 방법을 제공해야 한다는 의미입니다.
브라우저를 통한 PWA 설치 유도
고품질 PWA가 있는 경우 플랫폼별 앱보다 PWA 설치를 홍보하는 것이 좋습니다. 예를 들어 플랫폼별 앱에 PWA에서 제공하는 기능이 없거나 오랫동안 업데이트되지 않은 경우입니다. 플랫폼별 앱이 ChromeOS와 같이 더 큰 화면에 최적화되지 않은 경우 PWA 설치를 홍보하는 것도 유용할 수 있습니다.
일부 앱의 경우 플랫폼별 앱 설치를 유도하는 것이 비즈니스 모델의 핵심적인 부분입니다. 이 경우 플랫폼별 앱 설치를 홍보하는 것이 비즈니스적으로 적절합니다. 하지만 일부 사용자는 웹에 머무르는 것이 더 편할 수 있습니다. 해당 세그먼트를 식별할 수 있는 경우 PWA 프롬프트는 해당 사용자에게만 표시될 수 있습니다('대체로 PWA'라고 함).
기본 설치 가능 환경으로서의 PWA
PWA가 설치 가능 기준을 충족하면 대부분의 브라우저에는 PWA를 설치할 수 있다고 표시됩니다. 예를 들어 데스크톱 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도 스토어에 업로드할 수 있습니다. (이에 대해서는 이 도움말 후반부에서 설명합니다.) 일부 회사는 이러한 환경을 'lite' 환경으로 제공하고, 다른 회사는 주력(핵심) 앱에도 이 접근 방식을 사용했습니다.
경량 앱 홍보
Google Play 연구에 따르면 APK 크기가 6MB 증가할 때마다 설치 전환율은 1% 감소합니다. 즉, 10MB 앱의 다운로드 완료율은 100MB 앱보다 약 30% 더 높을 수 있습니다.
이를 해결하기 위해 일부 회사는 PWA를 활용하여 신뢰할 수 있는 웹 활동(TWA)을 사용하여 Play 스토어에 앱의 경량 버전을 제공하고 있습니다. TVA는 PWA를 WebView와 유사한 구성요소로 래핑하므로 생성되는 앱 크기는 일반적으로 몇 MB에 불과합니다.
인도 최대의 숙박업체 중 하나인 Oyo는 라이트 버전의 앱을 빌드하고 TWA를 사용하여 Play 스토어에서 사용할 수 있도록 했습니다. 이 도움말이 작성된 시점에 Oyo 앱의 크기는 850KB에 불과했고, 이는 자사 Android 앱 크기의 7% 에 불과했습니다. 또한 Oyo를 설치하면 Android 앱과 구별할 수 없습니다.
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를 추가하도록 메시지를 표시하는 등 사용자가 앱을 설치할 수 있는 옵션이 더 많습니다.