브라우저 간 상호운용성을 높이기 위한 Interop 2026 프로젝트의 초점 영역 20가지와 조사 과제 4가지를 소개합니다.
URL: https://webkit.org/blog/17818/announcing-interop-2026/
Title: Interop 2026 발표
웹 개발자, 디자이너, 브라우저 애호가 모두에게 반가운 소식입니다 — Interop 2026이 공개되었습니다. 브라우저 간 상호운용성을 개선한다는 미션을 이어갑니다. 5년 연속으로 Google, Igalia, Microsoft, Mozilla와 협력하여, 브라우저 전반에서 웹 기술이 더 일관되고 신뢰할 수 있게 동작하도록 만들고 있습니다.
웹사이트를 모든 브라우저에서 동작하게 만드는 일은 쉽지 않습니다. 특히 브라우저 엔진들이 같은 웹 기술을 조금씩 다른 방식으로 구현해 왔다면 더 그렇습니다. Interop 프로젝트는 주요 브라우저 엔진들이 함께 모여, 같은 해에 같은 기능 묶음을 개선함으로써 이 문제를 해결합니다. 각 기능은 공식 웹 표준(각 웹 기술이 어떻게 동작해야 하는지를 규정하는 형식적 기술 사양)에 얼마나 완전히 부합하는지로 평가됩니다. 이는 더 신뢰할 수 있고 일관된 플랫폼으로의 진전을 가속하는 데 도움이 됩니다.
Safari는 Interop 2026에 포함된 많은 기능을 이미 구현했습니다. 실제로 contrast-color(), 미디어 의사 클래스, shape(), 스코프가 있는 커스텀 엘리먼트 레지스트리(Scoped Custom Element Registries)를 가장 먼저 출시한 브라우저가 바로 Safari였습니다. 또한 앵커 위치 지정(Anchor Positioning), 스타일 쿼리(Style Queries), 커스텀 하이라이트(Custom Highlights), Scroll Snap, 뷰 전환(View Transitions) 등에도 지원이 있습니다. 이러한 기술들이 Interop 2026의 중점 영역으로 포함되어, 모든 브라우저에서 구현되고 남아 있는 상호운용성 격차가 해소될 수 있다는 점이 매우 기대됩니다.
또한 우리는 다음 기능들의 지원 추가에 집중할 예정입니다: 고급 attr(), IndexedDB의 getAllRecords() 메서드, WebTransport, 그리고 Wasm용 JavaScript Promise Integration API. 이 네 가지 영역은 합쳐서 Interop 2026 점수의 20%를 차지합니다. 실제 요구를 해결하는 흥미로운 새 기능들입니다.
Interop 프로젝트는 Web Platform Tests(WPT) — 브라우저가 웹 표준에 부합하는지 확인하는 자동화 테스트 — 를 통해 상호운용성을 측정합니다. Interop 2026은 야심차게도 20개의 중점 영역을 다룹니다. 이 중 15개는 완전히 새로 추가된 것이고, 5개는 Interop 2025에서 이어져 온 것입니다.
attr()contrast-color()getAllRecords()shape()앵커 위치 지정(Anchor positioning)은 Interop 2025에서 이어져 온 항목으로, 요소들을 서로 기준 삼아 배치할 수 있도록 하는 데 큰 진전이 있었습니다. 올해의 초점은 사양을 명확히 하고, 테스트 이슈를 해결하며, 이 강력한 레이아웃 기능의 신뢰성을 높이는 데 있습니다.
CSS attr() 함수는 HTML 속성 값들을 CSS로 직접 끌어와 스타일에 반영함으로써, 구조적 데이터와 시각적 표현 사이의 간극을 메워 줍니다. JavaScript의 부담 없이도 더 동적이고 문맥을 인지하는 스타일링이 가능해집니다. attr()는 오랫동안 content 속성에 한해 지원되어 왔지만, 고급 attr()는 타입 변환을 통해 모든 CSS 속성에서 동작하도록 확장합니다. 즉 HTML 속성 값을 색상, 길이, 각도 등 다양한 데이터 타입으로 사용할 수 있습니다. 이제 사양에서의 보안 우려가 정리되었고, 브라우저 제작사들은 강력한 상호운용성과 함께 이 오랫동안 기다려온 기능을 출시하는 데 뜻을 모았습니다.
스타일 쿼리(Style queries)는 특정 컨테이너에서 정의된 커스텀 속성(변수)의 값에 따라 조건부로 스타일을 적용할 수 있게 해줍니다. 컨테이너 크기 쿼리가 컨테이너의 크기에 반응하게 해주는 것처럼, 스타일 쿼리는 테마 값, 상태 플래그, 기타 문맥 데이터에 반응하도록 합니다.
css@container style(--theme: dark) { .card { background: #1a1a1a; color: #ffffff; } }
스타일 쿼리는 최근 몇 년간 출시되기 시작했고 Safari 18.0에도 포함되었습니다. Interop 2026은 이 강력한 도구가 어디서나 일관되게 동작하도록 돕습니다.
CSS의 contrast-color() 함수는 색상을 반환하는데, 반환값은 검정 또는 흰색 중 하나입니다. 함수에 지정된 색상과 더 높은 대비를 갖는 쪽을 브라우저가 선택하도록 책임을 브라우저에 맡깁니다.
css.button { background: var(--brand-color); color: contrast-color(var(--brand-color)); }
브라우저가 선택을 하게 되면 디자인 시스템을 더 단순하게 설계할 수 있습니다. 모든 색상 조합을 수동으로 정의할 필요가 없습니다. Safari와 Firefox는 2025년에 지원을 출시했으며, Interop 2026은 이 강력한 함수가 모든 브라우저에서 일관되게 동작하도록 보장할 것입니다.
참고로 contrast-color()가 접근성 문제를 모두 “마법처럼” 해결해 주지는 않습니다. 자세한 내용은 CSS에서 브라우저가 대비되는 색상을 고르게 하기(How to have the browser pick a contrasting color in CSS)에서 확인하세요.
CSS Custom Highlight API는 DOM에 추가 요소를 넣지 않고도 임의의 텍스트 범위를 스타일링할 수 있게 해줍니다. JavaScript로 하이라이트 범위를 만든 다음, 의사 요소로 스타일을 지정합니다.
::highlight() 의사 요소는 페이지 내 검색 결과 강조 표시, 코드 편집기에서의 구문 강조 표시 커스터마이징, 사용자 커서를 포함한 협업 편집 앱, 또는 문서 구조를 바꾸지 않고 텍스트를 시각적으로 표시해야 하는 모든 상황에 적합합니다. ::target-text 의사 요소는 사용자가 텍스트 프래그먼트가 포함된 링크를 탭했을 때 스크롤되어 도착한 텍스트를 스타일링합니다.
브라우저 전반에서 구현이 진행되는 가운데, Interop 2026은 이러한 하이라이팅 기능이 일관되게 동작하도록 하여 텍스트 기반 상호작용을 위한 신뢰할 수 있는 도구를 제공합니다.
<dialog> 요소와 popover 속성은 웹에서 오버레이 UI를 구축하는 방식을 크게 바꾸었습니다. Dialog는 Interop 2022의 일부였고, Popover는 Interop 2024에 포함되었습니다. 올해는 이 기능들에 대한 최근의 3가지 개선이 Interop 2026의 중점 영역을 구성합니다.
closedby 속성은 사용자가 dialog를 어떻게 닫을 수 있는지 제어합니다:
html<dialog closedby="any"> <!-- 바깥을 클릭하거나 Escape를 눌러 닫을 수 있음 --> </dialog>
popover="hint" 속성은 다른 auto popover를 닫지 않는 하위 popover를 생성합니다 — 툴팁에 적합합니다:
html<div popover="hint" id="tooltip"> 이 툴팁은 메뉴를 닫지 않습니다! </div>
:open 의사 클래스는 열림 상태(open state)를 가진 요소와 매칭되며, <dialog>, <details>, <select>에서 동작합니다:
cssdialog:open { animation: slideIn 0.3s; }
이러한 추가 기능들 덕분에 접근 가능하고 사용자 친화적인 UI 오버레이를 그 어느 때보다 쉽게 만들 수 있습니다.
fetch() 메서드에 업로드와 부분 콘텐츠 처리를 위한 강력한 기능 3가지가 새로 추가되고 있습니다.
ReadableStream 요청 본문은 진정한 스트리밍 업로드를 가능하게 하여, 큰 파일이나 실시간 데이터를 먼저 메모리에 모두 올리지 않고도 업로드할 수 있게 합니다:
jsawait fetch('/upload', { method: 'POST', body: readableStream, duplex: 'half' });
향상된 FormData 지원은 multipart 업로드와 응답을 개선합니다.
Range 헤더 지원은 부분 콘텐츠 요청을 가능하게 하며, 비디오 스트리밍과 재개 가능한 다운로드에 필수적입니다:
jsfetch('/video.mp4', { headers: { 'Range': 'bytes=0-1023' } });
이러한 개선은 fetch()를 더 특화된 API 수준으로 끌어올려, 커스텀 솔루션의 필요성을 줄여줍니다.
IndexedDB는 파일과 Blob을 포함해 브라우저에 대량의 구조화 데이터를 저장할 수 있는 저수준 API입니다. 브라우저에서 오래전부터 지원되어 왔습니다.
이제 IndexedDB는 IDBObjectStore와 IDBIndex를 위한 새로운 getAllRecords() 메서드로 성능이 크게 향상됩니다. 이 메서드들은 레코드를 배치 단위로, 그리고 역순으로 가져올 수 있게 해줍니다:
jsconst records = await objectStore.getAllRecords({ query: IDBKeyRange.bound('A', 'M'), count: 100, direction: 'prev' });
Interop 2026에는 이 새 메서드만 포함됩니다. 점수는 모든 IndexedDB 테스트가 아니라 getAllRecords() 테스트의 통과 비율만 보고합니다.
WebAssembly는 고성능 애플리케이션(게임, 생산성 도구, 과학 시뮬레이션 등)을 브라우저에서 실행할 수 있게 해줍니다. 하지만 근본적인 불일치가 있었습니다. 이러한 애플리케이션 중 상당수는 파일 I/O나 네트워크 요청 같은 동작이 동기식(블로킹)인 환경을 대상으로 작성되었는데, 웹은 근본적으로 비동기 기반이기 때문입니다.
JavaScript Promise Integration API(JSPI)는 이 간극을 메웁니다. 동기식 동작을 기대하는 WebAssembly 코드가, 애플리케이션 전체를 다시 작성하지 않고도 JavaScript의 Promise 기반 비동기 API와 매끄럽게 동작할 수 있게 해줍니다. 이는 기존 C/C++/Rust 애플리케이션을 웹으로 더 쉽게 포팅할 수 있음을 의미하며, 브라우저에서 실행 가능한 소프트웨어의 범위를 넓혀줍니다.
Interop 2026은 JSPI가 브라우저 간에 일관되게 동작하도록 하여, WebAssembly를 복잡한 애플리케이션을 위한 더 실용적인 플랫폼으로 만들 것입니다.
우리는 여러 해에 걸쳐 미디어 의사 클래스를 Interop 프로젝트에 포함시키자고 제안해 왔습니다. 올해 포함되어 매우 기쁩니다!
7개의 CSS 의사 클래스는 <audio> 및 <video> 요소의 재생 상태에 따라 CSS를 적용할 수 있게 해줍니다:
:playing — 미디어가 현재 재생 중:paused — 미디어가 일시정지됨:seeking — 사용자가 새 위치로 탐색 중:buffering — 미디어가 버퍼링 중:stalled — 재생이 정지(stall)됨:muted — 오디오가 음소거됨:volume-locked — 볼륨을 변경할 수 없음이들은 Safari에서는 오래전에 출시되었지만, 다른 브라우저에서 지원이 없다 보니 대부분의 개발자들은 이를 사용하지 않거나 존재 자체를 모르는 경우가 많았습니다. 대신 개발자들은 UI 상태를 미디어 재생 상태와 동기화하기 위해 JavaScript가 필요했습니다.
CSS에서 미디어 상태 의사 클래스를 사용하는 것이 훨씬 단순하고 효율적입니다.
cssvideo:buffering::after { content: "Loading..."; } audio:muted { opacity: 0.5; }
특히 :has()와 결합하면 더욱 강력해집니다. 미디어 플레이어의 자식 요소뿐 아니라, 재생 상태에 따라 페이지의 어떤 요소든 스타일링할 수 있게 해주기 때문입니다.
cssarticle:has(video:playing) { background-color: var(--backgroundColor); color: contrast-color(var(--backgroundColor)); transition: background-color 0.5s ease; }
:has()의 강력함에 대해서는 _부모 선택자 및 그 이상으로서의 CSS :has() 사용하기(Using :has() as a CSS Parent Selector and much more)_에서 더 알아보세요.
싱글 페이지 애플리케이션을 만들어본 적이 있다면 history.pushState()와 popstate 이벤트로 내비게이션 상태를 관리하는 고통을 겪어본 적이 있을 것입니다. Navigation API는 내비게이션을 가로채고 제어하는 더 깔끔하고 강력한 방법을 제공합니다.
이 중점 영역은 Interop 2025의 연장선으로, 개발자가 브라우저 내비게이션 동작을 시작하고, 가로채고, 수정할 수 있게 하는 데 큰 진전이 있었습니다. 올해도 상호운용성 개선을 이어가며, Interop 2025에서 테스트 통과율 92.3%였던 전체 점수를 더 끌어올리는 것이 목표입니다. 또한 새 기능이 하나 추가됩니다 — precommitHandler 옵션입니다. 이는 중요한 리소스가 준비될 때까지 내비게이션을 지연시켜, 불완전한 콘텐츠가 번쩍 나타나는(플래시) 현상을 방지합니다.
jsnavigation.addEventListener('navigate', (e) => { e.intercept({ async precommitHandler() { // 커밋 전에 중요한 리소스를 로드 await loadCriticalData(); }, async handler() { // 새 뷰 렌더링 renderPage(); } }); });
Interop 2026은 Navigation API가 브라우저 전반에서 안정적으로 동작하도록 하여, 웹 애플리케이션을 위한 견고한 기반을 제공할 것입니다.
웹 컴포넌트를 다뤄본 적이 있다면, 전역 customElements 레지스트리가 애플리케이션 전체에서 태그 이름당 한 번만 정의를 허용한다는 답답한 한계를 겪어봤을 수 있습니다. 서로 다른 두 라이브러리가 모두 <my-button> 컴포넌트를 정의하면 충돌이 발생합니다.
CustomElementRegistry() 생성자는 스코프가 있는 레지스트리를 만들 수 있게 해줌으로써 이 문제를 해결합니다. 애플리케이션의 서로 다른 부분 — 또는 서로 다른 shadow root — 이 동일한 태그 이름에 대해 각자 다른 정의를 가질 수 있습니다.
jsconst registry = new CustomElementRegistry(); registry.define('my-button', MyButtonV2); shadowRoot.registry = registry;
이는 마이크로프런트엔드, 컴포넌트 라이브러리, 서드파티 웹 컴포넌트를 통합하는 상황 등에서 특히 유용합니다.
Safari 26.0은 스코프가 있는 커스텀 엘리먼트 레지스트리를 처음 출시한 브라우저였습니다. Interop 2026에 포함되면서 이 기능이 모든 브라우저에서 일관되게 동작하도록 보장하는 데 도움이 될 것입니다.
스크롤 구동 애니메이션(Scroll-driven animations)은 스크롤 위치에 반응하는 애니메이션을 이제 전부 CSS만으로 더 쉽게 만들 수 있게 합니다. 사용자가 스크롤하면 애니메이션이 진행되며, JavaScript가 필요 없습니다. 스크롤 트리거 리빌(reveal), 진행 표시기, 패럴랙스 효과, 인터랙티브 스토리텔링 경험 등을 만들 수 있습니다.
표준 CSS 키프레임으로 애니메이션을 정의한 다음 animation-timeline로 스크롤에 연결합니다:
css.reveal { animation: fade-in linear forwards; animation-timeline: view(); animation-range: entry 0% entry 100%; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
view()를 사용하면 요소가 뷰포트에 들어오고 나갈 때 애니메이션이 트리거되고, scroll()을 사용하면 스크롤 컨테이너의 위치에 애니메이션을 연결할 수 있습니다. 더 자세한 내용은 CSS만으로 하는 스크롤 구동 애니메이션 가이드(A guide to Scroll-driven Animations with just CSS)_._에서 확인하세요.
Safari 26.0에서 스크롤 구동 애니메이션을 지원 출시했습니다. Interop 2026은 이 기능이 모든 브라우저에서 일관되게 동작하도록 돕습니다.
CSS Scroll Snap은 스크롤 컨테이너 내부에서 패닝 및 스크롤 동작을 제어하여, 캐러셀 같은 경험을 만들어 줍니다:
css.carousel { scroll-snap-type: x mandatory; overflow-x: scroll; } .carousel > * { scroll-snap-align: center; }
Scroll Snap은 여러 해 동안 모든 최신 브라우저에서 지원되어 왔습니다. 하지만 오래된 CSS 사양들 중 다수와 마찬가지로, 초기 버전이 이미 브라우저에 출시된 상태에서 사양이 여러 차례 변경되면서 상호운용성이 크게 무너졌습니다. 이제 웹 표준이 훨씬 성숙해진 만큼, 다시 돌아와 상호운용성을 개선할 때입니다. 이것이 Interop 프로젝트의 힘입니다 — 특정 기능에 대해 모든 브라우저 팀이 함께 집중하고, 자동화된 테스트로 불일치와 해석 차이를 찾아냅니다.
수년 동안 clip-path나 shape-outside에 사용할 복잡한 클리핑 경로를 만들려면, 직선만 지원하는 polygon()에 제한되거나, 요소 크기 변화에 반응하지 않는 SVG path를 써야 했습니다.
이제 shape() 함수는 경로처럼(move, line, curve) 명령을 사용해 복잡한 도형을 만들 수 있게 해줍니다. SVG path 같은 곡선을 제공하면서도, 요소 크기가 바뀌면 함께 적응하는 퍼센트 기반 좌표를 사용한다는 점에서 두 세계의 장점을 결합합니다.
css.element { clip-path: shape( from 0% 0%, line to 100% 0%, line to 100% 100%, curve to 0% 100% via 50% 150%, close ); }
우리는 Safari 18.4에서 shape() 함수를 지원 출시했습니다. Interop 2026이 브라우저 구현을 개선해, 복잡하고 반응형인 곡선을 렌더링하는 데 이를 자신 있게 사용할 수 있기를 기대합니다.
View Transitions는 Interop 2025의 중점 영역이었으며, 동일 문서 뷰 전환(same-document view transitions)과 view-transition-class에 한정하여 정의되었습니다. 이 기능들은 단일 페이지 내 UI 상태 간 부드러운 애니메이션 전환을 가능하게 하고, 전환 스타일에 대한 유연한 제어를 제공합니다.
Safari는 Interop 2025에서 뷰 전환 항목 99.2% 점수로 마무리했지만, 전체 상호운용성 점수는 90.8%에 머물렀습니다. 그래서 그룹은 노력을 지속하기로 결정하여, 2025년의 테스트를 그대로 이월했습니다.
Interop 2026에서는 중점 영역이 확장되어 문서 간 뷰 전환(cross-document view transitions)도 포함합니다. 이를 통해 사용자가 사이트를 탐색할 때 페이지가 새로 로드되며 갑자기 전환되는 대신, 페이지 사이의 순간에 부드러운 애니메이션 전환을 만들 수 있습니다. 문서 간 뷰 전환은 Safari 18.2에서 출시되었습니다. 더 자세한 내용은 오늘 모든 웹사이트에서 사용할 수 있는 문서 간 View Transitions 코드 두 줄(Two lines of Cross-Document View Transitions code you can use on every website today)에서 확인하세요.
웹 호환성(Web compatibility)이란, 실제 웹사이트가 특정 브라우저에서 올바르게 동작하는지를 의미합니다. 한 브라우저에서는 사이트가 동작하는데 다른 브라우저에서는 동작하지 않는다면, 그것이 “호환성(compat) 문제”입니다. 이 중점 영역은 일부 브라우저에서 실패할 경우 다른 브라우저에서 실제 웹사이트가 동작하지 않게 만드는 테스트들이기 때문에 선정된, 소수의 Web Platform Tests로 구성되어 있습니다. 이는 웹 개발자와 사용자 모두에게 문제를 일으킵니다.
Interop 프로젝트에서 Web Compat이 중점 영역이 될 때마다 다른 호환성 과제들을 겨냥해 왔습니다. 올해 Interop 2026의 웹 호환성 작업에는 다음이 포함됩니다:
-webkit-user-select만이 아니라 user-select 지원. 이는 사용자가 텍스트를 선택할 수 있는지 여부를 제어합니다.WebRTC(Web Real-Time Communication)는 플러그인이나 중간 서버 없이 브라우저 간에 실시간 오디오/비디오/데이터 통신을 가능하게 합니다. 화상회의 앱, 라이브 스트리밍 플랫폼, P2P 파일 공유, 협업 도구 등을 만들 수 있습니다.
테스트 통과율 91.6%에 도달한 WebRTC는 2026년에도 중점 영역으로 유지되며, Interop 2025에서의 진전을 바탕으로 이어집니다. WebRTC 주요 사양에서 남아 있는 “롱테일” 상호운용성 이슈를 해결하는 것을 기대하고 있습니다.
WebTransport는 HTTP/3 프로토콜을 사용해 클라이언트와 서버 간 데이터를 전송하는 현대적인 방법을 제공합니다. 하나의 연결에서 다중 스트림을 통한 저지연 양방향 통신을 제공합니다. 속도를 위한 비신뢰 datagram(UDP 유사) 지원과, 전달 보장을 위한 신뢰 스트림(TCP 유사) 지원을 모두 제공합니다.
jsconst transport = new WebTransport('https://example.com/endpoint'); await transport.ready; const stream = await transport.createBidirectionalStream(); // 데이터를 효율적으로 스트리밍
WebTransport는 게임, 실시간 협업 도구, 그리고 WebSocket보다 더 많은 제어가 필요하지만 WebRTC의 복잡성은 원치 않는 애플리케이션에 이상적입니다. Interop 2026에 포함됨으로써 WebTransport가 모든 브라우저에서 일관되게 동작하도록 보장되어, 실시간 데이터 전송을 위한 신뢰할 수 있는 선택지가 됩니다.
CSS zoom 속성은 요소와 그 내용물을 스케일링하여 레이아웃에 영향을 주며, 요소가 더 많은(혹은 더 적은) 공간을 차지하게 만듭니다. 순전히 시각적 변화만 주는 transform: scale()과 달리, zoom은 요소가 레이아웃에 참여하는 방식 자체를 바꿉니다.
css.card { zoom: 1.5; /* 요소가 150%로 커지고 더 많은 공간을 차지함 */ }
zoom은 비표준 속성으로 수년간 브라우저에서 지원되어 왔지만, 엣지 케이스와 다른 레이아웃 기능과의 상호작용에서 불일치가 많았습니다. 이제 표준화되면서 CSS zoom은 2025년에 이어 Interop 2026에서도 중점 영역으로 다시 다뤄집니다.
중점 영역 외에도, Interop 프로젝트에는 4개의 조사(investigation) 영역이 포함됩니다. 이는 팀들이 테스트 인프라의 현재 상태를 평가하고, 진전을 가로막는 이슈들을 정리하기 위해 함께 모이는 프로젝트입니다.
이전 해에서 이어져, 접근성 테스트 조사는 브라우저 간에 일관된 접근성 트리(accessibility tree)를 생성하는 방향으로 작업하는 것을 목표로 합니다. 이는 Interop 2024에서 마련된 기반 위에서 접근성에 대한 WPT 테스트 인프라를 개선합니다. 이 작업은 접근성 기능이 신뢰 가능하고 일관되게 동작하도록 보장하여, 개발자들이 더 포용적인 웹 경험을 만들 수 있도록 돕습니다.
JPEG XL은 애니메이션, 알파 투명도, 손실 및 무손실 압축을 지원하는 차세대 래스터 그래픽 포맷입니다. 우리는 Safari 17.0에서 이를 지원 출시했습니다. 이번 조사는 포괄적인 테스트 스위트를 개발해 이 기능을 제대로 테스트 가능하게 만드는 데 초점을 맞춥니다. 이를 통해 JPEG XL이 향후 중점 영역이 될 가능성이 열립니다.
모바일 테스트 조사는 2025년에 시작된 작업을 이어갑니다. 올해는 매일 수십억 사용자가 의존하는 반응형 모바일 웹 경험을 구축하는 데 중요한, 동적 뷰포트 변화 같은 모바일 특화 기능을 위한 인프라 개선에 집중할 것입니다.
2025년에서 이어져, WebVTT 조사는 웹 플랫폼이 직면한 중요한 과제를 다룹니다. 개발자들은 브라우저 간 WebVTT의 일관되지 않은 동작을 다른 자막/캡션 솔루션을 선택하는 주요 이유로 꼽습니다. 지난해 WebVTT에 대한 우리의 투자는 기존 테스트 스위트를 검증하고 수정하는 일, 그리고 그 과정에서 필요해진 사양 변경을 수행하는 일이 주였습니다. 올해도 그 노력을 이어가, 동기화된 텍스트 트랙과 폐쇄 자막이 웹 전반에서 매끄럽게 동작하도록 보장하고자 합니다.
Interop 2026은 웹 개발자인 여러분에게 중요한 20개의 중점 영역을 함께 다룹니다. attr()과 contrast-color() 같은 기능은 CSS를 더 유연하게 설계할 수 있게 해줍니다. 스크롤 구동 애니메이션과 뷰 전환 같은 기능은 JavaScript에 손대지 않고도 더 부드럽고 매력적인 경험을 만들 수 있게 합니다. WebTransport와 Navigation API 같은 기능은 현대적인 웹 애플리케이션을 만들기 위한 더 강력한 도구를 제공합니다.
또한 오랫동안 존재해온 불일치를 해결하는 중점 영역들도 그만큼 중요합니다 — Scroll Snap이 안정적으로 동작하도록 보장하고, 모든 브라우저가 shape() 구현에서 보조를 맞추게 하며, 개발자들을 좌절시키고 사이트를 깨뜨려 왔던 현실 세계의 호환성 문제를 해결합니다.
WebKit 팀은 이러한 기능들이 모든 브라우저에서 일관되게 동작하도록 만드는 데 전념하고 있습니다. 디자인 시스템, 싱글 페이지 애플리케이션, 비디오 스트리밍 플랫폼, 그 밖의 어떤 것이든 만들고 있다면, Interop 2026은 더 신뢰할 수 있는 기반을 제공하기 위해 노력하고 있습니다.
함께, 또 한 해 웹을 더 낫게 만들어 봅시다!