프로그레시브 웹 앱(PWA): 상위 3개 사례 연구
게시 됨: 2019-06-19목차
이제 막 스타트업을 시작했고 웹사이트가 멋지게 보이지만 비즈니스 전략에 중요할 수 있는 모바일 앱을 개발할 예산이 충분하지 않다고 상상해 보십시오. 그러나 매우 비싸고 약간 위험합니다. 또한 기본 앱을 구축하는 데 많은 시간을 소비해야 하지만 아무도 귀하의 브랜드를 잘 모릅니다. 사람들이 앱 스토어나 Google Play 스토어에서 다운로드할 만큼 앱을 신뢰할 수 있습니까?
또한 고객/독자는 웹사이트 폐쇄, Google Play 또는 App Store 열기와 같은 몇 가지 추가 단계를 수행한 다음 앱이 설치될 때까지 참을성 있게 기다릴 만큼 충분히 결정됩니까?
오늘날 사람들은 훨씬 더 까다롭다는 것을 기억하십시오. 다시 말해서, 그들은 또한 매우 조급 합니다. 그들은 빠른 해결책 을 기대합니다. 외부 스토어에서 이러한 앱을 다운로드하는 것은 매우 빠른 작업처럼 들리지 않으며 모든 사용자가 기본 앱에 액세스할 수 있는 것은 아닙니다. 사용자 경험의 관점에서 고객이 자신의(및 귀하의) 목표를 달성하기 전에 많은 장애물이 있습니다.
그리고 또 다른 사실은 클라이언트가 앱을 다운로드할 수 있는 충분한 내부 저장 공간을 가지고 있다고 확신합니까?
따라서 모바일 앱(IOS 및 Android용)을 구축하는 데 많은 돈을 투자하게 되며 사람들이 실제로 사용할 것인지 확신할 수 없습니다. 아... 그리고 광고와 판촉에 지출해야 할 마케팅 예산의 이 엄청난 양을 잊지 마세요!
그러나 잠깐, 당황하지 마십시오. 다행히도 당신은 2019년에 살고 있습니다. Progressive Web Apps는 모바일 앱을 만들 때 일반적인 솔루션이 되고 있습니다!
프로그레시브 웹 앱 에 대해 들어본 적이 있습니까? 그렇지 않다면 지금이 최신 기술 트렌드를 따라잡을 수 있는 기회입니다. 그렇지 않으면 뒤처지게 될 것입니다! 우리는 이미 그것들이 무엇이며 왜 이 옵션을 선택할 가치가 있는지 설명하는 포괄적인 기사를 작성했습니다.
오늘 우리는 여러분에게 영감을 주고 이미 Progressive Web Apps를 구축한 브랜드의 성공 사례를 소개하고자 합니다.
트리바고
Trivago는 33개 언어로 제공되는 호텔 검색 엔진으로 좋은 평판을 얻었습니다. 호텔 정보, 사진, 평가, 리뷰, 필터 및 기타 기능을 기반으로 Trivago는 사용자가 최상의 제안을 찾도록 도와줍니다.
문제
문제는 Trivago가 최근 몇 년 동안 모바일 사용자가 크게 증가한 것을 확인했다는 것입니다. 이 브랜드는 모바일 경험이 고객에게 점점 더 중요해지고 있음을 깨달았습니다.
그러나 모바일 솔루션을 만드는 것은 쉬운 일이 아니며 이는 어려운 선택을 해야 함을 의미합니다. 특히, 회사는 사람들이 모바일 앱을 다운로드하는 비용을 수락할지 여부를 확신할 수 없었습니다. 단지 그것이 그들의 기대에 맞는지 확인하기 위해서였습니다. 그들은 또한 많은 사람들 이 양질의 모바일 연결에 문제가 있음을 발견했습니다. 이러한 이유로 Trivago는 네이티브 앱과 다른 기회를 찾고 있었습니다.
추천 자료: 프로그레시브 웹 앱 vs 네이티브 앱: 어느 것이 더 적합합니까?
해결책
마침내 그들은 그들의 요구에 완벽해 보이는 기능을 가진 Progressive Web Apps 를 발견했습니다. 당시 그들은 푸시 알림 , 오프라인 모드 , 홈 화면 바로가기 를 제공하는 솔루션을 찾고 있었습니다. 그리고 Trivago의 가장 중요한 요소 는 표준 모바일 브라우저를 통한 이 앱 의 접근성 이었습니다.
이 PWA 솔루션은 대규모 소프트웨어 개발자 팀을 포함하지 않고도 앱을 구축하는 데 도움이 되었습니다. 푸시 알림, 오프라인 액세스 및 홈 화면에 앱을 추가할 수 있는 가능성 과 같은 초기에 가장 중요한 기능에 중점을 두었습니다. 물론 처음에는 어려움도 있었다. 그들은 모바일 모양을 디자인하는 것이 표준 웹사이트에서 디자인하는 것과 훨씬 다르기 때문에 가장 큰 도전 중 하나는 직관적인 사용자 인터페이스를 만드는 것이라고 말했습니다. PWA의 디자이너인 Laura Oades에 따르면:
"모바일에서는 플랫폼에 구애받지 않고 혼란스럽지 않은 UI를 제작해야 하는 추가적인 문제가 있습니다." 그리고 "PWA는 디자인에서 대체로 미개척 영역이며, 창의적인 문제 해결사들이 새로운 표준을 정의하기 위해 자신을 확장할 수 있는 진정한 기회입니다."
결과
- Trivago 모바일 웹사이트는 55개국에서 33개 언어로 제공됩니다.
- 500,000 명 이상의 사람들이 홈 화면에 Trivago 바로가기를 추가했고 참여도가 150% 증가했습니다.
- 이전 모바일 웹사이트와 비교할 때 Progressive Web App은 훨씬 더 많은 사용자를 유치했습니다. PWA 이전에는 0.8%의 반복 방문만이 기록되었지만 이제는 이 수치가 평균 2%로 증가했습니다.
- 푸시 알림은 전환율을 높이는 데 도움이 된 완벽한 커뮤니케이션 수단으로 밝혀졌습니다. 호텔 제안에 대한 PWA의 클릭 수는 97% 증가했습니다.
추천 자료: 여행 업계의 7가지 최고의 프로그레시브 웹 앱
핀터레스트
Pinterest 는 사용자가 시각적으로 공유하고 이미지 또는 비디오를 자신 또는 다른 사람의 보드(즉, 일반적으로 공통된 '핀' 모음)에 게시( Pinterest 에서 '고정'이라고 함)하여 새로운 관심사를 발견할 수 있도록 하는 소셜 네트워크입니다. 테마) 및 다른 사용자가 고정한 항목 탐색
문제
인증되지 않은 모바일 웹 사용자의 사용을 분석한 후, 느리고 오래된 웹 경험이 사용자의 1%만 가입, 로그인 또는 기본 앱 설치로 전환한다는 것을 깨달았습니다. 이 대화 속도를 향상시킬 수 있는 기회는 엄청나서 PWA에 대한 투자로 이어졌습니다.
Pinterest PWA는 국제적 성장에 중점을 두었기 때문에 시작되었으며, 이는 모바일 웹으로 이어졌습니다.
해결책
3개월 이 넘는 기간 동안 Pinterest는 React, Redux 및 webpack을 사용하여 모바일 웹 경험을 재구축했습니다. 모바일 웹 재작성은 핵심 비즈니스 지표에서 몇 가지 긍정적인 개선을 가져왔습니다.
결과
모바일 웹 재작성으로 성능이 몇 가지 개선되었습니다.
소요 시간은 이전 모바일 웹 경험에 비해 40% 증가, 사용자 생성 광고 수익은 44% 증가 , 핵심 참여는 60% 증가 :
Pinterest의 오래된 모바일 웹 경험은 단일체였습니다. 여기에는 Pin 페이지가 얼마나 빨리 로드되고 상호작용할 수 있는지를 밀어붙이는 CPU를 많이 사용하는 JavaScript의 대규모 번들이 포함되었습니다.
그들의 새로운 모바일 웹 경험은 크게 개선되었습니다.
그들은 자바스크립트에서 수백 KB를 분해하고 줄여 코어 번들의 크기를 650KB에서 150KB로 줄였을 뿐만 아니라 핵심 성능 지표도 개선했습니다. 첫 번째 의미 있는 페인트는 4.2초에서 1.8초로, 대화형 시간은 23초에서 5.6초로 감소했습니다.
Pinterest는 iOS 및 Android 앱을 판매하지만 초기 다운로드 비용의 극히 일부(약 150KB 축소 및 압축)로 이러한 앱이 웹에서 수행하는 것과 동일한 핵심 홈 피드 경험을 제공할 수 있었습니다. 이는 Android의 경우 이 경험을 제공하는 데 필요한 9.6MB 및 iOS의 경우 56MB와 대조됩니다.
트위터
이미 알고 있듯이 트위터는 사람들이 트윗이라는 짧은 메시지를 게시하는 소셜 미디어 플랫폼입니다. 2006년 3월에 만들어졌습니다. 현재 3억 3,500만 명이 넘는 활성 사용자가 있습니다(2018년 7월).
문제
Twitter는 사용자가 모바일 웹사이트를 사용하는 동안 많은 장애물을 극복해야 한다는 사실을 알게 되었습니다.
그들 중 일부는 느린 모바일 네트워크 에 있었고 모바일 장치 저장소에 공간이 거의 없었습니다. Twitter는 기본 앱을 사용하지 않거나 다운로드할 공간이 부족한 사람들을 위한 매력적인 대안을 찾고 싶었습니다.
해결책
Twitter는 Progressive Web App 을 구축하기로 결정했습니다. 최신 웹사이트와 기본 기능이 가장 잘 조합된 것 같았기 때문입니다. 즉각적인 로딩, 낮은 데이터 소비, 큰 접근성은 Twitter가 찾고 있던 기능이었습니다.
결과
결과는 매우 인상적이었습니다. 수치가 그 자체로 말해줍니다.
- 이탈률 20% 감소,
- 세션당 페이지 수 65% 증가,
- 전송된 트윗이 75% 증가했습니다.
이전 성공 사례에서와 같이 " 홈 화면에 추가 " 프롬프트와 푸시 알림은 사용자의 참여를 크게 증가시켰 습니다. 이 사례 연구에서 보고된 바와 같이 Twitter는 250,000명의 순 사용자 가 홈 화면에서 하루 평균 4번 Twitter Lite를 실행하는 것으로 나타났습니다. 게다가 하루에 1 천만 개 이상의 푸시 알림 을 보내고 있습니다.
Twitter 의도에 따르면 PWA는 기본 Android 앱(23.5MB)보다 훨씬 적은 공간 (600KB)을 차지하므로 사람들이 내부 저장소에 저장 공간을 충분히 확보할 가능성이 더 큽니다.
또한 Twitter는 사용자가 모바일 데이터 사용량을 제어하는 데 도움이 되는 데이터 절약 모드 를 추가했습니다. 이 옵션 덕분에 완전히 로드할 이미지나 비디오를 선택할 수 있고 미리보기로 남을 수도 있습니다.
추천 자료: PWA SEO: 프로그레시브 웹 앱(PWA)이 SEO에 도움이 되나요? (통계 및 예제 포함)
웹사이트의 미래 수용
PWA는 모바일 애플리케이션의 미래입니다. 시간이 지나면서 네이티브 애플리케이션을 대체하여 네이티브 앱과 웹사이트의 완벽한 조합이 될 가능성이 있습니다. 새로운 기술을 채택하는 속도가 경쟁 우위인 세상에서 PWA를 조금 더 일찍 수용하는 기업은 수익을 크게 늘리고 경쟁 우위를 유지하면서 사용자 참여를 높일 수 있습니다.
과거에 Apple은 Progressive Web Applications에 대해 몇 가지 제한 사항이 있었지만 이제는 PWA를 점점 더 지원하고 있습니다. Magento 전자상거래 웹사이트를 위한 완벽한 PWA를 찾고 있는 온라인 판매자를 위해 SimiCart에서 귀하와 귀하의 상점을 위한 완전한 패키지를 제공합니다.