Cross-Origin Storage API 소개

Thomas Steiner

게시일: 2026년 11월 10일

최신 웹 앱은 JavaScript 프레임워크, 게임 엔진, AI 모델과 같은 대규모 애셋에 의존하는 경우가 많습니다. 사이트에서 동일한 애셋을 사용하더라도 각 사이트에서 각 애셋의 자체 사본을 다운로드하고 저장해야 합니다.

제안된 교차 출처 Storage API(줄여서 COS)를 사용하면 클라이언트가 해시로 원하는 콘텐츠를 지정하고, 지정된 사이트(또는 모든 사이트)에서 공유하기 위해 모든 URL에서 콘텐츠를 가져옵니다. 즉, 애셋을 제공하는 것과 별개로 정확하고 알려진 리소스를 사이트 간에 공유할 수 있습니다. 이 제안에는 보안 이점과 안전 문제가 수반됩니다.

사용 사례

Cache Storage API를 사용한 모델 캐싱 및 애셋 캐싱의 중요성에 관해 자세히 설명했습니다. 교차 출처 Storage API는 한 단계 더 나아가 여러 관련 웹사이트(또는 기타 웹사이트)가 동일한 리소스에 액세스해야 하는 경우에 유용할 수 있습니다.

  • AI 모델: Gemma 또는 Llama 변형과 같은 모델의 무게는 약 1GB에서 수십 기가바이트에 이릅니다. COS를 통해 하나의 사본을 저장하고 검색하면 대규모 중복 다운로드를 방지할 수 있습니다. 이것이 이 제안의 주요 동기입니다.
  • Wasm 모듈: Flutter와 같은 프레임워크는 수천 개의 서로 다른 출처에서 하루에 수백만 번 요청되는 Wasm 파일을 전송하며, 항상 바이트 단위로 동일합니다.
  • 인기 있는 JavaScript 라이브러리 및 프레임워크: 공급업체 코드를 별도로 전체(예: 트리 셰이킹되지 않은 완전한 React 라이브러리) 번들로 묶으면 여러 앱이 COS를 통해 캐시된 사본 하나를 공유할 수 있습니다.
  • 게임 엔진: Godot 또는 Unity와 같은 엔진을 기반으로 빌드된 브라우저 게임은 COS를 통해 엔진 런타임을 공유하고 네트워크를 통해 게임별 애셋만 가져올 수 있습니다. 여러 출처 또는 iframe에서 다양한 캐주얼 게임을 호스팅하는 게임 포털이 가장 큰 이점을 누릴 수 있습니다.
  • 대형 웹 글꼴: 아이콘 글꼴, 이모티콘 글꼴, 광범위한 유니코드 적용 범위가 있는 글꼴은 수많은 페이지에서 다운로드됩니다. COS를 통해 한 번 공유하면 성능과 지속 가능성 모두에 도움이 됩니다.
서로 관련이 없는 두 개의 Three.js 게임인 Descent와 Quake가 COS를 통해 엔진의 사본 하나를 공유하며, 이는 DevTools에서 검사됩니다.
서로 관련이 없는 두 개의 Three.js 게임인 Descent(백그라운드 탭)와 Quake(포그라운드 탭)가 COS를 통해 엔진의 사본 하나를 공유하며, DevTools에서 검사됩니다. 이 스크린샷은 실험용 Chromium 빌드에서 가져온 것으로 최종 디자인이 반영되지 않을 수 있습니다.

COS 작업의 기본 흐름

COS API는 웹 앱이 암호화 해시로 식별되는 출처 경계를 넘어 파일을 저장하고 검색하는 navigator.crossOriginStorage.getFileHandle() 메서드를 도입합니다. 설명에는 API 작업의 기본 흐름을 보여주는 예가 있습니다.

지금 사용해 보기

현재 COS를 실험하는 방법에는 두 가지가 있습니다.

  • Chrome 웹 스토어, Firefox 부가기능 또는 Safari 앱 스토어에서 브라우저 확장 프로그램을 설치하여 API 노출 영역과 모든 통합을 폴리필합니다. 모든 브라우저에서 API 흐름을 테스트할 수 있습니다. 또는 소스 코드에서 압축해제된 확장 프로그램을 로드합니다.
  • Chromium의 실험: 실험용 Chromium 구현이 있습니다. goo.gle/cos-chromium에서 Apple Silicon 또는 Linux x86_64용 macOS를 다운로드한 다음 about://flags를 열고 '교차 출처 스토리지'를 검색하여 Enabled로 설정하고 메시지가 표시되면 다시 시작합니다. 이 빌드에는 DevTools 통합이 포함되어 있습니다. 애플리케이션 탭에서 교차 출처 저장소를 찾습니다.

생태계 관심

COS는 초기 단계의 제안이며, 여러 프로젝트에서 이미 실험적 지원을 제공하고 있습니다. 일반적으로 선택 플래그 뒤에 있으며 점진적 개선으로 계층화되어 있습니다.

  • Emscripten은 생성된 Wasm 출력을 공유합니다.
  • Flutter는 Skia Wasm 런타임을 공유합니다.
  • Transformers.js는 모델 가중치와 이 가중치가 종속된 Wasm 런타임을 공유합니다.
  • WebLLM은 모델과 런타임을 공유합니다.
  • wllama는 AI 모델을 공유합니다.
  • Nuxt.js는 교차 출처 저장소에서 공유 종속 항목을 로드하고 Vite COS 플러그인을 유지합니다.
  • Prompt API Polyfill은 WebLLM 및 Transformers.js 백엔드에서 AI 모델을 공유합니다.
  • Prebid.js에는 헤더 입찰 라이브러리의 COS 지원 CDN 배포가 있습니다.

표준화

교차 출처 스토리지는 초기 단계의 WICG 제안입니다. 초기 W3C TAG 설계 검토를 읽어보세요.

API 및 제안서에 관한 의견을 보내주시기 바랍니다. 교차 출처 저장소 저장소에서 문제를 신고하거나 지원을 표시하거나 pull 요청을 열 수 있습니다.

리소스

다음 도구와 데모도 확인해 보세요.

추가 배경 자료

대화 및 팟캐스트