프로그레시브 웹 앱이 비즈니스 성공을 이끄는 방법

세바스티앙 푸로
세바스티앙 푸로

프로그레시브 웹 앱은 웹사이트를 현대화하고 사용자의 새로운 기대에 적응하려는 많은 기업의 로드맵에 포함되어 있습니다. 많은 기술과 마찬가지로 PWA에서는 고객이 원하는 것이 무엇인지, 비즈니스를 얼마나 성장시킬 수 있을지, 기술적으로 실현 가능한 것이 무엇인지 등에 관한 질문을 던집니다.

이해관계자를 확인합니다.
이해관계자를 파악합니다.

디지털 전략을 수립하기 위해서는 여러 이해관계자가 관여하는 경우가 많습니다. 제품 관리자와 최고 마케팅 책임자는 각 기능이 비즈니스에 미치는 영향의 공동 소유자이고, 최고 기술 책임자는 기술의 타당성과 신뢰성을 평가하고, 사용자 경험 연구원은 기능이 실제 고객 문제에 답변하는지 확인합니다.

이 문서에서는 이러한 세 가지 질문에 답하고 PWA 프로젝트를 형성하는 데 도움을 주고자 합니다. 고객의 니즈에서 시작하여 이를 PWA 기능으로 변환하고 각각이 비즈니스 영향을 측정하는 데 중점을 둡니다.

PWA로 고객 니즈 해결

Google에서 제품을 만들 때 따라야 할 원칙 중 하나는 '사용자에게 집중하면 나머지는 저절로 따라온다'는 것입니다. 사용자 우선을 고려하세요. 고객의 요구사항은 무엇이며 PWA는 이를 어떻게 제공하나요?

고객의 니즈를 파악합니다.
고객의 니즈를 파악합니다.

사용자 연구를 수행하면서 다음과 같은 흥미로운 패턴을 발견합니다.

관찰 결과에 따르면 고객은 빠르고, 설치가 가능하며, 안정적이고, 매력적인 (F.I.R.E.) 환경을 선호한다는 것을 알게 되었습니다.

최신 웹 기능을 활용하는 PWA

PWA는 빠르고 설치 가능하며 안정적이고 몰입감 있는 사이트를 만들어 고객의 요구사항을 충족하는 것을 목표로 하는 일련의 권장사항 및 최신 웹 API를 제공합니다.

예를 들어 서비스 워커를 사용하여 리소스를 캐시하고 예측적 미리 가져오기를 수행하면 사이트 속도와 안정성을 높일 수 있습니다. 사이트를 설치 가능하게 만들면 고객이 홈 화면이나 앱 런처에서 바로 사이트에 쉽게 액세스할 수 있습니다. 또한 웹 푸시 알림 등의 API를 사용하면 맞춤설정된 콘텐츠로 사용자의 재참여를 쉽게 유도하여 충성도를 높일 수 있습니다.

웹 기능으로 사용자 환경을 개선합니다.
웹 기능으로 사용자 환경을 개선합니다.

비즈니스에 미치는 영향 파악

비즈니스 성공의 정의는 활동에 따라 달라질 수 있습니다.

  • 서비스에서 더 많은 시간을 보내는 사용자
  • 리드의 이탈률 감소
  • 전환율 개선
  • 재방문자 증가

대부분의 PWA 프로젝트는 더 높은 모바일 전환율로 이어집니다. 다양한 PWA 우수사례에서 자세히 알아볼 수 있습니다. 목표에 따라 비즈니스에 더 적합한 PWA 측면에 우선순위를 둘 수 있지만 괜찮습니다. PWA 기능은 선별하여 별도로 실행할 수 있습니다.

훌륭한 F.I.R.E 기능 각각이 비즈니스에 미치는 영향을 측정해 보겠습니다.

빠른 웹사이트가 비즈니스에 미치는 영향

최근 Deloitte Digital의 연구에 따르면 페이지 속도가 비즈니스 측정항목에 상당한 영향을 미칩니다.

사이트의 속도를 최적화하여 모든 사용자의 중요한 사용자 여정을 개선할 수 있는 방법은 많습니다. 어디서부터 시작해야 할지 모르겠다면 Fast 섹션을 살펴보고 Lighthouse를 사용하여 수정해야 할 가장 중요한 사항의 우선순위를 정하세요.

속도 최적화 작업을 할 때는 진행 상황을 모니터링하는 적절한 도구와 측정항목을 사용하여 사이트 속도를 자주 측정해야 합니다. 예를 들어 Lighthouse로 측정항목을 측정하고 '좋음' 코어 웹 바이탈 점수와 같이 명확한 타겟을 수정하고 성능 예산을 빌드 프로세스에 통합하세요. 일일 측정치와 '속도의 가치' 방법론을 사용하면 속도 증가의 영향을 분리하고 작업으로 창출한 추가 수익을 계산할 수 있습니다.

속도의 가치를 측정하고 전환과 상관관계를 찾으세요.
속도의 가치를 측정하고 전환과 상관관계를 찾으세요.

Ebay에서는 2019년 회사의 속도 향상 목표를 달성했습니다. 성능 예산, 중요 경로 최적화, 예측적 미리 가져오기와 같은 기법을 사용했습니다. 그 결과 검색 페이지 로드 시간이 100밀리초 개선될 때마다 카드 추가 횟수가 0.5%씩 증가하는 것으로 나타났습니다.

로드 시간이 100ms 개선되어 eBay의 장바구니에 추가 수는 0.5% 증가했습니다.
로드 시간이 100밀리초 개선되어 eBay의 장바구니에 추가 수가 0.5% 증가했습니다.

설치 가능한 웹사이트가 비즈니스에 미치는 영향

사용자가 PWA를 설치하기를 원하는 이유는 무엇인가요? 사이트 재방문을 간편하게 하기 위해서입니다. Android 앱 설치 시 최소 3단계(Play 스토어로 리디렉션, 앱 다운로드, 앱 실행)가 추가되는 경우 사용자가 현재 전환 유입경로에서 벗어나지 않고도 클릭 한 번으로 PWA 설치가 원활하게 진행됩니다.

설치 환경이 원활해야 합니다.
설치 환경이 원활해야 합니다.

앱이 설치되면 사용자는 홈 화면의 아이콘을 사용하여 클릭 한 번으로 앱을 실행하거나, 앱 간에 전환할 때 앱 트레이에서 확인하거나 앱 검색결과를 통해 찾을 수 있습니다. 이를 동적 디스커버-시작-스위치라고 하며 PWA를 설치 가능하게 만드는 것이 액세스 잠금 해제의 핵심입니다.

PWA는 기기의 익숙한 검색 및 실행 노출 영역에서 액세스할 수 있을 뿐만 아니라 플랫폼별 앱과 정확히 마찬가지로 브라우저와는 별개인 독립형 환경에서 실행됩니다. 또한 앱 전환기 및 설정과 같은 OS 수준 기기 서비스의 이점도 있습니다.

PWA를 설치하는 사용자는 참여도가 가장 높은 사용자일 가능성이 높으며, 재방문자 수, 사이트에 머문 시간 증가, 전환율 증가 등 일반 방문자보다 참여도 측정항목이 더 우수하며, 휴대기기의 플랫폼별 앱 사용자와 동등한 경우가 많습니다.

PWA를 설치할 수 있도록 하려면 기본 기준을 충족해야 합니다. 이러한 기준을 충족하면 iOS를 포함한 데스크톱 및 모바일의 사용자 환경에서 설치를 홍보할 수 있습니다.

PWA는 어디에나 설치할 수 있습니다.
PWA는 어디에나 설치할 수 있습니다.

PWA 설치를 장려하기 시작했다면 PWA를 설치하는 사용자 수와 사용자가 PWA를 사용하는 방식을 측정해야 합니다.

사이트를 설치하는 사용자 수를 최대화하려면 다양한 프로모션 메시지 ('1초 내에 설치' 또는 '주문에 따라갈 수 있는 바로가기 추가')와 여러 게재위치 (헤더 배너, 인피드)를 테스트한 후 설치 유입경로의 다양한 단계 (방문한 두 번째 페이지 또는 예약 후)에서 제안해 보는 것이 좋습니다.

사용자가 이탈하는 위치와 유지율을 개선하는 방법을 이해하기 위해 설치 유입경로를 4가지 방법으로 측정할 수 있습니다.

  • 설치할 수 있는 사용자 수
  • 설치 메시지를 클릭한 사용자 수
  • 설치 메시지를 수락하거나 거부한 사용자 수
  • 성공적으로 설치한 사용자 수

모든 사용자에게 PWA 설치를 승격하거나 소규모 사용자 그룹을 대상으로 실험하여 더 신중한 접근 방식을 취할 수 있습니다.

며칠 또는 몇 주면 비즈니스에 미치는 영향을 측정하기에 충분한 데이터를 확보할 수 있습니다. 설치된 바로가기를 통해 방문하는 사용자의 행동은 어떤가요? 참여도가 더 높은가요? 전환율이 더 높은가요?

PWA를 설치한 사용자를 분류하려면 appinstalled 이벤트를 추적하고 자바스크립트를 사용하여 사용자가 독립형 모드인지 확인합니다. 이는 설치된 PWA의 사용을 나타냅니다. 그런 다음 이 값을 애널리틱스 추적에 사용할 변수 또는 측정기준으로 사용하세요.

설치의 가치를 측정하세요.
설치 가치를 측정합니다.

Weekendesk의 우수사례는 흥미롭습니다. 사용자가 PWA를 설치할 가능성을 높이기 위해 방문한 두 번째 페이지에서 설치를 장려합니다. 홈 화면에서 PWA를 실행한 사용자는 PWA를 통해 숙박을 예약할 가능성이 2배 이상 높았습니다.

앱을 설치한 사용자는 전환율이 2.5배 높았습니다.
앱을 설치한 사용자는 전환율이 2.5배 증가했습니다.

설치는 사용자의 사이트 재방문을 유도하고 고객 충성도를 높이는 데 효과적인 방법입니다. 프리미엄 사용자를 위한 환경 맞춤설정도 고려해 볼 수 있습니다.

플랫폼별 앱이 있더라도 사용자는 앱을 설치하고 싶지 않거나 설치할 필요가 없다고 느낄 수 있습니다. 이러한 일부 참여형 사용자는 PWA가 더 가볍고 불편함 없이 설치할 수 있기 때문에 PWA가 적합하다고 느낄 수 있습니다.

PWA는 일부 참여도가 높은 사용자에게 도달할 수 있습니다.
PWA는 일부 참여도 높은 사용자에게 도달할 수 있습니다.

신뢰할 수 있는 웹사이트가 비즈니스에 미치는 영향

사용자가 오프라인 상태일 때 제공되는 Chrome 공룡 게임은 월 2억 7천만 회 이상 플레이됩니다. 이 놀라운 수치는 특히 인도, 브라질, 멕시코, 인도네시아와 같이 네트워크가 불안정하거나 모바일 데이터가 비싼 모바일 데이터를 사용하는 시장에서 PWA를 사용하는 데 있어 상당한 기회임을 보여줍니다.

앱 스토어에서 설치된 앱이 실행되면 사용자는 인터넷에 연결되어 있는지와 관계없이 앱이 열리기를 기대합니다. 프로그레시브 웹 앱도 다르지 않습니다.

최소한 네트워크 연결 없이는 앱을 사용할 수 없다고 사용자에게 알리는 간단한 오프라인 페이지가 제공되어야 합니다. 그런 다음 오프라인에서 사용할 수 있는 기능을 제공하여 환경을 한 단계 더 발전시켜 보세요. 예를 들어 티켓이나 탑승권, 오프라인 위시리스트, 콜센터 연락처 정보, 사용자가 최근에 본 기사 또는 레시피 등에 대한 액세스를 제공할 수 있습니다.

오프라인 상태에서도 유용한 정보를 얻으세요.
오프라인 상태에서도 유용한 정보를 얻으세요.

신뢰할 수 있는 사용자 환경을 구현했다면 이를 측정해야 할 수 있습니다. 얼마나 많은 사용자가 오프라인으로 전환되는지, 어느 지역에서 얼마나 많은 사용자가 네트워크에 다시 연결되었을 때 웹사이트에 머무르는지, 애널리틱스를 통해 사용자가 일반적으로 오프라인 및 온라인으로 이동하는 시점을 알 수 있습니다. 이렇게 하면 네트워크가 다시 돌아온 후 얼마나 많은 사용자가 내 웹사이트를 계속 탐색했는지 알 수 있습니다.

Trivago는 인터넷에 다시 돌아와 탐색을 계속하는 사용자가 67% 증가했습니다.
Trivago는 온라인으로 다시 돌아와 탐색을 계속하는 사용자가 67% 증가했습니다.

Trivago 우수사례는 이것이 비즈니스 목표에 어떤 영향을 미칠 수 있는지 보여줍니다. 오프라인 기간 동안 세션이 중단된 사용자 (사용자 중 약 3%)의 경우 온라인으로 재방문한 사용자 중 67%가 계속 사이트를 탐색했습니다.

참여를 유도하는 웹사이트가 비즈니스에 미치는 영향

웹 푸시 알림을 사용하면 사용자는 필요하거나 관심 있는 사이트에서 시기적절하게 업데이트를 수신하도록 선택할 수 있으며, 개발자는 관련성 높은 맞춤설정된 콘텐츠를 통해 사용자의 재참여를 효과적으로 유도할 수 있습니다.

하지만 주의해야 합니다. 사용자가 처음 도착했을 때 혜택을 노출하지 않고 웹 알림에 가입해 달라고 요청하면 스팸으로 인식되고 환경에 부정적인 영향을 미칠 수 있습니다. 알림을 요청할 때 권장사항을 따르고 열차 지연, 가격 추적, 재고가 없는 제품 등과 같은 관련 사용을 통해 동의를 얻어야 합니다.

기술적으로 보면 웹의 푸시 알림은 서비스 워커 덕분에 백그라운드에서 실행되며 캠페인 관리를 위해 빌드된 시스템 (예: Firebase)에서 전송하는 경우가 많습니다. 이 기능은 모바일 (Android) 및 데스크톱 사용자에게 엄청난 비즈니스 가치를 제공합니다. 재방문이 증가하여 판매와 전환이 증가합니다.

푸시 캠페인의 효과를 측정하려면 다음을 포함한 전체 유입경로를 측정해야 합니다.

  • 푸시 알림을 받을 수 있는 사용자 수
  • 맞춤 알림 UI 메시지를 클릭한 사용자 수
  • 푸시 알림 권한을 부여한 사용자 수
  • 푸시 알림을 수신한 사용자 수
  • 알림에 참여한 사용자 수
  • 알림을 통해 유입된 사용자의 전환 및 참여
웹 푸시 알림의 가치 측정
웹 푸시 알림의 가치를 측정합니다.

웹 푸시 알림에 관한 훌륭한 우수사례가 많습니다. Carrefour는 장바구니에서 이탈한 사용자의 재참여를 유도하여 전환율을 4.5를 높였습니다.

PWA의 P: 점진적 출시, 기능별 기능

PWA는 웹의 광범위한 도달 범위에 사용자가 Android, iOS 또는 데스크톱 앱에서 기대하는 모든 사용자 친화적 기능을 결합한 최신 웹사이트입니다. 비즈니스 특성 및 우선순위에 따라 독립적으로 구현할 수 있는 일련의 권장사항과 최신 웹 API를 사용합니다.

PWA를 점진적으로 실행합니다.
PWA를 점진적으로 실행합니다.

웹사이트 현대화를 가속화하고 실제 PWA로 만들려면 기능별로 민첩하게 출시하는 것이 좋습니다. 먼저 사용자와 함께 어떤 기능이 가장 큰 가치를 제공하는지 조사한 다음 디자이너 및 개발자와 함께 이러한 기능을 제공하세요. 그런 다음 마지막으로 PWA로 창출된 추가 수익을 정확하게 측정하는 것을 잊지 마세요.