[PWA] 웹을 앱처럼 만드는 기술

PWA(Progressive Web App) 

현대 웹 개발에서는 앱처럼 동작하는 웹앱의 수요가 높아지고 있습니다. 특히 모바일 사용자의 비중이 커짐에 따라, 설치 없이도 빠르고 유연하게 접근할 수 있는 기술이 주목받고 있는데요, 그 대표주자가 바로 PWA(Progressive Web App)입니다.

PWA는 사용자가 브라우저를 통해 접속한 웹사이트를 네이티브 앱처럼 설치하고, 오프라인에서도 동작하게 만들며, 푸시 알림과 같은 기능도 제공할 수 있습니다.

 

---

1.  PWA(Progressive Web App)란?

PWA(Progressive Web App)는 웹 기술로 만든 앱 같은 경험을 제공하는 웹 애플리케이션입니다. 쉽게 말해, 웹에서 동작하지만 네이티브 앱처럼 보이고 작동하는 웹앱입니다.

사용자는 브라우저에서 웹사이트를 열고 이를 모바일 홈 화면에 설치할 수 있으며, 인터넷 연결이 끊긴 상황에서도 제한적으로 사용할 수 있는 등, 기존 웹앱의 한계를 넘어서는 기능을 제공합니다.

"웹앱 + 네이티브 앱의 장점만 모은 새로운 형태의 앱 구조"

PWA의 핵심 특징

1. 설치 가능 : 브라우저에서 직접 설치, 앱스토어 불필요
2. 오프라인 지원 : 네트워크가 끊겨도 일부 기능 사용 가능
3. 푸시 알림 지원 : 모바일 앱처럼 알림 전송 가능
4. 빠른 로딩 : 캐시를 적극 활용해 성능 향상
5. 반응형 UI : 모든 기기에서 적절히 동작
6. HTTPS 필수 : 보안 연결이 요구됨 (Service Worker의 조건)

PWA의 장점과 단점

장점	단점
설치 없이 앱처럼 사용 가능	iOS에서는 제한된 지원
네트워크에 의존하지 않음	복잡한 캐시 제어 로직 필요
배포가 빠르고 앱스토어 심사 없음	하드웨어 기능 접근 제한 (BLE, NFC 등)
성능 최적화 쉬움	브라우저마다 UX가 다를 수 있음

왜 PWA를 사용할까?

기존 웹앱 문제점	PWA 도입 시 개선
브라우저 기반, 설치 불가	홈 화면에 앱으로 설치 가능
네트워크 없으면 사용 불가	오프라인 상태에서도 제한적 동작 가능
느린 초기 로딩	캐싱으로 초기 로딩 속도 개선
푸시 알림 불가	웹 푸시로 사용자 재접근 가능

 

---

2.  PWA의 핵심 구성 요소

a.  웹 앱 매니페스트 (Web App Manifest)

• 웹앱을 설치 가능한 앱처럼 보이게 만드는 JSON 파일입니다.

// manifest.json
{
  "name": "My PWA App",
  "short_name": "PWAApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

• HTML에 다음과 같이 연결합니다.

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

 

b.  서비스 워커 (Service Worker)

• 브라우저와 네트워크 사이에서 동작하는 프록시 역할을 합니다.
• 캐싱, 오프라인 기능, 푸시 알림 등을 제공합니다.
• 백그라운드에서 실행되며, JS로 작성합니다.

// service-worker.js
self.addEventListener('install', (event) => {
  console.log('서비스 워커 설치됨');
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll(['/index.html', '/main.css']);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

 

• 등록은 main JS 파일에서 진행합니다.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

c.  HTTPS 환경

• PWA는 반드시 HTTPS에서만 동작합니다. 로컬에서는 localhost가 예외적으로 허용됩니다.

 

---

3.  PWA 설치 UX

브라우저는 특정 조건이 충족되면 사용자가 앱을 설치할 수 있도록 자동으로 안내합니다.
예: 크롬에서는 주소창 오른쪽에 + 버튼이 나타나거나, beforeinstallprompt 이벤트를 감지할 수 있습니다.

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault(); // 자동 팝업 방지
  // 사용자에게 설치 버튼 제공
});

 

---

4.  PWA 지원 브라우저

• Chrome (Android, Desktop)
• Edge
• Safari (기능 일부 제한 있음)
• Firefox (설치 UI 미지원, 일부 기능만)

 

---

5.  PWA로 만들어진 실제 서비스 예시

• Twitter Lite
• Spotify Web App
• Pinterest
• Google Maps Go

 

---

6.  마무리

PWA는 웹의 유연성과 앱의 기능성을 결합한 혁신적인 웹앱 기술입니다. 웹사이트를 네이티브 앱처럼 설치하고, 오프라인에서도 작동하게 만들며, 사용자 경험을 한층 끌어올릴 수 있습니다.
React, Vue 등의 SPA 프레임워크와도 궁합이 잘 맞아 점점 더 많은 기업이 도입하고 있습니다.

함께 보면 좋은 자료

외부 사이트 :

• MDN Web Docs - PWA (Progressive Web App)

블로그 글 :

[웹앱] 웹 애플리케이션의 개념과 특징

[SPA] 하나의 HTML로 모든 페이지를 만든다?

[하이브리드 앱] 웹앱과 네이티브 앱의 장점을 결합한 앱 개발 방식

 

---