서비스 워커로 만드는 오프라인 웹사이트(아름다운 웹사이트 만들기 26)

서비스 워커는 무엇보다 강력하다.



서비스 워커는 그동안 우리가 사용했던 그 어떤 도구보다 강력하다. 서비스 워커를 이용하면 네트워크 요청을 직접 제어할 수 있다. 네트워크 요청을 보낼지 말지도 결정할 수 있다. 즉 웹 브라우저가 요청을 보내기 전에 뭔가 작업하도록 지시할 수 있는 도구가 바로 서비스 워커다. 물론 강력한 만큼 주의를 기울이지 않으면 웹사이트를 완전히 망가뜨릴 수도 있다.

하지만 모든 상황을 해결하는 만능 서비스 워커는 없다. 웹사이트마다 제공하는 가치가 다르기 때문에 각 사이트의 제약 조건에 맞게 만들어져야 한다. 서비스 워커 또한 그 사이트의 고유한 성격에 맞게 작성돼야 한다.

서비스 워커를 잘 활용하면 여러분의 웹사이트가 찬란하게 빛날 수 있다. 이 도전에 뛰어드는 사람이 많아진다면 웹도 더 진화할 수 있을 것이다.



오프라인은 더 이상 걸림돌이 아니다.



웹 기술이 지금처럼 강력했던 적은 없었다. CSS를 이용해 놀라운 레이아웃을 만들고, SVG로 이미지를 가볍게 최적화해 배포할 수 있고, 자바스크립트 API로 단말기의 다양한 센서에 접근할 수 있다. 여기에 서비스 워커가 더해지면 오프라인 기능까지 구현할 수 있는 것이다.

이 책은 진정으로 회복력 있는 웹사이트를 어떻게 디자인해야 하는지 보여준다. 마침내 우리는 변덕스럽고, 믿지 못할 네트워크 환경에서도 차질 없이 작업할 수 있는 접근성 높은 해결 방법을 찾은 것이다.



웹 없이는 살 수 없다.



오늘날에는 웹을 기반으로 다양한 사업이 운영되고 있다. 웹 없이는 트위터도, 페이스북도 존재할 수 없다. 단지 상업적 서비스만의 이야기가 아니다. 위키피디아나 여러분이 즐겨 읽는 블로그도 웹이 없다면 볼 수 없다. 웹은 한 가지 용도에 맞춘 플랫폼이 아니다. 웹에서는 수많 은 종류의 활동이 이루어지며 웹은 의식적으로 그렇게 설계되었다.

그 많은 훌륭한 것들이 다 웹을 기반으로 하고 있듯 웹도 인터넷을 바탕으로 한다. 흔히 '웹'과 '인터넷'이라는 용어를 섞어서 사용하곤 한다. 하지만 웹(월드 와이드 웹)은 인터넷을 이용해 만들어진 여러 서비스 가운데 하나일 뿐이다.



네트워크가 문제다.



웹이 그렇듯 인터넷 역시 다양한 서비스를 제공할 수 있도록 설계되었다. 인터넷은 수많은 네트워크를 한데 엮어놓은 또 다른 네트워크다. 인터넷 속에서는 수많은 네트워크가 서로 동일한 프로토콜에 따라 데이터 패킷들을 주고받도록 약속돼 있다. 이 데이터 패킷들은 바닷속에 설치된 광케이블을 따라 전송되며, 와이파이와 전파 신호 등으로 뿌려지는가 하면 인공위성을 통해 우주 공간으로 쏘아지기도 한다.

네트워크가 올바르게 작동하는 한 웹 역시 잘 움직일 것이다. 하지만 가끔 네트워크 상태가 나빠질 때가 있다. 모바일 네트워크(이동식 네트워크)는 기차 같은 '이동수단'을 이용할 때 연결이 불안정해지는 경향이 있다. 평소 잘되던 와이파이도 호텔 같은 곳에서 사용하려면 문제가 생긴다.

네트워크가 안 되면 웹도 안 된다. 원래 그런 것이다. 어떻게 할 방법이 없다. 과거에는 그랬다.



서비스 워커가 답이다.



무엇보다 가장 설레는 것은 네트워크가 작동하지 않는 환경에서도 웹사이트를 계속 실행할 수 있는 기술이 마침내 등장했다는 것이다. 대체 어떤 마술을 부려 오프라인에서 웹사이트가 실행되는 것일까? 비결은 '서비스 워커'라는 브라우저 기능에 있다.

웹은 클라이언트와 서버의 환상적인 협연이다. 웹 브라우저는 클라이언트이며, 사용자 측에서 작업을 수행하는 소프트웨어다. 사용자는 원하는 일을 해내거나 어떤 정보를 찾기 위해 브라우저에 URL을 입력하거나 링크를 통해 접근한다. 이때 웹 브라우저가 웹 서버에 요청을 보낸다. 이 요청이 서버에 도달하려면 인터넷 세계를 가로지르는 과정이 필요하다. 그렇다면 웹 브라우저가 요청을 보내기 전에 지시할 수 있다면 어떨까? 서비스 워커는 바로 이것을 가능하게 해주는 도구다.

서비스 워커는 혼자서 할 수 있는 것이 많지 않다. 하지만 이를 이용함으로써 매우 강력한 브라우저 기능을 활용할 수 있게 된다. 서비스 워커에서 명령을 작성할 때 페치 API나 캐시 API 등 다양한 API를 이용할 수 있다. 이런 명령들이 네트워크가 끊겼을 때 API를 이용해 서비스 워커에 백업 파일을 읽어들이도록 지시한다.



오프라인 웹사이트가 가능하다?



월드 와이드 웹 컨소시엄(W3C)은 2014년 서비스 워커 표준 개발을 시작했다. 현재 크롬, 사파리, 파이어폭스, 엣지 등 대부분의 웹 브라우저에서 지원한다. 서비스 워커는 웹 애플리케이션이나 웹 서비스를 구성하는 HTML, CSS, 자바스크립트, 이미지, 동영상 등 다양한 리소스들에 대해 적합한 캐시 제어 기능을 지원해 네이티브 앱과 같이 오프라인에서도 이용할 수 있도록 한다.

웹 애플리케이션의 리소스 중 갱신되지 않는 리소스를 로컬에 처음 한 번만 저장(캐싱)하고 이후 재실행하면 로컬에 저장된 리소스를 사용해 오프라인 이용이 가능하다. 또한 메신저 앱을 실행하지 않은 상황에서 새로운 메시지를 받을 수 있도록 지원하는 앱 푸시 알림 같은 기능을 웹에서도 지원한다. 즉 브라우저가 실행되지 않는 상황에서도 서비스 워커 코드가 백그라운드에서 실행되면서 푸시 알림이 오면 이를 처리해 받은 메시지를 팝업 창으로 보여줄 수 있다.



이제는 PWA다.



웹 기술의 놀라운 발전에도 불구하고 많은 사람이 웹에서 불쾌한 경험을 하고 있다. 무겁고, 버그 투성이에 느리기까지 한 웹사이트가 너무 많다. 사람들이 모바일 앱을 선호하며 웹을 외면하게 된 이유다. 상황을 발전시킬 만한 해결책으로 프로그레시브 웹 앱(PWA)이 등장했다. 최고의 웹과 앱이 만나 느린 네트워크에서도 빠르게 로드되고, 관련 푸시 알림을 전송하는 PWA의 핵심 기술 중 하나가 바로 서비스 워커다. 서비스 워커를 이용해 PWA를 개발하는 것은 월드 와이드 웹을 개선하는 일이다. 웹이 새롭게 부흥할 수 있는 다시 없는 기회다.



◆이 책에서 다루는 내용

-서비스 워커란 무엇인가

-서비스 워커로 오프라인의 한계 뛰어넘기

-자원 가져오는 방법

-캐시하는 법

-오프라인 대응 페이지 만들기

-서비스 워커 개선하기

-저장 공간 관리하기

-PWA로 나아가기



추천의 글

이 책은 흥미로운 만큼 부담스러울 수 있는 개념들을 알기 쉽게 설명하고 따라 하기 쉬운 예제 코드로 정리해놓았다. 또 서비스 워커의 함정을 보여주고 이를 매끄럽게 해결하는 방법도 알려준다.

갑작스럽게 네트워크와 단절되는 상황에 처하더라도 살아남는 웹사이트를 만들고 싶다면 이 책을 통해 서비스 워커를 실무에 적용하는 비법을 터득하길 바란다.



chapter 1 서비스 워커 소개

세상에는 웹을 기반으로 하는 다양한 사업들이 있다. 현재 우리의 웹 의존도는 상상을 초월한다. 웹은 인터넷을 이용해 만들어진 서비스 중 하나다. 인터넷에서는 수많은 네트워크가 동일한 프로토콜에 따라 데이터를 주고받는다. 하지만 네트워크가 안 되면 웹도 불가능하다. 과거에는 그랬다. 네트워크가 작동하지 않는 상황에서도 웹사이트를 계속 실행할 수 있는 기술이 도입됐다. 바로 '서비스 워커'다.



chapter 2 오프라인 준비하기

서비스 워커의 현재 지원 상황을 확인하고 도입 여부를 망설일 수도 있다. 하지만 지금 당장 서비스 워커를 배포해도 상관없다. 서비스 워커는 이미 작동하는 웹사이트 위에 부가적으로 적용하는 것이기 때문에 브라우저 지원 상태가 완벽하지 않아도 상관없다. 지원되는 브라우저에서는 서비스 워커가 작동하고, 미지원 브라우저에서는 웹사이트가 기존과 똑같이 보일 것이다. 현재 크롬 지원율이 가장 높다. 그럼 이제 서비스 워커를 등록해보자.



chapter 3 자원 가져오기

출발점은 서비스 워커 등록이다. HTML문서의 sctipt 요소에 작성해둔 코드에 의해 서비스 워커가 등록, '다운로드'된다. 다운로드된 서비스 워커 파일은 브라우저에 '설치'된다. 서비스 워커를 설치해 '활성화'하면 브라우저 제어권을 갖는다. 활성화한 서비스 워커는 사이트에 대한 모든 요청을 중계한다. 이것이 서비스 워커의 생명주기(life cycle)이다. 하지만 서비스 워커를 업데이트한다면 이 생명주기에 '대기'라는 한 단계가 추가된다. 새 버전이 백그라운드에 다운로드되었다가 브라우저를 재시작할 때까지 대기하면서 활성화를 기다리는 것이다.



chapter 4 캐시 미 이프 유 캔

웹 브라우저는 웹 서버에 페이지를 요청하고 웹 서버는 거기에 응답한다. 웹 브라우저와 웹 서버가 서로를 기억하지 못한다면 그들은 관계를 유지할 수 없을 것이다. 그 기억을 돕는 것이 쿠키다. 웹 서버는 쿠키를 이용해 사용자를 식별하고 기억할 수 있다. 그럼 웹 브라우저가 웹 서버에 특정 항목을 요청했다는 것은 어떻게 기억될까? 그것은 캐시가 있어 가능하다. 캐시는 소중한 것을 쌓아두는 곳이다. 서비스 워커에는 HTTP 캐시와 캐시 API의 기능이 필수적이다.



chapter 5 서비스 워커 전략

정적 캐시에 저장해둔 자원들을 모두 활용해서 오프라인 대응 페이지를 만들 차례다. 오프라인 대응 페이지를 생성한 뒤에는 URL을 정적 캐시 대상 목록에 추가해야 한다. 그리고 오프라인 상태에서 잘 작동하는지 확인해봐야 한다.



chapter 6 서비스 워커 다듬기

서비스 워커에는 아직 개선할 점이 있다. 그렇다고 낙담할 일은 아니다. 글자 하나가 잘못돼 그런 경우가 많다. 브라우저 개발자 도구에서 자바스크립트 콘솔 창을 열어보면 어느 코드가 잘못됐는지 찾는 데 도움이 될 것이다. 서비스 워커는 코드 양이 너무 많지만 여기에는 일정한 패턴이 반복된다. 패턴은 레고 블록과 같다. 이 블록을 잘 이해하고 조합하면 다양한 환경을 위한 수많은 설정을 구성할 수 있다.

한국어판 출간에 앞서

추천의 글

chapter 1 서비스 워커 소개

chapter 2 오프라인 준비하기

chapter 3 자원 가져오기

chapter 4 캐시 미 이프 유 캔

chapter 5 서비스 워커 전략

chapter 6 서비스 워커 다듬기

chapter 7 정리정돈

chapter 8 오프라인 사용자 경험

chapter 9 프로그레시브 웹 앱

감사의 글

옮긴이의 글

참고 자료

참고 URL

찾아보기

제레미 키스 Jeremy Keith

영국 브라이턴에 살며, 디자인 에이전시 클리어레프트(Clearleft)에서 웹사이트를 만들고 있다. 저서로는 《웹디자이너를 위한 HTML5》(개정판) 《DOM 스크립트》 《방탄 Ajax》 《Resilient Web Design》 등이 있다. '에린(아일랜드의 애칭)의 녹색 해안'을 찬양하는 키스는 커뮤니티 사이트 '더 세션'을 운영하며 아일랜드 전통 음악과의 유대를 이어가고 있다. 그는 솔터 케인(Salter Cane) 밴드에서 부주키를 연주하는 언더그라운드 활동도 만끽하고 있다. 키스는 인터넷에서 빈둥거리며 여가를 보내고, 지난 15년 동안 adactio.com에 자신이 낭비한 시간을 꾸준히 기록하는 중이다.