프로그레시브 웹 앱(PWA) 만들기: 오프라인에서도 동작하는 웹사이트 구축 가이드

**PWA(Progressive Web Apps, 프로그레시브 웹 앱)**는 웹사이트와 네이티브 앱의 장점을 결합한 기술로, 빠른 로딩 속도, 오프라인 동작, 푸시 알림, 홈 화면 추가 기능 등을 제공합니다.

이 글에서는 PWA의 개념, 주요 특징, 서비스 워커(Service Worker) 설정, 오프라인 캐싱 구현, 설치 가능 앱(App Manifest) 구성 방법까지 상세히 설명합니다.

---

1. PWA란? 그리고 왜 중요한가?

PWA(Progressive Web App)란?

PWA는 웹사이트를 네이티브 앱처럼 동작하도록 만드는 기술입니다.
사용자는 웹사이트를 앱처럼 설치하고, 오프라인에서도 사용할 수 있으며, 푸시 알림도 받을 수 있습니다.

PWA의 핵심 기능

✅ 빠른 로딩 속도 → 캐싱을 활용하여 네트워크가 느려도 빠르게 로드
✅ 오프라인 지원 → 인터넷이 없어도 콘텐츠 제공 가능
✅ 푸시 알림 지원 → 사용자 참여(Engagement) 증가
✅ 홈 화면 추가 가능 → 앱처럼 실행 가능
✅ 모든 플랫폼 지원 → iOS, Android, 데스크톱에서 동작

✅ PWA는 어디에 적합할까?

• 블로그, 뉴스 사이트
• 이커머스(쇼핑몰)
• 생산성 도구(메모 앱, 캘린더 등)
• 오프라인 사용이 필요한 서비스

---

2. PWA의 주요 구성 요소

PWA는 크게 3가지 핵심 요소로 구성됩니다.

구성 요소	설명
서비스 워커(Service Worker)	오프라인 캐싱, 백그라운드 동작, 푸시 알림 처리
웹 앱 매니페스트(Web App Manifest)	앱 아이콘, 이름, 홈 화면 추가 정보 제공
HTTPS 보안 환경	보안 강화를 위해 PWA는 반드시 HTTPS에서 동작해야 함

---

3. PWA 기본 설정: 웹 앱 매니페스트(Manifest) 추가하기

웹 앱 매니페스트는 PWA를 모바일 앱처럼 설치할 수 있도록 정의하는 JSON 파일입니다.

1) manifest.json 파일 생성

다음 JSON 파일을 프로젝트 루트 디렉터리에 추가합니다.

json

{ "name": "내 PWA 앱", "short_name": "PWA 앱", "start_url": "/index.html", "display": "standalone", "background_color": "#ffffff", "theme_color": "#007bff", "icons": [ { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] } 

✅ 설명

• "name" → 앱의 전체 이름
• "short_name" → 앱의 축약 이름 (홈 화면에서 표시됨)
• "start_url" → 앱이 실행될 때 시작할 페이지
• "display": "standalone" → 브라우저 없이 앱처럼 실행
• "icons" → 앱 아이콘 정보

---

2) manifest.json을 index.html에 연결하기

html

<link rel="manifest" href="manifest.json"> 

✅ 결과: 사용자가 사이트를 방문하면 "홈 화면에 추가(Add to Home Screen)" 옵션이 표시됨.

---

4. PWA의 핵심: 서비스 워커(Service Worker) 설정

**서비스 워커(Service Worker)**는 백그라운드에서 실행되며, 네트워크 요청을 가로채고 캐싱을 처리하는 역할을 합니다.
이를 통해 오프라인에서도 웹사이트를 사용할 수 있도록 구현할 수 있습니다.

1) service-worker.js 파일 생성

javascript

const CACHE_NAME = "pwa-cache-v1"; const STATIC_ASSETS = [ "/", "/index.html", "/styles.css", "/app.js", "/icons/icon-192x192.png", "/icons/icon-512x512.png" ]; // 서비스 워커 설치 및 캐싱 self.addEventListener("install", (event) => { event.waitUntil( caches.open(CACHE_NAME).then((cache) => { return cache.addAll(STATIC_ASSETS); }) ); }); // 네트워크 요청 가로채기 (오프라인 지원) self.addEventListener("fetch", (event) => { event.respondWith( caches.match(event.request).then((cachedResponse) => { return cachedResponse || fetch(event.request); }) ); }); // 캐시 정리 (새로운 버전이 배포되면 오래된 캐시 삭제) self.addEventListener("activate", (event) => { event.waitUntil( caches.keys().then((keys) => { return Promise.all( keys.map((key) => { if (key !== CACHE_NAME) { return caches.delete(key); } }) ); }) ); }); 

✅ 설명

1. 설치(install) 단계: 정적 파일을 캐시에 저장
2. 가져오기(fetch) 단계: 네트워크 요청을 가로채고 캐시에서 응답
3. 활성화(activate) 단계: 오래된 캐시 삭제

---

2) 서비스 워커 등록 (app.js 파일에서 실행)

app.js 파일을 생성하고, 다음 코드를 추가합니다.

javascript

if ("serviceWorker" in navigator) { navigator.serviceWorker.register("/service-worker.js") .then(() => console.log("서비스 워커 등록 완료")) .catch((error) => console.log("서비스 워커 등록 실패:", error)); } 

✅ 결과:
📌 service-worker.js가 등록되면 오프라인에서도 페이지가 동작합니다.

---

5. PWA 테스트 및 디버깅

PWA가 정상적으로 동작하는지 확인하려면 Chrome DevTools를 활용할 수 있습니다.

1) PWA 테스트 방법

1. Chrome 개발자 도구(F12) → "Application" 탭 → "Manifest"
   • manifest.json이 정상적으로 로드되는지 확인
2. "Service Workers" 탭에서 "Offline" 체크박스 선택
   • 인터넷 연결을 끊어도 웹사이트가 정상적으로 동작하는지 확인
3. Lighthouse 테스트 실행 (Chrome DevTools → "Lighthouse")
   • "Progressive Web App"을 선택하고 분석 실행

✅ 결과:

• manifest.json이 정상적으로 등록되었는지 확인
• 오프라인 모드에서 PWA가 정상 작동하는지 테스트

---

6. PWA 배포: HTTPS 환경 필수

PWA는 HTTPS 환경에서만 동작합니다.
Netlify, Vercel, GitHub Pages, Firebase Hosting 같은 무료 HTTPS 호스팅을 활용하면 쉽게 배포할 수 있습니다.

1) Netlify에 배포하는 방법

1. Netlify 가입 후 GitHub 저장소 연결
2. "Deploy Site" 클릭
3. HTTPS가 자동 적용됨

✅ 결과:
PWA 기능이 활성화된 웹사이트가 배포됨! 🚀

---

결론

PWA를 적용하면 빠른 속도, 오프라인 지원, 앱처럼 동작하는 웹사이트를 만들 수 있습니다.
📌 manifest.json을 설정하여 홈 화면 추가 기능 제공
📌 service-worker.js를 활용해 오프라인에서도 동작하도록 구현
📌 HTTPS 환경에서 PWA를 배포하여 안전한 연결 유지

이제 PWA를 적용하여 네이티브 앱처럼 동작하는 웹사이트를 만들어보세요!