Interop 2026 — 브라우저 전쟁이 끝나고 표준 전쟁이 시작됐다

"이 CSS 속성, 사파리에서 안 되는데요?" 프론트엔드 개발자라면 한 번쯤 겪어본 상황이다. 브라우저마다 지원 범위가 달라서 polyfill을 넣고, vendor prefix를 붙이고, 분기 코드를 작성하는 데 시간을 쏟아왔다. Interop 2026은 이 문제를 브라우저 벤더들이 직접 나서서 해결하겠다는 5년째 이어지는 프로젝트다.

Interop가 뭔가

Interop는 WebKit(Apple), Blink(Google), Gecko(Mozilla), Igalia, Microsoft가 공동으로 진행하는 크로스 브라우저 호환성 개선 프로젝트다. 매년 초에 "올해 우선적으로 맞춰야 할 기능 목록"을 정하고, 각 브라우저의 Web Platform Tests 통과율을 대시보드로 공개한다. 비유하면 전국 교육청이 모여서 "올해 전 학교에서 똑같이 가르칠 핵심 교과 목록"을 정하는 것과 비슷하다.

[💡 잠깐! 이 용어는?] Web Platform Tests(WPT): 웹 표준 명세를 기반으로 작성된 공식 테스트 모음이다. 브라우저가 이 테스트를 통과하면 해당 명세를 올바르게 구현했다고 판단한다.

2026년 집중 영역 — 20개

올해는 신규 15개 + Interop 2025 캐리오버 5개, 총 20개 영역이 선정됐다.

신규 15개

Interop 2025 캐리오버 5개

View Transitions의 전체 통과율이 **90.8%**인데, Safari 단독으로는 **99.2%**라는 점이 눈에 띈다. WebKit이 이 분야에서 앞서나가고 있다는 의미다.

프론트엔드 개발자가 주목할 3가지

1. contrast-color() — 접근성 자동화

다크 모드와 라이트 모드를 오가면서 텍스트 색상을 수동으로 맞추던 시절이 끝난다. contrast-color()는 배경색을 입력하면 흑 또는 백 중 대비가 높은 쪽을 자동으로 반환한다. 비유하면 양복 색에 맞춰 넥타이를 자동으로 골라주는 AI 스타일리스트 같다.

.card {
  --bg: darkblue;
  background-color: var(--bg);
  color: contrast-color(var(--bg));
}

WebKit이 이 기능을 최초로 탑재한 브라우저다. Interop 2026에 포함되면서 Chrome과 Firefox의 구현도 빠르게 진행될 것으로 보인다.

2. Anchor Positioning — 툴팁·드롭다운의 혁명

지금까지 툴팁이나 드롭다운 메뉴의 위치를 잡으려면 JavaScript로 좌표를 계산하거나 Floating UI 같은 라이브러리에 의존해야 했다. Anchor Positioning은 이 문제를 CSS 선언 한 줄로 해결한다. "이 요소를 저 요소 옆에 붙여라"를 CSS에서 직접 표현할 수 있다.

.tooltip {
  position: absolute;
  position-anchor: --trigger;
  top: anchor(bottom);
  left: anchor(center);
}
 
.trigger {
  anchor-name: --trigger;
}

[💡 잠깐! 이 용어는?] Anchor Positioning: CSS에서 특정 요소(anchor)를 기준점으로 삼아 다른 요소의 위치를 선언적으로 지정하는 기능이다. Floating UI, Popper.js 같은 JavaScript 라이브러리를 대체할 수 있다.

3. Scroll-driven Animations — 스크롤 애니메이션의 표준화

IntersectionObserver와 JavaScript 이벤트 핸들러 조합으로 구현하던 스크롤 연동 애니메이션이 CSS 네이티브로 올라온다. animation-timeline: scroll()만 선언하면 스크롤 진행률에 따라 애니메이션이 자동으로 실행된다. 비유하면 영화 자막이 장면 전환에 맞춰 자동으로 올라오는 것처럼, 스크롤이라는 "재생 바"에 애니메이션을 동기화하는 기능이다. 성능 면에서도 메인 스레드를 점유하지 않기 때문에 JavaScript 방식보다 유리하다.

.progress-bar {
  animation: grow-width linear;
  animation-timeline: scroll();
}
 
@keyframes grow-width {
  from { width: 0%; }
  to { width: 100%; }
}

조사 영역 — 아직 표준은 아니지만

Interop 2026에는 정식 집중 영역 외에 4개의 조사(Investigation) 영역도 있다. 표준화 전 단계로, 브라우저 벤더들이 가능성을 탐색하는 중이다.

특히 JPEG XL은 Chrome이 한 번 지원했다가 철회한 이력이 있어서 커뮤니티 관심이 높다. 조사 영역에 포함된 만큼 다시 논의 테이블에 올라올 가능성이 있다.

대시보드로 직접 확인하기

진행 상황은 wpt.fyi/interop-2026에서 실시간으로 확인할 수 있다. 각 영역별 브라우저 통과율이 막대 그래프로 표시되므로, "이 기능 사파리에서 쓸 수 있나?"라는 질문에 수치로 답할 수 있다. 프로젝트에 신규 CSS 기능을 도입할 때마다 이 대시보드를 확인하는 습관을 들이면, polyfill이 정말 필요한지 판단하기가 훨씬 쉬워진다.

정리

• Interop 2026은 20개 웹 표준 영역에 대해 Chrome, Safari, Firefox가 동시에 호환성을 맞추는 프로젝트다
• 프론트엔드 개발자 입장에서 contrast-color(), Anchor Positioning, Scroll-driven Animations가 가장 체감이 클 것이다
• JPEG XL, Accessibility Testing 등 4개 조사 영역도 향후 표준 후보로 주목할 만하다
• 대시보드를 북마크해두고 프로젝트에 신규 CSS 기능을 도입할 때마다 통과율을 확인하는 습관을 들이면 polyfill 삽질을 줄일 수 있다

참고:

• CSS-Tricks: https://css-tricks.com/interop-2026/
• WebKit: https://webkit.org/blog/17818/announcing-interop-2026/
• Interop 2026 Dashboard: https://wpt.fyi/interop-2026