프로그레시브 웹 앱 (PWA)은 단일 코드베이스로 모든 기기의 모든 웹 사용자에게 도달하면서도 향상된 기능을 제공할 수 있도록 최신 API로 빌드되고 개선된 웹 앱입니다. 웹 앱의 광범위한 도달범위와 플랫폼별 앱의 다양한 기능을 결합하여 사용자 환경을 개선합니다.
PWA 디자인의 세 가지 핵심 요소
플랫폼별 애플리케이션만큼 사용하기 좋은 PWA를 만들려면 기능이 풍부하고 안정적이며 설치 가능하도록 설계해야 합니다.
가능
웹 애플리케이션의 기능은 그 어느 때보다 강력하며 이러한 기능은 계속해서 증가하고 있습니다. 최근에는 웹용 소프트웨어가 플랫폼별 앱에서만 액세스할 수 있었던 기능을 개발하기 시작했습니다. 예를 들어 이제 WebRTC, 위치정보, 푸시 알림을 사용하여 초지역적 화상 채팅 앱을 빌드한 다음 해당 앱을 설치 가능하게 만들고 WebGL 및 WebVR을 사용하여 대화를 가상 현실로 이동할 수 있습니다. WebAssembly가 도입됨에 따라 개발자는 C, C++, Rust와 같은 다른 생태계를 활용하고 이전에는 플랫폼에만 국한되었던 수십 년간의 기능을 웹으로 가져올 수 있습니다. 개발자가 웹의 새로운 기능을 활용하는 좋은 예는 웹 기반 이미지 압축기인 Squoosh.app입니다.
일부 기능은 아직 웹에서 사용할 수 없지만, 새 API와 예정된 API를 통해 파일 시스템 액세스, 미디어 컨트롤, 앱 배지, 전체 클립보드 지원과 같은 기능을 웹에서 사용할 수 있는 범위가 계속 확대되고 있습니다. 이러한 모든 기능은 웹의 안전하고 사용자 중심적인 권한 모델을 사용하여 빌드되므로 사용자를 안전하게 보호하고 새로운 웹사이트를 덜 부담스럽게 사용할 수 있습니다.
안정성
안정적인 프로그레시브 웹 앱은 네트워크에 관계없이 빠르고 신뢰할 수 있습니다. 사용자는 상호작용에 빠르게 반응하고 신뢰할 수 있는 환경을 제공하는 앱을 사용할 권리가 있습니다.
속도는 사용자가 환경을 사용하도록 유도하는 데 매우 중요합니다. 실제로 페이지 로드 시간이 1초에서 10초로 증가하면 사용자가 이탈할 확률이 123%증가합니다.
성능 문제는 onload 이벤트뿐만 아니라 전체 사용자 환경에 영향을 미칩니다. 신뢰할 수 있는 환경에서는 사용자가 앱과의 상호작용이 등록되었는지 여부를 궁금해하지 않습니다. 스크롤과 애니메이션이 부드러워야 합니다. 사용자는 앱이 실제로 잘 작동해야 하는 것만큼 앱이 잘 작동한다고 인식해야 합니다.
안정적인 앱은 네트워크 연결과 관계없이 사용할 수 있어야 합니다. 사용자는 느리거나 불안정한 네트워크 연결에서 또는 오프라인 상태에서도 앱이 빠르게 로드되기를 기대합니다. 앱에서 서버로 요청을 보내는 데 문제가 있더라도 미디어 트랙이나 티켓, 일정 등 사용자가 상호작용한 가장 최근 콘텐츠를 사용할 수 있기를 기대합니다. 요청이 불가능한 경우 앱이 조용히 실패하거나 비정상 종료되는 대신 문제가 있다고 알려주기를 기대합니다.
설치 가능
PWA를 설치 가능하게 만들면 브라우저에서 독립형 창으로 이동하여 사용자가 PWA를 생각하고 상호작용하는 방식이 달라집니다. 설치된 PWA는 사용자의 홈 화면, 도크, 작업 표시줄 또는 앱 표시줄에서 실행할 수 있습니다. 사용자는 기기에서 이를 검색하고 앱 전환기로 전환할 수 있으므로 설치된 기기의 일부처럼 느껴집니다.
PWA를 설치하면 일반적으로 브라우저에서 예약된 키보드 단축키를 비롯한 새로운 기능을 사용할 수 있습니다. PWA는 다른 애플리케이션의 콘텐츠를 수락하거나 특정 파일 형식을 처리하는 기본 애플리케이션으로 등록할 수도 있습니다.
PWA에서 결과 가져오기
PWA를 실행하면 사용자 환경이 향상될 뿐만 아니라 또한 측정항목을 개선하고 서비스에서 얻는 가치를 높입니다. 대표적인 예는 다음과 같습니다.
- Twitter의 PWA는 앱 크기를 97% 이상 줄이면서 세션당 페이지 수를 65% 늘리고 트윗 수를 75% 늘렸으며 이탈률을 20% 줄였습니다.
- PWA로 전환한 후 Nikkei는 자연 트래픽이 2.3배 증가하고, 구독이 58% 증가했으며, 일일 활성 사용자 수가 49% 증가했습니다.
- Hulu는 플랫폼별 데스크톱 환경을 PWA로 대체한 후 재방문이 27% 증가했습니다.
PWA 사용의 이점에 대한 자세한 내용은 프로그레시브 웹 앱으로 비즈니스 성공을 이끄는 방법을 참고하세요.