Google I/O를 시청해 주셔서 감사합니다. 주문형 콘텐츠를 확인하세요.

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

설치 전략을 정의하는 방법

Demián Renzulli

Pete LePage

게시일: 2020년 5월 12일

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

다음과 같은 다양한 방법으로 이를 달성할 수 있습니다.

브라우저에서 PWA를 설치합니다.
앱 스토어에서 PWA를 설치합니다.

다양한 배포 채널을 사용하면 광범위한 사용자층에 도달할 수 있습니다. 하지만 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도 스토어에 업로드할 수 있습니다. 일부 회사는 이러한 앱을 '라이트' 환경으로 제공하고, 일부 회사는 플래그십 (핵심) 앱에도 이 접근 방식을 사용했습니다.

경량 앱 홍보

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

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

인도 최대 규모의 숙박업체 중 하나인 Oyo는 앱의 Lite 버전을 빌드하고 TWA를 사용하여 Play 스토어에서 제공했습니다. 2020년 5월 기준 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를 홈 화면에 추가하도록 유도하는 등 사용자가 앱을 설치할 수 있는 옵션이 더 많습니다.