Interop 2026 출범 — View Transitions, Scroll-driven Animations, WebTransport 등 20개 포커스 영역

Interop 2025 회고

• Interop은 Apple, Google, Igalia, Microsoft, Mozilla가 참여하는 크로스 브라우저 호환성 개선 프로젝트. Web Platform Tests 통과율로 진행 상황을 측정함

• Firefox가 2025년 시작 시 46점에서 99점으로 마감. 전체 Interop 점수(4개 브라우저 합산)는 25점 → 95점. Same-Document View Transitions, CSS Anchor Positioning, Navigation API, CSS @scope, URLPattern API가 크로스 브라우저로 사용 가능해짐

• CSS Anchor Positioning과 Navigation API에서 흥미로운 이슈가 있었음. 테스트는 통과하는데 실제 브라우저 간 동작이 달랐음. 테스트가 스펙이 아니라 특정 구현체 기준으로 작성된 경우가 있었기 때문. Mozilla가 이걸 파고들어서 스펙 수정 + 테스트 개선까지 이끌어냄

Interop 2026 새 기능

• 150개 이상의 제안 중 20개 포커스 영역(33개 제안)과 4개 조사 영역 선정

• Cross-document View Transitions: JS 없이 문서 간 트랜지션 가능

• Scroll-driven Animations: 스크롤 위치 기반 애니메이션. 메인 스레드에서 돌리던 무거운 JS 솔루션을 대체

• WebTransport: HTTP/3 기반 저수준 API, WebSocket의 현대적 대안. 다중 단방향 스트림, 순서 무관 전달 지원

• CSS container style queries: 컨테이너의 커스텀 프로퍼티 값에 따라 스타일 적용. --theme 하나로 여러 속성 제어 가능

• JS Promise Integration for Wasm: WebAssembly가 외부 Promise 결과를 기다리며 비동기적으로 '일시정지' 가능. C/C++ 같은 동기 API 기대 언어 컴파일이 쉬워짐

• CSS attr() 확장: 15년간 pseudo-element content에만 쓸 수 있었는데, 이제 대부분의 CSS 값에서 사용 가능

• Scoped Custom Element Registries: Shadow DOM 내에서 같은 태그명이 다른 커스텀 엘리먼트를 참조할 수 있음

• CSS shape(): SVG path 문법 대신 CSS 문법으로 clip-path와 offset-path 작성. 혼합 단위와 calc() 지원으로 반응형 디자인이 훨씬 편해짐

기존 기능 안정성 개선

• fetch의 Range headers & form data, Navigation API, CSS scroll snap, CSS anchor positioning, View Transitions, top-level await, event loop, WebRTC, CSS user-select, CSS zoom의 엣지 케이스 수정

• 이런 게 "새 기능보다 덜 화려하지만 개발자가 실제로 몇 시간씩 낭비하는 부분"이라고 Mozilla가 직접 언급

조사 영역

• 접근성: 같은 DOM+CSS에서 브라우저마다 일관된 접근성 트리를 만들도록 테스트 인프라 개선 (2025년부터 계속)
• 모바일 테스트: 주소창, 가상 키보드 등 동적 UI에 의한 뷰포트 변화 테스트 방법론 연구
• JPEG XL: 테스트 부족으로 포커스 영역은 못 됐지만, Google Research의 JPEG XL 팀에 Rust 메모리 안전 디코더 구현을 요청. Firefox와 Chrome에서 실험 중
• WebVTT: 동영상 자막 동기화 기능. 테스트 스위트 적합성 검증 진행