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