PWA(Progressive Web App)에 대해

 

 

PWA란 ?

PWA(Progressive Web App)이란 '웹 기술로 만드는 앱 같은 경험' 으로 핵심은 서비스 워커(Service Worker)와 웹 앱 매니페스트(Manifest)를 이용해 오프라인 동작, 설치(홈 화면 추가), 푸시 알림 등 실제 동작하는 기반은 웹이지만 네이티브스러운 기능을 제공한다는 것.

 

 

PWA의 핵심 구성

• HTTPS : 보안 컨텍스트 필수 (서비스 워커 구동 조건)
• Service Worker : 네트워크 프록시처럼 동작. 캐싱/오프라인/백그라운드 처리 담당
• Web App Manifest : 앱 이름, 아이콘, 시작 URL, 화면 모드 등 설치 메타데이터

 

 

PWA의 장점

1. 배포 / 릴리즈가 빠름
   구글플레이 스토어나 앱스토어 심사없이 웹 배포로 가능함으로써 즉시 업데이트 반영 (CI/CD 효율성 극대화)
   
   
2. 링크로 공유 가능하며 설치 장벽이 낮음
   URL만 있으면 접근, 설치(홈 화면 추가)가 용이하며 마케팅이나 SEO 측면에서 유리
   
   
3. 오프라인 / 저품질 네트워크 대응
   서비스 워커 캐싱으로 콜드스타트 / TTI 개선, 네트워크 불안정 지역에 강함
   ※ 콜드 스타트(Cold Start) : 사용자가 앱/웹을 처음 실행할 때 화면이 렌더링 되기까지 걸리는 시간
   ※ TTI (Time To Interactive) : 화면은 보이지만 실제로 버튼/링크 같은 상호작용이 가능해지기 까지 걸리는 시간 (ex. 네트워크 지연이 길면 TTI가 늘어남)
   
   
4. 멀티 플랫폼 단일 코드베이스
   웹 기반이기 때문에 브라우저가 깔린 곳이면 똑같거나 비슷한 코드로 동작 (비용 절감)
   
   
5. 보안 모델 (HTTPS + SOP + CSP)과 업데이트 통제
   서버 주도 업데이트, 롤백/그레이드 배포 전략 적용 용이
   ※ SOP (Same Origin Policy) : 한 도메인(https://myapp.com)에서 실행된 JS는 다른 도메인(https://other.com)의 리소스에 직접 접근 불가
   ※ CSP (Content Security Policy) : 웹 페이지에서 실행 가능한 리소스를 지정하는 보안 헤더
   
   
6. 스토리지/기능 점진적 확장
   IndexexDB, Cache API, Background Sync(지원 플랫폼에서), WebShare, File System Access, 웹 푸시 등

 

 

PWA의 단점

1. 디바이스 / OS API 접근 제한
   블루투스, NFC, 백그라운드 작업, 알람·위젯, 장시간 백그라운드 실행 등은 브라우저·OS별 지원 편차 큼 (특히 iOS)
   
   
2. 스토어 노출 / 브랜딩 이슈
   기본은 웹 배포라 앱스토어 검색/평점 생태계의 이점을 바로 누리기 어려움
   
   
3. 웹 뷰 / 브라우저 성능, 자원 한계
   3D 그래픽 환경이나 초저지연 하드웨어 처리는 네이티브가 유리. 메모리/쓰레드 제약, 백그라운드 정책도 제약적
   
   
4. 서비스 워커 복잡도
   캐시 무효화, 버전 관리, 부분 배포 전략을 잘못 설계하면 업데이트 안되는 이슈 발생 가능성

 

 

Native / Hybrid / Cross Platform 과의 차이

• Native : IOS(Swift, Objective-C), Android(Kotlin, Java)로 각 OS SDK에 맞게 사용
  하드웨어에 밀접하고(3D, 미디어, 센서 등) 고성능 설계 가능(렌더링, 스레드, 메모리, 백그라운드 제어, 최적화 등), 성능, API, UX는 최고, 비용과 출시 속도는 불리
  
  
• Hybrid : 웹 뷰 안에 웹을 띄우고 얇은 네이티브 셸로 포장
  근접 성능, 광범위 API, 생산성과 품질의 균형
  
  
• CrossPlatform Native : RN/Flutter 등 네이티브 위젯을 사용 (웹 뷰 의존성 적음)
  카메라, 블루투스, NFC 백그라운드 위치 등 디바이스 기능 사용가능, 구현은 빠르지만 웹 뷰 제약, 성능 편차
  
  
• PWA : 브라우저 기반, 설치/오프라인/푸시 등을 웹 표준으로 제공
  진입장벽 낮음, 배포, SEO/공유, 오프라인 강점, OS API/스토어 노출은 제약.

 

 

 

항목	PWA	하이브리드(WebView)	크로스플랫폼 (RN/Flutter)	네이티브
UI 렌더링	웹(브라우저/웹뷰)	웹(앱 내 웹뷰)	네이티브 위젯/자체엔진	네이티브 위젯
스토어 배포	기본 아님(웹 링크) / Play에 TWA 가능	앱스토어/플레이	앱스토어/플레이	앱스토어/플레이
디바이스 API	제한/편차 큼	플러그인으로 확장 가능	대부분 플러그인/브릿지 풍부	풀액세스
성능	보통(웹 성능 한계)	웹뷰 오버헤드 존재	좋음(대부분 네이티브에 근접)	최고
업데이트	웹 즉시 반영	스토어 + 일부 동적 로딩	스토어 + OTA(CodePush 등)	스토어 심사
SEO/링크	매우 강함	약함(앱 내부)	약함	약함
개발비용/속도	낮음~중간	낮음~중간	중간~높음	높음
오프라인	SW 캐시로 우수	가능(별도 구현)	가능(프레임워크별)	가능