프로그레시브 웹 앱 (Progressive Web App, PWA)

프로그레시브 웹 앱(Progressive Web App, PWA)은 HTML, CSS 또는 JavaScript와 같은 일반적인 웹 기술을 사용하여 개발되고, 네이티브 앱처럼 설치해 쓸 수 있는 웹 애플리케이션입니다. 브라우저에서 실행되지만 웹 앱 매니페스트(manifest)와 서비스 워커(service worker)를 갖추어 홈 화면 아이콘, 오프라인 동작, 푸시 알림 같은 앱의 기능을 제공합니다.

App Store나 Google Play를 거치지 않고도 브라우저에서 바로 설치해 앱의 기능을 쓸 수 있다는 것이 PWA의 장점입니다. 필요하면 앱 스토어에 등록해 배포할 수도 있습니다.

PWA를 이루는 요소

• HTML·CSS·JavaScript: 일반 웹사이트와 같은 기술로 콘텐츠, 레이아웃, 동작을 구현합니다.
• 웹 앱 매니페스트: 앱 이름, 아이콘, 시작 주소, 표시 방식(브라우저 주소창 없이 전체 화면 등)을 적은 JSON 파일입니다. 브라우저는 이 정보로 앱을 홈 화면이나 바탕 화면에 설치합니다.
• 서비스 워커: 페이지와 별도로 백그라운드에서 실행되는 스크립트로, 네트워크 요청을 가로채 캐시에서 응답하거나 푸시 알림을 받습니다. 오프라인 동작과 빠른 로딩이 여기서 나옵니다.
• HTTPS: 서비스 워커는 보안 연결(HTTPS)에서만 동작합니다.

예를 들어 보겠습니다

• 휴대폰으로 자주 보는 암호화폐 뉴스 웹사이트에 접속합니다.
• 브라우저가 “홈 화면에 추가”(앱 설치)를 제안합니다.
• 설치하면 일반 앱처럼 홈 화면에 아이콘이 생기고, 주소창 없는 별도 창으로 열립니다.
• 이제 앱 스토어에서 별도의 앱을 내려받지 않고도 최신 뉴스를 보고, 가격을 추적하고, 알림을 받을 수 있습니다.

PWA의 특징

• 크로스 플랫폼 호환성: 하나의 코드로 최신 브라우저가 있는 여러 기기와 운영 체제에서 작동합니다.
• 설치와 접근: URL로 바로 접속해 쓸 수 있고, 원하면 브라우저에서 설치할 수 있어 앱 스토어 심사와 다운로드 절차가 필요하지 않습니다.
• 오프라인 기능: 서비스 워커로 필요한 파일과 데이터를 캐시해 두면 오프라인 또는 낮은 네트워크 조건에서도 일부 기능을 쓸 수 있습니다. 예를 들어 마지막으로 불러온 포트폴리오 정보를 확인할 수 있습니다.
• 성능: 캐싱을 활용하면 빠르게 로드되도록 만들 수 있지만, 실제 성능은 구현에 따라 다릅니다.
• 푸시 알림: 가격 변동, 시장 업데이트 또는 보안 알림을 받을 수 있습니다. 다만 지원 범위는 운영 체제와 브라우저마다 다릅니다.
• 자동 업데이트: 서버의 파일이 바뀌면 다음 실행 때 새 버전이 적용되므로 사용자가 직접 업데이트할 필요가 없습니다.

PWA의 한계

• 기기 기능 접근 제한: PWA는 브라우저 샌드박스 안에서 실행되므로 네이티브 앱에 비해 Bluetooth, 고급 카메라 제어, 백그라운드 작업 같은 장치 기능을 충분히 쓰지 못할 수 있습니다.
• 브라우저 종속성: 쓸 수 있는 기능이 브라우저와 운영 체제의 지원에 크게 좌우되며, 구형 브라우저는 일부 기능을 지원하지 못합니다.
• 사용자 경험 제한: 일부 복잡한 애니메이션과 화면 전환은 네이티브 앱보다 덜 부드러울 수 있습니다.
• 앱 스토어 노출 제한: 앱 스토어를 통해 배포되지 않으면 사용자가 찾기 어려울 수 있습니다.
• 보안 측면: PWA는 브라우저의 보안 모델(샌드박스, 동일 출처 정책, HTTPS 필수)을 따르므로 기기 권한은 오히려 네이티브 앱보다 좁습니다. 다만 일반 웹사이트처럼 피싱 사이트가 정상 서비스의 PWA를 흉내 낼 수 있으므로, 설치 전에 주소(도메인)를 확인하는 것이 중요합니다.