프로그레시브 웹 앱 (PWA)은 단일 코드베이스로 모든 기기의 모든 웹 사용자에게 도달하는 동시에 향상된 기능을 제공하기 위해 최신 API로 빌드되고 향상된 웹 앱입니다. 이러한 앱은 웹 앱의 광범위한 도달범위와 플랫폼별 앱의 다양한 기능을 결합하여 사용자 환경을 개선합니다.
PWA 디자인의 3가지 핵심 요소
플랫폼별 애플리케이션으로 사용하기에 좋은 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는 세션당 페이지 수 65% 증가, 트윗 수 75% 증가, 이탈률 20% 감소로 이어졌으며 앱 크기는 97% 이상 감소했습니다.
- Nikkei는 PWA로 전환한 후 자연 트래픽이 2.3배, 정기 결제는 58%, 일일 활성 사용자는 49% 증가했습니다.
- Hulu는 플랫폼별 데스크톱 환경을 PWA로 교체하고 재방문율이 27% 증가하는 효과를 봤습니다.
PWA 사용의 이점에 관한 자세한 내용은 프로그레시브 웹 앱으로 비즈니스 성공을 이끄는 방법을 참고하세요.