Waylog Blog

PWA(Progressive Web Apps): 웹과 앱의 경계를 허물다

Frontend

네이티브 앱을 개발하려면 iOS와 Android 두 가지 버전을 만들어야 하고, 스토어 심사도 받아야 합니다. 게다가 사용자는 앱 설치를 귀찮아합니다. "그냥 웹사이트인데 앱처럼 작동하게 할 수는 없을까?" 이 질문에서 시작된 것이 PWA입니다. 모바일 기기에서 네이티브 앱과 유사한 사용자 경험을 제공하는 웹 기술입니다.

1. PWA의 3가지 조건

  1. 신뢰성(Reliable): 오프라인 상태이거나 네트워크가 불안정해도 공룡 게임 화면 대신 캐싱된 화면이 즉시 떠야 합니다.
  2. 빠름(Fast): 로딩이 빠르고 스크롤이 부드러워야 합니다.
  3. 참여성(Engaging): 푸시 알림을 보내고, 홈 화면에 아이콘을 추가할 수 있어 재사용률을 높여야 합니다.

2. 핵심 기술

2.1 Service Worker

브라우저와 네트워크 사이에서 동작하는 프록시 스크립트입니다. 요청을 가로채서 캐시 된 데이터를 반환함으로써 오프라인 지원을 가능하게 합니다. 백그라운드 동기화나 푸시 알림도 얘가 담당합니다.

2.2 Web App Manifest

manifest.json 파일에 앱 이름, 아이콘, 테마 색상 등을 정의하면, 브라우저가 이를 인식하고 "홈 화면에 추가하시겠습니까?"라는 배너(A2HS)를 띄워줍니다.

3. 성공 사례

  • 스타벅스: PWA 도입 후 일간 활성 사용자(DAU) 2배 증가.
  • 트위터(Twitter Lite): 데이터 사용량을 70% 줄이고 페이지 로딩 속도 30% 개선.

4. 한계

iOS(Safari)에서의 지원이 아직 제한적입니다. 푸시 알림이나 일부 하드웨어 접근 기능이 안 될 수 있습니다. 하지만 설치 없이도 URL만으로 즉시 접근 가능하다는 웹의 장점은 여전히 강력합니다.