간편결제, 신용카드 청구할인
카카오페이 3,000원
(카카오페이 5만원 이상 결제시, 6/1~6/30 기간 중 1회)
삼성카드 6% (16,080원)
(삼성카드 6% 청구할인)
인터파크 롯데카드 5% (16,250원)
(최대할인 10만원 / 전월실적 40만원)
북피니언 롯데카드 30% (11,970원)
(최대할인 3만원 / 3만원 이상 결제)
NH쇼핑&인터파크카드 20% (13,680원)
(최대할인 4만원 / 2만원 이상 결제)
Close

서비스 워커로 만드는 오프라인 웹사이트

원제 : Going Offline
소득공제

2013년 9월 9일 이후 누적수치입니다.

공유하기
정가

19,000원

  • 17,100 (10%할인)

    950P (5%적립)

할인혜택
적립혜택
  • I-Point 적립은 출고완료 후 14일 이내 마이페이지에서 적립받기한 경우만 적립됩니다.
추가혜택
배송정보
주문수량
감소 증가
  • 이벤트/기획전

  • 연관도서(16)

  • 사은품(4)

책소개

웹은 치명적인 약점이 있다.

웹은 열린 공간이고 어디에서나 접근할 수 있다지만 반드시 네트워크에 연결돼야 하는 치명적인 약점을 갖고 있다. 5G시대에 우리 대부분은 너무나 빠르고 놀랍도록 안정적인 환경을 이용하고 있기 때문에 네트워크로 인해 비롯되는 문제를 간과하기 쉽다. 고품질의 네트워크 연결을 당연시하고 전 세계 모든 사람이 웹에서 같은 경험을 누리고 있다고 생각하는 것이다.
하지만 네트워크 연결이 불안정한 조건에서는 웹의 존재가 흐려지고, 페이지가 망가지고, 기능이 실행되지 않고, 이미지가 사라지고, 이로 인해 상처 입고, 좌절하기에 이른다. 웹의 이런 네트워크 의존성을 극복하기 위해 오래전부터 많은 사람이 노력해왔고, 마침내 그 해결책으로 '서비스 워커(Service Worker)'가 등장했다.

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

서비스 워커는 그동안 우리가 사용했던 그 어떤 도구보다 강력하다. 서비스 워커를 이용하면 네트워크 요청을 직접 제어할 수 있다. 네트워크 요청을 보낼지 말지도 결정할 수 있다. 즉 웹 브라우저가 요청을 보내기 전에 뭔가 작업하도록 지시할 수 있는 도구가 바로 서비스 워커다. 물론 강력한 만큼 주의를 기울이지 않으면 웹사이트를 완전히 망가뜨릴 수도 있다.
하지만 모든 상황을 해결하는 만능 서비스 워커는 없다. 웹사이트마다 제공하는 가치가 다르기 때문에 각 사이트의 제약 조건에 맞게 만들어져야 한다. 서비스 워커 또한 그 사이트의 고유한 성격에 맞게 작성돼야 한다.
서비스 워커를 잘 활용하면 여러분의 웹사이트가 찬란하게 빛날 수 있다. 이 도전에 뛰어드는 사람이 많아진다면 웹도 더 진화할 수 있을 것이다.

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

웹 기술이 지금처럼 강력했던 적은 없었다. CSS를 이용해 놀라운 레이아웃을 만들고, SVG로 이미지를 가볍게 최적화해 배포할 수 있고, 자바스크립트 API로 단말기의 다양한 센서에 접근할 수 있다. 여기에 서비스 워커가 더해지면 오프라인 기능까지 구현할 수 있는 것이다.
이 책은 진정으로 회복력 있는 웹사이트를 어떻게 디자인해야 하는지 보여준다. 마침내 우리는 변덕스럽고, 믿지 못할 네트워크 환경에서도 차질 없이 작업할 수 있는 접근성 높은 해결 방법을 찾은 것이다.

출판사 서평

웹 없이는 살 수 없다.

오늘날에는 웹을 기반으로 다양한 사업이 운영되고 있다. 웹 없이는 트위터도, 페이스북도 존재할 수 없다. 단지 상업적 서비스만의 이야기가 아니다. 위키피디아나 여러분이 즐겨 읽는 블로그도 웹이 없다면 볼 수 없다. 웹은 한 가지 용도에 맞춘 플랫폼이 아니다. 웹에서는 수많 은 종류의 활동이 이루어지며 웹은 의식적으로 그렇게 설계되었다.
그 많은 훌륭한 것들이 다 웹을 기반으로 하고 있듯 웹도 인터넷을 바탕으로 한다. 흔히 '웹'과 '인터넷'이라는 용어를 섞어서 사용하곤 한다. 하지만 웹(월드 와이드 웹)은 인터넷을 이용해 만들어진 여러 서비스 가운데 하나일 뿐이다.

네트워크가 문제다.

웹이 그렇듯 인터넷 역시 다양한 서비스를 제공할 수 있도록 설계되었다. 인터넷은 수많은 네트워크를 한데 엮어놓은 또 다른 네트워크다. 인터넷 속에서는 수많은 네트워크가 서로 동일한 프로토콜에 따라 데이터 패킷들을 주고받도록 약속돼 있다. 이 데이터 패킷들은 바닷속에 설치된 광케이블을 따라 전송되며, 와이파이와 전파 신호 등으로 뿌려지는가 하면 인공위성을 통해 우주 공간으로 쏘아지기도 한다.
네트워크가 올바르게 작동하는 한 웹 역시 잘 움직일 것이다. 하지만 가끔 네트워크 상태가 나빠질 때가 있다. 모바일 네트워크(이동식 네트워크)는 기차 같은 '이동수단'을 이용할 때 연결이 불안정해지는 경향이 있다. 평소 잘되던 와이파이도 호텔 같은 곳에서 사용하려면 문제가 생긴다.
네트워크가 안 되면 웹도 안 된다. 원래 그런 것이다. 어떻게 할 방법이 없다. 과거에는 그랬다.

서비스 워커가 답이다.

무엇보다 가장 설레는 것은 네트워크가 작동하지 않는 환경에서도 웹사이트를 계속 실행할 수 있는 기술이 마침내 등장했다는 것이다. 대체 어떤 마술을 부려 오프라인에서 웹사이트가 실행되는 것일까? 비결은 '서비스 워커'라는 브라우저 기능에 있다.
웹은 클라이언트와 서버의 환상적인 협연이다. 웹 브라우저는 클라이언트이며, 사용자 측에서 작업을 수행하는 소프트웨어다. 사용자는 원하는 일을 해내거나 어떤 정보를 찾기 위해 브라우저에 URL을 입력하거나 링크를 통해 접근한다. 이때 웹 브라우저가 웹 서버에 요청을 보낸다. 이 요청이 서버에 도달하려면 인터넷 세계를 가로지르는 과정이 필요하다. 그렇다면 웹 브라우저가 요청을 보내기 전에 지시할 수 있다면 어떨까? 서비스 워커는 바로 이것을 가능하게 해주는 도구다.
서비스 워커는 혼자서 할 수 있는 것이 많지 않다. 하지만 이를 이용함으로써 매우 강력한 브라우저 기능을 활용할 수 있게 된다. 서비스 워커에서 명령을 작성할 때 페치 API나 캐시 API 등 다양한 API를 이용할 수 있다. 이런 명령들이 네트워크가 끊겼을 때 API를 이용해 서비스 워커에 백업 파일을 읽어들이도록 지시한다.

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

월드 와이드 웹 컨소시엄(W3C)은 2014년 서비스 워커 표준 개발을 시작했다. 현재 크롬, 사파리, 파이어폭스, 엣지 등 대부분의 웹 브라우저에서 지원한다. 서비스 워커는 웹 애플리케이션이나 웹 서비스를 구성하는 HTML, CSS, 자바스크립트, 이미지, 동영상 등 다양한 리소스들에 대해 적합한 캐시 제어 기능을 지원해 네이티브 앱과 같이 오프라인에서도 이용할 수 있도록 한다.
웹 애플리케이션의 리소스 중 갱신되지 않는 리소스를 로컬에 처음 한 번만 저장(캐싱)하고 이후 재실행하면 로컬에 저장된 리소스를 사용해 오프라인 이용이 가능하다. 또한 메신저 앱을 실행하지 않은 상황에서 새로운 메시지를 받을 수 있도록 지원하는 앱 푸시 알림 같은 기능을 웹에서도 지원한다. 즉 브라우저가 실행되지 않는 상황에서도 서비스 워커 코드가 백그라운드에서 실행되면서 푸시 알림이 오면 이를 처리해 받은 메시지를 팝업 창으로 보여줄 수 있다.

이제는 PWA다.

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

◆이 책에서 다루는 내용
-서비스 워커란 무엇인가
-서비스 워커로 오프라인의 한계 뛰어넘기
-자원 가져오는 방법
-캐시하는 법
-오프라인 대응 페이지 만들기
-서비스 워커 개선하기
-저장 공간 관리하기
-PWA로 나아가기

목차

한국어판 출간에 앞서
추천의 글
chapter 1 서비스 워커 소개
chapter 2 오프라인 준비하기
chapter 3 자원 가져오기
chapter 4 캐시 미 이프 유 캔
chapter 5 서비스 워커 전략
chapter 6 서비스 워커 다듬기
chapter 7 정리정돈
chapter 8 오프라인 사용자 경험
chapter 9 프로그레시브 웹 앱
감사의 글
옮긴이의 글
참고 자료
참고 URL
찾아보기

본문중에서

이 책은 흥미로운 만큼 부담스러울 수 있는 개념들을 알기 쉽게 설명하고 따라 하기 쉬운 예제 코드로 정리해놓았다. 또 서비스 워커의 함정을 보여주고 이를 매끄럽게 해결하는 방법도 알려준다.
갑작스럽게 네트워크와 단절되는 상황에 처하더라도 살아남는 웹사이트를 만들고 싶다면 이 책을 통해 서비스 워커를 실무에 적용하는 비법을 터득하길 바란다.
( '추천의 글' 중에서)

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

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

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

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

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

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

서비스 워커는 페이지와 이미지를 몇 장까지 캐시할 수 있을까? 캐시에 할당된 공간은 일정하지 않다. 특정 캐시 항목을 일정 수 이하로 줄이는 코드를 작성해보자. 여러 번 사용하게 될 코드는 재사용하기 편하도록 함수로 정의해두면 좋다.
( 'chapter 7 정리정돈' 중에서)

웹사이트에서는 사용자가 둘러본 페이지들이 캐시에 저장된다. 그러다가 사용자의 인터넷 연결이 끊기면 오프라인 대응 페이지가 출력된다. 사용자에게 인터넷 연결 없이도 볼 수 있는 페이지들을 목록으로 안내해주는 것은 어떨까? 오프라인에서 읽을 페이지를 저장하는 사용자 인터페이스가 필요하다. CSS를 이용해 버튼을 꾸미고, 로컬스토리지 같은 API로 캐싱하는 페이지의 메타데이터를 저장하는 법을 알아보자. 또 사용자가 이용하는 페이지의 이미지들(비디오·오디오 파일까지)을 저장할 별도의 캐시를 만드는 방법도 소개한다.
( 'chapter 8 오프라인 사용자 경험' 중에서)

웹은 네이티브가 아니다. 과거에는 오프라인에서 작동하는 것을 만들려면 네이티브 앱이 유일한 대안이었다. 그러나 서비스 워커를 이용하면 오프라인 기능을 가진 사이트를 웹으로 즉시 배포할 수 있다. 네이티브 앱과 웹의 장점만을 결합한 프로그레시브 웹 앱(PWA)이 바로 그것이다. PWA는 기기나 브라우저 종류에 관계 없이 누구나 사용할 수 있어야 한다. 즉 반응형 디자인과 맥을 같이한다. PWA의 핵심 기술은 HTTPS, 서비스 워커, 웹 앱 매니페스트다.
( 'chapter 9 프로그레시브 웹 앱' 중에서)

웹 기술의 놀라운 진보에도 불구하고 아직도 많은 사람이 웹에서 불쾌한 경험을 하고 있다. 예측할 수 없는 네트워크 환경으로 인해 웹이 제대로 작동하지 않는 상황이 반복되면 사람들은 점차 웹을 외면하게 될 것이다. 이런 현실을 바꾸는 것은 쉽지 않은 도전이다. 하지만 해낼 수 있다. 프로그레시브 웹 앱이 앞길을 비춰줄 것이다.
( '전망' 중에서)

관련이미지

저자소개

제레미 키스(Jeremy Keith) [저] 신작알림 SMS신청 작가DB보기
생년월일 -
출생지 -
출간도서 0종
판매수 0권

영국 브링턴에서 일하고 있는 웹 개발자이다. Clearleft (www.clearleft.com)라는 웹 컨설팅 업체에서 일하고 있고, XHTML, CSS, DOM과 같은 웹 표준 기술을 이용해 접근성이 높으면서 디자인도 우수한 웹사이트를 즐겁게 만들고 있다. 또한 국제 웹 표준 프로젝트(webstandards.org)의 DOM 스크립트 TF를 이끌고 있기도 하다.
여가 시간에는 alt.country 밴드인 Salter Cane(www.saltercane.com)에서 부주키를 연주하기도 한다. 아일랜드 전통 음악을 다루는 The Session(www.thesession.org)이라는 커뮤니티 웹사이트를 만들고 운영하고 있다.

생년월일 -
출생지 -
출간도서 0종
판매수 0권

파이썬, 자바스크립트, 리스프 등 여러 가지 프로그래밍 언어를 사용하고, 함수형 프로그래밍 패러다임을 사랑하는 프로그래머. 기술 블로그(https://bakyeono.net)를 운영하고 있다

이 상품의 시리즈

(총 26권 / 현재구매 가능도서 17권)

컴퓨터/인터넷 분야에서 많은 회원이 구매한 책

    리뷰

    0.0 (총 0건)

    구매 후 리뷰 작성 시, 북피니언 지수 최대 600점

    리뷰쓰기

    기대평

    작성시 유의사항

    평점
    0/200자
    등록하기

    기대평

    0.0

    교환/환불

    교환/환불 방법

    ‘마이페이지 > 취소/반품/교환/환불’ 에서 신청함, 1:1 문의 게시판 또는 고객센터(1577-2555) 이용 가능

    교환/환불 가능 기간

    고객변심은 출고완료 다음날부터 14일 까지만 교환/환불이 가능함

    교환/환불 비용

    고객변심 또는 구매착오의 경우에만 2,500원 택배비를 고객님이 부담함

    교환/환불 불가사유

    반품접수 없이 반송하거나, 우편으로 보낼 경우 상품 확인이 어려워 환불이 불가할 수 있음
    배송된 상품의 분실, 상품포장이 훼손된 경우, 비닐랩핑된 상품의 비닐 개봉시 교환/반품이 불가능함

    소비자 피해보상

    소비자 피해보상의 분쟁처리 등에 관한 사항은 소비자분쟁해결기준(공정거래위원회 고시)에 따라 비해 보상 받을 수 있음
    교환/반품/보증조건 및 품질보증 기준은 소비자기본법에 따른 소비자 분쟁 해결 기준에 따라 피해를 보상 받을 수 있음

    기타

    도매상 및 제작사 사정에 따라 품절/절판 등의 사유로 주문이 취소될 수 있음(이 경우 인터파크도서에서 고객님께 별도로 연락하여 고지함)

    배송안내

    • 인터파크 도서 상품은 택배로 배송되며, 출고완료 1~2일내 상품을 받아 보실 수 있습니다

    • 출고가능 시간이 서로 다른 상품을 함께 주문할 경우 출고가능 시간이 가장 긴 상품을 기준으로 배송됩니다.

    • 군부대, 교도소 등 특정기관은 우체국 택배만 배송가능하여, 인터파크 외 타업체 배송상품인 경우 발송되지 않을 수 있습니다.

    • 배송비

    도서(중고도서 포함) 구매

    2,000원 (1만원이상 구매 시 무료배송)

    음반/DVD/잡지/만화 구매

    2,000원 (2만원이상 구매 시 무료배송)

    도서와 음반/DVD/잡지/만화/
    중고직배송상품을 함께 구매

    2,000원 (1만원이상 구매 시 무료배송)

    업체직접배송상품 구매

    업체별 상이한 배송비 적용