추가 적립 안내

모바일 없는 세상이 가능할까?

현재 우리는 모바일과 떼려야 뗄 수 없는 관계다. 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는 운영체제, 디바이스, 지역에 관계 없이 누구나 사용할 수 있는 모두의 웹이다.

이제는 PWA다

웹 기술의 놀라운 발전에도 불구하고 많은 사람이 웹에서 불쾌감을 경험하고 있다. 무겁고, 버그투성이에 느리기까지 한 웹사이트가 너무 많다. 사람들이 모바일 앱을 선호하며 웹을 외면하게 된 이유다. 상황을 개선할 만한 해결책으로 PWA가 등장했다. PWA는 최고의 웹과 앱이 만나 느린 네트워크에서도 빠르게 로드되고, 관련 푸시 알림을 전송하며, 네이티브 앱과 같은 경험을 제공한다. 또 오프라인에서 작동하고, 누구라도 쉽게 접근할 수 있으며, 앱 스토어 없이도 배포하고 설치할 수 있다.

네트워크가 문제다

앨릭스 러셀은 PWA의 특징으로 크게 세 가지를 꼽는다. 첫째, ‘반응성(Fast)’이다. 사용자와의 상호작용에 빠르고 부드럽게 반응해야 한다. 둘째, ‘안정성(Reliable)’이다. 불안정한 네트워크 환경에서도 PWA는 안정적으로 작동해야 한다. 마지막으로 ‘체감성(Engaging)’이다. 마치 진짜 앱처럼 몰입감 있는 사용자 경험을 제공해야 한다. 구글은 여기에 융합성(Integrated)이라는 특징을 더해 PWA를 F.I.R.E.라는 말로 규정했다. 이 같은 특징을 가지는 PWA는 사용자에게 더 나은 사용자 경험을 제공할 뿐 아니라 네트워크 속도가 느린 지역에서도 비교적 쾌적한 웹 활용을 돕는다.

사용자 경험을 개선하라

우리 모두가 추구해야 하는 것은 PWA를 만드는 그 자체가 아니다. 사용자 경험을 개선하고 저마다의 비즈니스 목표를 달성하는 것이다. PWA를 초창기에 도입한 회사들은 적은 투자로 막대한 효용 가치를 얻었다. PWA는 누구나 빠르고 몰입감 있는 경험을 누릴 수 있는 새 시대를 열고 있다. 선도적인 회사들이 PWA를 가장 먼저 도입한 곳은 모바일 환경이었다. 현대를 사는 우리는 모바일과 불가분의 관계다. PWA는 누구라도, 어디에서든 실행할 수 있다. 웹 브라우저에서도, 모바일 홈 화면에서도 모두 실행된다. 네트워크가 느리거나 오프라인일 때도 구현된다.
이 책은 PWA를 설계하고 제작하려는 팀이 스스로 할 일이 무엇인지 판단하도록 도와줄 것이다. 또 디자이너, 프로덕트 매니저, 사업주가 PWA를 바로 이해하고 회사에 맞는 기능이 무엇이며, 사용자를 위해 어떤 환경을 제공할 것인지 함께 파악할 수 있도록 이끌어줄 것이다.

◆이 책에서 다루는 내용
-프로그레시브 웹 앱이란 무엇인가
-프로그레시브 웹 앱 도입 사례
-앱에 가까운 웹 만들기
-오프라인이란 무엇인가
-푸시 알림 기능
-자격 증명 관리 API, 결제 요청 API 같은 기타 기능
-점진적 향상을 위한 로드맵
-PWA로 나아가기

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

추천의 글
프로그레시브 웹 앱은 기술이 아니라 사용자 경험에서 영감을 받아왔다. 이 책의 저자 제이슨 그릭스비는 UX 전환의 의미와 웹 브라우저가 이를 권장하는 이유를 가장 먼저 알아차린 사람 중 하나다. 그릭스비는 따분한 기술에 초점을 맞추기보다 모바일 우선주의를 기반으로 PWA를 채택할 경우에 비즈니스와 사용자에게 미치는 영향에 대해 안내한다.

chapter 1 프로그레시브 웹 앱의 정의
오랫동안 웹 기술을 이용해 앱과 유사한 경험을 제공하는 서비스를 개발하기 위해 많은 사람이 노력해왔다. 2015년 앨릭스 러셀과 프랜시스 베리먼은 웹 브라우저에서 진화한 기능을 이용해 변혁적인 프로그레시브 웹 앱(PWA)을 만들었다. 브라우저 탭에서 빠져나와 스스로 앱으로서 기능하면서도 어디서든 실행할 수 있고 무엇이든 링크할 수 있는 웹의 장점을 살린 앱이다.

chapter 2 프로그레시브 웹 앱의 사례
PWA가 무엇을 할 수 있는지, 어디에 사용되는지, 네이티브 앱과는 어떤 관련이 있는지 혼란스러워하고 이런 불확실성으로 인해 도입을 망설이는 회사가 많다. 또 PWA를 네이티브 앱의 대체제로 보는 관점 때문에 거부감을 보이는 사람도 있다. 그런 논쟁은 접어두고 먼저 고객을 생각해야 한다. 회사 사이트를 방문한 고객이 어떤 경험을 할 것인가에 초점을 맞춰야 한다. PWA는 많은 고객을 유인하고, 웹사이트의 보안을 개선하고, 더 많은 수익을 창출하고, 보다 안정적인 경험을 제공하고, 사용자에게 업데이트를 알려줌으로써 네이티브 앱의 보완재 기능을 한다.

chapter 3 앱의 느낌 살리기
앱처럼 느껴진다는 것은 무슨 뜻일까? 네이티브 앱과 같은 모습으로 작동하고, 로딩이 빠르고, 전환 효과가 부드러우며, 전체화면을 제공하고, 깔끔한 마감과 개성을 갖추고 있다는 의미일 것이다. 웹사이트가 앱처럼 느껴지느냐는 문제는 웹사이트가 얼마나 훌륭한 경험을 제공하느냐는 문제에 비하면 중요하지 않다. PWA를 더 앱처럼 느껴지도록 하려면 우선 목표를 명확히 하고 앱이 추구하는 것을 잘 파악하는 것이 무엇보다 중요하다.

chapter 4 앱 설치와 앱 스토어 검색
보통 우리는 앱 스토어에서 앱을 검색하고, 사용 승인을 얻어 설치하게 된다. 그렇다면 PWA를 설치한다는 것은 무슨 의미일까? PWA는 사용자가 다운로드하고 설치하지 않아도 사용할 수 있다. 사용자가 웹사이트에 처음 방문했을 때 서비스 워커가 조용히 설치될 뿐이다. 덕분에 PWA로는 무엇이든 할 수 있다. 오프라인 기능을 추가하거나 푸시 알림 권한을 요청할 수도 있다. 개발자는 사용자가 PWA를 좋게 평가하고 홈 화면에 설치해주길 바란다. 따라서 개발자는 사용자가 아이콘을 홈 화면에 설치할 수 있는 여러 가지 수단을 지원하도록 브라우저에 필요한 정보를 제공해야 한다.
chapter 5 오프라인
서비스 워커는 자원을 캐시하는 도구다. 또 서비스 워커는 오프라인에서도 웹사이트를 이용할 수 있게 해준다. 서비스 워커를 이용하면 데이터를 오프라인에 저장해둘 수 있고, 네트워크 요청을 뜻대로 중계할 수 있다. 또 웹 앱을 어떤 네트워크 환경에서도 안정적으로 작동시킬 수 있다. 데이터를 오프라인에 저장하면 사용자가 중간에 떠나더라도 세션을 유지할 수 있다.

chapter 6 푸시 알림
푸시 알림은 사용자가 세상 어디에 있든 가장 친숙한 기기를 통해 사용자와 맞닿을 수 있는 수단이다. 그러나 사용자가 납득할 만한 이유도 없이 마구 푸시 알림을 쏟아내는 웹사이트가 너무 많다. 푸시 알림은 올바르게 사용했을 때에만 사용자와 사업 모두에 이익이 될 수 있다. 푸시 알림을 이용하고 싶더라도 먼저 사용자에게 가치 있고 관련성 있는 정보를 제공하기 위한 계획과 체계를 갖춰야 한다.