웹 번들 시작하기

블루투스를 통해 웹사이트를 단일 파일로 공유하고 원본 컨텍스트에서 오프라인으로 실행할 수 있습니다.

우츠노미야 유스케
유스케 우츠노미야
Twitter 홈페이지
켄지 바휴
Kenji Baheux

전체 웹사이트를 단일 파일로 묶고 공유 가능하게 만들면 웹의 새로운 사용 사례가 열립니다. 다음과 같은 작업이 가능한 세상을 상상해 보세요.

  • 나만의 콘텐츠를 만들고 네트워크에 제한되지 않고 모든 종류의 방식으로 배포할 수 있습니다.
  • Bluetooth 또는 Wi-Fi Direct를 통해 친구와 웹 앱 또는 웹 콘텐츠를 공유할 수 있습니다.
  • 사이트를 자체 USB로 전달하거나 자체 로컬 네트워크에서 호스팅할 수도 있습니다.

Web Bundles API는 이 모든 작업을 수행할 수 있도록 하는 최첨단 제안서입니다.

브라우저 호환성

Web Bundles API는 현재 실험용 플래그 뒤에 있는 Chromium 기반 브라우저에서만 지원됩니다.

Web Bundles API 소개

웹 번들은 하나 이상의 HTTP 리소스를 단일 파일에 캡슐화하기 위한 파일 형식입니다. 하나 이상의 HTML 파일, 자바스크립트 파일, 이미지 또는 스타일시트를 포함할 수 있습니다.

공식적으로 번들 HTTP 교환이라고 하는 웹 번들은 웹 패키징 제안의 일부입니다.

웹 번들이 웹 리소스의 모음임을 보여주는 그림
웹 번들 작동 방식

웹 번들의 HTTP 리소스는 요청 URL별로 색인이 생성되며 리소스를 보증하는 서명이 선택적으로 함께 제공될 수 있습니다. 서명을 통해 브라우저는 각 리소스의 출처를 이해하고 확인할 수 있으며 각 리소스를 실제 출처에서 비롯된 것으로 취급합니다. 이는 단일 HTTP 리소스에 서명하는 기능인 서명된 HTTP 교환을 처리하는 방법과 유사합니다.

이 도움말에서는 웹 번들의 정의와 사용 방법을 설명합니다.

웹 번들 설명

정확히 말해 웹 번들은 HTTP 리소스를 바이너리 형식으로 패키징하고 application/webbundle MIME 유형으로 제공되는 .wbn 확장자를 가진 CBOR 파일입니다. 자세한 내용은 사양 초안의 최상위 구조 섹션을 참조하세요.

웹 번들에는 다음과 같은 여러 고유한 기능이 있습니다.

  • 여러 페이지를 캡슐화하여 전체 웹사이트를 단일 파일로 묶을 수 있습니다.
  • MHTML과 달리 실행 가능한 자바스크립트를 사용 설정합니다.
  • HTTP 변형을 사용하여 콘텐츠 협상을 수행합니다. 이를 통해 번들이 오프라인에서 사용되는 경우에도 Accept-Language 헤더를 사용한 국제화가 가능합니다.
  • 게시자가 암호화 방식으로 서명한 경우 원본 컨텍스트로 로드됩니다.
  • 로컬에서 제공되는 경우 거의 즉시 로드됩니다.

이러한 기능은 여러 가지 시나리오를 열어줍니다. 일반적인 시나리오 중 하나는 인터넷 연결 없이도 쉽게 공유하고 사용할 수 있는 독립 실행형 웹 앱을 빌드하는 기능입니다. 예를 들어 친구와 함께 도쿄에서 샌프란시스코로 가는 비행기 안에 있다고 가정해 보겠습니다. 기내 엔터테인먼트를 좋아하지 않으시는군요. 친구가 PROXX라는 흥미로운 웹 게임을 플레이하면서 비행기에 탑승하기 전에 게임을 웹 번들로 다운로드했다고 이야기합니다. 오프라인에서도 완벽하게 작동합니다. Web Bundle이 출시되기 전에는 스토리가 여기서 끝나고, 번갈아 가며 친구의 기기에서 게임을 플레이하거나 다른 것을 찾아 시간을 보내야 했습니다. 하지만 웹 번들을 사용하면 다음과 같은 작업을 할 수 있습니다.

  1. 친구에게 게임의 .wbn 파일을 공유해 달라고 요청합니다. 예를 들어, 파일 공유 앱을 사용하여 파일을 쉽게 P2P로 공유할 수 있습니다.
  2. 웹 번들을 지원하는 브라우저에서 .wbn 파일을 엽니다.
  3. 내 기기에서 게임을 플레이하고 친구의 최고 점수를 경신해 보세요.

다음은 이 시나리오를 설명하는 동영상입니다.

보시다시피 웹 번들에는 모든 리소스가 포함되어 있어 오프라인에서 작동하고 즉시 로드됩니다.

웹 번들 빌드

현재 go/bundle CLI가 웹사이트를 번들로 묶는 가장 쉬운 방법입니다. go/bundle는 Go에서 빌드된 웹 번들 사양의 참조 구현입니다.

  1. Go를 설치합니다.

  2. go/bundle를 설치합니다.

    go get -u github.com/WICG/webpackage/go/bundle/cmd/...

  3. preact-todomvc 저장소를 클론하고 웹 앱을 빌드하여 리소스를 번들로 묶을 준비를 합니다.

    git clone https://github.com/developit/preact-todomvc.git
cd preact-todomvc
npm i
npm run build

  4. gen-bundle 명령어를 사용하여 .wbn 파일을 빌드합니다.

    gen-bundle -dir build -baseURL https://preact-todom.vc/ -primaryURL https://preact-todom.vc/ -o todomvc.wbn

수고하셨습니다 TodoMVC는 이제 웹 번들입니다.

번들을 위한 다른 옵션도 있으며 더 많은 옵션이 제공될 예정입니다. go/bundle CLI를 사용하면 HAR 파일 또는 리소스 URL의 커스텀 목록을 사용하여 웹 번들을 빌드할 수 있습니다. go/bundle에 대해 자세히 알아보려면 GitHub 저장소를 방문하세요. 번들화를 위해 실험용 Node.js 모듈인 wbn를 사용해 볼 수도 있습니다. wbn는 아직 개발 초기 단계입니다.

웹 번들 활용하기

웹 번들을 사용해 보려면 다음 단계를 따르세요.

  1. about://version 페이지로 이동하여 사용 중인 Chrome 버전을 확인하세요. 버전 80 이상을 실행하는 경우 다음 단계를 건너뜁니다.
  2. Chrome 80 이상을 실행하지 않으면 Chrome Canary를 다운로드합니다.
  3. about://flags/#web-bundles를 엽니다.

  4. 웹 번들 플래그를 사용 설정됨으로 설정합니다.

    about://flags 스크린샷
    about://flags에서 웹 번들 사용 설정

  5. Chrome을 다시 실행합니다.

  6. 데스크톱인 경우 todomvc.wbn 파일을 Chrome으로 드래그 앤 드롭하고 Android인 경우 파일 관리 앱에서 탭합니다.

모든 것이 마법처럼 작동합니다.

웹 번들로 오프라인으로 작동하는 TodoMVC의 Preact 구현

다른 샘플 웹 번들을 사용해 볼 수도 있습니다.

  • web.dev.wbn은 2019년 10월 15일 기준 전체 web.dev 사이트의 스냅샷입니다.
  • proxx.wbn: PROXX는 오프라인에서 작동하는 지뢰찾기 클론입니다.
  • squoosh.wbn: Squoosh는 다양한 이미지 압축 형식을 나란히 비교할 수 있는 편리하고 빠른 이미지 최적화 도구로, 크기 조절 및 형식 변환을 지원합니다.

의견 보내기

Chrome의 Web Bundle API 구현은 아직 실험 단계에 있으며 불완전합니다. 모든 기능이 제대로 작동하지 않으며 실패하거나 다운될 수 있습니다. 이것이 실험용 플래그 뒤에 있는 이유입니다. 하지만 이 API는 Chrome에서 살펴볼 수 있을 만큼 충분히 준비되어 있습니다. 새로운 API를 설계하는 데는 웹 개발자의 의견이 중요하므로, 웹 개발자들에게 사용해 보고 의견을 알려주세요.

감사의 말씀

사양에 기여하고 Canary에서 기능을 빌드하고 이 문서를 검토하신 Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda, Jeffrey Yasskin님께도 큰 감사의 마음을 전합니다. 표준화가 진행되는 동안 Dan York은 IETF 논의를 탐색하는 데 도움을 주었으며, Dave Cramer는 게시자에게 실제로 필요한 사항에 관한 유용한 리소스였습니다. 또한 멋진 preact-todomvc 및 프레임워크 개선을 위한 끊임없는 노력을 기울인 제이슨 밀러에게도 감사의 인사를 전합니다.