구글의 ‘프로그레시브 웹 앱스’를 아십니까?
‘프로그레시브 웹 앱스(Progressive Web Apps. PWA)’는 구글 크롬 엔지니어 알렉스 러셀이 2015년에 고안한 개념으로 앱 수준과 같은 사용자 경험을 웹에서 제공하는 것이 목적입니다.
이것은 사용자가 브라우저 탭을 맨 처음 방문할 때부터 유용하며, 설치(웹이기에)가 필요 없습니다. 시간의 흐름에 따라 사용자가 앱과의 관계를 점진적으로 쌓아갈수록 성능이 더욱 강력해집니다.
Progressive Web App의 특징은 다음과 같습니다.
- 프로그레시브 — 점진적인 개선을 통해 작성되므로, 어떤 브라우저를 선택하든 상관없이 모든 사용자에게 적합합니다.
- 반응형 — 데스크톱, 모바일, 태블릿 등 모든 폼 팩터에 맞습니다.
- 연결 독립적 — 서비스워커를 사용하여 오프라인이나 느린 네트워크에서 작동하도록 향상됩니다.
- 앱과 유사 — 앱 셸 모드에서 작성되기 때문에 앱 스타일의 상호작용 및 탐색 기능을 사용자에게 제공합니다.
- 최신 상태 — 서비스 워커 업데이트 프로세스 덕분에 항상 최신 상태로 유지됩니다.
- 안전 — HTTPS를 통해 제공되므로 스누핑이 차단되며, 콘텐츠가 변조되지 않도록 보장합니다.
- 검색 가능 — W3C 매니페스트 및 서비스 워커 등록 범위 덕분에 “애플리케이션”으로 식별되므로, 검색 엔진에서 검색이 가능합니다.
- 재참여 가능 — 푸시 알림과 같은 기능을 통해 쉽게 재참여가 가능합니다.
- 설치 가능 — 앱 스토어에서 씨름할 필요 없이 사용자가 자신에게 가장 유용한 앱을 홈 화면에 유지할 수 있습니다.
- 링크 연결 가능 — URL을 통해 손쉽게 공유할 수 있으며 복잡한 설치 작업이 불필요합니다.
한때 하이브리드 웹 앱 (그냥 웹인데 모바일 화면에 맞게 구성한 앱) 이란 시스템이 알려져 많은 개발자 분들이 사용하셨는데, 웹언어로 앱을 출시할수 있어서 제작하는 사람의 편의성 때문에 잠깐 쓰였습니다.
다만 네이티브 앱이 아니라서 성능이 조금 다운되거나 API 사용에 한정적인 단점이 있어서 제공하고자 하는 서비스의 최초에만 쓰이고 그 후에는 네이티브 앱으로 갈아타는 현상이 많이 발생했었죠. (저도 그런 경험이…)
다시 본론으로 돌아가서 웹은 확장성이 좋지만 사용자를 묶어두기 어렵고, 앱은 사용자를 묶어두기 좋지만 끌어모으기 어려워 이런 단점을 보완하고자 프로그레시브 웹 앱이 만들어지게 되었습니다. 앱같은 웹을 지향하게 된거죠.
PWA는 ‘서비스워커(service worker)’로 불리는 새로운 API를 활용해 웹앱의 중요한 부분을 캐싱하고, 사용자가 다음에 열 때 즉시 로딩하는 방식을 취하기에 예전 하이브리드의 단점을 보완하고자 했습니다. 그 덕분에 네트워크 환경이 좋지 않아도 빠르게 구동되며, 사용자에게 푸시 알림을 보내기도(이 부분이 가장 맘에 드는 부분) 합니다.
중국 ‘알리익스프레스’가 대표 사례인데 알리익스프레스는 PWA를 구축한 후 신규 사용자 전환율이 104%까지 증가했으며, 세션 당 2배의 페이지 방문이 생겼고, 74%의 시간을 더 많이 보낸다고 알려졌습니다.
마찬가지로 하이브리드 웹앱의 느린 퍼포먼스를 대체하기위해 구글에서 개발한 구글의 ‘AMP’(Accelerated Mobile Pages) 프로젝트가 있습니다. AMP는 2015년 10월부터 구글이 전세계 30곳 이상의 매체 및 기술 파트너들과 함께 발표한 오픈소스 이니셔티브(Open Source Initiative, OSI)로, AMP의 핵심은 모바일 웹 로딩 시간 단축에 있습니다. 일반 웹사이트와 비교했을 때 4배 정도 빠르다고 알려져 있습니다.
기술의 발전속도는 빠르면서도 매우 디테일해집니다. 곧 웹과 앱의 경계도 무너지는 모습을 볼수도 있겠네요.
아래는 2016년에 구글에서 발표한 PWA 키노트입니다. 딱딱할수있는 분위기를 재밌게 풀어서 설명해주고있습니다. 한글자막이 있으니 보시면 많은 도움이 되실겁니다.