[FE] PWA의 A to Z

웹 개발을 공부하면서 점점 모바일 앱 개발에 흥미를 가지게 되었다. 주력 스택이 React여서 React Native를 공부해야하나 고민하던 차에, 네이티브 앱과 유사한 사용자 경험을 제공하면서도 웹 기술만으로 구현할 수 있는 PWA(Progressive Web App)을 알게 되었다. 

 

개인적으로 여러 프로젝트에서 PWA를 적용해보았으며, 지금 진행중인 해커톤에서도 PWA를 적용해보았다. 이제는 어떤 프로젝트를 시작하든 PWA부터 적용하고 볼 정도로 PWA를 사랑하지만, 부끄럽게도 잘 알고 사용하지는 못했다. 일단 설치 버튼만 뜨면 만족하는 수준이었는데 이제는 PWA를 적용하는 것에 그치지 않고, 보다 깊이 이해하고 활용하기 위해 PWA의 전반적인 개념부터 핵심 기술까지 정리해보려고 한다. 

1. PWA(Progressive Web App)란

PWA(Progressive Web App)은 웹 기술을 활용하여 네이티브 앱과 유사한 사용자 경험을 제공하는 웹 어플리케이션이다.

구글이 처음 개념을 정립했으며, '진보적인 웹 애플리케이션' 이라는 이름처럼, 전통적인 웹 애플리케이션의 한계를 뛰어넘어 네이티브 앱과 같은 사용자 경험을 제공한다. PWA는 기존의 웹 애플리케이션과 달리 오프라인에서 작동할 수 있고, 푸시 알림과 홈 화면 바로가기 설치 등의 기능을 제공한다.

 

여타 웹 기술처럼, PWA는 기본적으로 HTML, CSS, Javascript를 기반으로 개발된다. 여기에 Service Worker, Web Manifes 등의 기술을 활용하여, 네이티브 앱과 같은 사용자 경험을 제공한다. 이러한 특성 덕분에 사용자는 별도의 앱 스토어에서 다운로드 하지도 않고도 웹사이트를 네이티브 앱처럼 사용할 수 있다.

 

PWA의 가장 큰 특징은 네이티브 앱과 유사한 기능을 제공하면서도 웹 애플리케이션의 장점을 그대로 유지한다는 점이다. PWA의 주요 특징은 다음과 같다.

 

오프라인 지원

PWA는 Service Worker를 이용하여, 네트워크 연결이 끊어진 상황에서도 기본적인 기능을 제공할 수 있다. 캐싱된 데이터를 사용하여 오프라인에서도 페이지를 로드할 수 있으며, 네트워크가 복구되면 데이터를 동기화할 수 있다.

 

백그라운드 동기화

네트워크 연결이 끊겼을 때 사용자가 입력한 데이터를 임시 저장하고, 연결이 복구되면 자동으로 서버와 동기화할 수 있다(SyncManager API 활용 가능)

navigator.serviceWorker.ready.then(reg => {
  return reg.sync.register('sync-event');
});

 

푸시 알림 지원

푸시 알림을 활용하여 사용자가 앱을 실행하지 않아도 알림을 받을 수 있다. Web Push API를 사용하여 구현되며, 사용자 리텐션을 높이는 데 중요한 역할을 한다.

 

저장 공간 관리

캐시 사용량이 많아지면 브라우저가 이를 삭제할 수 있다. Storage API를 활용해 저장 공간을 효율적으로 관리할 필요가 있다.

 

앱 스토어 설치 불필요

PWA는 별도의 앱 스토어를 거치지 않고 브라우저에서 직접 설치할 수 잇다. 사용자는 웹 사이트를 방문한 후 바로 홈 화면에 추가하여 네이티브 앱처럼 실행할 수 있다.

 

2. PWA의 핵심 기술

PWA를 구현하기 위해서는 몇 가지 핵심 기술을 적용해야 한다. 주요 요소는 다음과 같다.

 

Service Worker

Service Worker는 브라우저와 웹 서버 사이에서 네트워크 요청을 가로채고, 캐싱된 데이터를 활용하여 오프라인에서도 웹 애플리케이션을 동작할 수 있도록 하는 기술이다.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker 등록 성공:', registration);
    })
    .catch(error => {
      console.log('Service Worker 등록 실패:', error);
    });
}

 

위 코드에서 navigator.serviceWorker.register() 메서드를 사용하여 Service Worker를 등록한다. 등록이 완료되면 브라우저는 해당 스크립트를 백그라운드에서 실행하면서 네트워크 요청을 가로채거나 캐싱 전략을 수행할 수 있다.

 

Web App Manifest

Web App Manifest는 JSON 파일로, PWA가 네이티브 앱처럼 동작할 수 있도록 웹 애플리케이션의 메타데이터를 제공한다.

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

 

JSON 파일 작성 후, index.html에서 다음과 같이 연결한다.

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

 

설정을 완료하면 사용자가 웹 사이트를 홈 화면에 추가할 때 해당 메타데이터가 반영되며, 네이티브 앱처럼 보이는 효과를 얻을 수 있다.

 

캐싱 전략

PWA에서는 캐싱을 통해 오프라인 지원을 강화한다. 대표적인 캐싱 전략은 다음과 같다.

• Cache First: 네트워크보다 캐시된 데이터를 우선 제공
• Network First: 최신 데이터 우선 요청, 실패 시 캐시 사용
• Stale-While-Revalidate: 캐시된 데이터를 즉시 제공하면서 네트워크 요청을 통해 최신 데이터로 업데이트

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

 

위 코드는 Cache-first 전략을 구현한 예시이다.

 

3. PWA 프로젝트에 적용하기

react 프로젝트에서 PWA는 create-react-app으로 쉽게 적용할 수 있다.

 

1. 프로젝트 생성

npx create-react-app <프로젝트명> --template cra-template-pwa

 

2. manifest.json 설정

서비스 이름, 아이콘 등을 설정할 수 있다.

{
  "short_name": "PWA App",
  "name": "My Progressive Web Application",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000"
}

 

3. serviceWorkerRegistration.js 수정

serviceWorkerRegistration.register();

 

unregister -> register로 변경해주어야 한다.

• register(): serviceworker를 활성화하여 오프라인 캐싱, 푸시알림 등 기능 사용이 가능하게 한다.
• unregister(): 기존 등록된 service worker를 제거하여 pwa 기능을 비활성화한다.

 

4. PWA의 장점과 단점

✅ PWA의 장점

멀티 플랫폼 지원

• PWA는 웹 기술을 기반으로 개발되므로, 별도의 네이티브 앱을 만들지 않아도 다양한 운영체제에서 동일한 환경을 제공할 수 있다.
• 하나의 코드베이스로 웹과 모바일을 모두 지원할 수 있어 개발 및 유지보수 비용 절감이 가능하다.

설치 부담 없음

• 사용자가 앱스토어를 거치지 않고, 브라우저에서 바로 앱을 설치할 수 있다.
• 설치 과정이 간단해 사용자 이탈을 줄일 수 있다.

빠른 로딩 속도

• Service Worker를 활용한 캐싱 기술로 인해 페이지 로딩 속도가 빨라진다.
• 네트워크가 불안정한 환경에서도 빠르게 콘텐츠를 제공할 수 있다.

오프라인 지원

• 네트워크 연결이 끊겨도 캐싱된 데이터를 활용해 앱을 사용할 수 있다.
• 오프라인에서도 특정 기능이 동작하도록 설정할 수 있다.

푸시 알림 기능

• 웹 푸시 알림을 통해 사용자 리텐션을 높일 수 있다.
• 푸시 기능을 활용하면 마케팅 및 사용자 참여 유도가 가능하다.

SEO(검색 엔진 최적화)에 유리

• 일반 네이티브 앱과 달리 웹 페이지 형태로 제공되므로, 검색 엔진에서 크롤링이 가능하다.
• 구글, 네이버 등의 검색 결과에 노출될 수 있어 더 많은 유입을 기대할 수 있다.

업데이트가 쉽다

• 사용자가 앱을 직접 업데이트할 필요 없이, 배포된 최신 버전이 자동으로 적용된다.
• 버그 수정이나 기능 추가가 용이하다.

❌ PWA의 단점

제한적인 iOS 지원

• iOS의 Safari는 PWA의 일부 기능을 제한적으로 지원하며, 푸시 알림 기능이 완전하지 않다.
• 배터리 절약 모드에서 백그라운드 동작이 제한될 수 있다.

하드웨어 접근성 제한

• 네이티브 앱과 비교했을 때, 카메라, 블루투스, NFC 등 일부 기기 기능에 대한 접근이 제한적이다.
• 고사양의 그래픽 연산이 필요한 경우 네이티브 앱보다 성능이 떨어질 수 있다.

앱 스토어 유입 차단

• 앱스토어에 등록되지 않으므로, 앱스토어를 통한 사용자 유입이 어렵다.
• 기존 앱스토어 생태계를 활용한 마케팅이 불가능하다.

브라우저별 호환성 문제

• 브라우저마다 PWA 지원 수준이 다르다. (특히 iOS의 Safari는 일부 기능 미지원)
• 최신 기능을 활용하려면 브라우저 호환성을 고려해야 한다.

보안 이슈

• HTTPS 환경에서만 작동해야 하며, Service Worker의 보안 설정이 필요하다.
• 네이티브 앱과 비교하면 OS 차원의 보안이 부족할 수 있다.

---

PWA를 앱스토어에 출시할 수 있다?

프론트엔드 개발자로서 PWA는 웹 기술만으로도 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다는 점에서 매력적인 선택지였다. 크로스 플래새폼 호환성과 뛰어난 접근성은 물론, 모바일 앱 개발에 대한 추가적인 학습 부담 없이도 앱과 같은 서비스를 구현할 수 있다는 장점이 컸다.

 

특히 앱스토어 등록 과정 없이도 사용자가 직접 설치할 수 있다는 점이 가장 큰 장점으로 여겨졌다. 하지만 동시에 이는 양날의 검이기도 했다. 앱 스토어를 통한 검색 노출, 사용자 리뷰, 다운로드 통계 등 스토어 생태계가 제공하는 이점을 활용할 수 없다는 아쉬움이 있었다.

 

그러던 중, PWA를 앱스토어에 출시할 수 있다는 것을 알게 되었다. 이는 PWA의 활용 가능성을 한층 더 넓히는 발견이었다. 웹 기술의 장점을 유지하면서도 앱 스토어 생태계의 이점을 함께 활용할 수 있게 된 것이다. 앱 스토어(google, apple)에 따라 별도의 설정이 필요하다.

 

1. Google play store 출시

TWA(Trusted Web Activity)를 사용하여, PWA를 네이티브 앱으로 패키징하여 출시할 수 있다.

 

2. Apple App Store 출시

직접 배포는 지원하지 않지만, ios PWA Wrapper, 웹뷰 래퍼를 통해 출시가 가능하다.

---

PWA는 알면 알수록 재미있는 것 같다. 패키징하여 앱 스토어에 출시할 수 있다는 것을 알게 되었고, 앞으로도 PWA를 애용할 것 같다. PWA의 새로운 가능성을 알게 되었고...앱 출시까지 시도해보는 것도 재미있을 것 같다.