프로그레시브 웹 앱은 웹의 한계를 넘어 모바일 앱과 유사한 경험을 제공하는 새로운 개발 방식 중 하나입니다. 이번 포스트에서는 프로그레시브 웹 앱의 개념, 구조, 장점, 그리고 실제 개발 시 고려해야 할 핵심 요소에 대해 자세히 알아보겠습니다.
프로그레시브 웹 앱(PWA)은 웹 애플리케이션을 개발하는 새로운 방법으로, 사용자에게 앱과 유사한 경험을 제공하는 기술입니다. 기존의 웹 애플리케이션과는 다르게 오프라인에서도 작동하고, 푸시 알림과 같은 기능을 제공할 수 있습니다. 즉, 기본 앱 요소가 포함된 진화된 웹 앱이라고 할 수 있습니다. PWA의 주요 특징은 다음과 같습니다.
반응형 디자인
프로그레시브 웹 앱은 다양한 디바이스와 화면 크기에 맞춰 자동으로 최적화되는 반응형 디자인을 채택합니다.
이는 모바일 기기부터 데스크탑까지 다양한 플랫폼에서 동일한 앱을 사용할 수 있도록 합니다.
오프라인 작동
프로그레시브 웹 앱은 서비스 워커(Service Worker)라는 기술을 사용하여 오프라인에서도 작동할 수 있습니다.
서비스 워커는 브라우저와 독립적으로 백그라운드에서 실행되는 스크립트로, 네트워크 요청을 가로채고 캐싱하여 오프라인 상태에서도 콘텐츠를 제공할 수 있습니다.
푸시 알림
프로그레시브 웹 앱은 사용자에게 중요한 업데이트와 알림을 푸시 알림을 통해 전달할 수 있습니다.
사용자가 앱을 설치하면 푸시 알림 구독(subscription)을 할 수 있으며, 서버에서 알림을 보내면 사용자에게 알림이 도착합니다.
설치 가능
프로그레시브 웹 앱은 사용자가 웹 앱을 홈 화면에 아이콘으로 추가하여 쉽게 액세스할 수 있도록 합니다.
이는 일반 웹사이트처럼 브라우저를 통해 접속하는 것이 아니라 앱처럼 독립적으로 실행될 수 있습니다. 하지만 플레이스토어(Play Store)나 앱스토어(App Store)와 같은 앱 스토어에 직접 올리는 것은 불가능하다는 단점이 존재합니다.
이러한 프로그레시브 웹 앱(PWA)의 구조는 일반적인 웹 애플리케이션과는 조금 다른 특징을 가지고 있습니다.
메인 엔트리 포인트
- 프로그레시브 웹 앱은 일반적으로 index.html 파일을 메인 엔트리 포인트로 사용합니다.
- 이 파일은 앱의 기본적인 구조와 레이아웃을 정의하며, 필요한 리소스 및 스크립트 파일을 로드합니다.
서비스 워커(Service Worker)
- 서비스 워커는 프로그레시브 웹 앱의 핵심 요소로, 백그라운드에서 실행되는 JavaScript 파일입니다.
- 서비스 워커는 네트워크 요청을 가로채고 관리하여 오프라인 작동이 가능하도록 합니다.
- 또한, 캐싱과 같은 기능을 사용하여 웹 앱의 성능을 향상시킵니다.
매니페스트(Manifest) 파일
- 매니페스트 파일은 웹 앱의 메타데이터를 포함하는 JSON 파일입니다.
- 이 파일에는 앱의 이름, 아이콘, 시작 URL 등의 정보가 포함되어 있습니다.
- 매니페스트 파일은 웹 앱을 설치하고 홈 화면에 아이콘을 추가하는 데 사용됩니다.
PWA는 앞선 주요 특징들과 같은 장점도 가지고 있지만 몇 가지 제한적인 측면도 존재합니다. 일반적인 PWA의 단점들은 다음과 같습니다.
기능 제약 - PWA는 웹 기술을 기반으로 하기 때문에, 네이티브 앱에 비해 일부 기능이 제한될 수 있습니다. 하드웨어 기능에 대한 접근이 제한적이거나, 푸시 알림을 모든 플랫폼에서 동일하게 지원하지 않을 수 있습니다.
성능 - PWA는 브라우저에서 실행되기 때문에, 네이티브 앱보다는 성능이 상대적으로 떨어질 수 있습니다. 특히 큰 규모의 애플리케이션의 경우, 초기 로딩 시간이 길어질 수 있고, 네트워크 연결에 따라 성능 차이가 발생할 수 있습니다.
플랫폼 종속성 - PWA는 크로스 플랫폼을 지원하는 웹 기술을 사용하지만, 모든 플랫폼에서 동일한 기능과 경험을 제공하는 것은 아닙니다. 각 플랫폼은 PWA에 대한 지원 정책이나 기능 제한 사항이 다를 수 있으며, 따라서 플랫폼 간 호환성에 주의해야 합니다.
오프라인 모드 제한 - PWA는 서비스 워커를 통해 오프라인에서도 작동할 수 있지만, 모든 기능이 오프라인에서도 동작하지는 않습니다. 일부 기능이 네트워크에 의존하는 경우 오프라인 모드에서는 제한될 수 있고, 결국 오프라인 모드가 딱히 필요하지 않을 수도 있습니다.
디바이스 기능 제한 - PWA는 플랫폼에 제공되는 웹 기술을 기반으로 하기 때문에, 일부 디바이스 기능에 대한 접근이 제한될 수 있습니다. 따라서 특정 디바이스 기능을 활용해야 하는 경우 네이티브 앱을 개발하는 것이 더 적합할 수 있습니다.
앱 스토어 제한 - PWA는 별도의 앱 스토어에 직접 올릴 수 없고, 특정 플랫폼에서만 앱 스토어에 배포할 수 있는 방법이 제공되기도 합니다. 이로 인해 PWA가 특정 플랫폼의 정책이나 제한 사항에 종속될 수 있으며, 앱 스토어에서의 가시성과 사용자 획득에 제약을 받을 수 있습니다.
이러한 단점들은 PWA를 개발할 때 고려해야 할 사항들입니다. 그러나 PWA는 여전히 많은 이점을 가지고 있고, 특정한 사용 사례나 하드웨어 사양이 크게 필요하지 않은 개발에는 문제가 되지 않습니다.
다음으로 PWA에서 가장 중요한 특징 중 하나인 서비스 워커에 대해 자세히 알아보겠습니다.
서비스 워커(Service Worker)
서비스 워커(Service Worker)는 프로그레시브 웹 앱(PWA)의 핵심 요소로, 브라우저와 웹 앱 사이에 위치하여 웹 앱의 동작을 제어하는 JavaScript 파일입니다. 서비스 워커는 백그라운드에서 실행되며, 네트워크 요청을 가로채고 관리하여 오프라인에서도 작동하고, 캐싱 및 푸시 알림과 같은 기능을 제공합니다. 즉, PWA의 구현에 있어서 필수적인 요소입니다.
서비스 워커는 모든 것을 세부적으로 통제할 수 있다는 점에서 AppCache 등 오프라인이나 캐시의 이전 시도보다 우위를 점합니다. 서비스 워커는 개발자의 의도를 짐작하지 않으며, 예측과 빗나갔을 때 망가지지도 않기 때문입니다. - MDN
서비스 워커는 응답을 기다린 후 성공 또는 실패 액션을 실행하는 경우가 많으므로 프로미스를 적극적으로 사용합니다. - MDN
서비스 워커는 일반적으로 웹 앱의 루트 디렉토리에 service-worker.js와 같은 이름으로 작성되며, 등록 및 설치 과정을 거친 후에 브라우저에서 실행됩니다. 서비스 워커는 웹 앱의 컨텍스트에서 분리되어 독립적으로 동작하므로, 브라우저 종속성과는 독립적으로 개발될 수 있습니다.
서비스 워커의 생명주기는 다음과 같은 단계로 이루어집니다.
등록(Registering)
서비스 워커는 웹 앱에 등록되어야 사용할 수 있습니다. 등록 단계에서는 서비스 워커 파일을 브라우저에 등록하고, 브라우저는 해당 파일을 다운로드하여 설치합니다.
설치(Installing)
서비스 워커가 등록된 후, 설치 단계가 시작됩니다. 설치 단계에서는 서비스 워커 파일을 캐싱하고, 필요한 리소스를 사전에 다운로드하여 오프라인에서 사용할 수 있도록 준비합니다. ServiceWorkerContainer.register() 메서드를 사용해 처음 등록합니다. 성공적으로 등록한 경우 클라이언트가 서비스 워커를 다운로드하고, 출처 전체에 대해 혹은 개발자가 지정한 특정 주소들에 대해서 서비스 워커의 설치와 활성화를 시도합니다.
활성화(Activating)
설치가 완료되면, 서비스 워커는 활성화되어 웹 앱과 함께 동작합니다. 활성화 단계에서는 이전 버전의 서비스 워커와의 충돌을 관리하고, 필요한 초기화 작업을 수행합니다. 설치 상태와 마찬가지로, 활성화 상태도 event.waitUntil()을 호출하고 Promise를 전달함으로써 확장될 수 있습니다.
활성화됨(Activated)
서비스 워커가 활성화된 후에는, 웹 앱과 독립적으로 백그라운드에서 동작합니다. 서비스 워커는 네트워크 요청을 가로채고, 캐싱, 동기화, 푸시 알림 등의 기능을 수행합니다. 웹 앱의 오프라인 상태에서도 서비스 워커를 통해 캐시된 콘텐츠를 제공하고, 네트워크 연결이 복구되면 백그라운드 동기화를 통해 변경사항을 업데이트할 수 있습니다.
중복(Redundant)
등록 중 또는 설치 중에 실패한 서비스 워커나 새로운 버전으로 대체된 서비스 워커는 불필요한 상태에 놓입니다. 이 상태의 서비스 워커는 앱에 더 이상 영향을 미치지 않습니다.
앞서 설명한 서비스 워커의 생명주기는 브라우저 이벤트와 상호작용하여 제어할 수 있으며, 적절한 시점에서 캐싱된 리소스의 업데이트, 버전 관리, 에러 처리 등을 수행할 수 있습니다. 생명주기 이벤트를 이해하고 적절히 활용해야 서비스 워커를 효과적으로 구현하고 관리할 수 있습니다.
서비스 워커는 웹 앱에 고급 기능과 오프라인 지원을 추가할 수 있는 강력한 도구이지만 적절한 캐싱 전략과 네트워크 요청 관리, 버전 관리 등을 고려해야 하며, 잘못된 구현은 사용자 경험이나 성능에 악영향을 줄 수 있습니다.
아직 국내에서는 큰 인지도가 없다고 할 수 있지만, 올해 Apple이 발표한 바에 따라 2023년부터 iOS 기기에서도 더 확대된 PWA 기능을 사용할 수 있게 된다면, 국내에서도 하이브리드 앱이나 네이티브 앱 못지 않게 많은 사용을 할 수도 있을거라 생각됩니다.
https://www.oreilly.com/library/view/building-progressive-web/9781491961643/ch04.html
https://fe-developers.kakaoent.com/2022/221208-service-worker/
