2024년 5월 27일
PWA (Progressive Web App)
1. PWA (Progressive Web App)의 개념 및 특징
| 개념 | 특징 |
|---|---|
| 웹 브라우저에서 Native App 같은 사용자 경험을 제공하기 위해 서비스워커, 매니페스트 기반 표준 패턴을 사용하는 Web App 기술 | – Native App 같은 사용자 경험 제공 – 웹 브라우저에서 바로 실행 – 프리캐시 기반 페이지 표시 속도 향상 – https 기반 보안 강화, 푸시알림 기능 |
- 2015년 Google Chrome 엔지니어 알렉스 러셀(Alex Russel)이 점진적(progressive)으로 네이티브 앱 수준으로 근접해가는 웹이라는 개념을 처음 제시하였고, 이듬해 2016년 Google I/O 개발자 콘퍼런스에서 PWA를 미래의 웹 앱으로 소개
2. PWA의 아키텍처 및 핵심 기술
(1) PWA의 아키텍처
 |
(2) PWA의 핵심 기술
| 구분 | 핵심 기술 | 주요 기능 |
|---|---|---|
| 사용자 경험 | Web App Manifest | – App 메타데이터(아이콘, 이름 등) 포함 JSON 파일 – App이 설치된 것처럼 인식 및 홈 화면에 추가 |
| Responsive Design | – 다양한 화면 크기와 장치에서 최적의 사용자 경험을 제공하는 반응형 디자인 지원 | |
| App Shell Architecture | – App의 기본 구조(HTML, CSS 등)를 빠르게 로드 – 콘텐츠를 동적으로 가져와 페이지 로딩 시간 단축 | |
| 오프라인 사용 | Service Workers | – 백그라운드에서 실행되며 네트워크 요청을 캐싱하여 오프라인 상태 어플리케이션 작동 |
| IndexedDB | – 로컬 데이터베이스로, 오프라인 상태에서도 데이터를 저장하고 검색 | |
| Background Sync | – 네트워크 연결 단절 상태 데이터 송수신 – 네트워크 재연결 시 동기화 수행 | |
| 보안 및 알림 | HTTPS | – SSL/TLS 인증서 기반 안전한 연결을 보장 |
| Push Notifications | – 사용자가 어플리케이션과 상호작용하지 않을 때에도 알림을 통해 사용자와 소통 |
- PWA의 핵심 기술을 통해 네이티브 앱처럼 동작하면서 웹의 유연성과 접근성을 최대한 활용하여 개발 및 배포 비용/시간을 절감하고 높은 수준의 사용자 경험 제공
3. PWA와 Native App, Web App과의 차이점
| 비교 항목 | PWA | Native App | Web App |
|---|---|---|---|
| 동작 위치 | 웹 브라우저 | 디바이스에 설치된 App | 웹 브라우저 |
| 개발 언어 | 공통 (HTML, CSS, JavaScript) | 안드로이드(Java), iOS(Swift) 등 플랫폼 별 지원 언어 | 공통 (HTML, CSS, JavaScript) |
| 기능 제공 범위 | 브라우저 제공 기능으로 제한 | 디바이스 고급 기능 사용 가능 | 브라우저 제공 기능으로 제한 |
| 플랫폼 호환성 | 크로스 플랫폼 | 플랫폼 간 호환 불가 | 크로스 플랫폼 |
| 오프라인 사용 | 오프라인 사용 가능 | 오프라인 사용 가능 | 오프라인 사용 불가 |
| 로딩 속도 | 캐시 기반 속도 향상 | 고속 로딩 가능 | 로딩 속도 느림 |
| 용도 | 간단/신속한 App 배포 | 센서 등 고급 기능 사용 | 일반 웹 페이지 서비스 |
- Web App은 개발 비용 절감 및 여러 플랫폼으로 제공 가능하지만 기능적으로 한계가 있고, Native App은 높은 성능과 사용자 경험을 제공하지만 개발 비용이 높으며, PWA는 개발 및 배포가 용이하고 높은 성능과 사용자 경험을 제공하지만 Native App에 비해 기능적인 한계가 있어, 용도에 따라 적절한 기술을 사용하는 것이 필요
[참고]
- Lillo Blog, 프로그레시브 웹 앱(PWA)의 정의/장점/차이
- Microsoft, Get started with Progressive Web Apps
- MDN Web Docs, 프로그레시브 웹 앱 소개
About The Author
