프로그레시브 웹 앱(PWA)은 프로그레시브 개선을 사용하여 사용자에게 더 안정적인 환경을 제공하고, 새로운 기능을 사용하여 더 통합된 환경을 제공하며, 설치할 수 있는 웹 앱입니다. 또한 웹 앱이므로 단일 코드베이스로 어디서나 어떤 기기에서든 누구에게나 도달할 수 있습니다. 설치된 PWA는 다른 앱과 마찬가지로 다음과 같이 표시됩니다.
- 홈 화면, 앱 런처, 런치패드 또는 시작 메뉴에 아이콘이 있습니다.
- 이 아이콘은 기기에서 앱을 검색할 때 표시됩니다.
- 브라우저의 사용자 인터페이스와 완전히 분리된 독립형 창에서 열립니다.
- URL 처리 또는 제목 표시줄 맞춤설정 등 더 높은 수준의 OS 통합에 액세스할 수 있습니다.
- 오프라인으로 작동합니다.
웹 플랫폼
웹은 놀라운 플랫폼입니다. 기기와 운영체제 전반에서의 범용성, 사용자 중심의 보안 모델, 단일 회사가 사양이나 구현을 제어하지 않는다는 사실은 이 플랫폼을 소프트웨어를 제공하기 위한 강력한 플랫폼으로 만듭니다.
웹의 고유한 연결 가능성과 결합하면 웹에서 검색하고 찾은 내용을 어디서나 누구와도 공유할 수 있습니다. 웹사이트를 방문할 때마다 게시자가 배포한 최신 버전이 표시되며, 사이트에서의 환경은 원하는 대로 일시적이거나 영구적일 수 있습니다.
웹 애플리케이션은 단일 코드베이스로 모든 기기, 장소와 위치에 관계없이 누구에게나 도달할 수 있습니다. 또한 웹은 개발자에게 투명하고 간단한 배포 메커니즘을 제공합니다. 패키징이나 추가 콘텐츠 검토, 업데이트가 지연되지 않습니다. 사용자는 앱을 방문할 때마다 항상 최신 버전을 받습니다. 새로운 기능과 기법을 통해 이제 웹 앱을 통해 오프라인 상태에서도 상호작용하거나 콘텐츠를 볼 수 있게 되었습니다. 이는 몇 년 전만 해도 극복할 수 없었던 난관이었습니다.
플랫폼별 앱
모바일과 데스크톱 모두에서 플랫폼별 앱은 풍부하고 안정적인 것으로 알려져 있습니다. 홈 화면, 도크, 작업 표시줄에 항상 표시됩니다. 네트워크 연결과 관계없이 작동하며 자체 독립형 환경에서 실행됩니다. 로컬 파일 시스템에서 파일을 읽고 쓰고 USB, 직렬 또는 블루투스를 통해 연결된 하드웨어에 액세스하며 연락처 및 캘린더 일정과 같이 기기에 저장된 데이터와 상호작용할 수 있습니다. 플랫폼별 애플리케이션에서는 사진을 찍거나, 홈 화면에 표시된 노래를 재생하거나, 다른 앱에 있는 동안 미디어 재생을 제어할 수 있습니다. 이러한 애플리케이션은 실행되는 기기의 일부처럼 느껴집니다.
플랫폼별 앱의 문제는 여러 플랫폼 및 기기와 호환되지 않는다는 점입니다. 따라서 새 앱을 처음부터 만들지 않고 Android 앱을 iOS로 또는 iOS를 Windows 또는 ChromeOS로 이동하는 것은 쉽지 않습니다.
두 기술의 장점을 모두 활용
기능과 도달범위 측면에서 플랫폼 앱과 웹 앱을 생각해 보면 플랫폼 앱은 최고의 기능을 나타내고 웹 앱은 최고의 도달범위를 나타냅니다. 프로그레시브 웹 앱은 플랫폼 앱의 기능과 웹 앱의 도달범위가 교차하는 지점에 있습니다. 프로그레시브 웹 앱에는 두 가지 환경의 기능이 모두 포함되어 있습니다.
웹
- 연결 가능성
- 기본적으로 액세스 가능
- 편재성
- 손쉬운 배포
- 간편한 업데이트
- 누구나 게시 가능
플랫폼 앱
- 오프라인 사용 가능
- 고성능
- 기기 통합
- 독립형 환경
- 설치됨 아이콘
- 풍부하고 안정적
채택 시 얻을 수 있는 이점
미국의 동영상 스트리밍 서비스인 Hulu는 프로그레시브 웹 앱 버전을 개발하여 사용자 리뷰가 나쁘고 사용도가 낮았던 데스크톱 앱을 대체했습니다. Google I/O 2019에서 공유한 바와 같이 한 개발자는 2주 만에 기존 웹 애플리케이션에서 이 경험을 연구하고 구현할 수 있습니다.
5개월 만에 기존 앱 사용자의 96%가 PWA를 채택했으며 재방문율이 27%, 참여도가 5.5% 증가했습니다. PWA는 런처와 작업 표시줄에 있으므로 탭에 있는 것보다 더 쉽게 돌아갈 수 있습니다.
많은 제품에 배송 서비스를 제공하는 인도네시아의 전자상거래 플랫폼인 JD.ID는 성능에 집중하고 네트워크 독립적이지 않은 견고한 PWA 환경을 조성하여 온라인 입지를 넓히고자 했습니다. 이처럼 개선된 환경을 통해 전반적인 모바일 전환율은 53%, 설치된 사용자의 전환율은 200% 증가했으며 일일 활성 사용자 수는 26% 증가했습니다.
Clipchamp은 누구나 동영상을 통해 공유할 만한 이야기를 전할 수 있는 브라우저 내 데스크톱급 온라인 동영상 편집기입니다. PWA 사용자의 사용자 유지율이 표준 데스크톱 앱 사용자보다 9% 높았으며, 출시 후 5개월 동안 PWA 설치 수가 매월 97%씩 증가했습니다.
Corel Corporation의 Gravit Designer는 강력한 데스크톱급 벡터 디자인 도구로, 저렴하고 접근성이 뛰어나며 기능이 풍부한 벡터 일러스트레이션 소프트웨어를 원하는 수만 명의 일일 활성 사용자에게 서비스를 제공합니다. 사용자를 위한 설치 옵션으로 PWA를 추가한 이후 PWA 사용자의 활동이 24% 증가하고, PWA에서 재구매 사용자가 31% 증가했으며, PWA 사용자가 다른 플랫폼 및 설치 옵션에 비해 Gravit Designer PRO를 구매할 가능성이 2.5배 높아졌습니다.
스트리밍 게임 체인저
프로그레시브 웹 앱의 강점을 보여주는 좋은 예로 클라우드 게임 및 원격 컴퓨팅을 비롯한 스트리밍 플랫폼 업계가 있습니다. 2021년부터 대부분의 클라우드 게임 제공업체에서 프로그레시브 웹 앱을 출시하여 iPhone, Android, iPad, 노트북, Mac, PC 등 모든 기기에서 콘솔 게임을 플레이하거나 PWA 설치만으로도 게임을 즐길 수 있습니다. Amazon Luna, Microsoft Xbox Cloud Gaming, Facebook Gaming, Google Stadia, Nvidia GeForce Now, BlueStacks X는 브라우저를 통해 PWA로 클라우드 게이밍 솔루션을 제공합니다. WebRTC, WebAssembly, GamePad API와 같은 웹 기술 덕분에 모든 플랫폼에서 네이티브에 가까운 성능으로 우수한 환경을 제공합니다.
도전과제
웹 플랫폼을 사용하여 PWA를 게시하는 이점에 대해 알아봤으므로 발생할 수 있는 문제를 인식하는 것도 중요합니다.
교차 브라우저 호환성
Apple은 iOS, iPadOS, macOS, Safari를 소유한 다중 기기 환경의 핵심 기업입니다. Apple은 공개적으로 PWA라는 용어를 사용한 적이 없지만 2018년부터 iPhone 및 iPad용 Safari에서 PWA를 설치하고 오프라인으로 사용할 수 있는 기술을 지원해 왔습니다.
그러나 Apple의 PWA 사양 구현에서는 다른 브라우저, 특히 Chromium 엔진으로 구동되는 브라우저에서 보유하는 많은 기능이 누락되었습니다.
중간에는 Android의 PWA 사양이 더 많고 데스크톱의 설치 기능이 더 적은 구현을 포함하는 Firefox 및 Gecko 엔진도 있습니다.
제한사항으로는 푸시 알림, 통합 API(예: Web Bluetooth 또는 WebNFC), 사용자가 현재 웹사이트를 설치하여 앱 환경을 이용할 수 있다는 사실을 알 수 있도록 하는 설치 프로모션 기법의 부재가 있습니다. 또한 구현된 기능에는 몇 가지 버그가 있습니다.
모든 웹 개발과 마찬가지로 PWA를 출시할 때와 새로운 주요 브라우저 또는 OS 버전이 출시될 때는 모든 플랫폼에서 환경을 테스트해야 합니다. 기능을 사용할 수 없는 경우 항상 대체 솔루션 또는 대체 환경을 제공해야 합니다.
PWA 인식
PWA 개발자는 비즈니스 측과 사용자 측 모두에서 인지도 문제가 발생할 수 있습니다. 일부 비즈니스 소유자는 PWA에 대해 잘 모르거나 프로그레시브 웹 앱의 강점과 문제에 대해 잘못 이해하고 있을 수 있습니다.
PWA를 게시할 때 다음으로 해야 할 일은 사용자가 웹사이트를 설치할 수 있고 설치된 앱 환경으로 이어진다는 점을 이해하도록 하는 것입니다.
설치 문제는 iOS 및 iPadOS와 같은 일부 플랫폼에서 더 심각하며, UX 디자이너가 사용자에게 앱을 설치하는 방법을 설명하는 화면을 포함하는 경우도 있습니다.
호환성
프로그레시브 웹 앱은 웹 앱에 불과하므로 콘텐츠와 서비스는 표준 사양 및 프로토콜을 기반으로 실행됩니다. 따라서 PWA는 기술적으로 웹이 실행되는 모든 곳에서 실행됩니다. 플랫폼이 'PWA 사양'과 호환될 필요는 없습니다.
그러나 PWA와 호환성에 관해 이야기할 때 일반적으로 브라우저와 온라인 전용 컨텍스트의 경계를 넘나드는 기능, 즉 아이콘 설치와 오프라인 지원에 대해 생각하게 됩니다.
기본 웹 플랫폼 지원 외에 아이콘 설치 및 오프라인 기능과 같은 기본 앱 기능에 대한 지원을 확인해 보겠습니다.
97 %
오프라인 지원 브라우저
88 %
웹 사용자가 PWA를 설치할 수 있음
StatCounter 및 Can I Use에서 가져온 데이터
데스크톱 및 노트북
다중 요소 기기가 있는 오늘날에는 데스크톱 기기가 무엇인지 더 이상 알기가 어렵습니다. 적어도 운영체제 관점에서 볼 때 다음 브라우저 및 저장소는 여전히 PWA 설치 및 오프라인 기능과 호환됩니다.
- Windows 10 및 11
- Google Chrome(버전 73 이상), Microsoft Edge(버전 79 이상), Microsoft Store
- ChromeOS
- 기본 제공 Chrome 브라우저(버전 72 이상), Play 스토어(버전 85 이상)
- macOS, Linux, Windows 7 및 8.x
- Google Chrome(버전 73 이상), Microsoft Edge
다음 동영상에서는 사용자가 데스크톱 컴퓨터의 브라우저에서 PWA를 설치한 후 독립형 창이 있는 다른 앱과 마찬가지로 PWA에 액세스합니다.
휴대기기
휴대전화 및 태블릿의 경우 프로그레시브 웹 앱은 다음 브라우저와 앱 스토어를 사용하여 오프라인 기능으로 설치할 수 있습니다.
- iOS 및 iPadOS
- 서드 파티 브라우저(iOS/iPadOS 16.4부터), Safari(iOS 11.3부터), AppStore(iOS/iPadOS 14부터, 일부 제한사항 있음), 엔터프라이즈 배포를 위한 모바일 구성
- Android
- Firefox, Chrome, 삼성 인터넷, Microsoft Edge, Opera, Brave, Huawei Browser, Baidu, UCWeb, Play 스토어 (Chrome이 설치된 버전 72 또는 TWA와 호환되는 브라우저의 버전), Galaxy Store, 엔터프라이즈 배포용 Managed Play iframe
다음 동영상에서는 사용자가 브라우저 대화상자를 사용하고 홈 화면에 추가 메뉴를 사용하여 휴대기기의 브라우저에서 PWA를 설치합니다.
다른 기기
게임 콘솔(Microsoft 스토어를 사용하는 Xbox)이나 XR 기기(Microsoft Hololens, Facebook의 Oculus용 계획)와 같은 다른 소형 기기에서도 PWA를 지원합니다. 그러나 브라우저가 있는 나머지 기기는 일반적으로 다음과 같은 PWA를 허용하지 않습니다.
- 게임 콘솔
- 스마트 TV
- 스마트시계
- 자동차
PWA는 항상 모든 기기의 브라우저에서 작동하지만 기기마다 특정 제한사항이 적용됩니다. 여러 기기에서 작동하는 이 기능을 사용하면 정확히 동일한 배포된 앱을 사용하여 사용자가 한 기기에서 작업을 시작한 후 다른 기기에서 작업을 완료한 후 데이터를 동기화하여 멀티 디바이스 여정을 만들 수 있습니다.