웹의 Native 化, PWA(Progressive Web Apps)

Posted in SW개발 // Posted at 2016. 12. 8. 15:28
728x90

구글에 의해 보다 구체화된 PWA(Progressive Web Apps)가 심심찮게 트랜드로 올라온다.

표준 웹 기술을 기반으로 모바일 환경에 최적화하려는 시도는 PWA 이전에도 많은 시도가 있었다.
PWA는 결국 이런 시도들이 하나의 개념과 기술셋으로 수렴된 결과로 이해할 수 있다.

다음 그림은 PWA의 개념을 한장의 도식으로 표현해본 것이다.

Hybrid App과는 서로 추구하는 사상과 컨셉이 달라서 굳이 비교할 필요가 없겠으나, 이 둘의 비교를 통해 PWA를 좀더 선명하게 이해할 수 있다.

결국 웹 기술을 기반으로 Native와 같은 사용자 경험을 제공한다는 것인데, 이때 중요한 것은 기존 웹의 컨셉을 여전히 계승한다는 것이다. 

한마디로 표현하자면, "웹의 사상을 유지한채 Native 化"  하자는 것. 

PWA을 실현하기 위해 사용되는 기술은 다음과 같은 것들이다.

* Web App Manifest: Native App 접근성 제공

* Service Worker: 오프라인 캐싱, 백그라운드 처리

* Push Notification: 푸시 알림


PWA Indication
위와 같은 기술요소를 사용하여 웹을 만들면 브라우저에 의해 해당 웹이 PWA인지 판별할 수 있게 된다.
브라우저가 PWA임을 인지하는 기준은 다음과 같다.
- HTTPS 사용
- Service Worker 사용
- Web App Manifest 사용

 현재 시점에서는 지원되는 브라우저가 한정되어 있다는 점 참고.

Case Study

국내 사례는 그렇게 많지 않은 듯 하다.
외국 사례 중 대표적으로 워싱턴포스터지의 모바일 웹앱을 들 수 있는데, 아무래도 모바일 사용성을 최적화 시킨 결과로 그 전에 비해 앱을 보다 많이 그리고 오랫동안 사용한다고 한다.
결국 앱의 사용성이 크게 증가하면서 앱에 접근하고 사용, 체류하는 시간이 길어지면서 고객 충성도가 올라간다는 것이다.


보다 상세한 내용은 구글 사이트를 참고.
=> https://developers.google.com/web/progressive-web-apps/
=> 
https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0

'SW개발' 카테고리의 다른 글

HTTP2-over-QUIC  (0) 2016.12.08
웹페이지 고속 랜더링 기술, 구글 AMP  (0) 2016.12.08
HTTP/2 (고성능 HTTP)  (0) 2016.12.05
아키텍처의 출발점  (0) 2016.09.05
SW 아키텍처 마인드맵  (0) 2016.09.01