프로그레시브 웹 앱이란?

웹은 놀라운 플랫폼입니다. 여러 기기와 운영체제에 걸쳐 보편적이 되어주는 기능, 사용자 중심 보안 모델, 사양이나 구현을 한 회사에서 제어하지 않는다는 사실로 인해 웹은 소프트웨어를 개발할 수 있는 고유한 플랫폼이 됩니다. Google Cloud의 고유한 연결성과 함께 어디서든 검색해서 발견한 정보를 모든 사람과 공유할 수 있습니다. 사용자가 웹사이트를 방문할 때마다 해당 사이트는 항상 최신 상태로 유지되며 이 사이트에 대한 경험은 원하는 대로 일시적일 수도 있고 영구적일 수도 있습니다. 웹 애플리케이션은 단일 코드베이스로 모든 사용자, 장소, 기기에 구애받지 않고 도달할 수 있습니다.

플랫폼별 애플리케이션은 매우 다양하고 안정적인 것으로 알려져 있습니다. 홈 화면, 도크, 작업 표시줄에 항상 표시됩니다. 네트워크 연결과 관계없이 작동합니다. 자체적인 독립형 환경에서 출시됩니다. 로컬 파일 시스템에서 파일을 읽고 쓰고 USB, 직렬 포트 또는 블루투스를 통해 연결된 하드웨어에 액세스하며 연락처 및 캘린더 일정과 같이 기기에 저장된 데이터와 상호작용할 수도 있습니다. 이러한 애플리케이션에서는 다른 앱에서 사진을 찍거나, 홈 화면에 나열된 노래를 재생하거나, 노래 재생을 제어하는 등의 작업을 할 수 있습니다. 플랫폼별 애플리케이션은 실행되는 기기의 일부처럼 느껴집니다.

높은 기능과 도달범위를 모두 갖춘 높은 기능을 갖춘 플랫폼별 앱, 도달범위가 높은 웹 앱, 프로그레시브 웹 앱의 상대적인 기능과 도달범위를 보여주는 그래프입니다.
플랫폼별 앱, 웹 앱, 프로그레시브 웹 앱의 기능과 도달범위 비교

기능 및 도달범위 측면에서 플랫폼별 앱과 웹 앱을 생각해보면 플랫폼별 앱이 최고의 기능을 나타내는 반면 웹 앱은 도달범위가 가장 뛰어납니다. 그렇다면 프로그레시브 웹 앱은 어떤 상황에 적합한가요?

프로그레시브 웹 앱 (PWA)은 최신 API로 빌드 및 개선되어 단일 코드베이스로 어디서나 모든 기기에게 도달하는 동시에 향상된 기능, 안정성, 설치 가능성을 제공합니다.

앱의 3가지 핵심 요소

프로그레시브 웹 앱은 기능과 안정성, 설치가 가능하도록 설계된 웹 애플리케이션입니다. 이 세 가지 핵심 요소는 앱을 플랫폼별 애플리케이션처럼 느끼는 경험으로 변환합니다.

사용 가능

오늘날 웹은 그 자체로 꽤 많은 기능을 수행합니다. 예를 들어 WebRTC, 위치정보 및 푸시 알림을 사용하여 초정밀 지역 영상 채팅 앱을 빌드할 수 있습니다. WebGL 및 WebVR을 사용하여 앱을 설치할 수 있도록 하고 대화를 가상으로 진행할 수 있습니다. WebAssembly가 도입되면서 개발자는 C, C++, Rust와 같은 다른 생태계를 활용하고 수십 년간의 작업과 기능을 웹에 가져올 수 있습니다. 예를 들어 Squoosh.app은 고급 이미지 압축에 이 함수를 사용합니다.

최근까지는 플랫폼에 특화된 앱만이 이러한 기능을 주장할 수 있었습니다. 일부 기능은 아직 웹의 범위를 벗어나지만 새로운 API와 향후 API에서는 이러한 변화를 모색하고 있으며, 파일 시스템 액세스, 미디어 제어, 앱 배지, 완전한 클립보드 지원과 같은 기능을 통해 웹에서 할 수 있는 작업을 확대하고 있습니다. 이 모든 기능은 웹의 안전한 사용자 중심 권한 모델을 기반으로 빌드되므로 사용자가 웹사이트에 접속하는 것이 두려워할 일이 없습니다.

최신 API, WebAssembly, 신규 및 향후 API 사이에서 웹 애플리케이션의 기능은 그 어느 때보다 뛰어나며 이러한 기능은 계속 증가하고 있습니다.

안정성

안정적인 프로그레시브 웹 앱은 네트워크와 관계없이 빠르고 안정적인 느낌을 줍니다.

사용자가 내 환경을 사용하도록 하려면 속도가 중요합니다. 실제로 페이지 로드 시간이 1초에서 10초로 늘어나면 사용자의 이탈 가능성이 123%증가합니다. onload 이벤트 후에도 성능이 중단되지 않습니다. 사용자는 상호작용(예: 버튼 클릭)이 등록되었는지 여부를 궁금해해서는 안 됩니다. 스크롤 및 애니메이션이 매끄럽게 느껴져야 합니다. 성능은 사용자가 애플리케이션을 인식하는 방식에서 실제로 작동하는 방식에 이르기까지 전체 사용자 환경에 영향을 미칩니다.

마지막으로 안정적인 애플리케이션은 네트워크 연결과 관계없이 사용할 수 있어야 합니다. 사용자는 느리거나 불안정한 네트워크 연결에서 또는 오프라인일 때도 앱이 시작될 것으로 기대합니다. 사용자는 서버에 요청을 받는 것이 어렵더라도 미디어 트랙이나 티켓, 일정과 같은 최신 콘텐츠를 계속 사용하고 사용할 수 있기를 기대합니다. 요청을 수행할 수 없을 때는 자동으로 실패하거나 다운되는 대신 문제가 있다는 알림을 받기를 기대합니다.

사용자는 눈 깜빡할 사이에 상호작용에 반응하는 앱과 신뢰할 수 있는 경험을 누릴 자격이 있습니다.

설치 가능

설치된 프로그레시브 웹 앱은 브라우저 탭이 아닌 독립형 창에서 실행됩니다. 사용자의 홈 화면, 도크, 작업 표시줄, 앱 표시줄에서 실행할 수 있습니다. 기기에서 앱을 검색하고 앱 전환으로 앱 간에 이동할 수 있으므로 설치된 기기의 일부인 것처럼 느껴집니다.

웹 앱이 설치된 후에 새로운 기능이 열립니다. 일반적으로 브라우저에서 실행될 때 예약되는 단축키를 사용할 수 있습니다. 프로그레시브 웹 앱은 다른 애플리케이션의 콘텐츠를 허용하거나 다양한 유형의 파일을 처리하는 기본 애플리케이션이 되도록 등록할 수 있습니다.

프로그레시브 웹 앱이 탭에서 나와 독립형 앱 창으로 이동하면 사용자의 생각과 상호작용 방식을 바꿉니다.

두 가지 방식의 장점을 모두 활용

프로그레시브 웹 앱은 단지 웹 애플리케이션입니다. 점진적인 개선을 통해 최신 브라우저에서 새로운 기능을 사용할 수 있습니다. 서비스 워커와 웹 앱 매니페스트를 사용하면 웹 애플리케이션을 안정적으로 설치할 수 있습니다. 새로운 기능을 사용할 수 없는 경우에도 사용자는 계속해서 핵심 환경을 이용할 수 있습니다.

수치는 거짓말하지 않습니다. 프로그레시브 웹 앱을 출시한 기업은 놀라운 결과를 얻었습니다. 예를 들어 Twitter는 세션당 페이지 수 65% 증가, 트윗 75% 증가, 이탈률 20% 감소를 달성했지만 앱 크기는 97% 이상 감소했습니다. Nikkei는 PWA로 전환한 후 자연 트래픽은 2.3배, 구독은 58%, 일일 활성 사용자는 49% 늘렸습니다. Hulu는 플랫폼별 데스크톱 환경을 프로그레시브 웹 앱으로 교체한 결과 재방문수가 27% 증가했습니다.

프로그레시브 웹 앱은 사용자가 좋아할 만한 웹 환경을 제공할 수 있는 특별한 기회를 제공합니다. 최신 웹 기능을 사용하여 향상된 기능과 안정성을 제공하는 프로그레시브 웹 앱을 사용하면 빌드한 항목을 단일 코드베이스로 누구나 어디서나 모든 기기에 설치할 수 있습니다.