프로그레시브 웹 앱(아름다운 웹사이트 만들기 시리즈 28)

모바일 없는 세상이 가능할까? 현재 우리는 모바일과 떼려야 뗄 수 없는 관계다. 2019년에는 국내 모바일 데이터 통신 사용량이 40TB를 돌파해 3년 전보다 2배 이상 늘어난 것으로 집계됐다. 올해 들어서는 코로나 19로 인해 전 세계 모바일 앱 사용 시간도 대폭 증가한 것으로 나타났다. 국내 모바일 앱의 하루 평균 사용 시간은 3.9시간으로 미국, 중국을 포함한 9개 조사 대상국 중 2위를 기록했다. 모바일을 중심으로 하는 인터넷 서비스는 크게 모바일 웹과 모바일 앱으로 나뉜다. 각각 장단점이 있다. 웹은 앱보다 접근성이 좋다. 앱은 사용자가 스토어에서 다운로드하고 설치해야만 비로소 이용할 수 있지만, 웹은 URL만 있으면 바로 접속해 사용할 수 있다. 반면 앱은 웹보다 사용성이 좋다. 앱은 웹에서 제공하지 못하는 매끄러운 사용자 경험을 갖추고 있으며, 사용자가 앱을 사용하고 있지 않을 때도 푸시 알림을 보내 필요한 정보를 먼저 제공하고 재사용을 유도할 수 있다. 그렇다면 서로가 가진 장점을 모두 활용할 수는 없을까? 본질은 ‘웹’이다 프로그레시브 웹 앱(Progressive Web Apps, 이하 PWA)은 웹과 앱의 장점을 모두 가지고 있다. 하지만 본질은 ‘웹’이다. PWA는 네이티브(모바일) 앱에 가까운 경험을 제공하는 웹을 목표로 한다. PWA는 ‘서비스 워커(Service Worker)’ API를 활용해 웹 앱의 중요한 부분을 캐싱하고, 사용자가 다음에 다시 사이트를 열 때 즉시 로딩한다. 따라서 네트워크 환경이 좋지 않아도 빠르고 안정적으로 구동하며, 앱처럼 사용자에게 푸시 알림을 보낼 수도 있다. 점진적 향상 PWA는 기존 웹사이트에 점진적 향상 방식으로 도입할 수 있다. 최신 웹 브라우저 사용자에게는 최신 기술을 이용한 미려한 사용자 경험을 제공할 수 있으며, 낡은 웹 브라우저를 쓰는 사용자는 기존 웹사이트의 혜택을 그대로 누릴 수 있다. 또 사용자가 느린 통신 회선을 사용하고 있거나 오프라인 상태일 때도 웹사이트를 이용할 수 있도록 해 접근성을 극대화할 수 있다. 즉 PWA를 적용한다면 잃을 것보다 얻을 것이 많은 셈이다. 그 중심에 ‘서비스 워커’가 있다 PWA의 기본 요소는 HTTPS, 서비스 워커, 웹 앱 매니페스트(Web App Manifest)다. 보안을 책임지는 HTTPS, 자바스크립트로 브라우저의 요청을 제어하는 ‘서비스 워커’, 웹사이트를 앱으로 배포할 수 있도록 하는 ‘웹 앱 매니페스트’. 그중에서도 서비스 워커는 PWA의 지향점인 안정적이고 빠르며 오프라인에서도 작동하는 웹페이지를 만들어내는 강력한 신기술이다. 웹의 새로운 르네상스를 향해 PWA는 누구나 빠르고 몰입감 높은 경험을 누릴 수 있는 새 시대를 열고 있다. 모바일은 공간이 한정적이고, 네트워크 환경에 쉽게 흔들린다. 서비스 워커를 이용하면 데이터를 오프라인 캐시에 저장해둘 수 있고, 네트워크에서 가져와야 하는 데이터의 양을 최소화할 수 있다. 네트워크 환경이 열악한 제3세계에서도 풍부하고, 빠르고, 강력한 사용자 경험을 구현할 수 있다. PWA는 운영체제, 디바이스, 지역에 관계 없이 누구나 사용할 수 있는 모두의 웹이다.

한국어판 출간에 앞서 추천의 글 서문 chapter 1 프로그레시브 웹 앱의 정의 chapter 2 프로그레시브 웹 앱의 사례 chapter 3 앱의 느낌 살리기 chapter 4 앱 설치와 앱 스토어 검색 chapter 5 오프라인 chapter 6 푸시 알림 chapter 7 프로그레시브 웹 앱 너머의 기능 chapter 8 점진적 로드맵 chapter 9 모두를 위한 웹 감사의 글 옮긴이의 글 참고 자료 참고 URL 찾아보기