--- id: P-REINFORCE-WIKI-WEB-PWA title: "프로그레시브 웹 앱 (Progressive Web Apps, PWA)" category: Dev status: verified canonical_id: "" aliases: ["PWA", "Progressive Web Apps", "웹 앱 현대화"] duplicate_of: "" source_trust_level: A confidence_score: 1.0 tags: ["Web_Development", "PWA", "Service_Worker", "Mobile_Strategy", "User_Experience"] raw_sources: ["Datacollector_Export_2026-05-02"] last_reinforced: 2026-05-02 github_commit: "" --- # [[프로그레시브 웹 앱 (Progressive Web Apps, PWA)]] ## 1. 개요 프로그레시브 웹 앱(PWA)은 웹과 네이티브 앱의 장점을 결합한 고성능 웹 애플리케이션 아키텍처이다. 단일 코드베이스를 통해 다양한 플랫폼에서 실행되며, 오프라인 지원, 푸시 알림, 홈 화면 설치 등 네이티브 앱과 유사한 사용자 경험(UX)을 웹 기술로 제공한다. ## 2. 핵심 기술 및 특징 - **서비스 워커 (Service Workers)**: 백그라운드에서 실행되는 스크립트로 오프라인 캐싱, 데이터 동기화, 푸시 메시지 처리의 핵심 역할을 수행. - **앱 매니페스트 (Web App Manifest)**: 앱의 이름, 아이콘, 시작 URL 등을 정의하여 브라우저가 이를 설치 가능한 앱으로 인식하게 함. - **오프라인 우선 (Offline-First)**: 네트워크가 없는 환경에서도 기본 기능이 작동하도록 설계되어 사용자 이탈 방지. - **플랫폼 독립성**: iOS, Android, Desktop 등 OS에 구애받지 않고 브라우저 표준을 통해 배포 및 실행 가능. ## 3. 비즈니스 가치 - **비용 효율성**: 네이티브 앱 대비 개발 및 유지보수 비용을 30~50% 절감 가능. - **경량화**: 스타벅스 사례처럼 네이티브 앱(148MB)을 1MB 이하의 PWA로 전환하여 설치 및 로딩 장벽 제거. - **성능 개선**: 빠른 페이지 로딩을 통해 사용자 이탈률을 낮추고 활성 사용자 수(DAU) 증대 기여. ## 4. 트레이드오프 - **장점**: 개발 속도 향상, 앱 스토어 심사 불필요(웹 배포 시), 우수한 접근성. - **단점**: 하드웨어 API(블루투스, 근거리 센서 등) 접근 제약, iOS 등 일부 환경에서의 푸시 알림 제한, 앱 스토어 노출 부족 가능성. ## 5. 지식 연결 (Related) - [[Server_Side_Rendering]]: PWA의 초기 로딩 성능을 보완하기 위한 렌더링 전략. - [[Service_Worker_Deep_Dive]]: PWA의 심장부인 서비스 워커의 동작 원리. - [[Cross_Platform_Development]]: PWA와 네이티브 프레임워크(Flutter/RN) 간의 전략적 비교. ## 🧪 검증 상태 (Validation) - **정보 상태**: 검증 완료 (Verified) - **출처 신뢰도**: A - **검토 이유**: 비용 최적화와 사용자 경험을 동시에 만족시키는 현대 웹 앱의 표준 전략 정립.