X

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, 프로그레시브 웹 앱 소개
Categories: 디지털서비스
도리: