Interop 2026: 개발자를 위해 웹을 지속적으로 개선하기

브라우저 간 웹 플랫폼의 주요 기능에 대한 상호 운용성 (Interoperability)을 높이기 위한 노력인 Interop 2026을 발표하게 되어 기쁩니다. Apple, Google, Igalia, Microsoft, Mozilla를 포함하여 브라우저 렌더링 엔진 (Rendering Engines)에 상당한 기여를 하는 기업들의 대표단이 운영하는 Interop 2026은 웹 개발자와 최종 사용자에게 우선순위가 높은 기능들에 집중합니다.

이전의 Interop 노력과 마찬가지로, 선택된 테스트들은 자동화된 테스트 인프라에서 지속적으로 실행되며, 통과율은 Interop 2026 대시보드에 표시됩니다.

중점 분야 (Focus Areas)

2026년의 중점 분야에는 State of HTML 및 State of CSS 설문조사에서 주요 상호 운용성 문제로 식별된 여러 영역이 포함됩니다. 우리는 이러한 문제들을 webstatus.dev에서 추적합니다. 올해 포함된 많은 기능은 개발자 시그널 (Developer Signals) 리포지토리의 요청 사항 상위 20개에도 나타납니다.

앵커 포지셔닝 (Anchor positioning)

출현 위치: 주요 상호 운용성 문제, 개발자 시그널 앵커 포지셔닝

앵커 포지셔닝 (Anchor positioning)을 사용하면 참조하는 콘텐츠 옆에 툴팁을 배치하는 것과 같이, 다른 요소의 위치를 기반으로 요소를 배치할 수 있습니다. 이 중점 분야는 Interop 2025에서 이어지며, 2025년의 테스트들만 포함합니다.

컨테이너 스타일 쿼리 (Container style queries)

출현 위치: 주요 상호 운용성 문제, 개발자 시그널 컨테이너 스타일 쿼리

컨테이너 스타일 쿼리 (Container style queries)는 @container 어트 룰 (at-rule)과 하나 이상의 style() 함수를 사용하여, 컨테이너의 사용자 정의 속성 (Custom Properties)의 계산된 값에 따라 요소에 스타일을 적용합니다.

다이얼로그 및 팝오버 (Dialogs and popovers)

출현 위치: 주요 상호 운용성 문제, closedby, hint

Interop 2026을 위한 <dialog> 요소 및 팝오버 API (Popover API) 작업은 다음 사항에 집중합니다:

• <dialog closedby> 어트리뷰트 (Attribute): 다이얼로그를 닫는 사용자 동작(예: 다이얼로그 외부 클릭)을 설정합니다.
• :open CSS 의사 클래스 (Pseudo-class): 열린 상태를 가진 요소와 일치합니다.
• popover="hint"

전역 속성 (global attribute)으로, 다른 자동 팝오버 (auto popovers)에 종속적인 팝오버를 생성하며 툴팁 (tooltips)에 유용합니다.

스크롤 기반 애니메이션 (Scroll-driven animations)

출현 위치: 주요 상호운용성 이슈 (Top interop issues)

여기에는 사용자의 스크롤 위치에 따라 애니메이션을 진행시키는 animation-timeline, scroll-timeline, 그리고 view-timeline CSS 속성들이 포함됩니다.

뷰 전환 (View transitions)

출현 위치: 주요 상호운용성 이슈 (Top interop issues), 개발자 시그널 (developer signals) - 문서 간 뷰 전환 (Cross-document view transitions)

Interop 2025는 동일 문서 뷰 전환 (same-document view transitions)을 Baseline Newly available 단계로 가져왔습니다. Interop 2026에서 뷰 전환 (view transitions) 작업은 다음 사항에 집중합니다:

• 동일 문서 뷰 전환 (same-document view transitions) 개선.
• <link>, <script>, <style>을 위한 blocking="render" 속성.
• <link rel="expect"> 속성.
• :active-view-transition-type() CSS 의사 클래스 (pseudo-class).
• 문서 간 뷰 전환 (Cross-document view transitions).

attr() CSS 함수

출현 위치: 개발자 시그널 (developer signals) - attr()

attr() CSS 함수는 HTML 요소의 속성 값을 반환하며, 해당 값을 특정 타입이나 특정 단위로 반환하는 옵션을 제공합니다.

설문 조사에서 여러분이 강조한 이러한 주요 기능들 외에도, Interop 2026에는 다음이 포함됩니다:

contrast-color() CSS 함수

contrast-color() CSS 함수는 지정된 전경색 (foreground color) 또는 배경색 (background color)에 대해 대비가 보장되는 색상을 선택합니다.

커스텀 하이라이트 (Custom highlights)

커스텀 하이라이트 (Custom highlights)를 사용하면 DOM에 추가적인 요소를 더하지 않고도 임의의 텍스트 범위를 스타일링할 수 있습니다.

Fetch 업로드 및 범위 (Fetch uploads and ranges)

fetch() 메서드에 대한 작업은 서버로 데이터를 스트리밍하기 위해 본문 (body) 내의 ReadableStream에 집중하며, 요청 및 응답을 위한 FormData와 미디어 타입 (media types), 그리고 Range 헤더를 지원합니다.

IndexedDB

IndexedDB 중점 분야는 IDBObjectStore 및 IDBIndex의 getAllRecords() 메서드를 대상으로 합니다. 이 메서드들은 레코드와 기본 키 (primary keys)를 배치 (batches) 단위로 반환함으로써 대규모 데이터셋에 대한 읽기 작업을 가속화합니다.

Wasm을 위한 JSPI

JavaScript Promise Integration API (JSPI)는 외부 기능에 대한 동기적 (synchronous) 접근을 기대하는 Wasm 애플리케이션이 해당 기능이 비동기적 (asynchronous)인 환경에서도 작동할 수 있도록 합니다.

Media pseudo-classes (미디어 의사 클래스)

이 영역에는 상태에 따라 <audio> 및 <video> 요소를 매칭하는 :playing, :paused, :seeking, :buffering, :stalled, :muted, 그리고 :volume-locked CSS 의사 클래스 (pseudo-classes)가 포함됩니다.

Navigation API

올해는 Navigation API의 상호 운용성 (interoperability)을 지속적으로 개선하는 것과, 핸들러가 해결 (resolve)될 때까지 커밋 (commit)을 연기하는 navigateEvent.intercept()의 precommitHandler 옵션에 집중할 것입니다.

Scoped custom element registries (범위가 지정된 커스텀 요소 레지스트리)

CustomElementRegistry() 생성자는 전역 레지스트리와 분리된 새로운 커스텀 요소 레지스트리를 생성하여, 동일한 태그 이름을 가진 여러 커스텀 요소가 공존할 수 있도록 합니다.

Scroll snap (스크롤 스냅)

이 중점 분야는 스크롤 컨테이너 내의 팬 (panning) 및 스크롤 동작을 제어하는 CSS 스크롤 스냅 (scroll snap)을 다룹니다.

The shape() CSS function (shape() CSS 함수)

shape() CSS 함수는 line, move, curve와 같은 명령을 사용하여 모양을 생성하며, clip-path 및 shape-outside와 함께 사용할 수 있습니다.

Web compat (웹 호환성)

이 영역은 다음과 같은 실제 문제를 일으키는 특정 상호 운용성 문제를 목표로 합니다:

• ESM 모듈 로딩 (ESM module loading).
• 애니메이션 이벤트 대비 스크롤 이벤트의 타이밍.
• -webkit-user-select 속성의 접두사 제거 (Unprefixing).

WebRTC

Interop 2026을 위해, Interop 2025 중점 분야에서 남은 실패 테스트를 수정하고 WebRTC 상호 운용성을 지속적으로 개선하는 데 집중합니다.

The WebTransport API (WebTransport API)

이 영역은 HTTP/3 프로토콜을 사용하여 클라이언트와 서버 간에 데이터를 전송하는 WebTransport API를 다룹니다.

The zoom CSS property (zoom CSS 속성)

Interop 2025에서 이어지는 이 영역은 요소의 크기를 조절하고 페이지 레이아웃에 영향을 미치는 zoom CSS 속성에 집중합니다.

Investigation efforts (조사 노력)

Interop 2026은 또한 향후 기능의 테스트 및 상호 운용성 (interoperability) 작업을 준비하기 위한 조사 노력 (investigation efforts)을 포함합니다:

접근성 테스트 (Accessibility testing): 브라우저 전반에 걸쳐 일관된 접근성 트리 (accessibility trees)를 생성하고 WPT 인프라를 개선하기 위해 노력합니다.
JPEG XL: 점진적 렌더링 (progressive rendering)에 대한 요구 사항 정의를 포함하여, JPEG XL 이미지 형식을 테스트 가능하게 만드는 데 집중합니다.
모바일 테스트 (Mobile testing): 동적 뷰포트 (dynamic viewport) 변경과 같은 모바일 전용 기능을 테스트하기 위해 WPT 인프라를 개선합니다.
WebVTT: 표준 준수 (standard conformance)에 대한 이해를 높이기 위해 테스트를 수정하고 문서를 업데이트합니다.

2026년까지의 진행 상황 추적

Interop 2026 대시보드에서 프로젝트를 계속 팔로우하세요.