5월의 새로운 웹 플랫폼 기능

2026년 5월 동안 안정화(stable) 및 베타(beta) 웹 브라우저에 도입된 흥미로운 기능들을 살펴보세요.

안정화 브라우저 출시

5월 동안 Chrome 148, Firefox 151, 그리고 Safari 26.5가 안정화 버전으로 출시되었습니다. 이 포스트에서는 이번 달의 다양한 새로운 기능들을 살펴봅니다.

:open 의

CSS 의사 클래스 (pseudo-class)가 베이스라인 (Baseline)이 되다

Safari 26.5는 주로 기존 기능들에 대한 수정 사항을 담은 릴리스입니다.
하지만 :open 의사 클래스 (pseudo-class)에 대한 지원도 포함되어 있어, 이 기능이 베이스라인 (Baseline)의 '새롭게 사용 가능 (Newly available)' 단계로 진입했습니다.

:open 의사 클래스 (pseudo-class)를 사용하면 요소가 열려 있을 때 "열림 (open)" 및 "닫힘 (closed)" 상태를 가진 요소들을 스타일링할 수 있습니다. 이는 <details> 및 <dialog> 요소가 열려 있을 때뿐만 아니라, <select> 및 <input> 요소(색상 또는 날짜 선택기 등)의 선택기 인터페이스가 표시될 때도 적용됩니다. 이는 details[open]와 같은 속성 (attribute)을 사용하여 스타일링하는 것보다 더 깔끔하고 의미론적인 (semantic) 대안을 제공합니다.

CSS 이름 전용 컨테이너 쿼리 (name-only container queries)가 베이스라인 (Baseline)이 되다

이번 달 Chrome 148이 출시됨에 따라, 이름 전용 컨테이너 쿼리 (name-only container queries)가 이제 베이스라인 (Baseline)의 '새롭게 사용 가능 (Newly available)' 단계가 되었습니다.

이전에는 컨테이너 쿼리 (container query)를 작성할 때 컨테이너 이름과 함께 크기 (size) 또는 스타일 (style) 쿼리 조건을 지정해야 했으며, container-type 속성 (property)으로 컨테이너의 유형을 설정해야 했습니다. 이제는 추가 조건 없이 이름만으로 지정된 컨테이너의 존재 여부를 쿼리할 수 있습니다. 또한, 이름으로만 쿼리하는 경우에는 조상 요소에 container-type을 설정할 필요가 없습니다.

#container {
container-name: --sidebar;
}
...

브라우저 지원 (Browser Support)

사용자 정의 속성 (custom properties)을 위한 컨테이너 스타일 쿼리 (Container style queries)가 베이스라인 (Baseline)이 되다

Firefox 151은 @container에 대한 style() 쿼리 지원을 도입하여, 사용자 정의 속성 (custom properties)을 위한 컨테이너 스타일 쿼리 (container style queries)가 베이스라인 (Baseline)의 '새롭게 사용 가능 (Newly available)' 단계가 되었습니다.

컨테이너 스타일 쿼리 (Container style queries)를 사용하면 부모 컨테이너 (parent container)의 CSS 속성 (properties)을 기반으로 요소에 스타일을 적용할 수 있습니다. 크기 쿼리 (size queries)가 매우 강력한 기능을 제공한다면, 스타일 쿼리 (style queries)는 크기가 아닌 다른 특징들을 쿼리할 수 있게 해줍니다. 특히 이번 릴리스에서는 사용자 정의 속성 (custom properties)을 쿼리하는 기능에 대한 완전한 교차 브라우저 지원 (cross-browser support)을 제공합니다. 예를 들어, 부모 컨테이너에 사용자 정의 속성 --theme이 dark로 설정되어 있는지 확인할 수 있습니다:

@container style(--theme: dark) {
.card {
background-color: #1a1a1a;
...

브라우저 지원 (Browser Support)

비디오 및 오디오 요소를 위한 지연 로딩 (Lazy loading)

Chrome 148은 loading="lazy" 속성을 사용하여 <video> 및 <audio> 요소에 대한 네이티브 지연 로딩 (native lazy loading) 기능을 도입했습니다.

<img 및 <iframe 요소와 마찬가지로, 이제 브라우저가 미디어 리소스가 뷰포트 (viewport)에 가까워질 때까지 로딩을 지연하도록 지시할 수 있습니다. 이는 페이지 로드 성능을 개선하고, 대역폭을 절약하며, 사용자의 데이터 사용량을 줄이는 데 도움이 됩니다. 이 기능을 구현한 팀의 [How To Use Standard HTML Video and Audio Lazy-Loading on the Web Today]에서 더 자세히 알아보세요.

Document Picture-in-Picture API

Firefox 151은 데스크톱 플랫폼에서 Document Picture-in-Picture API 지원을 도입했습니다.

<video 요소를 항상 위에 떠 있는 창으로 볼 수 있게 해주는 표준 Picture-in-Picture API와 달리, Document Picture-in-Picture API는 임의의 HTML 콘텐츠를 포함하는 항상 위에 떠 있는 창을 열 수 있게 해줍니다. 이를 통해 화상 회의 참가자 그리드, 대화형 주식 티커, 또는 페이지를 탐색하여 벗어날 때도 유지되는 타이머와 같은 풍부한 대화형 오버레이 (interactive overlays)를 구현할 수 있습니다.

Web Serial API의 플랫폼 지원 확대

Firefox 151은 데스크톱 플랫폼에서 Web Serial API 지원을 추가했으며, Chrome 148은 Android에서의 지원을 추가했습니다.

Web Serial API는 웹사이트가 마이크로컨트롤러 (microcontrollers), 3D 프린터, 개발 보드 (development boards) 및 주변 하드웨어와 같은 시리얼 장치 (serial devices)로부터 데이터를 읽거나 쓸 수 있는 방법을 제공합니다. Firefox에서는 Web Serial API를 사용하기 위해 사용자가 인공적으로 생성된 사이트 권한 애드온 (site permission add-on)을 설치해야 하며, 이는 액세스를 관리하기 위한 안전하고 통제된 메커니즘을 보장합니다.

베타 브라우저 출시 (Beta browser releases)

베타 브라우저 버전은 다음 안정화 버전 (stable version)에 포함될 기능들을 미리 보여줍니다. 이는 새로운 기능이나, 전 세계적으로 해당 버전이 출시되기 전에 사이트에 영향을 미칠 수 있는 삭제 사항들을 테스트하기에 아주 좋은 시기입니다. 이번 달의 새로운 베타 버전은 Chrome 149와 Firefox 152입니다. 이번 달에는 Safari 베타가 없습니다.

Chrome 149 beta에는 flex 및 grid 아이템 사이의 공백 (gaps)을 스타일링할 수 있는 CSS gap decorations와 같은 흥미로운 CSS 업데이트가 포함되어 있습니다. 또한 shape-outside 속성의 path(), shape(), rect(), xywh() 기본 도형 함수 (shape functions)와 CSS 속성인 path-length를 지원합니다. API 측면에서는 scrollTo(), scrollBy(), scrollIntoView()와 같은 프로그래밍 방식의 스크롤 메서드 (programmatic scroll methods)가 이제 부드러운 스크롤 (smooth scrolling)이 완료될 때 해결되는 Promise를 반환하며, 활성 WebSocket 연결이 있는 페이지도 이제 백/포워드 캐싱 (back/forward caching, BFCache) 대상이 될 수 있습니다.

Firefox 152 beta는 폼 컨트롤 (form controls)이 콘텐츠에 맞춰 크기를 자동으로 조정할 수 있게 해주는 field-sizing 속성에 대한 완전한 지원을 도입합니다. 또한 Notification 인터페이스에 actions 및 maxActions 속성을 추가하고, Element.getAnimations()에서 options.pseudoElement 지원을 추가합니다.