게시: 2025년 2월 13일
Interop 2024의 큰 성공에 이어 프로젝트가 2025년의 새로운 중점 분야를 들고 돌아왔습니다. 올해 제안된 모든 사항을 포함할 수는 없었지만 최종 목록에는 CSS에서 성능 관련 기능에 이르기까지 웹 플랫폼 전반에 걸쳐 다양한 사항이 포함되어 있습니다.
2025년 중점 분야
- 앵커 위치 지정
backdrop-filter
- 코어 웹 바이탈
<details>
요소- 레이아웃
- 모듈
- Navigation API
- 포인터 및 마우스 이벤트
- 변형 이벤트 삭제
@scope
- 이벤트
scrollend
개 - Storage Access API
text-decoration
URLPattern
- View Transition API
- WebAssembly
- 웹 호환성
- WebRTC
- 작성 모드
또한 전년과 마찬가지로 조사할 영역이 있습니다. 이 영역은 중점 영역으로 포함할 만큼 충분한 정보나 테스트가 없지만, 포함할 수 있는 단계로 발전시키기 위해 몇 가지 작업을 해야 한다고 그룹에서 판단한 영역입니다.
- 접근성 테스트
- 게임패드 API 테스트
- 모바일 테스트
- 개인 정보 보호 테스트
- WebVTT
올해의 프로젝트가 플랫폼에 제공할 이러한 모든 기능과 개선사항에 대해 기대가 큽니다. 또한 작년과 마찬가지로 이 프로젝트를 통해 일련의 작업을 기준으로 새로 사용할 수 있게 됩니다. 이 게시물에서는 목록에 있는 일부 기능에 관한 자세한 정보를 공유하고 자세한 내용을 확인할 수 있는 링크를 제공합니다.
wpt.fyi/interop-2025의 Interop 2025 대시보드에서 진행 상황을 확인할 수 있으며, 기준점 '신규로 사용 가능'이 되면 webstatus.dev의 기준점 2025 목록에도 표시됩니다.

CSS 및 UI
상호 운용성 2025에 포함된 몇 가지 기능은 CSS 2024 상태 설문조사에서 중요하다고 지적한 기능입니다. 이를 통해 더 아름답고 성능이 우수한 사용자 환경을 만들 수 있습니다.
앵커 위치 지정
이 기능을 사용하면 배치된 요소를 앵커에 고정할 수 있습니다. 이 기능은 팝오버를 표시할 때 특히 유용합니다.
이 기능을 기준에 포함하면 서드 파티 라이브러리를 사용하지 않고도 훨씬 쉽게 사용자 인터페이스를 만들 수 있습니다. 앵커 포지셔닝 문서 및 MDN의 CSS 앵커 포지셔닝에서 자세히 알아보세요.
동일한 문서 보기 전환
올해는 뷰 전환, 특히 동일한 문서 뷰 전환과 view-transition-class
CSS 속성도 포함되었습니다.
단일 페이지 애플리케이션의 동일 문서 뷰 전환 및 뷰 전환에 관한 MDN 문서에서 뷰 전환에 관해 자세히 알아보세요.
backdrop-filter
속성
backdrop-filter
속성은 2024년 9월부터 기준으로 새로 사용할 수 있습니다. 이를 통해 콘텐츠 뒤에 효과를 만들 수 있습니다. 예를 들어 그래픽 애플리케이션에서만 사용할 수 있을 것으로 예상되는 효과를 흐리게 처리하거나 만들 수 있습니다.
대부분 상호 운용 가능하지만 backdrop-filter
테스트 실패
에서 이러한 구현에 버그와 문제가 있음을 알 수 있습니다. 이러한 문제가 모든 사용자에게 발생하는 것은 아니지만 많은 사용자에게 발생하고 있으므로 이 기능이 제대로 작동할 수 있도록 최선을 다하겠습니다.
<details>
요소
<details>
요소는 추가 콘텐츠를 표시하도록 펼칠 수 있는 공개 위젯입니다. <details>
요소 자체는 널리 사용되는 기준입니다.
하지만 최근에 <details>
를 더 유용하게 만드는 여러 관련 기능이 추가되었습니다.
::marker
및::details-content
CSS 가상 요소display
대신content-visibility
를 사용하여 콘텐츠를 전환합니다.- 페이지 내 검색 결과와 일치하는
<details>
요소를 자동으로 펼칩니다. hidden="until-found"
속성: 브라우저의 페이지 내 검색을 사용하여 요소를 찾을 때까지 또는 URL 프래그먼트를 따라 직접 이동할 때까지 요소를 숨깁니다.
CSS @scope
at-rule
@scope
at-rule을 사용하면 선택자의 범위를 DOM의 하위 트리로 지정하거나 트리의 상위 경계와 하위 경계 중에서 선택할 수도 있습니다. 예를 들어 다음 CSS는 .card
클래스가 있는 요소 내의 <img>
요소만 선택합니다.
@scope (.card) {
img {
border-color: green;
}
}
다음 예에서는 상한과 하한이 사용됩니다. <img>
요소는 .card
클래스의 요소와 .card__content
클래스의 요소 사이에 있고 .card__content
클래스의 요소 외부에 있는 경우에만 선택됩니다.
@scope (.card) to (.card__content) {
img {
border-color: green;
}
}
@scope
를 사용하는 방법에 관한 자세한 예는 CSS @scope
at-rule로 선택기의 도달범위 제한 및 MDN의 @scope
문서를 참고하세요.
scrollend
이벤트
scrollend
이벤트가 없으면 스크롤이 완료되었음을 감지할 수 있는 확실한 방법이 없습니다. 가장 좋은 방법은 setTimeout()
를 사용하여 일정 시간 동안 스크롤이 중지되었는지 확인하는 것입니다. 이렇게 하면 스크롤이 종료된 이벤트가 아니라 스크롤이 일시중지된 이벤트와 더 유사해집니다.
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
scrollend
이벤트를 사용하면 브라우저가 이러한 어려운 평가를 모두 실행합니다.
document.onscrollend = event => {
// ...
}
새로운 JavaScript 이벤트인 Scrollend 및 scrollend
의 MDN 문서에서 더 많은 예시를 확인하세요.
text-decoration
속성
text-decoration
속성은 text-decoration-line
, text-decoration-color
, text-decoration-style
, text-decoration-thickness
의 줄임말입니다. 광범위하게 사용 가능한 기준으로 간주되지만 Safari에서는 접두사가 없는 유일한 사용 가능한 접두사 없는 속성은 text-decoration-line
입니다. 이 문제는 2025년에 해결될 예정입니다.
작성 모드
CSS writing-mode
속성에는 여러 개의 값이 있을 수 있으며, 그중 다수는 세로로 표시되는 스크립트를 배치하도록 설계되었습니다. 하지만 언어 지원이 아닌 디자인의 일부로 텍스트를 세로로 배치해야 하는 경우도 있습니다. sideways-lr
및 sideways-rl
값은 이를 위해 설계되었지만 브라우저 호환성이 좋지 않았습니다. 2025년 중에 이 문제가 해결될 예정입니다.
또한 논리적 CSS 속성 overflow-inline
및 overflow-block
가 포함되어 있습니다. 이를 통해 작성 모드와 관계없이 콘텐츠가 상자를 벗어날 때 발생하는 상황을 제어할 수 있습니다.
코어 웹 바이탈
웹 바이탈을 사용하면 사이트의 환경을 수치화하고 개선 기회를 파악할 수 있습니다. 웹 바이탈 이니셔티브는 환경을 단순화하고 사이트가 가장 중요한 측정항목인 Core Web Vitals에 집중할 수 있도록 지원하는 것을 목표로 합니다.
Interop 2025는 브라우저 전반에서 LargestContentfulPaint API 및 Event Timing API를 구현하여 최대 콘텐츠 페인트 (LCP) 및 다음 페인트에 대한 상호작용 (INP) 측정항목을 포함합니다. 누적 레이아웃 이동 (CLS) 측정항목은 범위에 포함되지 않습니다.
LCP API
Event Timing API (INP용)
WebAssembly (Wasm)
WebAssembly API를 사용하면 휴대용 바이너리 명령 형식인 WebAssembly 코드를 로드할 수 있습니다. 브라우저에서 모든 서버 요구사항을 포함하여 전체 블로그 애플리케이션을 실행하는 등의 작업을 할 수 있습니다.
올해는 다음 기능에 중점을 둘 예정입니다.
- JavaScript 문자열 내장 함수: WebAssembly 내장 문자열 함수가 JavaScript 글루 코드 없이 호출할 수 있도록 JavaScript String API의 하위 집합을 미러링하도록 합니다.
- 크기 조절 가능한 버퍼 통합: 크기 조절 가능한 버퍼를 사용하는 JavaScript 코드에 WebAssembly를 통합합니다.
기능 삭제
올해는 플랫폼에서 삭제하는 작업도 포함됩니다. 변형 이벤트는 지원 중단되었으며 훨씬 더 우수한 성능을 제공하고 광범위하게 사용 가능한 기준으로 Mutation Observer API로 대체되었습니다. Chrome은 Chrome 126에서 이러한 이벤트를 삭제했으며 이 포커스 영역은 모든 브라우저에서 이러한 이벤트를 삭제하는 것입니다.
이 이벤트의 역사와 이러한 이벤트가 삭제되는 이유를 알아보려면 Chrome에서 변형 이벤트가 삭제됨을 참고하세요.
자세히 알아보기
기능의 전체 목록에 관한 설명은 프로젝트 README에서 확인할 수 있습니다. 또한 Interop 2025에 참여하는 다른 회사의 게시물도 읽어보세요.