5월 웹 플랫폼 신규 부문

2025년 5월에 안정화 버전 및 베타 웹브라우저에 도입된 몇 가지 흥미로운 기능을 살펴보세요.

Rachel Andrew

게시일: 2025년 5월 29일

안정적인 브라우저 출시

2025년 5월 Firefox 139, Chrome 137, Safari 18.5가 안정화되었습니다. 이 게시물에서는 이러한 출시와 함께 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.

Temporal API

Firefox 139는 Temporal API를 지원하는 최초의 브라우저입니다. 이렇게 하면 내장된 시간대 및 캘린더 표현을 사용하여 다양한 시나리오에서 날짜와 시간을 간편하게 처리할 수 있습니다.

hidden=until-found 및 beforematch 이벤트

Firefox 139에는 hidden="until-found" HTML 속성과 beforematch 이벤트도 포함되어 있습니다. until-found 상태를 사용하면 사용자 검색 (예: '페이지에서 찾기' 사용) 또는 프래그먼트 탐색으로 찾을 때까지 요소의 콘텐츠를 숨길 수 있습니다. beforematch 이벤트는 hidden 속성이 삭제되기 직전에 실행됩니다.

requestClose() 메서드

이제 Firefox 139 출시에서 새롭게 사용할 수 있는 기준은 HTMLDialogElement 인터페이스의 requestClose() 메서드입니다.

이 메서드는 close 이벤트를 실행하기 전에 cancel 이벤트를 실행한다는 점에서 HTMLDialogElement.close() 메서드와 다릅니다.

CSS reading-flow 및 reading-order

Chrome 137은 reading-flow 및 reading-order를 제공합니다. reading-flow CSS 속성은 플렉스, 그리드 또는 블록 레이아웃의 요소가 접근성 도구에 노출되는 순서와 선형 순차 탐색 메서드를 사용하여 포커스가 설정되는 방식을 제어합니다. 이렇게 하면 탭 순서가 항목이 배치된 순서와 연결 해제될 수 있는 그리드 및 플렉스 레이아웃의 오랜 문제가 해결됩니다.

reading-order CSS 속성을 사용하면 읽기 흐름 컨테이너 내 항목의 순서를 수동으로 재정의할 수 있습니다. 그리드, 플렉스 또는 블록 컨테이너 내에서 이 속성을 사용하려면 컨테이너의 reading-flow 값을 source-order로 설정하고 개별 항목의 reading-order를 정수 값으로 설정합니다.

자세한 내용은 논리적 순차 포커스 탐색에 CSS 읽기 흐름 사용을 참고하세요.

CSS if() 함수

또한 Chrome 137에서는 CSS if() 함수가 조건부 값을 간결하게 표현하는 방법을 제공합니다. 세미콜론으로 구분된 일련의 조건-값 쌍을 허용합니다. 이 함수는 각 조건을 순차적으로 평가하고 첫 번째 참 조건과 연결된 값을 반환합니다. 조건 중 참으로 평가되는 조건이 없으면 함수는 빈 토큰 스트림을 반환합니다.

Document-Isolation-Policy

Chrome 137부터 제공되는 Document-Isolation-Policy를 사용하면 문서가 페이지의 crossOriginIsolation 상태와 관계없이 COOP 또는 COEP를 배포하지 않고도 자체적으로 crossOriginIsolation를 사용 설정할 수 있습니다. 이 정책은 프로세스 격리가 지원합니다. 또한 CORS가 아닌 교차 출처 하위 리소스는 사용자 인증 정보 없이 로드되거나 CORP 헤더가 있어야 합니다.

선언적 웹 푸시

Safari 18.5는 주로 버그 수정 출시였지만 현재 Safari에서만 사용할 수 있는 선언적 웹 푸시 기능을 macOS에 추가합니다. WebKit 블로그의 선언적 웹 푸시 알아보기에서 자세히 알아보세요.

베타 브라우저 출시

베타 브라우저 버전에서는 다음번 브라우저의 안정화 버전에 포함될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트해 보세요. 새로운 베타는 Firefox 140 및 Chrome 138입니다.

Firefox 140에는 최신 비동기 프로미즈 기반 쿠키 관리 방법인 Cookie Store API의 하위 집합이 포함되어 있습니다. 이 API는 기본 스레드와 서비스 워커 모두에서 사용할 수 있습니다.

Chrome 138에는 Summarizer API, Language Detector API, Translator API 등 여러 내장 AI API가 포함되어 있습니다.

또한 Chrome 138에는 stretch 크기 조정 키워드, sibling-index() 및 sibling-count() 함수를 비롯한 여러 CSS 기능이 있습니다.