블루투스를 통해 웹사이트를 단일 파일로 공유하고 원본 컨텍스트에서 오프라인으로 실행할 수 있습니다.
전체 웹사이트를 단일 파일로 묶고 공유 가능하게 만들면 웹의 새로운 사용 사례가 열립니다. 다음과 같은 작업이 가능한 세상을 상상해 보세요.
- 나만의 콘텐츠를 만들고 네트워크에 제한되지 않고 모든 종류의 방식으로 배포할 수 있습니다.
- 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이 출시되기 전에는 스토리가 여기서 끝나고, 번갈아 가며 친구의 기기에서 게임을 플레이하거나 다른 것을 찾아 시간을 보내야 했습니다. 하지만 웹 번들을 사용하면 다음과 같은 작업을 할 수 있습니다.
- 친구에게 게임의
.wbn
파일을 공유해 달라고 요청합니다. 예를 들어, 파일 공유 앱을 사용하여 파일을 쉽게 P2P로 공유할 수 있습니다. - 웹 번들을 지원하는 브라우저에서
.wbn
파일을 엽니다. - 내 기기에서 게임을 플레이하고 친구의 최고 점수를 경신해 보세요.
다음은 이 시나리오를 설명하는 동영상입니다.
보시다시피 웹 번들에는 모든 리소스가 포함되어 있어 오프라인에서 작동하고 즉시 로드됩니다.
웹 번들 빌드
현재 go/bundle
CLI가 웹사이트를 번들로 묶는 가장 쉬운 방법입니다. go/bundle
는 Go에서 빌드된 웹 번들 사양의 참조 구현입니다.
- Go를 설치합니다.
go/bundle
를 설치합니다.go get -u github.com/WICG/webpackage/go/bundle/cmd/...
preact-todomvc 저장소를 클론하고 웹 앱을 빌드하여 리소스를 번들로 묶을 준비를 합니다.
git clone https://github.com/developit/preact-todomvc.git cd preact-todomvc npm i npm run build
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
는 아직 개발 초기 단계입니다.
웹 번들 활용하기
웹 번들을 사용해 보려면 다음 단계를 따르세요.
about://version
페이지로 이동하여 사용 중인 Chrome 버전을 확인하세요. 버전 80 이상을 실행하는 경우 다음 단계를 건너뜁니다.- Chrome 80 이상을 실행하지 않으면 Chrome Canary를 다운로드합니다.
about://flags/#web-bundles
를 엽니다.웹 번들 플래그를 사용 설정됨으로 설정합니다.
Chrome을 다시 실행합니다.
데스크톱인 경우
todomvc.wbn
파일을 Chrome으로 드래그 앤 드롭하고 Android인 경우 파일 관리 앱에서 탭합니다.
모든 것이 마법처럼 작동합니다.
다른 샘플 웹 번들을 사용해 볼 수도 있습니다.
- web.dev.wbn은 2019년 10월 15일 기준 전체 web.dev 사이트의 스냅샷입니다.
- proxx.wbn: PROXX는 오프라인에서 작동하는 지뢰찾기 클론입니다.
- squoosh.wbn: Squoosh는 다양한 이미지 압축 형식을 나란히 비교할 수 있는 편리하고 빠른 이미지 최적화 도구로, 크기 조절 및 형식 변환을 지원합니다.
의견 보내기
Chrome의 Web Bundle API 구현은 아직 실험 단계에 있으며 불완전합니다. 모든 기능이 제대로 작동하지 않으며 실패하거나 다운될 수 있습니다. 이것이 실험용 플래그 뒤에 있는 이유입니다. 하지만 이 API는 Chrome에서 살펴볼 수 있을 만큼 충분히 준비되어 있습니다. 새로운 API를 설계하는 데는 웹 개발자의 의견이 중요하므로, 웹 개발자들에게 사용해 보고 의견을 알려주세요.
- webpackage-dev@chromium.org로 일반적인 의견을 보내주세요.
- 사양에 관한 의견이 있으면 https://github.com/WICG/webpackage/issues/new를 방문하여 새로운 사양 문제를 신고하거나 wpack@ietf.org로 이메일을 보내 주시기 바랍니다.
- Chrome 동작에 문제가 발생하면 https://crbug.com/new를 방문하여 Chromium 버그를 신고하세요.
- 사양 논의 및 도구에 관한 참여 역시 환영입니다. 참여하려면 사양 저장소를 방문하세요.
감사의 말씀
사양에 기여하고 Canary에서 기능을 빌드하고 이 문서를 검토하신 Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda, Jeffrey Yasskin님께도 큰 감사의 마음을 전합니다. 표준화가 진행되는 동안 Dan York은 IETF 논의를 탐색하는 데 도움을 주었으며, Dave Cramer는 게시자에게 실제로 필요한 사항에 관한 유용한 리소스였습니다. 또한 멋진 preact-todomvc 및 프레임워크 개선을 위한 끊임없는 노력을 기울인 제이슨 밀러에게도 감사의 인사를 전합니다.