PWA 프로그레시브 웹 앱

PWA(Progressive Web App)는 웹 기술로 구현하면서도 네이티브 앱과 유사한 경험을 제공하는 방식이다. 사용자는 앱 스토어를 거치지 않고 브라우저에서 홈 화면에 바로 추가할 수 있으며, Service Worker를 통한 오프라인 기능과 푸시 알림을 지원한다.

PWA 구현의 핵심은 manifest.json 파일이다. 앱 이름, 아이콘, 시작 URL, 디스플레이 모드(standalone으로 설정하면 브라우저 UI가 숨겨져 앱처럼 보임), 테마 색상 등을 정의한다. PWABuilder.com 같은 도구로 manifest 파일 유효성 검사와 생성을 도울 수 있다.

iOS에서는 표준 manifest 외에 추가 메타 태그가 필요하다. `apple-mobile-web-app-capable`, `apple-mobile-web-app-status-bar-style` 설정과 함께, iOS는 manifest의 아이콘을 무시하므로 `apple-touch-icon` 태그를 별도로 지정해야 한다. 스플래시 스크린은 디바이스별 정확한 해상도가 필요해 전용 생성 도구 활용이 권장된다.

cheerio와 같은 웹 크롤링 라이브러리를 함께 사용할 경우 CORS 문제가 발생할 수 있다. Vite 개발 환경에서는 `vite.config.ts`의 서버 프록시 설정으로, 배포 환경(Netlify 등)에서는 `netlify.toml`의 리다이렉트 규칙으로 각각 해결한다.

핵심 내용

  • PWA의 세 가지 핵심 기능: 홈 화면 추가, Service Worker 기반 오프라인 지원, 푸시 알림
  • `manifest.json`의 `display: standalone`으로 네이티브 앱 외관 구현
  • iOS는 manifest 아이콘을 인식하지 않아 `apple-touch-icon` 메타 태그 필수
  • CORS 문제는 개발·배포 환경에 맞는 프록시 설정으로 해결
  • 앱 스토어 배포 없이 URL 방문만으로 설치 유도 가능

관련 개념

  • 웹 아키텍처 — Service Worker는 브라우저 캐싱과 네트워크 계층에 위치
  • 딥링크 — PWA 홈 화면 추가와 딥링크는 모바일 접근성을 보완하는 두 전략
  • 웹 접근성과 WAI-ARIA — 네이티브 앱과 동등한 접근성을 PWA에서도 보장해야 함

출처

최종 업데이트: 2026-04-06 | 출처 1개