Uber PWA: 프로그레시브 웹 앱을 위한 완벽한 사례 연구
게시 됨: 2022-06-22Uber 택시를 호출하는 것이 얼마나 쉽고 빠른지 감동한 적이 있습니까? Uber가 어떻게 그렇게 할 수 있는지 궁금하십니까? Uber는 우리에게 그런 부드러운 경험을 제공하기 위해 어떤 기술이나 무언가에 투자해야 합니다. 하지만 그것이 정확히 무엇이며 우리가 그것에 대해 어떻게 알 수 있습니까? Uber PWA를 사용해 본 적이 있다면 Uber PWA와 다른 기본 앱의 차이점을 알 수 있습니다. 일반 앱처럼 빠르고 강력하며 기능적이지만 그렇지 않습니다. 제목에서 알 수 있듯이 몇 가지 사항을 알고 있을 수 있으므로 이 사례 연구에 대해 자세히 알아보겠습니다.
내용물
Uber 개요

Uber Technology는 기술의 힘으로 사람을 돕는 21세기의 성공적인 대표 기업이었습니다. 2009년에 설립된 이 야심찬 스타트업은 단순하지만 기발한 아이디어로 순식간에 대중교통과 택시 업계를 뒤흔들면서 경이적인 존재가 되었습니다.
이 개념은 많은 국가에서 새로운 것이 아닙니다. 그러나 승객이 독립적인 운전기사에게서 차를 타고 요금을 지불하도록 허용하는 것은 대부분의 서양인에게 상당히 터무니없는 일입니다.
수요와 공급을 연결하는 제3자 역할만 하는 Uber는 여전히 폭발적인 성장을 목격하고 있으며 수많은 논쟁에 둘러싸여 있음에도 불구하고 가장 매력적인 회사 중 하나가 되었습니다.
Uber는 "We ignite fire into the world by setting the world in the world"라고 선언하면서 전 세계 모든 사람에게 믿을 수 있는 헌신적인 운송 서비스를 제공하는 것을 사명으로 삼고 있습니다.
현재까지 Uber는 현재 성장에 따라 1억 1,800만 명이 넘는 사용자, 350만 명이 넘는 활성 운전 기사를 점유하고 있으며 2020년 승차 공유 사업의 총 예약 수익으로 266억 1000만 달러의 수익을 올렸습니다.
PWA는 서비스 기반 기업의 성장을 어떻게 지원합니까?

이 디지털 시대에 기업이 생존하기 위한 승리의 공식은 기존의 경계를 뛰어 넘는 정교한 사용자 경험을 제공하는 것으로 시작하고 끝납니다.
기술 회사가 양적, 질적으로 증가함에 따라 Uber, Tinder, Netflix와 같은 디지털 상품이나 정보 기반 서비스는 단순히 이메일이나 전화를 통해 불만 및 문의를 처리하는 것보다 고객 서비스에 더 잘해야 합니다.
이러한 디지털 플랫폼이 공통적으로 가지고 있는 가장 중요한 접점은 웹사이트나 모바일 앱에 의존하여 대상 고객과 소통한다는 것입니다. 온라인 비즈니스의 혈통이자 수익의 원천입니다.
혁신가에게 가장 큰 충동은 부족한 부분을 채우는 솔루션, 즉 화면 뒤에서 사용자 경험을 개선하기 위한 기술적 해답을 찾는 것입니다. 2015년 Google 엔지니어들은 웹과 기본 앱의 특성을 최대한 활용한 새로운 웹 기술인 Progressive Web App이라는 이름을 만들었습니다.
PWA가 서비스 기반 회사를 어떻게 지원하는지 고려하는 데에는 두 가지 주요 추세가 있습니다.
첫째, 페이지 무게는 데이터베이스가 증가함에 따라 시간이 지남에 따라 증가하지만 대역폭도 증가합니다. 따라서 웹 사이트는 더 느리고 무거워지므로 동시 최적화 프로세스가 있습니다.
PWA는 서비스 워커와의 네트워크 요청을 중단하여 왕복 대기 시간을 최소화하고 사이트 리소스를 사전 캐시하여 두 번째 방문에서 즉각적인 로드를 생성할 수 있습니다. 이 캐싱을 통해 개발자는 웹사이트 속도에 집중하고 로딩 시간을 3-5초로 최적화할 수 있습니다.
둘째, 전자상거래는 구매자와 판매자의 편의를 위해 추진력을 얻고 있습니다. 그 중 모바일 상거래가 가장 수익성이 높은 유형으로 10년 동안 사용자가 3배 증가했습니다.
서비스 워커는 백그라운드에서 실행되기 때문에 운영 체제의 이벤트나 프로세스에 응답할 수 있습니다. 이 기능을 통해 PWA는 팝업 알림을 Android 모바일 장치에 푸시할 수 있습니다. 반면에 iOS는 이 기능 지원을 거부하지만 PWA의 명성이 높아지면서 Apple은 마음을 바꿔야 한다고 생각합니다.
PWA 통합 전 Uber의 과제
Uber는 기술 발전에 발맞추어 계속해서 혁명을 일으키고 승차 공유 경제를 지배하기를 원합니다.
그들은 사용자가 모바일 앱을 다운로드하지 않거나 스마트폰을 들고 있지 않아도 특히 긴급한 상황에서 언제든지 서비스를 사용할 수 있는 신속하게 액세스할 수 있는 최신 정보의 편리한 기회를 제공하고자 합니다.

이것이 그들이 신속하고 원활하게 수행하고 여러 브라우저에서 일관되게 잘 작동하며 낮은 인터넷 연결 요청을 처리할 수 있는 솔루션을 찾는 이유입니다.
PWA는 열악한 연결에서도 엄격하게 작동하고 번개 같은 로딩 속도를 제공할 수 있는 강력한 온라인 존재를 유지하기 위해 비용 효율적이고 구축 시간이 거의 없는 솔루션으로 제공되었습니다.
Uber PWA의 결과

디자인 정보
PWA 사이트 디자인과의 중요한 차이점은 Uber PWA가 활성 탭의 위치를 이동하지 않고 "로딩" 애니메이션을 남기지 않고 페이지 전환 효과를 남기는 것입니다. 데스크탑 장치로 선명하게 볼 수 있습니다.
이 스플래시 화면은 상단에 로고를 몇 초 안에 유지함으로써 Uber라는 이름을 가진 사용자 내부의 리콜 파워를 강화하는 데 도움이 될 수 있습니다.
기능 정보
- 탐색
Uber PWA 또는 m.uber는 아래로 스크롤하는 상호 작용을 위해 명확하고 직관적인 레이아웃으로 설계되었습니다. 눈이 익숙한 방향으로 이동하고 페이지를 빠르게 이해할 수 있습니다.
- 로딩 속도
Uber PWA는 놀라운 첫 페이지 로드를 얻습니다. 요소는 필요한 위치에 즉각적이고 깔끔하게 나타납니다.
내비게이션의 디자인은 로딩 속도를 합리화하는 데 어느 정도 기여합니다. 스크롤할 때 로드를 수행하므로 사이트에 콘텐츠 모양을 고정할 수 있는 기능을 제공하여 나머지 리소스를 캐싱하는 시간을 절약할 수 있습니다.
담당 개발자들도 m.uber가 서버에서 발생한 Preact를 렌더링하여 최초의 브라우저 요청에 응답한다고 주장합니다. 인라인 마크업을 문자열로 사용하면 서버에서 콘텐츠를 거의 즉시 전달할 수 있습니다.
- 페이지와 요소 간의 전환: 반응이 빠르고 원활하게 연결되어 상호 작용 시간이 빨라집니다.
- 경험: 우리는 모든 것을 마음의 편안함과 함께 조용하고 만족스러운 예약 여행으로밖에 설명할 수 없습니다.
결과
Uber 사용자는 이제 네트워크 연결, 운영 체제, 데이터베이스 및 PWA를 사용하는 장치 유형에 관계없이 몇 번의 간단한 클릭으로 쉽게 차량 서비스를 예약할 수 있습니다.
Uber는 PWA 출시 후 이전 모바일 기본 앱보다 Uber PWA로 더 많은 차량 서비스를 예약한 주요 변경 사항을 보고했습니다. 점점 더 많은 사람들이 Uber에서 예약을 계속할 것입니다.
M.uber는 그 이후로 매우 가볍고 부드러우며 모든 최신 브라우저와 호환됩니다. 웹 앱은 사이트 성능 면에서 저가형 장치를 사용하는 라이더의 문제를 극복하여 차량을 불러야 할 때마다 단순히 만족하는 일관된 앱과 같은 경험을 제공합니다.
Uber PWA의 흥미로운 점은 무엇입니까?
다음은 Uber 개발자가 혁신적인 PWA 프로젝트를 수행할 수 있었던 몇 가지 흥미로운 기술적 사실입니다.
- Uber PWA는 놀랍도록 빠릅니다.
PWA를 사용하려는 의도는 시장 요구 사항을 고려하여 모바일에서 기본 앱을 적절하게 대체하는 것이었습니다. 개발자는 50kB gzip으로 잘 포장된 작은 PWA를 처리했습니다.
목표는 2G 네트워크에서도 견고하게 작동하기 위해 불필요한 구성 요소를 피하면서 모든 것을 가능한 한 가볍게 하는 것입니다.
중요한 행사에 늦는 것, 차를 타기 위해 서둘러 밖으로 나가서 앱이 느리게 로드되는 것보다 더 나쁜 것은 없습니다. 그것은 최대 수준의 좌절감을 불러일으키고 Uber에 대한 그들의 태도에 해로운 영향을 미칠 수 있습니다.
그러나 Uber는 2G에서도 표시되는 데 3초 미만이 소요되는 라이트닝 웹 앱을 성공적으로 출시했습니다. 정말 빠르네요. 그들이 한 일은 인상적입니다.
- Uber PWA는 다양한 상황에서 신뢰할 수 있습니다.
달성한 성과로 Uber는 글로벌 시장 진출에 자신감을 갖게 되었습니다. 그들은 항상 Uber PWA를 각 상황과 문제에 대해 빠르고 쉬운 경험으로 조정할 수 있는 선별된 방법을 찾았습니다.
해외 시청자들은 커버리지와 연결 신호가 좋지 않아도 원하는 시간과 방식으로 서비스를 사용할 수 있습니다. 또한 사용자는 오프라인, Uber 사이트 및 이동 중에도 차량에 대한 조치를 취하거나 조정할 수 있습니다.
Uber PWA는 계속해서 후속 방문을 위해 로드하고 나중에 Wi-Fi와 동기화할 수 있도록 모든 사용자 생성 콘텐츠를 저장할 수 있기 때문에 이 모든 것이 가능합니다.
주요 내용
가장 역동적으로 성장하는 플랫폼은 프로그레시브 웹 앱의 도움이 없었다면 지금의 위치에 있을 수 없습니다. 더 가볍고 빠르며 단순한 경험을 통해 Uber PWA는 차량 공유 예약 프로세스를 더 쉽게 만들었습니다. Lyft는 Uber의 가장 큰 경쟁자로 간주되지만 시장 점유율은 Uber가 차지하는 것과 비교할 수 없습니다.
따라서 PWA가 온라인 비즈니스에 어떻게 도움이 되는지 자세히 알아보려면 Tigren의 블로그로 이동하여 자주 발행되는 간행물을 확인하십시오.
Tigren은 2015년부터 Magento PWA 개발 서비스의 신뢰할 수 있고 신뢰할 수 있는 이름이었습니다. 우리는 전 세계 800개 이상의 중소기업이 투자 수익을 높일 수 있도록 도왔습니다.
당사의 프리미엄 Magento PWA 통합 솔루션은 세계적으로 유명한 품질을 제공하지만 여전히 예산 내에서 이상적인 온라인 입지를 구축하려는 야심 찬 소유자에게 적합합니다.
귀하의 문제를 가능한 한 빨리 처리하기 위해 1:1 상담을 원하시면 [email protected]으로 메시지를 보내 견적을 받으십시오. 일치하지 않는 경우 약정이 필요하지 않습니다.