프로그레시브 웹 앱 (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개월 동안 매월 97% 의 비율로 PWA 설치 수가 증가했습니다.
Corel Corporation의 Gravit Designer는 풍부하고 저렴하며 접근성이 높은 벡터 일러스트 소프트웨어를 필요로 하는 수만 명의 일일 활성 사용자에게 서비스를 제공하는 강력한 데스크톱 클래스 벡터 디자인 도구입니다. PWA를 사용자의 설치 옵션으로 추가했으므로 다른 플랫폼 및 설치 옵션에 비해 PWA 사용자의 활동량이 24% 더 많고, 재사용자는 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 엔진으로 구동되는 브라우저에서는 보유한 많은 기능이 누락되었습니다.
가운데에는 Firefox 및 Gecko 엔진도 있습니다. 이 엔진에는 Android의 PWA 사양이 더 많이, 데스크톱에는 더 적은 설치 기능이 포함되어 있습니다.
제한 사항으로는 푸시 알림의 부족, 통합 API (예: 웹 블루투스 또는 WebNFC), 사용자가 앱 환경을 얻기 위해 현재 웹사이트를 설치할 수 있음을 알 수 있도록 하는 설치 프로모션 기술의 부족 등이 있습니다. 또한 구현된 기능에도 몇 가지 버그가 있습니다.
모든 웹 개발과 마찬가지로 PWA를 출시하고 주요 새 브라우저 또는 OS 버전이 출시될 때 모든 플랫폼에서 환경을 테스트해야 합니다. 기능을 사용할 수 없는 경우 항상 대체 솔루션이나 대체 환경을 제공해야 합니다.
PWA 인지도
PWA 개발자는 비즈니스 및 사용자 측면에서 모두 인식 문제를 겪을 수 있습니다. 일부 비즈니스 소유자는 PWA에 대해 모르거나 프로그레시브 웹 앱의 기능과 과제에 대한 오해를 가질 수 있습니다.
PWA를 게시할 때 다음 과제는 웹사이트를 설치할 수 있고 설치된 앱 환경으로 이어지는 것을 사용자가 이해하도록 하는 것입니다.
설치는 iOS 및 iPadOS와 같은 일부 플랫폼에서 더 중요하며 UX 디자이너가 사용자에게 앱 설치 방법을 설명하는 화면을 포함하는 경우도 있습니다.
호환성
프로그레시브 웹 앱은 웹 앱일 뿐이므로 콘텐츠와 서비스는 표준 사양 및 프로토콜에 따라 실행됩니다. 따라서 PWA는 기술적으로 웹이 실행되는 모든 곳에서 실행되므로 플랫폼이 'PWA 사양'과 호환될 필요는 없습니다.
그러나 PWA 및 호환성에 관해 이야기할 때는 일반적으로 브라우저와 온라인 전용 컨텍스트의 경계를 넘나드는 기능(아이콘 설치 및 오프라인 지원)을 생각합니다.
기본 웹 플랫폼 지원 외에 아이콘 설치 및 오프라인 기능과 같은 기본 앱 기능에 대한 지원도 확인해 보겠습니다.
97 %
오프라인 지원 브라우저
88 %
웹 사용자가 PWA를 설치할 수 있음
데이터 출처: StatCounter 및 Can I Use.
데스크톱 및 노트북
다중 인증 기기 시대에 데스크톱 기기가 무엇인지 알기란 쉽지 않습니다. 그러나 최소한 운영체제 관점에서 이러한 브라우저 및 스토어는 PWA 설치 및 오프라인 기능과 호환됩니다.
- Windows 10 및 11
- Chrome (버전 73), Microsoft Edge (버전 79), Microsoft Store
- ChromeOS
- 내장된 Chrome 브라우저 (버전 72), Play 스토어 (버전 85)
- macOS, Linux, Windows 7 및 8.x
- Chrome (버전 73 이상), Microsoft Edge
다음 동영상에서 사용자는 데스크톱 컴퓨터의 브라우저에서 PWA를 설치한 다음 독립형 창이 있는 다른 앱과 마찬가지로 PWA에 액세스합니다.
휴대기기
휴대전화 및 태블릿과 관련하여 프로그레시브 웹 앱은 다음 브라우저와 앱 스토어를 사용하여 오프라인 기능이 포함된 설치가 가능합니다.
- iOS 및 iPadOS
- Safari (iOS 11.3 이후), AppStore (iOS/iPadOS 14부터, 일부 제한사항이 있음), 엔터프라이즈 배포를 위한 모바일 구성
- Android
- Firefox, Chrome, Samsung Internet, Microsoft Edge, Opera, Brave, Huawei Browser, Baidu, UCWeb, Play 스토어 (Chrome이 설치된 버전 72 또는 TWA와 호환되는 브라우저), Galaxy Store, 엔터프라이즈 배포용 Managed Play iframe
다음 동영상에서 사용자는 브라우저 대화상자와 홈 화면에 추가 메뉴를 사용하여 휴대기기의 브라우저에서 PWA를 설치합니다.
다른 기기
게임 콘솔 (Microsoft Store를 통한 Xbox) 또는 XR 기기 (Microsoft Hololens, Facebook Oculus 계획)와 같은 기타 소형 기기에서는 PWA를 지원합니다. 하지만 브라우저가 있는 나머지 기기는 일반적으로 PWA를 허용하지 않습니다. 여기에는 다음이 포함됩니다.
- 게임 콘솔
- 스마트 TV
- 스마트시계
- Cars
PWA는 항상 특정 제한사항이 있는 모든 기기의 브라우저에서 작동합니다. 여러 기기에서 작동하는 이 기능을 사용하면 사용자가 한 기기에서 작업을 시작한 후 다른 기기에서 완료할 수 있으며, 완전히 동일한 배포된 앱으로 데이터를 여러 기기 간에 동기화할 수 있는 다중 기기 여정을 만들 수 있습니다.