이전에는 플랫폼별 애플리케이션의 컨텍스트에서만 앱 설치가 가능했습니다. 오늘날 최신 웹 앱은 플랫폼별 앱과 동일한 수준의 통합 및 안정성을 제공하는 설치 가능한 환경을 제공합니다.
다음과 같은 다양한 방법으로 이를 달성할 수 있습니다.
다양한 배포 채널을 갖추는 것은 많은 사용자에게 도달하기 위한 효과적인 방법이지만, PWA 설치를 촉진하는 올바른 전략을 선택하기는 어려울 수 있습니다.
이 가이드에서는 다양한 설치 옵션을 조합하여 설치율을 높이고 플랫폼 경쟁 및 자기 잠식을 방지하기 위한 권장사항을 살펴봅니다. 여기에서 다루는 설치 서비스에는 브라우저와 App Store에서 설치된 PWA와 플랫폼별 앱이 포함됩니다.
웹 앱을 설치 가능하게 만들어야 하는 이유
설치된 프로그레시브 웹 앱은 브라우저 탭이 아닌 독립형 창에서 실행됩니다. 사용자의 홈 화면, 도크, 작업 표시줄 또는 앱 표시줄에서 실행할 수 있습니다. 기기에서 검색한 후 앱 전환기를 사용하여 앱 간에 이동할 수 있어 앱이 설치된 기기의 일부인 것처럼 느끼게 할 수 있습니다.
그러나 설치 가능한 웹 앱과 플랫폼별 앱이 모두 있으면 사용자에게 혼란스러울 수 있습니다. 일부 사용자에게는 플랫폼별 앱이 최선의 선택일 수 있지만, 다른 사용자에게는 몇 가지 단점이 있을 수 있습니다.
- 저장용량 제약: 새로운 앱을 설치하면 다른 앱을 삭제하거나 가치 있는 콘텐츠를 삭제하여 공간을 확보하게 될 수 있습니다. 이러한 상황은 저사양 기기 사용자에게 특히 불리합니다.
- 사용 가능한 대역폭: 앱 다운로드 프로세스는 비용이 많이 들고 속도가 느릴 수 있으며, 연결 속도가 느리고 데이터 요금이 비싼 데이터 요금제를 사용하는 사용자의 경우 더더욱 그러합니다.
- 불편함: 웹사이트를 떠나서 앱을 다운로드하기 위해 스토어로 이동하면 추가적인 불편이 발생하고 웹에서 직접 수행할 수 있는 사용자 작업이 지연됩니다.
- 업데이트 주기: 플랫폼별 앱을 변경하려면 앱 검토 절차를 거쳐야 할 수 있으며, 이로 인해 변경 및 실험 (예: A/B 테스트)이 느려질 수 있습니다.
경우에 따라 앱을 자주 사용하지 않거나 몇 메가바이트의 스토리지 또는 데이터를 소비할 수 없다고 생각하는 사용자 등 플랫폼별 앱을 다운로드하지 않는 사용자의 비율이 클 수 있습니다. 여러 가지 방법으로 이 세그먼트의 크기를 결정할 수 있습니다. 예를 들어 애널리틱스를 설정하여 '모바일 웹 전용'의 비율을 추적할 수 있습니다. 있습니다.
이 세그먼트의 규모가 크다면 환경을 설치하는 다른 방법을 제공해야 한다는 의미입니다.
브라우저를 통해 PWA 설치 촉진
고품질 PWA가 있다면 플랫폼별 앱보다 설치를 홍보하는 것이 더 나을 수 있습니다. 예를 들어 플랫폼별 앱에 PWA에서 제공하는 기능이 없거나 한동안 업데이트되지 않은 경우입니다. 플랫폼별 앱이 ChromeOS와 같은 대형 화면에 최적화되지 않은 경우 PWA 설치를 촉진하는 것도 도움이 될 수 있습니다.
일부 앱의 경우 플랫폼별 앱 설치를 유도하는 것이 비즈니스 모델의 핵심입니다. 이 경우 플랫폼별 앱의 설치를 홍보하는 것이 비즈니스 모델의 핵심입니다. 하지만 웹에 머무르는 것이 더 편한 사용자도 있을 수 있습니다. 이 세그먼트를 식별할 수 있는 경우 PWA 프롬프트는 'PWA'를 대체라고 부르는 해당 사용자에게만 표시될 수 있습니다.
기본 설치 가능한 환경으로 PWA
PWA가 설치 가능 기준을 충족하면 대부분의 브라우저에는 PWA를 설치할 수 있다고 표시됩니다. 예를 들어 데스크톱 Chrome에서는 주소 표시줄에 설치 가능한 아이콘을 표시하고 모바일에는 미니 정보 표시줄을 표시합니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">일부 경험에서는 이것으로 충분할 수 있지만 PWA 설치를 유도하는 것이 목표라면 BeforeInstallPromptEvent를 수신 대기하고 PWA 설치 홍보 패턴을 따르는 것이 좋습니다.
PWA가 플랫폼별 앱 설치율을 잠식하지 않도록 방지
경우에 따라 PWA를 통해 플랫폼별 앱의 설치를 홍보할 수도 있지만, 이 경우에도 사용자가 PWA를 설치할 수 있도록 하는 메커니즘을 제공하는 것이 좋습니다. 이 대체 옵션을 사용하면 플랫폼별 앱을 설치할 수 없거나 설치하고 싶지 않은 사용자도 유사한 설치 경험을 얻을 수 있습니다.
이 전략을 구현하기 위한 첫 번째 단계는 사용자에게 PWA 설치 프로모션을 표시할 시점에 관한 휴리스틱을 정의하는 것입니다.
예: PWA 사용자는 플랫폼별 앱 설치 메시지를 확인했지만 플랫폼별 앱을 설치하지 않은 사용자입니다. 사용자가 사이트를 다섯 번 이상 방문했거나 앱 배너를 클릭했지만 웹사이트를 계속 사용했습니다.
그런 다음 휴리스틱을 다음과 같은 방식으로 구현할 수 있습니다.
- 플랫폼별 앱 설치 배너를 표시합니다.
- 사용자가 배너를 닫으면 해당 정보로 쿠키를 설정합니다 (예:
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를 활용하여 신뢰할 수 있는 웹 활동 (TWA)을 사용하여 Play 스토어에서 경량 버전의 앱을 제공하고 있습니다. TVA는 PWA를 WebView와 유사한 구성요소로 래핑하므로 생성되는 앱 크기는 일반적으로 몇 MB에 불과합니다.
인도 최대의 숙박업체 중 하나인 Oyo는 라이트 버전의 앱을 빌드하고 TWA를 사용하여 Play 스토어에서 사용할 수 있도록 했습니다. 이 도움말이 작성된 시점에 Oyo 앱의 크기는 850KB로, Android 앱 크기의 7% 에 불과했습니다. 일단 설치하고 나면 Android 앱과 구별할 수 없습니다.
<ph type="x-smartling-placeholder">Oyo는 플래그십과 '라이트' 스타일을 모두 유지했습니다. 앱 버전별로 게시하므로 사용자에게 선택권을 제공할 수 있습니다.
가벼운 웹 환경 제공
직관적으로 보아, 저사양 기기 사용자는 고급형 휴대전화 사용자보다 가벼운 버전의 앱을 다운로드하는 경향이 더 강할 수 있습니다. 따라서 사용자의 기기를 식별할 수 있다면 무거운 플랫폼별 앱 버전보다 가벼운 앱 설치 배너를 우선시할 수 있습니다.
웹에서는 기기 신호를 가져와 기기 카테고리 (예: '높음', '중간' 또는 '낮음')에 대략적으로 매핑할 수 있습니다. 이 정보는 JavaScript API 또는 클라이언트 힌트를 사용하여 다양한 방법으로 얻을 수 있습니다.
JavaScript 사용
navigator.hardwareConcurrency, navigator.deviceMemory, navigator.connection과 같은 자바스크립트 속성을 사용하여 각각 기기 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를 홈 화면에 추가할 수 있도록 하는 등 사용자가 앱을 설치하도록 허용하는 더 많은 옵션이 있습니다.