이번엔 8월안에 개발해보고자 하는 PWA에 대해 알아보겠다.
기존의 Native App. 과는 다른 PWA, 프로그레시브 웹 앱이 무엇이고,
어떻게 개발하면 좋을 지를 위주로 서술하겠다.
PWA란?
PWA란, 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱이다.
당연히 앱을 설치해 접근해야 하는 Native보다 방문이 빠르고, 링크를 통한 공유 등의 이점을 가진다. 웹 기반이므로 확장성이 높고, Mobile 기기의 저장 공간을 별도로 사용하지 않는 것 또한 PWA의 이점이다.
반면에, Android, iOS 등의 Native는 Mobile OS와 통합이 자연스러워 더 향상된 사용자 경험을 제공하는 이점이 있다.
개발 환경에서도 Android Studio, Swift 등의 Native, Cross-platform에 특화된 Flutter 등과는 달리 기존의 HTML/CSS/JS 나 React와 같은 웹 기술을 기반으로 구축된다.
PWA의 특징
그럼, PWA로 구축한 환경에서는 어떤걸 사용할 수 있을까?
- 오프라인 동작
- Mobile 기기에 설치 가능
- 백그라운드 동기화
- 반응형 UI/UX
- HTTPS Protocol을 통한 제공 (보안 및 안정성)
- 푸시 알림 등
다음과 같은 기본적 기능들을 제공하며,
Service Workers 를 통한 캐싱으로 인해 앱의 로딩 시간이 줄어든다는 특성도 있다.
또한 웹 개발의 특징을 그대로 담아
특정 부분의 업데이트가 있을 때, 앱을 다시 설치하는 것이 아닌, 변경 부분만 업데이트 할 수 있다.
PWA 기본 설정
기존의 일반 웹 페이지도 필수 요구사항 충족을 통해 PWA로 손쉽게 전환 할 수 있다.
1. Service Worker
- 백그라운드에서 실행되는 script 파일, 푸시 알림, 백그라운드 동기화, 리소스 캐싱, Offline env. 을 위한 필수 요소이다.
- 보안, 안정성을 위해 반드시
HTTPS환경에서만 동작한다.
2. Manifest JSON
- Android Studio나 Flutter를 통해 개발해봤다면 반드시 접했을 파일
- 브라우저에게 PWA에 대한 정보를 제공하고 현재 웹 앱이 유저의 기기에 어떻게 설치되어야 하는지 인지시킨다.
- ICON, THEMES, APP NAME 등을 포함한다.
PWA 사례
다양한 회사들이 PWA 기반의 웹 앱을 제공하고 있다.
- Flipkart Lite
인도의 가장 큰 E-COMMERCE 사이트로, 2015년 PWA로 사이트를 재구축했다. - AliExpress
모두가 아는 중국의 E-COMMERCE 사이트, 구축 이후 104%의 신규 사용자 전환률을 보였다. - Starbucks
스타벅스는 자사 앱을 PWA로 제공해 사용자가 접근하기 쉬운 환경을 제공하고 있다.
마치며
스마트폰을 누구나 하나씩 가지는 시대가 되며, 많은 앱들이 스토어에 후지기수 등장했지만,
앱에 대한 접근률이 점점 감소하고 있다.
이런 과정에서 PWA는 접근이 비교적 복잡한 Native App.의 훌륭한 대안으로 자리잡을 것으로 예상된다.
하지만, Native App. 과 PWA의 성격을 잘 인지하고 알맞은 환경에 구축하는 것이 무엇보다 중요하다.
예를 들어 UI의 변화가 큰 모바일 게임의 경우, OS 접근이 어려운 PWA보단, Native로 개발하는 것이 올바르다.
[참고자료]
