세 브라우저 엔진이 합의한 2026 CSS 우선순위
같은 CSS를 썼는데 브라우저마다 다르게 보이는 일 — 프런트엔드의 오래된 피로다. Interop은 이 분기를 줄이려 Blink(Chrome·Edge)·WebKit(Safari)·Gecko(Firefox) 세 엔진이 ‘올해는 이 기능들을 끝까지 똑같이 맞추자’고 공개 약속하는 연례 프로젝트다. CSS-Tricks가 2026년 2월 17일 정리한 글에 따르면, Interop 2026은 앵커 포지셔닝부터 view transitions까지 11개 영역을 우선순위로 못 박았다. 매년 그래왔듯, 여기 오른 기능은 그해 안에 ‘안심하고 쓸 수 있는’ 후보가 된다.
"CSS Anchor Positioning gives us a simple interface to attach elements next to others just by saying which sides to connect — directly in CSS."CSS-Tricks
무슨 일인가
선정된 영역은 실무 체감이 큰 것들이다. 툴팁·팝오버를 소스 순서와 무관하게 다른 요소에 붙이는 앵커 포지셔닝, 자바스크립트 없이 부드러운 화면 전환을 만드는 view transitions, 접근성 대비를 자동 계산하는 contrast-color(), 타입·단위 변환까지 지원하는 고급 attr(), DOM을 더럽히지 않고 임의 텍스트 범위를 칠하는 커스텀 하이라이트가 포함됐다. 여기에 컨테이너 스타일 쿼리, 선언형 dialog·popover, 미디어 의사클래스, 스크롤 기반 애니메이션, shape() 함수, 그리고 레이아웃에 영향을 주는 zoom 속성까지 11개 영역이 올랐다. 대부분 State of CSS·State of HTML 설문에서 ‘제일 안 맞는다’고 꼽힌 기능들이다.
여러 시각
같은 Interop 2026을 두 매체는 다른 각도에서 본다.
- web.dev — 거버넌스의 관점. 이 프로젝트는 Apple·Google·Igalia·Microsoft·Mozilla 대표가 함께 운영하며, 선정 테스트를 자동화 인프라에서 상시 실행하고 통과율을 공개 대시보드로 투명하게 보여준다. ‘약속’이 아니라 ‘측정되는 약속’이라는 점을 강조한다.
- CSS-Tricks — 개발자 체감의 관점. 어떤 기능이 왜 골라졌고 실제 코드에서 무엇이 달라지는지, 앵커 포지셔닝 같은 사례 중심으로 풀어 ‘내일의 내 코드’에 닿게 설명한다.
왜 중요한가
Interop의 가치는 새 기능이 아니라 ‘예측 가능성’이다. 목록에 오른 기능은 세 엔진이 같은 해에 같은 테스트를 통과하도록 압박받으므로, 폴리필·벤더 분기·“이 브라우저에선 안 돼요” 같은 방어 코드의 수명이 짧아진다. 결국 Baseline(안정 지원 기준)에 더 빨리 편입돼, 개발자가 기능을 채택하는 시점을 앞당긴다. 분기를 메우는 데 쓰던 시간을 제품에 쓸 수 있게 된다는 뜻이다.
실무 적용
- Interop 2026 목록을 올해 기술 도입 로드맵의 ‘청신호 리스트’로 삼되, 실제 채택 전엔 Baseline·대시보드 통과율을 함께 확인한다.
- JS로 직접 구현 중인 툴팁·모달·화면 전환은 앵커 포지셔닝·popover·view transitions 네이티브로 대체 가능한지 먼저 검토해 의존성을 줄인다.
- 접근성 대비 색은 하드코딩 대신 contrast-color()로 옮겨, 테마·다크모드에서도 자동으로 대비를 보장하는 방향을 실험한다.
Kenny의 관점
프런트엔드 실무자에게 Interop은 ‘언제 도입할까’의 불안을 줄여 주는 달력이다. 나는 새 CSS 기능을 볼 때 데모의 화려함보다 ‘세 엔진이 합의했는가, 대시보드 통과율이 오르고 있는가’를 먼저 본다. 다만 목록에 올랐다고 오늘 당장 전면 도입은 위험하다 — 합의는 시작이지 완료가 아니다. 핵심 경험은 네이티브 + 점진적 향상(progressive enhancement)으로 깔고, 미지원 환경에서도 무너지지 않게 설계하는 습관이 결국 가장 빠른 길이다.
출처
이 글은 아래 원문을 바탕으로 Kenny가 한국어로 요약·정리한 큐레이션입니다.
원문 보기 — CSS-Tricks ↗