Progressive Web Apps
프로그레시브 웹 앱(Progressive Web Apps, PWA)은 웹 기술을 사용해 만든 애플리케이션이다.
기존 웹 앱과는 달리, 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다. HTML, CSS, JavaScript 같은 웹 표준 기술을 사용하여 개발하며, 모바일과 데스크톱 양쪽에서 사용할 수 있다.
PWA를 사용하는 사이트
- 트위터(Twitter)
- 알리 익스프레스(AliExpress)
- 트리바고(Trivago)
- 스타벅스(Starbucks)
- 핀터레스트(Pinterest)
- 기타 등등
PWA 특징
네이티브 앱은 해당 플랫폼에 특화된 프로그래밍 언어로 만드는 경우가 많다. (ex. iOS의 경우 Swift, Android의 경우 Kotlin) 앱 스토어(Apple App Store, Google Play Store)를 통해 배포되고 설치된다.
반면에 PWA는 다음과 같은 특징이 있다.
-
반응형 : 모바일, 태블릿, 테스크톱 등 다양한 장치에서 작동할 수 있도록 설계된다.
-
오프라인 기능 : 서비스 워커(Service Worker) 기술을 사용하여 네트워크 연결이 불안정하거나 없는 상황에서도 콘텐츠를 제공할 수 있다.
-
빠른 속도 : 빠른 로딩 시간과 즉각적인 반응성으로 사용자가 마치 네이티브 앱을 사용하는 것처럼 느끼게 한다. 캐시와 최적화된 데이터 로딩 전략을 통해 이룰 수 있다.
-
설치 기능 : 사용자가 PWA를 자신의 홈 스크린에 추가할 수 있으며, 네이티브 앱처럼 앱 아이콘을 통해 액세스 할 수 있게 된다.
-
안전한 환경 : HTTPS를 통하기 때문에 사용자 데이터와 통신이 암호화되어 보호된다.
-
자동 업데이트 : 웹 기술을 사용하기 때문에 앱 스토어를 통한 업데이트 과정 없이도 최신 상태로 유지된다.
-
푸시 알림 : 웹 푸시 알림을 지원하여, 앱이 백그라운드에 있을 때도 사용자에게 새로운 정보를 알릴 수 있다.
PWA를 위한 작업
PWS 개발에는 웹 기술에 대한 이해뿐만 아니라, 사용자 경험을 중심으로 한 접근 방식이 필요하다. 웹과 앱의 장점을 결합하여 사용자에게 더 나은 경험을 제공하는 것을 목표로 한다.
아래는 PWA 개발을 위한 작업들을 간략하게 살펴본 것이다.
반응형 웹 디자인
스마트톤, 태블릿, 데스크탑 같은 다양한 디바이스에서 사용할 수 있도록 반응형 웹 디자인을 적용해야 한다. 미디어 쿼리 등을 이용하여 화면 크기에 따른 콘텐츠를 최적화한다.
Service Worker
서비스 워커는 백그라운드에서 작동하는 스크립트이다. 네트워크 요청을 처리하고, 캐싱, 푸시 알림, 오프라인 실행 등 PWA의 핵심 기능을 구현하기 위해 사용된다.
manifest 파일 설정
JSON 파일로, 웹 앱의 이름, 시작 URL, 아이콘 등 PWA가 표시되고 기능하는 방식에 대한 정보가 포함된다. 사용자가 PWA를 홈 화면에 추가할 때 이 정보를 사용해 앱처럼 보이게 할 수 있다.
HTTPS 배포
보안을 위해 HTTPS 프로토콜을 사용해 배포되어야 한다. 신뢰할 수 있는 연결 상태에서만 동작하여 사용자 데이터와 통신을 보호한다.
