프로그레시브 웹 앱(PWA)을 설치하면 사용자가 더 쉽게 찾고 사용할 수 있습니다. 브라우저 프로모션을 사용해도 PWA를 설치할 수 있다는 사실을 모르는 사용자도 있으므로 PWA 설치를 홍보하고 사용 설정하는 데 사용할 수 있는 인앱 환경을 제공하는 것이 좋습니다.
이 도움말에서는 PWA 설치를 홍보하는 다양한 방법을 소개합니다. 사용하는 패턴에 관계없이 패턴은 모두 자체 인앱 설치 환경을 제공하는 방법에 설명된 대로 설치 흐름을 트리거하는 동일한 코드로 이어집니다.
권장사항
사이트에서 어떤 프로모션 패턴을 사용하든 적용되는 몇 가지 권장사항이 있습니다.
- 프로모션을 사용자 여정의 흐름 외부에 유지합니다. 예를 들어 PWA 로그인 페이지에서 로그인 양식 및 제출 버튼 아래에 클릭 유도 문구를 넣습니다. 프로모션 패턴을 중단 없이 사용하면 PWA의 사용성이 저하되고 참여도 측정항목에 부정적인 영향을 미칩니다.
- 프로모션을 닫거나 거부할 수 있는 기능을 포함합니다. 사용자가 이 작업을 수행하면 사용자의 환경설정을 기억하고 사용자가 콘텐츠와의 관계를 변경한 경우(예: 로그인 또는 구매 완료)에만 메시지를 다시 표시합니다.
- PWA의 여러 부분에서 기법을 결합하되, 설치 프로모션으로 사용자에게 부담을 주거나 짜증을 내지 않도록 주의하세요.
beforeinstallprompt이벤트가 실행된 후에만 프로모션을 표시합니다.
자동 브라우저 프로모션
특정 기준이 충족되면 대부분의 브라우저는 사용자에게 프로그레시브 웹 앱을 설치할 수 있음을 자동으로 표시합니다. 예를 들어 데스크톱 Chrome에서는 omnibox에 설치 버튼이 표시됩니다.
Android용 Chrome에서는 사용자에게 미니 정보 표시줄을 표시하지만 beforeinstallprompt 이벤트에서 preventDefault()를 호출하여 이를 방지할 수 있습니다.
preventDefault()를 호출하지 않으면 사용자가 사이트를 처음 방문하고 Android의 설치 가능 기준을 충족할 때 배너가 표시되며, 약 90일 후에 다시 표시됩니다.
사용자 인터페이스 프로모션 패턴
사용자 인터페이스 프로모션 패턴은 거의 모든 종류의 PWA에 사용할 수 있으며 사이트 탐색 및 배너와 같은 위치에 표시됩니다. 다른 유형의 프로모션 패턴과 마찬가지로 사용자 여정의 중단을 최소화하려면 사용자의 컨텍스트를 인식하는 것이 중요합니다.
프로모션 UI를 트리거할 시기를 신중하게 고려하는 사이트는 설치 수를 늘리고 설치에 관심이 없는 사용자의 여정을 방해하지 않습니다.
간단한 설치 버튼
가장 간단한 UX는 웹 콘텐츠의 적절한 위치에 '설치' 또는 '앱 가져오기' 버튼을 포함하는 것입니다. 버튼이 다른 중요한 기능을 차단하지 않고 애플리케이션을 통한 사용자 여정의 방해가 되지 않도록 합니다.
고정 헤더
사이트 헤더에 표시되는 설치 버튼입니다. 다른 헤더 콘텐츠에는 로고나 햄버거 메뉴와 같은 사이트 브랜딩이 포함된 경우가 많습니다. 헤더는 사이트의 기능과 사용자 요구사항에 따라 position:fixed일 수도 있고 아닐 수도 있습니다.
적절하게 사용하면 사이트 헤더에서 PWA 설치를 홍보하면 가장 충성도 높은 고객이 더 쉽게 환경으로 돌아올 수 있습니다. PWA 헤더의 픽셀은 소중하므로 설치 클릭 유도 문구의 크기가 적절하고, 다른 가능한 헤더 콘텐츠보다 중요하며, 방해가 되지 않아야 합니다.
다음 사항을 확인하세요.
beforeinstallprompt이 실행되지 않았다면 설치 버튼을 표시하지 않습니다.- 사용자에게 설치된 사용 사례의 가치를 평가합니다. 프로모션 혜택을 누릴 가능성이 높은 사용자에게만 프로모션을 표시하도록 선택적 타겟팅을 고려해 보세요.
- 귀중한 헤더 공간을 효율적으로 사용합니다. 헤더에서 사용자에게 제공하는 데 도움이 되는 다른 사항을 고려하고 설치 프로모션의 우선순위를 다른 옵션과 비교하세요.
탐색 메뉴
메뉴를 여는 사용자는 사용 환경에 관한 참여를 나타내는 것이므로 탐색 메뉴를 사용하면 앱 설치를 효과적으로 홍보할 수 있습니다.
다음 사항을 확인하세요.
- 중요한 탐색 콘텐츠가 중단되지 않도록 합니다. PWA 설치 프로모션을 다른 메뉴 항목 아래에 배치합니다.
- 사용자가 PWA를 설치하면 어떤 이점이 있는지 관련성 높은 간단한 피치를 제공합니다.
방문 페이지
방문 페이지의 목적은 제품과 서비스를 홍보하는 것이므로 PWA 설치의 이점을 홍보할 때 크게 강조하는 것이 적절합니다.
먼저 사이트의 가치 제안을 설명한 다음 방문자에게 설치 시 얻을 수 있는 혜택을 알려주세요.
다음 사항을 확인하세요.
- 방문자에게 가장 중요한 기능을 어필하고 방문 페이지로 유도했을 수 있는 키워드를 강조하세요.
- 가치 제안을 명확히 한 후에만 눈에 띄는 설치 프로모션과 클릭 유도 문구를 사용하세요. 결국 이는 방문 페이지입니다.
- 사용자가 대부분의 시간을 보내는 앱 부분에 설치 프로모션을 추가해 보세요.
배너 설치
대부분의 사용자는 모바일 환경에서 설치 배너를 접했을 것이며 배너에서 제공하는 상호작용에 익숙합니다. 배너는 사용자를 방해할 수 있으므로 주의해서 사용해야 합니다.
다음 사항을 확인하세요.
- 사용자가 사이트에 관심을 보일 때까지 기다린 후 배너를 표시합니다. 사용자가 배너를 닫은 경우 사용자가 이커머스 사이트에서 구매하거나 계정에 가입하는 등 콘텐츠에 대한 참여도가 더 높은 전환 이벤트를 트리거하지 않는 한 다시 표시하지 마세요.
- 배너에 PWA를 설치하는 이점에 대해 간단히 설명합니다. 예를 들어 PWA가 사용자 기기에서 저장공간을 거의 사용하지 않거나 스토어 리디렉션 없이 즉시 설치된다고 언급하여 PWA 설치를 iOS/Android 앱 설치와 구분할 수 있습니다.
임시 UI
Snackbar 디자인 패턴과 같은 임시 UI는 사용자에게 알리고 사용자가 액션(이 경우 앱 설치)을 쉽게 완료할 수 있도록 합니다. 이러한 종류의 UI 패턴은 적절하게 사용하면 사용자 흐름을 중단하지 않으며 일반적으로 사용자가 무시하면 자동으로 닫힙니다.
앱과 몇 차례의 상호작용 후에 스낵바를 표시합니다. 스낵바가 페이지 로드 시 표시되거나 맥락과 관계없이 표시되면 쉽게 누락되거나 인지 과부하로 이어질 수 있습니다. 이 경우 사용자는 표시되는 모든 항목을 닫습니다. 사이트의 신규 사용자가 PWA를 설치할 준비가 되지 않았을 수 있습니다. 따라서 이 패턴을 사용하기 전에 사용자로부터 강한 관심 신호(예: 재방문, 사용자 로그인 또는 유사한 전환 이벤트)를 받을 때까지 기다리는 것이 가장 좋습니다.
다음 사항을 확인하세요.
- 사용자가 방해받지 않고 충분히 보고 반응할 수 있도록 4~7초 동안 스낵바를 표시합니다.
- 배너와 같은 다른 임시 UI 위에 표시하지 마세요.
- 이 패턴(예: 반복 방문, 사용자 로그인, 유사한 전환 이벤트)을 사용하기 전에 사용자로부터 강력한 관심분야 신호가 확보될 때까지 기다립니다.
전환 후
사용자 전환 이벤트 직후(예: 전자상거래 사이트에서 구매 후)는 PWA 설치를 홍보하기에 좋은 기회입니다. 사용자가 콘텐츠에 확실히 참여하고 있으며 전환은 사용자가 서비스를 다시 이용할 것이라는 신호를 보내는 경우가 많습니다.
예약 또는 결제 여정
예약 또는 결제 흐름 후와 같은 순차적 여정 도중이나 이후에 설치 프로모션을 표시합니다. 사용자가 여정을 완료한 후에 프로모션을 표시하는 경우 여정이 완료되었으므로 프로모션을 눈에 더 잘 띄게 표시할 수 있습니다.
다음 사항을 확인하세요.
- 관련성 높은 클릭 유도 문구를 포함합니다. 앱을 설치하면 어떤 사용자가 어떤 이점을 얻을 수 있나요? 고객이 현재 진행 중인 여정과 어떤 관련이 있나요?
- 브랜드에서 설치한 앱 사용자를 위한 고유한 혜택을 제공하는 경우 이를 언급합니다.
- 여정의 다음 단계에 방해가 되는 프로모션은 피해야 합니다. 그렇지 않으면 여정 완료율에 부정적인 영향을 미칠 수 있습니다. 위의 전자상거래 예시에서 결제라는 주요 클릭 유도 문구가 앱 설치 프로모션 위에 있는 것을 볼 수 있습니다.
가입, 로그인 또는 로그아웃 절차
이 프로모션은 프로모션 카드가 더 눈에 띄게 표시될 수 있는 여정 프로모션 패턴의 특수한 사례입니다.
이러한 페이지는 일반적으로 PWA의 가치 제안이 이미 확립된 참여도 높은 사용자만 조회합니다. 또한 이러한 페이지에 배치할 다른 유용한 콘텐츠가 많지 않은 경우가 많습니다. 따라서 방해가 되지 않는 한 클릭 유도 문구를 더 크게 표시해도 방해가 되지 않습니다.
다음 사항을 확인하세요.
- 가입 양식 내에서 사용자 경험을 방해하지 않도록 합니다. 여러 단계로 이루어진 프로세스인 경우 사용자가 여정을 완료할 때까지 기다리는 것이 좋습니다.
- 가입한 사용자와 가장 관련성이 높은 기능을 홍보합니다.
- 앱의 로그인된 영역에 설치 프로모션을 추가해 보세요.
인라인 프로모션 패턴
인라인 프로모션 기법은 프로모션을 사이트 콘텐츠와 엮습니다. 이는 사용자 인터페이스의 프로모션보다 미묘한 경우가 많으며, 그에 따른 장단점이 있습니다. 프로모션은 관심 있는 사용자가 알아챌 수 있을 만큼 눈에 띄어야 하며, 사용자 환경의 품질을 떨어뜨리지 않도록 해야 합니다.
인피드 광고
피드 내 설치 프로모션은 PWA의 뉴스 기사 또는 기타 정보 카드 목록 사이에 표시됩니다.
사용자에게 즐기고 있는 콘텐츠에 더 편리하게 액세스하는 방법을 보여주는 것이 목표입니다. 사용자에게 유용한 기능을 홍보하는 데 중점을 둡니다.
다음 사항을 확인하세요.
- 사용자에게 불편을 주지 않도록 프로모션 빈도를 제한합니다.
- 사용자에게 프로모션을 닫을 수 있는 기능을 제공합니다.
- 사용자가 닫을 수 있는 옵션을 기억합니다.