서비스 워커로 만드는 오프라인 웹사이트 - 교보문고

웹과 서비스 워커


웹은 언제나 더 우월한 것들과 비교당하며 움츠러들곤 했다. 1990년대에는 CD-ROM이 더 잘나갔다. 수많은 비디오와 음악이 CD-ROM으로 나왔는데 콘텐츠가 워낙 다양해서 웹은 상대도 안 되었다. 하지만 CD-ROM에는 '링크'가 없었다. CD-ROM을 다른 CD-ROM으로 연결하는 것은 불가능했다. CD-ROM은 잊혀갔고 그 사이에 웹은 성장했다. 그 후에는 멋진 신기술 플래시(Flash)가 나왔는데 웹 기술(HTML, CSS, JavaScript)은 플래시의 아름다움에 미치지 못했다. 이번에는 플래시 영상이 웹 페이지보다 훨씬 풍부해졌다. 하지만 플래시는 속을 들여다볼 수 없는 블랙박스였다. 플래시 데이터 형식은 웹 표준보다 우월하다고 여겨졌지만 웹 표준이 제공하는 뛰어난 개방성이 결국 웹에 승리를 안겨줬다. 단 하나의 회사가 관리하던 플래시는 사라져갔고 그 사이 웹은 성장했다.

오늘날에는 웹보다 네이티브 앱이 더 뛰어나 보인다. 네이티브 앱은 몇 개의 기업이 관리하고 있는데 이는 과거 플래시 상황과 비슷하다. 누구나 이용할 수 있는 웹과 대비된다. 플래시도 그랬듯 앱은 웹이 갖지 못한 다양한 기능을 선보이고 있다. 예를 들어, 단말기의 API에 접근할 수 있으며, 네트워크 연결이 끊어져도 사용할 수 있다.

웹의 역사를 살펴보자니 토끼와 거북이 우화를 끝없이 되풀이하는 것 같다. CD-ROM, 플래시, 네이티브 앱 등은 단기적으로 웹보다 낫다. 하지만 언제나 어떤 식으로든 웹이 승리를 거머쥐는 것 같다.

이 기술들은 웹 표준을 확장해나가는 데 큰 도움이 되었다. 플래시는 HTML, CSS, 자바스크립트를 위한 일종의 실험실 역할을 한 면이 있다. 부드러운 애니메이션, 동영상 삽입 등의 훌륭한 기능이 세상에 나올 수 있었던 것도 플래시 덕분이다. 이 기능들의 유용성이 입증되자 나중에 웹 표준은 이를 수용했다. 네이티브 앱에서도 똑같은 일이 벌어지고 있다. 카메라, 가속도계 등의 단말기 장치에 접근하는 기능이 여러 웹 브라우저에 도입되고 있다. 하지만 무엇보다 가장 설레는 것은 네트워크가 동작하지 않는 환경에서도 웹 사이트를 계속 실행할 수 있는 기술이 마침내 도입된다는 것이다.

'서비스 워커(Service Worker)'라는 브라우저 기능으로 오프라인에서 웹사이트가 실행될 수 있다. 자바스크립트로 어떻게 하는 것이라고 말이다. 기술적으로는 그 말이 맞다. 하지만 개념적으로는 기존 스크립트 기술과 차이점이 많다.

웹 브라우저용으로 실행하기 위한 자바스크립트를 작성할 때는 일반적으로 브라우저 창에 출력되는 문서를 다룬다. 사용자가 문서와 상호작용(클릭, 스와이프, 커서 올리기 등)할 때 발생하는 다양한 이벤트를 처리해야 한다. 마크업을 추가하고, 텍스트를 삭제하고, 값을 수정하는 등 문서의 내용도 갱신해야 한다. 브라우저가 출력하는 문서를 데이터로 표현해주는 문서 객체 모델(DOM, Document Object Model)이 이 모든 것을 가능하게 해준다. DOM과 자바스크립트(DOM 스크립팅)를 이용해 온갖 마법을 다 부릴 수 있는 것이다.

그런데 서비스 워커로는 그런 것을 할 수 없다. 일단 스크립트이기는 하고 자바스크립트라는 똑같은 언어로 작성하는 것은 맞다. 하지만 DOM에는 접근할 수 없다. "DOM 스크립팅이 안 돼? 그럼 쓸모없는 것 아닌가?"라고 생각할 수도 있다. 하지만 스크립트가 문서와 상호작용하지 못하게 해둔 데는 다 이유가 있다. DOM에서 구성요소를 추가·수정·삭제하는 것은 브라우저에 큰 부담이 된다. 개발자의 작은 실수로도 웹사이트가 상당히 느려질 수 있다. 하지만 DOM에 접근하지 못하는 스크립트가 있다면, 웹 브라우저는 기존 문서를 렌더링하는 동시에 이 스크립트를 병렬로 실행할 수 있을 것이다. 두 프로세스가 완전히 분리되어 있으므로 안전하게 병렬 처리할 수 있는 것이다.

이런 제약이 적용된 스크립트는 처음에 '웹 워커'라는 이름으로 등장했다. 웹 워커에 작성해둔 스크립트는 아무리 복잡한 연산을 요구하더라도 브라우저 창의 출력 속도를 저해하지 않았다. 예를 들어 점점 더 큰 소수(prime number)를 생성하는 웹 워커를 실행시켜도 백그라운드에서 묵묵히 실행되었다.

서비스 워커는 이런 웹 워커에다 권한을 더 부여한 것이라고 생각할 수 있다. 여전히 DOM에는 접근할 수 없지만 브라우저의 근본적인 내부 동작에 관여할 수 있는 것이다.

다시 한 걸음 물러나서 웹의 동작 원리에 대해 생각해보자. 웹은 클라이언트와 서버가 함께 펼치는 아름다운 발레와 같다. 클라이언트는 보통 웹 브라우저(웹 표준 표현으로는 '사용자 에이전트')이며 사용자 측에서 작업을 수행하는 소프트웨어다.