상호 운용성 2025: 웹 플랫폼 개선의 또 다른 한 해

Rachel Andrew

게시: 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 목록에도 표시됩니다.

프로젝트 시작 시 점수: 상호 운용성:33, 조사:0, Chrome Canary:91, Edge Dev:88, Firefox Nightly:52, Safari Technology Preview:55
상호 운용성 2025 대시보드 (2025년 2월 13일 기준)

CSS 및 UI

상호 운용성 2025에 포함된 몇 가지 기능은 CSS 2024 상태 설문조사에서 중요하다고 지적한 기능입니다. 이를 통해 더 아름답고 성능이 우수한 사용자 환경을 만들 수 있습니다.

앵커 위치 지정

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

이 기능을 사용하면 배치된 요소를 앵커에 고정할 수 있습니다. 이 기능은 팝오버를 표시할 때 특히 유용합니다.

배치된 요소가 있는 앵커

이 기능을 기준에 포함하면 서드 파티 라이브러리를 사용하지 않고도 훨씬 쉽게 사용자 인터페이스를 만들 수 있습니다. 앵커 포지셔닝 문서 및 MDN의 CSS 앵커 포지셔닝에서 자세히 알아보세요.

동일한 문서 보기 전환

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

올해는 뷰 전환, 특히 동일한 문서 뷰 전환과 view-transition-class CSS 속성도 포함되었습니다.

단일 페이지 애플리케이션의 동일 문서 뷰 전환 및 뷰 전환에 관한 MDN 문서에서 뷰 전환에 관해 자세히 알아보세요.

backdrop-filter 속성

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 18.

Source

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

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: 17.4.

Source

@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 이벤트

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari: not supported.

Source

scrollend 이벤트가 없으면 스크롤이 완료되었음을 감지할 수 있는 확실한 방법이 없습니다. 가장 좋은 방법은 setTimeout()를 사용하여 일정 시간 동안 스크롤이 중지되었는지 확인하는 것입니다. 이렇게 하면 스크롤이 종료된 이벤트가 아니라 스크롤이 일시중지된 이벤트와 더 유사해집니다.

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

scrollend 이벤트를 사용하면 브라우저가 이러한 어려운 평가를 모두 실행합니다.

document.onscrollend = event => {
  // ...
}

새로운 JavaScript 이벤트인 Scrollend 및 scrollend의 MDN 문서에서 더 많은 예시를 확인하세요.

text-decoration 속성

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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년 중에 이 문제가 해결될 예정입니다.

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

또한 논리적 CSS 속성 overflow-inline 및 overflow-block가 포함되어 있습니다. 이를 통해 작성 모드와 관계없이 콘텐츠가 상자를 벗어날 때 발생하는 상황을 제어할 수 있습니다.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 69.
  • Safari: not supported.

Source

코어 웹 바이탈

웹 바이탈을 사용하면 사이트의 환경을 수치화하고 개선 기회를 파악할 수 있습니다. 웹 바이탈 이니셔티브는 환경을 단순화하고 사이트가 가장 중요한 측정항목인 Core Web Vitals에 집중할 수 있도록 지원하는 것을 목표로 합니다.

Interop 2025는 브라우저 전반에서 LargestContentfulPaint API 및 Event Timing API를 구현하여 최대 콘텐츠 페인트 (LCP) 및 다음 페인트에 대한 상호작용 (INP) 측정항목을 포함합니다. 누적 레이아웃 이동 (CLS) 측정항목은 범위에 포함되지 않습니다.

LCP API

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

Event Timing API (INP용)

Browser Support

  • Chrome: 96.
  • Edge: 96.
  • Firefox: not supported.
  • Safari: not supported.

Source

WebAssembly (Wasm)

WebAssembly API를 사용하면 휴대용 바이너리 명령 형식인 WebAssembly 코드를 로드할 수 있습니다. 브라우저에서 모든 서버 요구사항을 포함하여 전체 블로그 애플리케이션을 실행하는 등의 작업을 할 수 있습니다.

올해는 다음 기능에 중점을 둘 예정입니다.

  • JavaScript 문자열 내장 함수: WebAssembly 내장 문자열 함수가 JavaScript 글루 코드 없이 호출할 수 있도록 JavaScript String API의 하위 집합을 미러링하도록 합니다.
  • 크기 조절 가능한 버퍼 통합: 크기 조절 가능한 버퍼를 사용하는 JavaScript 코드에 WebAssembly를 통합합니다.

기능 삭제

올해는 플랫폼에서 삭제하는 작업도 포함됩니다. 변형 이벤트는 지원 중단되었으며 훨씬 더 우수한 성능을 제공하고 광범위하게 사용 가능한 기준으로 Mutation Observer API로 대체되었습니다. Chrome은 Chrome 126에서 이러한 이벤트를 삭제했으며 이 포커스 영역은 모든 브라우저에서 이러한 이벤트를 삭제하는 것입니다.

이 이벤트의 역사와 이러한 이벤트가 삭제되는 이유를 알아보려면 Chrome에서 변형 이벤트가 삭제됨을 참고하세요.

자세히 알아보기

기능의 전체 목록에 관한 설명은 프로젝트 README에서 확인할 수 있습니다. 또한 Interop 2025에 참여하는 다른 회사의 게시물도 읽어보세요.