PWA 설치 승격 패턴

Penny McLachlan
Penny McLachlan

프로그레시브 웹 앱 (PWA)을 설치하면 사용자가 더 쉽게 찾아서 사용할 수 있습니다. 브라우저 프로모션을 사용하더라도 PWA를 설치할 수 있다는 사실을 모르는 사용자도 있으므로 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 앱과 구별할 수 있습니다.

임시 UI

Snackbar 디자인 패턴과 같은 임시 UI는 사용자에게 알림을 보내고 사용자가 작업(이 경우 앱 설치)을 쉽게 완료할 수 있도록 합니다. 이러한 종류의 UI 패턴을 올바르게 사용하면 사용자 플로우를 방해하지 않으며 일반적으로 사용자가 무시하면 자동으로 닫힙니다.

스낵바로 맞춤 설치 배너 사용
PWA를 설치할 수 있음을 나타내는 닫을 수 있는 스낵바입니다.

앱과 몇 차례의 상호작용 후 스낵바를 표시합니다. 페이지 로드 시 또는 컨텍스트와 상관없이 스낵바가 표시되면 쉽게 누락되거나 인지 과부하로 이어질 수 있습니다. 이 경우 사용자는 표시된 모든 항목을 닫을 수 있습니다. 사이트를 방문한 신규 사용자가 PWA를 설치할 준비가 되지 않았을 수 있습니다. 따라서 이 패턴(예: 재방문, 사용자 로그인, 유사한 전환 이벤트)을 사용하기 전에 사용자로부터 강력한 관심 신호가 확보될 때까지 기다리는 것이 가장 좋습니다.

스낵바로 맞춤 설치 배너 사용
PWA를 설치할 수 있음을 나타내는 닫을 수 있는 스낵바입니다.

다음 사항을 확인하세요.

  • 4~7초 동안 스낵바를 표시하여 사용자가 방해하지 않고 보고 반응할 수 있는 충분한 시간을 제공합니다.
  • 배너 등의 다른 임시 UI 위에 표시하지 마세요.
  • 이 패턴(예: 반복 방문, 사용자 로그인, 유사한 전환 이벤트)을 사용하기 전에 사용자로부터 강력한 관심분야 신호가 확보될 때까지 기다립니다.

전환 후

사용자 전환 이벤트 직후(예: 전자상거래 사이트에서 구매 후)는 PWA 설치를 홍보할 수 있는 좋은 기회입니다. 사용자는 콘텐츠에 명확하게 참여하고 있으며 전환은 사용자가 서비스에 다시 참여할 것이라는 신호인 경우가 많습니다.

전환 후 설치 프로모션
사용자가 구매를 완료한 후 발생하는 설치 프로모션입니다.

예약 또는 결제 여정

예약 또는 결제 흐름 후와 같은 순차적 여정 도중이나 이후에 설치 프로모션을 표시합니다. 사용자가 여정을 완료한 후에 프로모션을 표시하는 경우 여정이 완료되었으므로 프로모션을 눈에 더 잘 띄게 표시할 수 있습니다.

사용자 여정 후의 설치 프로모션
사용자 여정 이후 설치 프로모션입니다.

다음 사항을 확인하세요.

  • 관련성 높은 클릭 유도 문구를 포함합니다. 앱 설치로 이점을 얻을 수 있는 사용자는 누구이며 그 이유는 무엇인가요? 고객이 현재 진행 중인 여정과 어떤 관련이 있나요?
  • 브랜드에서 설치한 앱 사용자를 위한 고유한 혜택을 제공하는 경우 이를 언급합니다.
  • 프로모션이 여정의 다음 단계를 방해하지 않도록 하세요. 그러지 않으면 여정 완료율에 부정적인 영향을 미칠 수 있습니다. 위의 전자상거래 예에서 주요 클릭 유도 문구가 앱 설치 프로모션 위에 표시된다는 점에 주목하세요.

가입, 로그인 또는 로그아웃 절차

이 프로모션은 프로모션 카드가 더 눈에 띄게 표시되는 여정 프로모션 패턴의 특수한 사례입니다.

가입 페이지의 맞춤 설치 버튼
가입 페이지의 맞춤 설치 버튼

이러한 페이지는 일반적으로 PWA의 가치 제안이 확립된 참여 사용자만 볼 수 있습니다. 또한 이러한 페이지에는 배치할 만한 다른 유용한 콘텐츠가 많지 않은 경우가 많습니다. 따라서 방해를 받지 않는다면 클릭 유도 문구를 크게 만들어도 불편을 덜 수 있습니다.

다음 사항을 확인하세요.

  • 가입 양식 내에서 사용자 경험을 방해하지 않도록 합니다. 다단계 프로세스인 경우 사용자가 여정을 완료할 때까지 기다리는 것이 좋습니다.
  • 가입한 사용자에게 가장 관련성 높은 기능을 홍보합니다.
  • 앱의 로그인 영역 내에 설치 프로모션을 추가하는 것이 좋습니다.

인라인 프로모션 패턴

인라인 프로모션 기술은 프로모션을 사이트 콘텐츠와 함께 사용합니다. 이는 종종 사용자 인터페이스의 승격보다 미묘한 단점이 있습니다. 프로모션은 관심 있는 사용자가 알아챌 수 있을 만큼 눈에 띄어야 하며, 사용자 환경의 품질을 떨어뜨리면 안 됩니다.

인피드 광고

인피드 설치 프로모션은 PWA의 뉴스 기사 또는 기타 정보 카드 목록 사이에 표시됩니다.

콘텐츠 피드 내 설치 프로모션
콘텐츠 피드 내 설치 프로모션

목표는 사용자가 즐기는 콘텐츠에 더 편리하게 액세스하는 방법을 보여주는 것입니다. 사용자에게 유용한 기능을 홍보하는 데 집중하세요.

다음 사항을 확인하세요.

  • 사용자가 불편을 겪지 않도록 프로모션 빈도를 제한하세요.
  • 사용자가 프로모션을 닫을 수 있도록 합니다.
  • 사용자가 닫을 수 있는 옵션을 기억합니다.