프로그레시브 웹 앱
기술노트
📱 프로그레시브 웹 앱 (PWA)
PWA (Progressive Web App)는 웹(Web)과 네이티브 앱(Native App)의 장점을 결합한 새로운 형태의 애플리케이션입니다. 웹 기술을 기반으로 만들어졌지만, 마치 네이티브 앱처럼 설치하고 사용할 수 있는 사용자 경험을 제공합니다.
🤔 PWA는 왜 필요한가?
- 웹은 별도의 설치 없이 URL만으로 접근할 수 있어 배포가 쉽지만, 푸시 알림이나 오프라인 동작 등 네이티브 앱의 기능적인 장점을 활용하기 어렵습니다.
- 네이티브 앱은 강력한 성능과 기능을 제공하지만, 앱 스토어를 통해 설치해야 하는 번거로움과 플랫폼(iOS, Android)별로 따로 개발해야 하는 비용 문제가 있습니다.
PWA는 이러한 간극을 메우기 위해 등장했습니다. 웹의 장점인 '접근성'과 네이티브 앱의 장점인 '기능성'을 모두 제공하는 것을 목표로 합니다.
⚙️ PWA의 핵심 기술
- 웹 앱 매니페스트 (Web App Manifest) : 앱의 이름, 아이콘, 테마 색상 등을 정의하는 JSON 파일입니다. 브라우저는 이 파일을 보고, 해당 웹사이트를 홈 화면에 '설치'할 수 있도록 합니다.
- 서비스 워커 (Service Worker) : 브라우저의 백그라운드에서 실행되는 스크립트입니다. 네트워크 요청을 가로채고 처리하는 프록시 역할을 하여, '오프라인 지원'과 '푸시 알림'과 같은 핵심 기능을 가능하게 합니다.
- HTTPS : PWA는 모든 통신이 암호화된 안전한 환경에서 동작해야 하므로, 반드시 HTTPS를 사용해야 합니다.
💡 개발자 핵심 Point
- PWA를 통해 사용자는 앱 스토어를 거치지 않고도 웹사이트를 홈 화면에 추가하여 앱처럼 사용할 수 있습니다.
- 서비스 워커를 이용한 캐싱 전략을 통해, 네트워크 연결이 끊어진 오프라인 상태에서도 기본적인 콘텐츠를 보여줄 수 있습니다.
- 서버로부터 푸시 알림을 받아 사용자에게 전달할 수 있어, 사용자의 재방문을 유도하는 데 효과적입니다.
- PWA는 모든 웹사이트에 적용할 수 있는 점진적인(Progressive) 개선 방식입니다. 간단한 블로그부터 복잡한 이커머스 사이트까지, PWA 기술을 도입하여 사용자 경험을 향상시킬 수 있습니다.
