Interop 2026 시작

• 주요 브라우저 엔진이 협력해 웹 표준 호환성(Interoperability) 을 높이는 연례 프로젝트 Interop 2026이 시작됨
• 20개 핵심 영역을 대상으로 테스트를 진행하며, 그중 15개는 신규 항목
• 올해는 CSS attr() 확장, WebTransport, JSPI for Wasm, IndexedDB getAllRecords() 등 실질적 기능 개선이 포함됨
• 또한 Scroll-driven Animations, View Transitions, contrast-color() , Container Style Queries 등 시각적 표현 기능의 일관성 확보를 목표로 함
• 이 프로젝트는 Apple, Google, Microsoft, Mozilla, Igalia 등의 협업으로, 웹 개발자에게 더 신뢰할 수 있는 공통 플랫폼을 제공

---

Interop 2026 개요

• Interop 프로젝트는 브라우저 간 웹 기술 구현 차이를 줄이기 위해 주요 엔진이 공동으로 테스트를 수행하는 협업 프로그램
  • 각 기능은 공식 웹 표준 명세와의 일치 여부를 기준으로 평가
  • Web Platform Tests(WPT)를 통해 자동화된 상호운용성 측정 수행
• Safari는 이미 여러 기능을 선도적으로 구현했으며, 이번 Interop 2026에서는 남은 호환성 격차 해소에 집중
• 올해 중점 기능 중 20%는 advanced attr(), IndexedDB getAllRecords(), WebTransport, JSPI for Wasm 네 가지로 구성
• Interop 2026 공식 대시보드 - https://wpt.fyi/interop-2026

2026년 주요 초점 영역 (20개)

• 총 20개 항목 중 15개가 신규, 5개는 Interop 2025에서 이어짐
  • 주요 항목: Anchor Positioning, Container Style Queries, contrast-color() , Custom Highlights, Dialog/Popover 개선, Fetch Uploads & Ranges, Navigation API, Scroll-driven Animations, Scroll Snap, shape() , View Transitions, WebRTC, WebTransport, CSS Zoom 등
• 각 항목은 명세 정비, 테스트 개선, 구현 일관성 확보를 목표로 함

주요 기능별 세부 내용

• Anchor Positioning

  • 요소를 서로 상대적으로 배치할 수 있는 기능으로, 2025년부터 이어진 항목
  • 올해는 명세 명확화, 테스트 안정화, 신뢰성 향상에 중점

• Advanced attr()

  • HTML 속성값을 CSS 속성 전반에서 활용할 수 있도록 확장
  • 기존 content 속성에 한정되던 attr()을 색상, 길이, 각도 등 다양한 타입으로 변환 가능
  • 보안 이슈가 해결되어 브라우저 간 공통 구현이 추진됨

• Container Style Queries

  • 컨테이너의 커스텀 속성 값에 따라 조건부 스타일을 적용
  • Safari 18.0부터 지원되었으며, Interop 2026을 통해 모든 브라우저에서 일관된 동작 확보 예정

• contrast-color()

  • 지정된 색상과 대비되는 흑/백 색상을 자동 선택
  • Safari와 Firefox가 2025년에 지원 시작, 이번 프로젝트로 전 브라우저 호환성 확보 추진

• Custom Highlights

  • CSS Custom Highlight API를 통해 DOM 구조 변경 없이 텍스트 범위를 스타일링
  • ::highlight() 및 ::target-text 의사요소로 검색 결과, 코드 하이라이트, 협업 편집 등 구현 가능

• Dialog 및 Popover 개선

  • <dialog>와 popover 속성에 closedby, popover="hint" , :open 의사클래스 추가
  • 접근성과 사용자 경험을 높이는 UI 오버레이 개선 기능

• Fetch Uploads & Ranges

  • fetch() API에 스트리밍 업로드, FormData 개선, Range 헤더 지원 추가
  • 대용량 업로드, 부분 다운로드 등에서 효율적 데이터 전송 가능

• IndexedDB getAllRecords()

  • IDBObjectStore와 IDBIndex에 getAllRecords() 메서드 추가
  • 배치 조회 및 역순 검색 지원으로 성능 향상

• JSPI for Wasm

  • JavaScript Promise Integration API를 통해 WebAssembly의 비동기/동기 간극 해소
  • 기존 C/C++/Rust 애플리케이션을 웹으로 손쉽게 포팅 가능

• Media Pseudo-classes

  • <audio>, <video> 상태에 따라 CSS 적용 가능한 7개 의사클래스 제공
    • 예: :playing, :paused, :muted 등
  • Safari는 이미 지원 중이며, 이번 프로젝트로 다른 브라우저에도 확산

• Navigation API

  • SPA 개발 시 복잡했던 history.pushState()를 대체하는 새 네비게이션 제어 API
  • Interop 2025에서 92.3% 테스트 통과, 2026년에는 precommitHandler 옵션 추가

• Scoped Custom Element Registries

  • 글로벌 충돌 문제를 해결하기 위해 스코프별 CustomElementRegistry 생성 가능
  • Safari 26.0이 최초 구현, 이번 프로젝트로 전 브라우저 일관성 확보

• Scroll-driven Animations

  • 스크롤 위치에 따라 CSS만으로 애니메이션 제어 가능
  • Safari 26.0에서 지원 시작, 스크롤 기반 인터랙션 표준화 추진

• Scroll Snap

  • 스크롤 컨테이너 내 정렬 및 스냅 동작 제어
  • 오래된 명세 변경으로 인한 불일치 해소를 위해 테스트 기반 개선 진행

• shape()

  • clip-path, shape-outside에 곡선 기반 복합 도형 정의 가능
  • Safari 18.4부터 지원, 반응형 곡선 표현의 일관성 확보 목표

• View Transitions

  • 페이지 전환 시 애니메이션 효과를 제공
  • 2025년 90.8% 호환성에서 출발, 2026년에는 cross-document 전환까지 확장

• Web Compat

  • 실제 웹사이트에서 발생하는 호환성 문제를 해결하는 테스트 모음
    • ESM 모듈 로딩, 스크롤/애니메이션 이벤트 타이밍, user-select 속성 등 포함

• WebRTC

  • 실시간 오디오·비디오·데이터 통신 표준
  • 2025년 91.6% 통과율에서 지속 개선 중

• WebTransport

  • HTTP/3 기반 양방향 통신 API, 낮은 지연시간과 멀티 스트림 지원
  • WebSocket보다 세밀한 제어, WebRTC보다 단순한 구조 제공

• CSS Zoom

  • 요소와 콘텐츠를 배율 조정하며 레이아웃에 직접 영향
  • 비표준 속성에서 표준화되어, 2025년에 이어 일관성 개선 지속

조사 및 향후 과제

• 접근성 테스트

  • 브라우저 간 접근성 트리 일관성 확보를 위한 테스트 인프라 개선 지속

• JPEG XL

  • 차세대 이미지 포맷으로, 애니메이션·투명도·무손실 압축 지원
  • Safari 17.0에서 지원 시작, 향후 정식 테스트 항목 포함 가능성

• 모바일 테스트

  • 동적 뷰포트 변화 등 모바일 전용 기능의 테스트 인프라 개선

• WebVTT

  • 자막 및 캡션 표준의 브라우저 간 불일치 해소를 위한 지속적 검증

더 상호운용적인 웹을 향해

• Interop 2026은 CSS 유연성, 시각적 전환, 실시간 통신, 데이터 전송 등 핵심 영역을 포괄
• Scroll Snap, shape() , Web Compat 등 오랜 불일치 문제 해결 추진
• WebKit 팀은 모든 브라우저에서 일관된 동작을 목표로 협력 중
• 결과적으로 개발자에게 더 신뢰할 수 있는 웹 플랫폼 기반을 제공함