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