2022년 PWA(프로그레시브 웹 앱)의 12가지 모범 사례

게시 됨: 2022-01-03

성능이 모든 온라인 벤처의 성공과 수익성에 필수적이라는 것은 비밀이 아닙니다. 결과적으로 산업 전반의 웹 사이트는 PWA(Progressive Web Apps)라는 새로운 표준을 활용하여 성능을 개선하고 있습니다.

Google에서 지원하는 프런트 엔드 기술은 기기나 네트워크 상태에 관계없이 높은 수준의 성능을 제공하는 것을 목표로 합니다. 그들은 안정적이고 빠르며 매력적인 기본 앱 품질로 PWA를 향상시켜 이를 달성합니다. 많은 관심을 받고 있지만 PWA의 개념은 대부분의 사람들에게 비교적 생소한 개념입니다.

Progressive Web App이 기존의 반응형 웹사이트와 어떻게 다른지 깊이 이해하려면 PWA의 좋은 예를 살펴보는 것이 가장 좋습니다.

다음은 다양한 산업 분야에 걸친 인상적인 Progressive Web App 예제 목록입니다. 따라서 새로운 웹 기술을 직접 경험할 수 있습니다.

1. 스타벅스

모든 고객에게 접근 가능하고 사용자 친화적인 온라인 주문을 제공하기 위해 Starbucks는 웹에서 주문 시스템의 PWA를 구축하여 기존 기본 앱과 유사한 경험을 제공합니다. 즉, 오프라인 모드에서 실행할 수 있는 기능이 있는 Starbucks PWA를 사용하면 고객이 인터넷에 지속적으로 액세스하지 않고도 메뉴를 탐색하고, 주문을 사용자 지정하고, 장바구니에 항목을 추가할 수 있습니다. 온라인 상태가 되면 위치별 가격을 보고 음식과 음료를 주문할 수 있습니다.

대부분의 PWA는 네트워크 연결 없이 사용할 수 있으므로 하루 종일 연결을 들락날락하는 이동 중인 고객이나 연결이 덜 안정적인 농촌 지역 사회와 같은 신흥 시장에 적합합니다. 새로운 주문형 PWA를 출시함으로써 스타벅스는 이미 상당한 성과를 거두었습니다. PWA는 Starbucks의 기존 iOS 앱보다 99.84% 작아서 웹 앱을 사용자들 사이에서 선호하게 되었습니다. 그 결과 매일 주문하는 웹 사용자 수를 두 배로 늘렸으며 데스크톱 사용자는 이제 모바일 사용자와 거의 같은 비율로 주문합니다.

2. 데벤햄스

패션 업계에서 쇼핑 경험을 변화시키는 브랜드에 대해 이야기할 때 Debenham을 놓칠 수 없습니다. 영국의 유명 브랜드인 이 브랜드는 이전 웹사이트에서 모바일 트래픽이 증가했음에도 불구하고 모바일 전환율이 증가하지 않는다는 사실을 깨달았습니다. 그래서 그들은 디지털 혁신이 필요한 때라고 결론지었습니다. 그렇지 않으면 디지털 및 전반적인 성장이 곧 둔화될 것입니다. 이 브랜드는 특히 모바일 장치에서 사용자에게 원활한 경험을 제공할 수 있는 솔루션을 찾았습니다.

PWA는 Debenhams 팀의 해답이었습니다. 이전 웹사이트를 PWA로 전환한 후 그들의 노력은 확실히 결실을 맺었습니다. 느린 페이지, 탐색하기 어려운 구조, 복잡한 체크아웃 프로세스와 같은 고객 여정의 장애물을 제거하여 고객 경험을 개선했습니다. 전반적으로 Debenhams는 모바일 수익이 40% 증가하고 전환이 20% 증가했습니다.

3. BMW

자동차 산업의 선구자 브랜드인 BMW는 자동차나 웹사이트를 통해 새로운 기술을 두려워하지 않는다는 것을 증명합니다. 고객 경험을 개선하기 위해 브랜드는 가치를 반영하는 양질의 매력적인 콘텐츠를 제공하고자 했습니다.

새로운 BMW의 PWA는 확실히 사용자에게 '와우' 경험을 제공합니다. 누구나 가장 먼저 알아차릴 수 있는 것은 고해상도 이미지와 비디오이며 웹은 이러한 모든 기능으로 거의 즉시 로드됩니다(이전 사이트보다 4배 빠름). 그들의 보고서는 또한 PWA 설립 이후 다른 인상적인 숫자를 보여주었습니다. 홈페이지에서 BMW 판매 사이트를 클릭하는 사람들의 4배 증가; 이전 사이트에 비해 모바일 사용자가 50% 증가하고 사이트 방문이 49% 증가했습니다.

4. 플립보드

데스크탑의 Flipboard PWA — 모바일 및 데스크탑용 Flipboard PWA

세계에서 가장 인기 있는 소셜 매거진인 Flipboard를 사용하면 독자들이 관심 있는 모든 주제, 뉴스 및 이벤트를 한 곳에서 확인할 수 있습니다. 사용자의 관심을 기반으로 플랫폼은 전 세계의 뉴스와 이야기를 잡지 형식으로 함께 제공합니다. Flipboard 사용자는 좋아하는 출처를 팔로우하고 스토리, 이미지 및 비디오를 자신의 Flipboard 매거진에 저장하여 나중에 읽거나 다른 사람들과 공유할 수 있습니다.

Flipboard는 온라인 뉴스를 위한 PWA의 가장 좋은 예 중 하나입니다. PWA는 데이터 사용량을 최소화하여 아름다운 인터페이스에서 매끄럽고 빠른 브라우징 경험을 제공합니다. PWA가 출시될 때까지 Flipboard는 모바일 기기에서만 제공되는 모바일 앱이었습니다. 따라서 이제 PWA를 통해 Flipboard는 웹에서 모든 기능을 갖춘 기본 앱과 유사한 경험을 제공하여 데스크톱 사용자도 사용할 수 있습니다.

5. 사운드슬라이스

사운드슬라이스는 음악가가 음악을 배우고 연습하는 방법에 혁명을 일으킨 웹상의 고급 음악 교육 소프트웨어입니다. 회사는 PWA를 사용하여 최고의 음악 제작 및 학습 경험을 제공합니다. PWA 기반 소프트웨어는 독학 음악가들이 혁신적인 음악 플레이어로 음악을 보다 쉽고 효율적으로 학습할 수 있도록 합니다. 사운드슬라이스 플레이어를 사용하면 휴대전화나 대형 화면 데스크톱 등 모든 기기에서 읽고 들으면서 음악을 배울 수 있습니다. 게다가 음악 교사는 이 도구를 활용하여 대화형 음악 수업을 만들 수 있습니다. 녹음을 통한 학습에 중점을 두고 있는 Soundslice에는 레슨 및 필사본을 판매하는 상점도 있습니다.

6. 2048 게임

데스크탑의 게임 2048 PWA — 모바일 및 데스크탑용 게임 2048 PWA

퍼즐 게임 2048은 원래 2014년 Android 및 iOS용 무료 앱으로 출시되었습니다. 출시 1주일도 되지 않아 400만 명 이상의 사용자를 확보하면서 즉시 입소문을 타게 되었습니다. 게임은 간단하고 중독성이 있습니다. "수학 괴짜를 위한 캔디 크러시"로 설명된 이 블록의 목표는 동일한 숫자의 블록을 결합하여 궁극적으로 총 2048개를 만드는 것입니다. 공식 PWA 버전은 2048game.com에서 제공되므로 플레이어가 모든 웹 브라우저에서 즉시 액세스할 수 있습니다. 부드러운 전환과 전체 화면 보기를 통해 PWA를 기본 앱과 구분하기가 어렵습니다. 또한 2048 PWA는 오프라인 모드에서 완전히 재생할 수 있습니다.

7. 메이크마이트립

MakeMyTrip.com 사이트는 PWA의 좋은 예입니다. 인도의 선두 여행 회사는 월간 기준으로 약 800만 명의 방문자가 사이트를 방문하고 있으며 모바일 트래픽이 3분의 2를 차지합니다. 모바일이 MakeMyTrip 고객 사이에서 가장 선호하는 예약 채널이 되면서 빠르고 안정적이며 세련된 모바일 웹 경험으로 이어지는 PWA를 개발했습니다.

새로운 PWA 환경은 페이지 로드 시간을 38% 단축하여 전환율을 3배로 높였습니다. 이전 모바일 사이트와 비교하여 MakeMyTrip은 사용자 세션을 160% 증가시켰고 이탈률을 20% 낮췄습니다.

8. 우버

회사가 새로운 시장으로 확장함에 따라 Uber 웹은 기본 모바일 앱과 유사한 예약 경험을 제공하기 위해 처음부터 PWA로 재구축되었습니다. Uber PWA는 저속 2G 네트워크에서 차량 예약이 가능하도록 설계되었습니다. 모든 최신 브라우저에서 액세스할 수 있는 앱과 같은 경험이라는 개념을 기반으로 구축된 The PWA는 기본 Uber 앱과 호환되지 않을 수 있는 저가형 장치를 사용하는 라이더에게 적합합니다.

Uber는 초경량 웹 앱에서 기본 경험을 제공함으로써 위치, 네트워크 속도 및 장치에 관계없이 빠른 승차 요청을 가능하게 했습니다. 50kB의 핵심 앱으로 2G 네트워크에서 3초 이내에 로드할 수 있습니다.

9. 코파(Padpiper )

Kopa(구 Padpiper)는 학생들이 학기 및 인턴십을 위한 신뢰할 수 있는 주택을 쉽게 찾을 수 있도록 돕고 집주인이 자신의 공간에 적합한 세입자를 신속하게 찾을 수 있도록 하는 플랫폼입니다. 실제로 이 플랫폼은 현재 9000개 학교를 지원하고 PWA에 100개 이상의 목록이 있습니다. 그들은 집주인을 확인하고 리뷰를 나열하여 학생들이 가장 적합한 것을 찾는 데 시간을 절약할 수 있습니다. 학생이 직장 주소를 추가하면 결과 페이지의 각 목록에서 직장으로 가는 길을 찾을 수 있습니다. 웹 앱은 또한 학생들을 근처에서 일하는 다른 사람들과 연결하거나 동급생이 협동 조합에 있는 위치를 찾을 수 있습니다.

10. 핀터레스트

국제적 성장에 중점을 둔 Pinterest는 처음부터 PWA로 새로운 모바일 웹 경험을 시작했습니다. 소셜 네트워크에 따르면 모바일 사용자의 1%만이 모바일 성능 저하로 인해 가입, 로그인 또는 앱 설치로 전환됩니다.

전환을 개선할 수 있는 기회가 크다는 것을 깨닫고 PWA 기술을 사용하여 모바일 웹을 재구축하여 몇 가지 긍정적인 결과를 얻었습니다. 이전 모바일 웹에 비해 소요 시간이 40% 증가하고 사용자 생성 광고 수익이 증가했습니다. 44% 및 핵심 참여는 60% 증가

11. 맛있게

Yummly는 개인의 취향, 영양 요구 사항, 기술 수준 등을 학습하여 개인화된 레시피, 쇼핑 목록 및 1시간 식료품 배달을 추천하는 스마트 요리 검색 플랫폼입니다. 기본 Android 및 iOS 앱과 함께 Yummly는 웹 브라우저에서 PWA로도 사용할 수 있습니다. 원래 존재와 마찬가지로 Yummly PWA는 음식, 요리 및 조리법에 대한 검색 엔진을 제공합니다. 이를 통해 사용자는 최고의 식품 사이트, 틈새 블로그 또는 지역 식품 브랜드에서 제공하는 백만 개 이상의 요리법을 검색할 수 있습니다. 또한, 검색 결과는 성분, 다이어트, 알레르기, 영양, 가격, 요리, 시간, 맛, 식사 코스 등으로 필터링할 수 있습니다.

12. 스포티파이

좋아하는 음악 플레이어는 이제 PWA로 구동됩니다. Spotify와 Apple 사이에 Apple의 30% 앱 스토어 수수료에 대한 의견 불일치로 인해 Spotify는 다른 많은 대형 브랜드와 마찬가지로 PWA 버전의 앱 개발을 시작할 시기적절한 기회를 찾았습니다. 네이티브 앱 버전과 비교할 때 PWA 버전은 사용자가 앱을 진행하면서 배경을 변경하는 고유하고 적응형 UI로 훨씬 더 빠릅니다. 다른 많은 PWA와 마찬가지로 사용자는 Spotify PWA를 홈 화면에 추가하라는 메시지가 표시되므로 Spotify PWA에 더 쉽게 액세스할 수 있고 다른 버전과 동등하게 만들 수 있습니다.