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

설치 전략을 정의하는 방법

Demián Renzulli

Pete LePage

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

다음과 같은 다양한 방법으로 이 작업을 실행할 수 있습니다.

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

다양한 배포 채널을 보유하면 많은 사용자에게 도달할 수 있지만 PWA 설치를 홍보하기 위한 올바른 전략을 선택하는 것은 쉽지 않을 수 있습니다.

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

웹 앱을 설치 가능하도록 만드는 이유는 무엇인가요?

설치된 프로그레시브 웹 앱은 브라우저 탭 대신 독립형 창에서 실행됩니다. 사용자의 홈 화면, 도크, 작업 표시줄 또는 섹션에서 실행할 수 있습니다. 기기에서 앱을 검색하고 앱 전환 도구를 사용하여 앱 간에 이동할 수 있으므로 설치된 기기의 일부처럼 느껴집니다.

하지만 설치 가능한 웹 앱과 플랫폼별 앱을 모두 제공하면 사용자에게 혼란을 줄 수 있습니다. 플랫폼별 앱이 일부 사용자에게는 가장 적합한 선택일 수 있지만 다른 사용자에게는 몇 가지 단점이 있을 수 있습니다.

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

앱을 자주 사용하지 않을 것 같거나 몇 메가바이트의 저장용량이나 데이터를 소비할 가치가 없다고 생각하는 사용자 등 플랫폼별 앱을 다운로드하지 않는 사용자의 비율이 큰 경우도 있습니다. 애널리틱스 설정을 사용하여 '모바일 웹 전용' 사용자의 비율을 추적하는 등 여러 가지 방법으로 이 세그먼트의 크기를 확인할 수 있습니다.

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

브라우저를 통한 PWA 설치 유도

고품질 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도 스토어에 업로드할 수 있습니다. (이 내용은 이 도움말의 뒷부분에서 설명합니다.) 일부 회사는 이러한 환경을 'lite' 환경으로 제공하고, 다른 회사는 주력 (핵심) 앱에도 이 접근 방식을 사용했습니다.

경량 앱 홍보

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

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

인도 최대 숙박 시설 회사 중 하나인 Oyo는 앱의 Lite 버전을 빌드하고 TWA를 사용하여 Play 스토어에 제공했습니다. 이 글을 작성할 당시 Oyo 앱은 Android 앱의 7% 에 불과한 850KB였습니다. 설치한 후에는 Android 앱과 구분할 수 없습니다.

OYO Lite 작동 모습

Oyo는 매장에 플래그십 버전과 'lite' 버전 앱을 모두 유지하여 사용자에게 선택권을 제공했습니다.

가벼운 웹 환경 제공

직관적으로 저사양 기기의 사용자는 고급형 휴대전화의 사용자보다 가벼운 버전의 앱을 다운로드할 가능성이 더 높습니다. 따라서 사용자의 기기를 식별할 수 있다면 더 무거운 플랫폼별 앱 버전보다 가벼운 앱 설치 배너를 우선시할 수 있습니다.

웹에서는 기기 신호를 수집하고 이를 기기 카테고리 (예: '높음', '중간', '낮음')에 대략적으로 매핑할 수 있습니다. 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를 추가하도록 메시지를 표시하는 등 사용자가 앱을 설치할 수 있는 옵션이 더 많습니다.