- Interop 2024는 주요 브라우저 엔진 팀이 같은 웹 기능을 더 일관되게 구현하도록 맞추는 공동 프로젝트이며, 올해는 17개 중점 영역과 3개 조사 프로젝트로 진행됨
- 상호운용성 개선은 Web Platform Tests 같은 자동화 테스트로 측정되며, WPT는 180만 개 이상 테스트를 갖고 주요 브라우저 전체에서 95% 이상 통과함
- Interop 2023은 선정 테스트의 3대 브라우저 엔진 공통 통과율을 48%에서 95%로 끌어올렸고, P3 color, Subgrid, Container Queries,
:has(), Web Components, Media Queries 4 지원을 크게 정렬함 - 올해는 96개 제안 중 16개를 고르고 2023년 작업 일부를 이어받아 Accessibility, CSS Nesting, Custom Properties, IndexedDB, Layout, Popover, URL 등 17개 영역에 집중함
- Microsoft Edge가 Interop 대시보드에 별도 열로 추가되어 브라우저별 진행 상황을 더 직접적으로 비교할 수 있게 됨
브라우저 상호운용성을 맞추는 방식
- 웹은 다양한 기기에서 동작하도록 설계되어 수십억 명이 협업, 학습, 연결에 사용할 수 있음
- 개발자가 모든 브라우저와 모든 사용자에게 같은 경험을 제공하려면, 웹 기술의 브라우저 구현이 서로 비슷해야 함
- 구현 일관성은 웹 표준 프로세스에서 만들어지며, 새 웹 기술의 동작은 상세한 기술 문서로 정의됨
- 브라우저가 웹 표준을 따르는지는 자동화 테스트로 확인함
- Web Platform Tests에는 180만 개가 넘는 테스트가 있음
- 주요 브라우저 전체에서 95% 이상의 WPT가 통과함
Interop 2023이 만든 변화
- Interop 2023은 2023년 1월 선정 테스트의 48%가 3대 브라우저 엔진에서 모두 통과하는 상태로 시작함
- 기준 브라우저는 사용자에게 배포된 Chrome과 Firefox 데스크톱 Linux, Safari on macOS Monterey였음
- 1년 뒤 통과율은 95% 로 상승함
- 기준 브라우저는 Chrome Dev, Firefox Nightly 데스크톱 Linux, Safari Technology Preview on macOS Ventura였음
- 여러 웹 기능의 브라우저 간 지원이 개선됨
- P3 color는 출시 시작 7년 뒤 모든 브라우저에서 완전 지원됨
- Form controls는 웹 역사상 처음으로 세로 쓰기 모드를 지원함
- CSS
border-image는 원래 의도대로 동작하게 됨 - Subgrid, Container Queries,
:has(), Motion Path, CSS Math Functions,inert,@property가 모든 최신 브라우저에서 지원됨 - Offscreen Canvas, Modules in Web Workers, Import Maps, Import Assertions, JavaScript Modules 등 Web API가 개선됨
- Media Queries 4 전체 명세가 더 쉬운 문법과 함께 어디서나 지원됨
- Web Components는
adoptedStyleSheets,ElementInternals, Form-Associated Custom Elements, Shadow DOM과 Custom Elements 기본 동작에서 개선됨 :nth-child(),:nth-last-child(),:modal,:user-valid,:user-invalid같은 CSS 의사 클래스의 일관된 브라우저 지원을 기대할 수 있게 됨- Feature queries는 폰트 기능 감지를 새로 지원함
- Font Palettes는 컬러 폰트 지원을 강화함
- CSS Masking, HTML Forms, Pointer and Mouse Events, Scrolling, Transforms, URL, WebCodecs, 웹 호환성 버그 묶음에서도 상당한 진전이 있었음
- Interop 2023의 26개 중점 영역 중 20개는 성공으로 종료됨
- 2024년에도 Custom Properties, Pointer and Mouse Events, URL, 그리고 Flexbox·Grid·Subgrid를 묶은 Layout 작업은 계속됨
Interop 2024의 구성
- 2024년에는 96개 중점 영역 제안이 검토됐고 최종적으로 16개가 선택됨
- 일부 새 제안을 묶고 2023년 작업 일부를 이어받으면서 Interop 2024는 총 17개 중점 영역을 갖게 됨
- 안정 버전 브라우저 기준 Interop 2024의 전체 점수는 우연히 다시 48%에서 시작함
- 올해부터 Interop dashboard에 Microsoft Edge 자체 열이 추가됨
- 현재 이 열은 Windows 10에서 실행되는 Edge와 Edge Dev를 나타냄
2024년 중점 영역
-
Accessibility
- Interop 2023의 Accessibility 조사 프로젝트에서 Apple 접근성 팀이 WPT용 접근성 테스트 인프라를 만들고 1,300개가 넘는 접근성 테스트를 작성함
- 이 테스트들이 Interop 2024 중점 영역에 포함되어 브라우저의 접근성 지원 개선을 유도함
- 새 접근성 테스트 대부분은 WAI-ARIA를 다룸
- 특히 Roles Model과 Accessible Name and Description Computation이 중심임
- 이들은 보조 기술 사용자가 요소의 목적과 할 수 있는 일을 이해하도록 일관된 메커니즘을 제공함
- HTML Accessibility API Mappings specification 관련 테스트도 포함됨
- HTML 요소의 기본 접근성 의미와
<label>, 이미지alt텍스트 같은 기능의 브라우저 동작 규칙을 정의함 display: contents접근성 테스트도 새로 포함됨- 이 CSS 표시 모드는 Flexbox나 Grid를 위해 부모·자식·손자 관계를 조정할 때 콘텐츠 주변 박스를 제거하는 데 유용함
- 초기 구현에서는 박스를 제거하면 접근성 트리에서도 콘텐츠가 완전히 사라져 보조 기술 사용자에게 문제가 됨
- 브라우저에서 대부분의 문제가 수정됐지만 모든 상황에서 완전히 해결된 것은 아님
-
CSS Nesting
- CSS Nesting은 구현 차이를 줄이고 개발자가 신뢰하고 사용할 수 있도록 Interop 2024에 포함됨
- CSS 중첩 기능은 2023년에 4대 주요 브라우저 모두에 출시됨
- Chrome, Edge, Safari는 4월과 5월에 먼저 출시함
- Firefox는 8월에 출시함
- 웹 표준은 5월과 8월 사이 약간 바뀌어 모든 중첩 선택자가 기호로 시작해야 한다는 초기 요구사항이 완화됨
- 개발자는
& article대신article을 쓸 수 있음 - 구현은 모두 업데이트됐지만, Nesting의 복잡한 세부 동작이 CSS Working Group에서 정리되는 동안 상호운용성 개선 여지가 남아 있음
- Safari의 테스트 실패 대부분은 중첩 CSS가 Shadow DOM과
:host를 통해 상호작용하는 방식과 관련됨
-
Custom Properties
@propertyat-rule은 최근 몇 년 동안 브라우저에 출시되기 시작함- Interop 2023의 Custom Properties 영역은 모든 안정 브라우저 공통 테스트 통과율이 4%에서 7.6%로 올랐고, 프리뷰 브라우저 전체에서는 90.7%가 통과함
- Firefox가 마지막으로 지원을 추가하는 브라우저이며, 현재 Firefox Nightly에서 작업 중임
- 작업이 끝나지 않아 2024년에도 중점 영역으로 계속됨
@property를 사용하면 CSS 커스텀 속성의 문법, 상속 동작, 초기값을 브라우저 엔진이 CSS 속성을 정의하는 방식과 비슷하게 선언할 수 있음- 이를 통해 그라디언트나 transform의 특정 부분처럼 이전에는 CSS로 불가능했던 애니메이션이 가능해짐
-
Declarative Shadow DOM
- Declarative Shadow DOM은 JavaScript 없이 HTML만으로 재사용 가능한 위젯과 컴포넌트를 만들 수 있는 선언형 API임
- Safari 16.4는 2023년 3월부터, Chrome 90은 2021년 4월부터 지원함
- Firefox는 Firefox Nightly에서 구현을 갖고 있음
- State of HTML 2023 설문에서 자주 요청된 기능 중 하나였고, 모든 브라우저에서 상호운용성을 확보하기 위해 Interop 2024에 포함됨
-
Font size adjust
font-size-adjust는 오래된 기술에 집중하는 유용성을 보여주는 사례임- Firefox는 2008년에 처음 구현했지만 웹 디자이너와 개발자 사이에서 거의 사용되거나 논의되지 않음
- 초기 명세는 시간이 지나며 두 값 문법을 통해 더 많은 언어를 지원하고,
from-font값으로 사용성이 개선됨 - WebKit 팀은 Safari 16.4에서 기본 버전을 구현했고 Safari 17.0에서 업데이트를 추가함
- Mozilla는 Firefox 118에서 구현을 업데이트했으며 Safari와 Firefox는 현재 모든 테스트를 100% 통과함
- Chrome은 2015년에 실험적 구현을 시작했지만 아직 출시하지 않음
- Font size adjust는 텍스트 문자열 안의 여러 폰트가 같은 시각적 크기로 보이도록 맞추는 방법을 제공함
- 예를 들어
1.4rem텍스트에서 x-height, cap height,chwidth,icwidth,icheight를 맞출 수 있음 - 코드와 일반 텍스트를 섞거나 여러 언어를 한 문장에 섞을 때 유용함
-
HTTPS URLs for WebSocket
- WebSocket API는
ws:와wss:라는 비 HTTP(S) 스킴을 사용해야 하는 특성이 있음 - URL 동작은 HTTP(S) URL과 거의 같기 때문에 API 사용이 번거로울 수 있음
- WebKit 팀은 웹 개발자 피드백을 바탕으로 API가 HTTP(S) URL도 지원하도록 했고 Safari 17.0에 출시함
- 기존에는
location.protocol에 따라wss:또는ws:로 바꾸는 코드가 필요했지만, 이제new WebSocket(path)처럼 쓸 수 있음 - Interop 2024에 포함해 다른 브라우저도 이를 채택하도록 하는 것이 목표임
- WebSocket API는
-
IndexedDB
-
Layout
-
Pointer and Mouse Events
- Pointer events는 마우스, 펜·스타일러스, 하나 이상의 손가락 터치 같은 포인팅 입력 장치를 하나의 DOM 이벤트 모델로 처리함
- 이 API는 2012년부터 브라우저에 출시되기 시작했고 2019년까지 모든 브라우저에 도입됐지만 상호운용성은 불안정했음
- Interop 팀은 2022년에 Pointer and Mouse Events 조사 프로젝트를 시작해 합의를 명확히 하고 이를 반영하는 테스트를 작성함
- Interop 2023에서 이 테스트가 중점 영역으로 들어갔고 통과율은 34%에서 81% 로 상승함
- 아직 할 일이 남아 있어 2024년에도 중점 영역으로 계속됨
-
Popover
-
Relative Color Syntax
- Relative Color Syntax는 다른 색상을 참조해 CSS 색상을 정의하는 새 방법임
- 기존 색상을 일정량 밝게 또는 어둡게 만들거나, 색상 변수의 채도를 조정해 두 번째 변수에 할당할 수 있음
- 디자인 시스템을 만들 때 특히 강력할 수 있음
- Safari 16.4가 2023년 3월 최초로 지원을 출시함
- Chrome 119와 Edge 119는 2023년 10월과 11월에 지원을 출시함
- 현재 구현 중
currentcolor를 Relative Color Syntax와 함께 사용하는 기능을 지원하는 것은 없음 - Interop 2024의 Relative Color Syntax 영역은 전체 지원 여부가 아니라
currentcolor지원과 색역 밖 동작 테스트에 좁게 집중함 - P3 color를 지원하지 않는 디스플레이에서 어떤 일이 일어나는지 확인함
-
requestVideoFrameCallback
<video>요소는 웹에서 비디오를 넣는 강력한 기능을 제공함HTMLVideoElement는 JavaScript에서 비디오 객체를 조작하는 속성과 메서드를 제공함requestVideoFrameCallback()은 비디오 프레임별 작업을 효율적으로 수행할 수 있게 함- 비디오 처리나 분석
- canvas에 그리기
- 오디오 소스와 동기화
- Chrome 83과 Safari 15.4부터 지원됨
- Interop 2024 포함은 브라우저 구현을 완성하고 다듬는 데 도움을 줌
-
Scrollbar Styling
- Scrollbar Styling 영역은 스크롤바 스타일링에 사용할 수 있는 두 CSS 속성을 포함함
scrollbar-width는auto,thin,none세 값을 제공함auto는 기본 너비임thin은 더 얇은 스크롤바를 제공함none은 콘텐츠 스크롤은 유지하면서 스크롤바를 숨김
- Firefox 64는 2018년 12월에 지원을 구현했고, Chrome 121과 Edge 121에도 막 출시됨
scrollbar-gutter는 스크롤바 공간을 예약해 스크롤바 존재 여부와 상관없이 같은 레이아웃을 유지하게 함scrollbar-gutter: stable은 스크롤바가 없어도 공간을 예약하도록 브라우저에 지시함- 스크롤바 필요 상태가 바뀔 때 레이아웃 이동을 막을 수 있음
- Chrome 94, Edge 94, Firefox 97에 2021~2022년에 출시됨
- Safari가 이 중점 영역을 완료하기 위해 가장 많은 작업을 해야 함
- Chrome과 Firefox는 이미 테스트를 100% 통과함
- Safari는 2009년에
::-webkit-scrollbar-*9개 의사 요소로 스크롤바 스타일링 기능을 먼저 제공했지만, 이 방식은 공식 CSS 웹 표준이 되지 않음 - CSS Working Group은 훨씬 단순한 접근을 선택함
-
@starting-style and transition-behavior
- 이 영역은 애니메이션 제어를 위한 두 새 기능에 집중함
- 두 기능 모두 2023년 9월 Chrome 117과 Edge 177에 출시됨
@starting-style은 특정 요소의 시작 값을 정의하게 해줌- 요소가 transition을 거치려 할 때 필요함
display:none으로 들어가거나 나오는 전환 방법도 제공함transition-behavior는 이전에 애니메이션에서만 가능했던 이산 애니메이션 가능 속성 처리를 CSS transition으로 확장함- 요소를 보이거나 숨길 때
display속성을 전환할 수 있는 길을 엶
-
Text Directionality
- 텍스트 흐름 방향은 웹 조판에서 중요한 요소임
- 일부 언어는 왼쪽에서 오른쪽으로, 일부 언어는 오른쪽에서 왼쪽으로 흐름
dirattribute는 HTML 요소에 방향을left,right,auto로 표시할 수 있게 함auto는 첫 글자를 보고 브라우저가 방향을 추정하도록 요청함- 방향성과 shadow tree의 상호작용은 최근까지 잘 정의되어 있지 않았음
- 표준 수준에서 이 문제가 다뤄졌고, Interop 2024 포함으로 구현 정렬을 확인함
-
text-wrap: balance
- 웹 디자이너는 매우 짧거나 한 단어뿐인 줄을 막을 방법을 오래 원해 왔음
- 반응형 웹 디자인과 컬럼 너비 제어 부족으로 이 문제는 더 어려워짐
text-wrap은 특정 사용 사례에 맞춰 줄바꿈 계산 방식을 브라우저에 알려주는 여러 옵션을 제공함text-wrap: balance는 제목에 적합한 해결책임- 몇 줄의 텍스트를 균형 있게 배치해 각 줄이 비슷한 양의 텍스트를 갖도록 함
- Chrome 114와 Firefox 121에 출시됐고 Safari Technology Preview에 구현됨
- Interop 2024는
text-wrap-mode,text-wrap-style,white-space-collapse의 동작 테스트도 포함함 - CSS Working Group이 최근 이 longhand들이 서로 상호작용하는 방식을 바꿔 브라우저 간 지원이 현재 고르지 않음
-
URL
- URL은 웹의 가장 근본적인 요소 중 하나이며, URL 없이는 웹이 존재하지 않음
- 웹 초기 역사에 발명된 많은 것처럼 URL 지원도 아직 완전히 상호운용되지 않음
- WHATWG는 URL이 정확히 어떻게 동작해야 하는지 상세히 담은 URL Living Standard를 작성함
- 이 표준을 지원하는 테스트는 Interop 2023 중점 영역이었고 통과율은 77%에서 85%로 향상됨
- 2024년에도 상호운용성 확보를 위해 작업이 계속됨
- Safari는 테스트의 99.7% 를 통과함
조사 프로젝트와 진행 추적
- Interop 2024에는 3개의 조사 영역도 포함됨
- Accessibility Testing
- Mobile Testing
- WebAssembly Testing
- 조사 영역은 Interop 팀이 더 많은 테스트를 작성하고 실행 가능하게 만드는 과제임
- Mobile Testing 조사 프로젝트는 모바일 운영체제에서 브라우저를 테스트할 수 있도록 WPT에 필요한 인프라를 완성하는 것을 목표로 함
- 향후 Interop 프로젝트 대시보드에 모바일 점수가 포함될 가능성도 있음
- 세 조사 중 두 개는 작년부터 이어지는 프로젝트지만, 2024년에는 모두 0% 완료 상태에서 시작함
- 참여 팀들은 올해 새 목표를 정하고 대시보드는 그 목표 대비 진행 상황을 표시함
- Interop 2024 진행 상황은 Interop 2024 dashboard에서 확인할 수 있음
- 상호운용성은 웹의 성공을 만드는 근본 축 중 하나이며, Interop 2022와 2023의 작업을 바탕으로 2024년에도 협업이 계속됨