10가지 놀라운 프로그레시브 웹 앱(PWA) 예시
이 기사에서는 웹 기술을 교묘하게 활용하여 기본 애플리케이션에 필적하는 사용자 경험을 제공하는 10가지 유형의 프로그레시브 웹 애플리케이션(PWA) 사례를 보여줍니다.
Redmenta는 교사와 학생이 기존 강좌에서 맞춤형 학습 경로를 만들 수 있도록 돕는 AI 기반 플랫폼입니다. 이 소프트웨어는 학생들을 위한 학습 활동을 생성하고 교사가 학생의 진행 상황을 추적할 수 있도록 합니다. PWA(Progressive Web App)인 Redmenta는 App Store 앱을 다운로드할 필요 없이 모든 장치의 브라우저에서 직접 설치할 수 있습니다.
Redmenta는 React로 구축되고, AI로 구동되며, 아름답게 디자인되고, 모바일 반응성이 뛰어나며, 개방형 웹을 통해 배포되는 최신 앱의 완벽한 예입니다.
Fodmapedia는 과민성 대장 증후군 환자를 위해 저FODMAP 식단을 통해 증상을 관리하는 데 도움을 주기 위해 특별히 고안되었습니다. Bubble로 개발된 이 노코드 PWA 예제는 사용자가 자신의 식이 요법에 적합한 음식을 식별하는 데 도움이 됩니다. 일상적으로 사용하는 도구이므로 홈페이지에서 직접 애플리케이션으로 웹사이트를 설치할 수 있습니다.
'설치'를 클릭하면 홈 화면에 PWA를 추가하는 방법이 단계별로 안내됩니다. 지침은 특정 장치에 지능적으로 적용됩니다. 최신 웹 기술 덕분에 이제 거의 모든 곳에서 PWA를 설치할 수 있습니다.
초기 메시지를 놓친 사용자를 위해 Fodmapedia는 헤더에 편리한 설치 링크를 제공합니다. 이 링크를 클릭하면 앱 스크린샷, 세부정보, 리뷰가 포함된 전용 설치 페이지로 이동됩니다.
Fodmapedia는 사용자를 위한 명확하고 실질적인 문제를 해결하고 코드 없이 앱 스토어 외부에 배포하는 방법을 보여주는 PWA의 훌륭한 예입니다.
Bingo em Casa는 기본 앱 대신 PWA를 사용하기로 선택한 브라질 스포츠북 및 카지노 앱입니다. 해당 앱이 Google Play 및 App Store에서 금지된 카테고리에 속한다는 점을 고려하면 이는 분명한 선택입니다.
실제로 PWA는 도박, 성인 콘텐츠, 암호화폐, 대마초, 건강 등 민감한 산업 분야의 애플리케이션에 이상적인 솔루션입니다. PWA를 사용하면 배포를 완전히 제어하는 동시에 사용자가 의심스러운 실행 파일을 다운로드하지 않고도 앱이 사용자의 홈 화면에 편리하게 위치하도록 할 수 있습니다.
Bingo em Casa는 사용자가 로그인 페이지에서 직접 PWA를 설치하도록 권장합니다. 설치는 즉시 이루어지며 홈 화면에서 앱이 실행되면 푸시 알림을 활성화하라는 메시지가 표시됩니다. 이 흐름은 특히 잘 작동합니다. iOS(버전 16.4부터)에서는 푸시 알림이 설치된 PWA에서만 사용할 수 있습니다.
실행 즉시 알림 메시지를 표시하는 방해적인 웹사이트와 달리 Bingo em Casa는 사용자가 앱에 의미 있는 참여를 보여줄 때까지 현명하게 기다린 후 알림 수신 동의를 우아하게 초대합니다. 잘하셨어요!
Nekodex는 암호화폐 지갑 애플리케이션입니다. 이전 PWA 예와 마찬가지로 웹 형식을 활용하여 앱 스토어 제한을 우회하는 동시에 원활한 사용자 경험을 제공합니다.
아름다운 애니메이션과 세련된 인터페이스를 갖춘 이 웹 앱은 일단 설치되면 기본 웹 앱과 거의 구별할 수 없습니다. 일부 개발자는 PWA가 기본 앱만큼 시각적으로 매력적이거나 기능적이지 않다고 생각합니다. Nekodex는 PWA가 매우 스타일리시하게 보이고 느껴질 수 있음을 보여줌으로써 그렇지 않다는 것을 증명합니다.
크로스 디바이스 설치 방법도 기발합니다. 웹사이트 오른쪽 상단에 있는 '앱 실행'을 클릭하면 코드가 표시됩니다. 휴대폰으로 코드를 스캔하면 앱을 설치하도록 안내됩니다. 정말 똑똑해요!
Run247은 트레일 및 울트라 러닝 매니아를 위한 글로벌 커뮤니티로, 뉴스, 이벤트 및 전문가 조언을 제공합니다. 자매 앱인 Tri247과 마찬가지로 배포를 위해 PWA 형식을 선택했습니다.
주로 모바일 장치를 대상으로 하는 앞서 언급한 PWA와 달리 Run247은 데스크톱 및 모바일 사용자 모두에서 동일하게 작동합니다. 특히 좋은 점은 사이트 왼쪽 상단에 있는 "앱 추가" 버튼입니다. 단 한 번의 클릭만으로 앱이 컴퓨터나 휴대폰에 즉시 설치되어 여러 기기에서 쉽게 액세스할 수 있습니다.
PWA 설치는 모바일 기기에만 국한되지 않습니다. macOS(Safari, Chrome, Brave 또는 Edge를 통해), Windows(Chrome, Brave 또는 Edge 사용) 및 심지어 ChromeOS에서도 작동합니다!
이 PWA 예제는 설치 논리를 매우 철저하게 처리합니다. 예를 들어, PWA 설치와 호환되지 않는 소수의 브라우저(주로 데스크톱용 Firefox)를 사용할 때 발생하는 상황은 다음과 같습니다.
Fou d'la Bouffe는 프랑스어와 영어가 매일 사용되는 퀘벡과 온타리오에서 운영되는 음식 배달 서비스입니다. 이중 언어 사용자를 수용하기 위해 앱은 프랑스어와 영어로 제공됩니다. 페이지가 로드되면 앱은 사용자의 언어를 감지하고 그에 따라 PWA를 설치하라는 메시지를 사용자에게 표시합니다.
음식 배달 서비스의 경우 고객의 홈 화면에 존재감을 드러내는 것이 중요합니다. 지리적 위치 및 푸시 알림과 같은 고급 기능을 갖춘 이 PWA 예제는 웹이 무엇을 할 수 있는지 완벽하게 보여줍니다.
뮤직 리그는 크로스 플랫폼 음악 탐색 게임입니다. 많은 기본 앱과 마찬가지로 랜딩 페이지에서는 앱에 대한 간략한 개요와 설치 옵션을 제공합니다. 그러나 대부분의 기본 앱과 달리 Music League는 탁월한 유연성을 제공합니다.
강제 설치 없음 - 브라우저에서 직접 게임을 플레이하거나 원하는 경우 휴대폰에 설치할 수 있습니다. 이는 PWA 형식을 효과적으로 사용하는 좋은 예입니다. Music League의 개발자들은 기존 앱 스토어를 탐색하는 데 따른 불편함을 제거하여 앱 채택률을 높였습니다.
Sky Freebies는 다양한 소매업체에서 무료 제품과 샘플을 찾는 데 도움이 되는 특가 플랫폼입니다.
하지만 상상할 수 있듯이 공짜는 영원히 지속되지 않습니다! 이것이 바로 사용자가 최신 제안을 얻기 위해 정기적으로 웹사이트를 확인해야 하는 이유입니다. 이를 더욱 쉽게 하기 위해 사이트를 탐색하는 동안 항상 사용할 수 있는 편리한 설치 프로그램 위젯을 추가했습니다.
앱을 설치하고 실행하면 콘텐츠 자체가 표시됩니다. Sky Freebies는 디스플레이 모드를 감지하고 이에 따라 사용자 경험을 조정합니다. 홈 페이지에 액세스하는 것부터 홈 화면에서 직접 앱을 실행하는 것까지 전체 경험이 원활하고 원활하게 진행됩니다.
Sky Freebies는 앱에 새로운 혜택이 추가되는 즉시 알려 주는 푸시 알림도 잘 활용합니다. 물론 이러한 알림은 전적으로 자발적입니다.
흥미롭게도 앱은 웹에서 완전히 사용할 수 있지만 Google Play나 Windows 스토어에서도 다운로드할 수도 있습니다. Apple은 PWA를 제한하지만 Google과 Microsoft는 웹 앱에 더 개방적입니다. 따라서 PWA 형식을 선택한다고 해서 기존 앱 스토어 사용에 익숙한 사용자를 버리는 것은 아닙니다.
PWA는 지역 가이드에 이상적인 형식이며 The Bedford Guide가 완벽한 예입니다. 영국 베드퍼드에서 최고의 레스토랑, 바, 명소 및 기타 핫스팟을 탐색하는 데 도움이 됩니다.
베드퍼드를 방문할 계획이신가요? 웹사이트를 장치에 설치하기만 하면 필요할 때마다 쉽게 액세스할 수 있습니다.
Bedford Guide는 WordPress를 사용하여 개발되었으며 기본 앱처럼 아름다운 스플래시 화면으로 열립니다!
일부 온라인 상점에서 정기적으로 상품을 주문하시나요? 쉽게 접근할 수 있도록 휴대폰의 홈 화면에 추가해 보는 것은 어떨까요? HobbyHop은 Shopify가 제공하는 공예품 상점이자 PWA이기도 합니다!
Shopify는 온라인에서 제품을 판매하는 가장 쉬운 플랫폼 중 하나이며 Shopify 앱 스토어 덕분에 클릭 한 번으로 설치 및 푸시 알림을 통해 스토어를 PWA로 전환할 수 있습니다.
HobbyHop은 홈페이지 하단에 자체 설치 페이지로 연결됩니다. 이는 앱 내에서 사용자의 여정을 방해하지 않고 설치를 홍보할 수 있는 간단한 방법입니다.
마지막으로 Photopea를 언급해야겠습니다. 제 생각에는 웹에서 구축된 소프트웨어 중 가장 훌륭한 제품 중 하나입니다. 즉, HTML, CSS 및 JavaScript와 같은 웹 기술을 사용하여 완전히 개발된 무료 Photoshop 대안입니다.
다른 예와 마찬가지로 기기에 PWA로 설치할 수 있습니다. 저는 Mac의 Dock에 이 앱을 두고 거의 매일 사용하고 있습니다. 너무 잘 작동해서 실제로 네이티브 앱이 아니라고 말할 수 없습니다.
그러나 Photopea의 정말 놀라운 점은 실제로 수행되는 작업입니다. 디자이너가 이러한 복잡한 작업을 웹에서 직접 처리할 수 있도록 하는 것은 천재적인 일입니다.
PWA의 잠재력에 회의적인가요? Photopea를 사용해 보세요. 마음이 바뀔 수도 있습니다.
위 내용은 5에서 배울 수 있는 실제 PWA 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
