구글 상위랭킹을 위한 프로그레시브 웹 앱 (web app) PWA 란?

구글 상위랭킹을 위한 프로그레시브 웹 앱 (web app) 이란
‘프로그레시브 웹 앱스(Progressive Web Apps. PWA)’는 구글 크롬 엔지니어 알렉스 러셀이 2015년에 고안한 개념으로 앱 수준과 같은 사용자 경험을 웹에서 제공하는 것이 목적입니다. 앱처럼 보이지만 웹에서 모든 서비스가 가능하도록 기존의 웹앱과 AMP를 합쳐놓으거라 보시면 됩니다.

이것은 사용자가 브라우저 탭을 맨 처음 방문할 때부터 유용하며, 설치(웹이기에)가 필요 없습니다. 시간의 흐름에 따라 사용자가 앱과의 관계를 점진적으로 쌓아갈수록 성능이 더욱 강력해집니다.

Progressive Web Apps 가이드문서 동영상

 

• 프로그레시브 — 점진적인 개선을 통해 작성되므로, 어떤 브라우저를 선택하든 상관없이 모든 사용자에게 적합합니다.
• 반응형 — 데스크톱, 모바일, 태블릿 등 모든 폼 팩터에 맞습니다.
• 연결 독립적 — 서비스워커를 사용하여 오프라인이나 느린 네트워크에서 작동하도록 향상됩니다.
• 앱과 유사 — 앱 셸 모드에서 작성되기 때문에 앱 스타일의 상호작용 및 탐색 기능을 사용자에게 제공합니다.
• 최신 상태 — 서비스 워커 업데이트 프로세스 덕분에 항상 최신 상태로 유지됩니다.
• 안전 — HTTPS를 통해 제공되므로 스누핑이 차단되며, 콘텐츠가 변조되지 않도록 보장합니다.
• 검색 가능 — W3C 매니페스트 및 서비스 워커 등록 범위 덕분에 “애플리케이션”으로 식별되므로, 검색 엔진에서 검색이 가능합니다.
• 재참여 가능 — 푸시 알림과 같은 기능을 통해 쉽게 재참여가 가능합니다.
• 설치 가능 — 앱 스토어에서 씨름할 필요 없이 사용자가 자신에게 가장 유용한 앱을 홈 화면에 유지할 수 있습니다.
• 링크 연결 가능 — URL을 통해 손쉽게 공유할 수 있으며 복잡한 설치 작업이 불필요합니다.

한때 하이브리드 웹 앱 (그냥 웹인데 모바일 화면에 맞게 구성한 앱) 이란 시스템이 알려져 많은 개발자 분들이 사용하셨는데, 웹언어로 앱을 출시할수 있어서 제작하는 사람의 편의성 때문에 잠깐 쓰였습니다.

다만 네이티브 앱이 아니라서 성능이 조금 다운되거나 API 사용에 한정적인 단점이 있어서 제공하고자 하는 서비스의 최초에만 쓰이고 그 후에는 네이티브 앱으로 갈아타는 현상이 많이 발생했었습니다.

웹은 확장성이 좋지만 사용자를 묶어두기 어렵고, 앱은 사용자를 묶어두기 좋지만 끌어모으기 어려워 이런 단점을 보완하고자 프로그레시브 웹 앱이 만들어지게 되었습니다. 앱같은 웹을 지향하게 된것입니다.

 

PWA는 ‘서비스워커(service worker)’로 불리는 새로운 API를 활용해 웹앱의 중요한 부분을 캐싱하고, 사용자가 다음에 열 때 즉시 로딩하는 방식을 취하기에 예전 하이브리드의 단점을 보완하고자 했습니다. 그 덕분에 네트워크 환경이 좋지 않아도 빠르게 구동되며, 사용자에게 푸시 알림을 보내기도 합니다. PWA작업후에  FTP를 통해 웹에 올리는 것만으로도 앱에서 사용하는 경험을 동일하게 방문자에게 제공해줄 수 있으며 검색엔진에서도 가장 최신의 기술로 받아들여져 상위에 등록되는 혜택을 보기도합니다.

중국 ‘알리익스프레스’가 대표 사례인데 알리익스프레스는 PWA를 구축한 후 신규 사용자 전환율이 104%까지 증가했으며, 세션 당 2배의 페이지 방문이 생겼고, 74%의 시간을 더 많이 보낸다고 알려졌습니다.

알리익스프레스 PWA 동영상

마찬가지로 하이브리드 웹앱의 느린 퍼포먼스를 대체하기위해 구글에서 개발한 구글의 ‘AMP’(Accelerated Mobile Pages) 프로젝트가 있습니다. AMP는 2015년 10월부터 구글이 전세계 30곳 이상의 매체 및 기술 파트너들과 함께 발표한 오픈소스 이니셔티브(Open Source Initiative, OSI)로, AMP의 핵심은 모바일 웹 로딩 시간 단축에 있습니다. 일반 웹사이트와 비교했을 때 4배 정도 빠르다고 알려져 있습니다.

PWA가 구글 검색엔진 상위랭크를 위해서 많은 전략적 접근이 가능한 사례들이 있습니다.
기존의 워드프레스 플러그인기반의 SEO를 목적으로 했다면 향후에는 PWA가 좀더 영향력을 미지는 트랜드가 형성되고 있습니다.

Indexing your PWA (Discoverability & SEO) - Progressive Web App Training