🌳 고급 web
PWA가 뭔가요?
쉽게 이해하기
책을 빌려서 보다가 나중에 인터넷 없이도 읽고 싶어서 PDF로 다운받는 것처럼, PWA는 웹사이트를 '설치'해서 네이티브 앱처럼 쓸 수 있게 해줍니다. 홈 화면에 아이콘도 생기고, 오프라인에서도 일부 기능이 작동합니다.
핵심 정리
웹사이트를 앱처럼 설치하고 오프라인에서도 쓸 수 있게 만드는 기술입니다.
자세히 알아보기
PWA는 Progressive Web App의 약자로, 웹 기술로 만들었지만 네이티브 앱처럼 동작하는 애플리케이션입니다. 사용자가 브라우저에서 '홈 화면에 추가' 버튼을 누르면 앱처럼 설치되고, 푸시 알림도 받을 수 있으며, 오프라인 상태에서도 기본 기능을 사용할 수 있습니다. Twitter Lite, Starbucks 앱 등이 대표적인 PWA 사례입니다.
PWA의 핵심 기술은 세 가지입니다. 첫째, Service Worker라는 백그라운드 스크립트가 캐싱을 통해 오프라인 동작을 지원합니다. 둘째, Web App Manifest 파일이 앱 아이콘, 이름, 테마 색상 같은 메타데이터를 정의합니다. 셋째, HTTPS를 필수로 사용해서 보안을 강화합니다. 이 세 가지만 갖추면 일반 웹사이트도 PWA가 될 수 있습니다.
실무에서 PWA는 앱스토어 심사 없이 바로 배포할 수 있고, 용량도 작으며, URL만 공유하면 설치할 수 있다는 장점이 있습니다. 특히 모바일 데이터가 비싸거나 네트워크가 불안정한 지역에서 효과적입니다. 반면 iOS에서는 일부 기능(푸시 알림 등)이 제한적이고, 네이티브 앱에 비해 성능이 떨어질 수 있다는 한계도 있습니다.
PWA를 만들려면 기존 웹사이트에 Service Worker와 Manifest 파일을 추가하면 됩니다. 프레임워크도 PWA를 지원하는데, Next.js는 next-pwa 플러그인으로, SvelteKit은 @sveltejs/adapter-static과 Workbox로 쉽게 구현할 수 있습니다. Google Lighthouse로 PWA 점수를 측정하면서 개선하면 더 좋은 사용자 경험을 제공할 수 있습니다.