웹 사용자 경험을 향상시키는 프로그레시브 웹 앱스
PWA의 등장
2015년, 구글 크롬의 엔지니어 Alex Russell이 고안한 개념인 ‘프로그레시브 웹 앱스(Progressive Web Apps, PWA)’가 등장했습니다. PWA는 앱 수준으로 점차 발전해나가는 웹을 지향합니다. 궁극적으로는 앱 수준의 사용자 경험을 웹에서 제공하는 것이 목적이라고 합니다. 한마디로 ‘앱’과 같은 ‘웹’을 말하는 것이죠.
what are Progressive Web Apps
PWA는 “Progressive Web Apps: Escaping Tabs Without Losing Our Soul“이라는 블로깅으로 인해 촉발됐습니다. 마치 2005년 James Garrett이 블로그에 “Ajax: A New Approach to Web Applications“라는 제목의 게시물을 올려 Ajax가 등장했던 것처럼 말이죠. 이후 PWA는 구글의 web fundamental에 기본적으로 사용되는 기술이 되었습니다.
Ajax과 Progressive Web Apps 포스팅 화면
∴ Ajax: http://adaptivepath.org/ideas/ajax-new-approach-web-applications/
∴ PWA: https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
PWA는 굉장히 중요한 기술이지만, 예제들이 많이 있음에도 불구하고 buzzword가 크게 만들어지지 않는 경향이 있습니다. 이렇다 보니, PWA 지원 여부에 대한 고민은 개발자보다 OS 벤더들 사이에서 더 커지고 있습니다(현재 Android, iOS, Windows에서 PWA 지원). 개발자들 입장에서도 PWA를 활용하고 싶지만, 실체를 알고 싶어도 스펙이 없어 더 어렵게 생각되는 것이죠.
어디서 사용할까?
PWA 소개 사이트(https://pwa.rocks/)를 보면 PWA가 생각보다 많이 사용되고 있음을 알 수 있습니다. 최근 들어 PWA가 더 많이 쓰이는 추세인 듯합니다. 특히 https://www.pokedex.org/ 사이트가 굉장히 인상적입니다. 모바일로 사이트에 접속해보면 포켓몬들이 나오는데, 그것들을 각각 클릭해서 화면이 변화하는 과정을 살펴보면 화면 전환 속도가 굉장히 빠르다는 것을 알 수 있습니다. PWA 적용 사례에 대한 재미난 포스팅(http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org)도 있으니, 기회가 되면 다음에 한번 다뤄보겠습니다.
Alex Russell이 자신의 블로그에 게재한 PWA(Progressive Web Apps)의 속성(attribute)은 다음과 같습니다.
- Responsive to fit any form factor
- 기기와 해상도에 상관없어야 함 - Connectivity independent Progressively-enhanced with Service Workers to let them work offline
- Service Worker가 오프라인에서도 동작할 수 있어야 함 - App-like-interactions Adopt a Shell + Content application model to create appy navigations & interactions
- 앱처럼 반응할 수 있을 것 + 속도와 모델을 정의 - Fresh Transparently always up-to-date thanks to the Service Worker update process
- 최신 콘텐츠를 유지할 수 있는 방법을 갖출 것 - Safe Served via TLS (a Service Worker requirement) to prevent snooping
- https에서 동작 가능할 것 - Discoverable Are identifiable as “applications” thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them
- 매니페스트와 서비스 워커 등록 스코프를 검색엔진에서 찾을 수 있어야 함 - Re-engageable Can access the re-engagement UIs of the OS; e.g. Push Notifications
- 비활성화 상태에서도 푸시 알림을 받아 다시 실행시킬 수 있어야 함 - Linkable meaning they’re zero-friction, zero-install, and easy to share. The social power of URLs matters.
- URL로 공유 가능해야 함
구글 Progressive Web Apps에서는 위의 특징들을 충족시키기 위한 기술들을 설명하고 있고, 폴리머2와 React 등 자바스크립트 프레임워크에서는 기본적으로, 혹은 플러그인으로 PWA의 특징들을 지원하고 있습니다.
채택 기술
아마도 Alex Russell이 PWA의 속성을 정의할 때부터 이미 PWA에 어떤 기술을 사용할 것인지 정해 놓았다는 생각이 듭니다. 다만 PWA의 지속적인 특징을 정의하기 위해 굳이 속성(attribute)이라고 명시한 것이죠. Service Worker 스펙보다 더 좋은 스펙의 기술들이 제정되어도 PWA의 속성을 만족할 수 있다는 이야기입니다. 다시 말해 PWA는 스펙이 아니기 때문에 Service Worker와 같은 기술들을 접목할 수 있다는 의미이기도 합니다. 보통 스펙은 지정되기까지 일정 시간이 소요되기 때문에 구글 웹페이지와 기술 페이지가 스펙보다 빠르게 바뀌어 왔습니다. PWA는 다음의 기술들을 사용합니다.
• Responsive: CSS3, flex 등 현재 사용되는 대부분의 많은 responsive 기술들
• Connectivity: Service Worker, HTML5 offline , pouchDB, IndexedDB
• App-like-interactions: W3C Manifest, web cache, App Shell Model
• Fresh: Service worker
• Safe: https
• Discoverable: W3c Manifest, Service Worker
• Push Notification: Push API on Web
• Installable: Manifest Web App install banner
• Linkable: URL
이번 연재에서는 프로그레시브 웹 앱스(Progrssive Web Apps)의 등장과 사용 중인 사이트, 그리고 속성들에 대해 알아보았습니다. 다음 연재에서는 PWA를 이해하기 위한 신기술들에 대해 알아보고 어떻게 개발한 것인지를 살펴보겠습니다.
▶ 해당 콘텐츠는 저작권법에 의하여 보호받는 저작물로 기고자에 저작권이 있습니다.
▶ 해당 콘텐츠는 사전 동의없이 2차 가공 및 영리적인 이용을 금하고 있습니다.
SCP(SDS Certified Professional)로 삼성SDS에서 테크리드를 담당하고 있습니다. OSGeo에서 오픈소스 활동을 하고 있습니다. 잘 모르는 기술에 대해서 낯선 사람들과 이야기 하면서 배워 나가는 것을 좋아합니다.