PWA 최종 수정일 2026-06-19 01:51 조회수 13
홈 대시보드

PWA

#it#웹개발#모바일#웹앱#프론트엔드#pwa#serviceworker#ffffff#2196f3

기본 정보

개요

PWA(Progressive Web App)는 웹 기술(HTML, CSS, JavaScript)로 개발한 웹사이트를 네이티브 앱처럼 사용할 수 있도록 만든 기술이다.

사용자는 앱스토어를 거치지 않고 웹사이트를 홈 화면에 설치할 수 있으며, 오프라인 캐시, 푸시 알림, 전체 화면 실행 등 앱과 유사한 경험을 제공한다.

특히 기업 홈페이지, 쇼핑몰, 커뮤니티, ERP, SaaS 서비스에서 모바일 접근성을 높이기 위해 많이 활용된다.

PWA 구조

사용자

↓

브라우저

↓

PWA

├── HTML

├── CSS

├── JavaScript

├── Manifest

└── Service Worker

↓

REST API

↓

Server

주요 특징

  • 설치 가능
  • 오프라인 지원
  • 빠른 로딩
  • 앱과 유사한 UI
  • 푸시 알림 지원
  • 홈 화면 추가 가능
  • 자동 업데이트

동작 과정

웹사이트 접속

↓

Manifest 다운로드

↓

Service Worker 등록

↓

설치 가능

↓

홈 화면 추가

↓

앱처럼 실행

Manifest

PWA의 앱 정보를 정의하는 파일이다.

{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2196f3"
}

Service Worker

브라우저와 서버 사이에서 동작하는 스크립트이다.

주요 역할

  • 캐시 관리
  • 오프라인 지원
  • 백그라운드 동기화
  • 푸시 알림

Service Worker 등록

navigator.serviceWorker

.register(

"/service-worker.js"

);

캐시 구조

브라우저

↓

Service Worker

↓

Cache

↓

Network

↓

Server

네트워크가 없어도 캐시된 리소스를 사용할 수 있다.

설치 조건

일반적으로 다음 조건을 충족해야 한다.

  • HTTPS 사용
  • Manifest 파일 존재
  • Service Worker 등록
  • 적절한 아이콘 제공

Push Notification

Service Worker를 이용하여 푸시 알림을 보낼 수 있다.

활용 사례

  • 주문 알림
  • 채팅 알림
  • 이벤트 알림
  • 공지사항

오프라인 지원

인터넷이 끊겨도 캐시된 페이지를 사용할 수 있다.

예시

  • 뉴스 기사
  • 메모 앱
  • ERP 조회 화면
  • 쇼핑몰 상품 목록

PWA와 네이티브 앱 비교

PWA네이티브 앱
브라우저 기반OS 전용
설치 용량 작음용량 큼
앱스토어 등록 불필요앱스토어 등록 필요
업데이트 자동사용자 업데이트 필요
개발 비용 낮음플랫폼별 개발 필요
일부 OS 기능 제한OS 기능 모두 활용 가능

PWA와 웹사이트 비교

일반 웹PWA
설치 불가설치 가능
오프라인 미지원오프라인 지원
푸시 제한푸시 지원 가능
브라우저 UI 표시앱처럼 실행 가능

대표 활용 분야

  • 쇼핑몰
  • 커뮤니티
  • ERP
  • SaaS
  • 메모 앱
  • 뉴스 서비스
  • 프로젝트 관리
  • 예약 시스템

대표 기술

장점

  • 앱 설치 없이 사용 가능
  • 앱처럼 실행 가능
  • 개발 비용 절감
  • 유지보수 용이
  • 빠른 로딩
  • SEO 활용 가능

단점

  • 일부 운영체제 기능 제한
  • 플랫폼별 지원 범위 차이
  • 브라우저 정책 영향
  • 고성능 그래픽 처리에는 한계

실무 메모

실무에서는 다음과 같은 방식이 권장된다.

  • HTTPS 필수 적용
  • Service Worker 버전 관리
  • Cache First 전략과 Network First 전략 적절히 사용
  • Manifest 아이콘 다양하게 제공
  • Lighthouse로 PWA 점수 확인
  • 오프라인 페이지 제공
  • 푸시 알림 권한 최소 요청
  • IndexedDB 활용
  • 캐시 자동 갱신 구현
  • 앱 설치 유도 UI 제공

PWA와 함께 사용하는 기술

대표 개발 도구

  • Visual Studio Code
  • Chrome DevTools
  • Lighthouse
  • Workbox
  • Vite
  • npm

관련 문서

출처

  • web.dev Progressive Web Apps
  • MDN Web Docs - Progressive Web Apps
  • Google Developers PWA Guide

백링크

ManifestService Worker