본문 바로가기
홈

web.dev

2026년 8월 웹 플랫폼 신기능

원문: New to the web platform in August
 — web.dev 원문은 CC-BY-4.0
 라이선스로 제공되며, 이 글은 한국어로 번역한 2차 저작물입니다.
Chrome 152 및 Firefox 154가 2026년 8월에 안정 버전으로 출시되었습니다. 이번 달에는 Safari 안정 버전의 새로운 릴리스는 없었습니다. 이 글에서는 웹 플랫폼 전반에 걸쳐 새롭게 추가된 기능들을 살펴봅니다. Baseline Newly Available이 된 기능들이 많았던 훌륭한 달이었습니다.

text-box
속성이 Baseline이 됩니다

Firefox 154는 
text-box-trim
, 
text-box-edge
, 그리고 
text-box
단축 속성에 대한 지원을 도입합니다.
이러한 속성을 사용하면 블록 방향의 텍스트 정렬 및 간격을 세밀하게 제어할 수 있습니다. 글꼴 메트릭에는 종종 글리프 위아래에 추가 수직 공간(행간 및 반 행간)이 포함되어 있어, 수직 정렬이 고르지 않게 되고 제목이나 아이콘 주변의 간격이 예상과 다르게 나타날 수 있습니다.
text-box-edge
속성은 잘라낼 글꼴 메트릭(예: 
cap alphabetic
또는 
ex alphabetic
)을 지정하며, 
text-box-trim
은 위쪽, 아래쪽 또는 양쪽 가장자리를 잘라낼지 여부를 지정합니다. 
text-box
단축 속성은 두 속성을 결합합니다.
Safari 18.2, Chrome 133, 그리고 이제 Firefox 154에서 지원됨에 따라, 
text-box
속성은 이제 Baseline Newly Available이 되었습니다.

sibling-count()
및 
sibling-index()
CSS 함수가 Baseline이 됩니다

Firefox 154는 
sibling-count()
및 
sibling-index()
CSS 함수를 지원합니다.
sibling-count()
함수는 부모 컨테이너에 있는 모든 형제 DOM 요소(현재 요소를 포함)의 총 수를 나타내는 정수를 반환합니다. 
sibling-index()
함수는 형제 중에서 현재 요소의 1 기반 위치를 반환합니다.
이 함수들을 사용하면 JavaScript나 유틸리티 클래스 없이 CSS에서 동적으로 레이아웃 크기, 순차 애니메이션 지연, 색상 변형을 계산할 수 있습니다. 이제 Baseline Newly Available이 되었습니다.

autocorrect
전역 HTML 속성이 Baseline이 됩니다

Chrome 152는 전역 
autocorrect
HTML 속성에 대한 지원을 추가하고 이를 
HTMLElement.prototype.autocorrect
에 반영합니다.
autocorrect
속성을 사용하면 
<input>
, 
<textarea>
및 
contenteditable
속성이 있는 요소를 포함하여 편집 가능한 요소에서 자동 맞춤법 및 구두점 교정을 활성화할지 여부를 제어할 수 있습니다. 
on
및 
off
값을 사용할 수 있습니다.
Safari와 Firefox가 이 속성을 이미 지원하고 있으므로, 전역 
autocorrect
속성은 이제 Baseline Newly Available이 되었습니다.

CSSPseudoElement
의 
::backdrop
, 
::scroll-marker
, 
::view-transition
지원

Chrome 152는 
::after
, 
::before
, 
::marker
에 대해 이전에 지원되었던 
CSSPseudoElement
지원을 
::backdrop
, 
::scroll-marker
, 
::view-transition
까지 확장합니다.
::backdrop
에 대한 
CSSPseudoElement
지원을 통해 백드롭 의사 요소에 직접 이벤트 리스너를 연결할 수 있으므로, 좌표 경계 상자를 계산하지 않고도 대화 상자 외부를 클릭했을 때 대화 상자를 닫는 것이 간편해집니다. 
::scroll-marker
의 경우 사용자 상호 작용 이벤트를 캡처하는 데 용이하며, 
::view-transition
의 경우 전환을 가로채거나 지오메트리 인식 애니메이션을 구축할 수 있습니다.

alpha()
CSS 함수를 사용한 상대 알파 색상

Chrome 152는 CSS Color 5의 
alpha()
함수를 상대 알파 색상에 대해 도입합니다.
alpha()
함수는 기존의 원본 색상을 입력받아 조정된 알파(투명도) 채널을 가진 해당 색상을 반환하며, 색상 채널을 보존하고 모든 색상 공간에서 완벽하게 작동합니다.

window-drag
CSS 속성

Chrome 152는 표준 
window-drag
CSS 속성을 지원합니다.
설치된 데스크톱 웹 애플리케이션을 개발할 때, 
window-drag
를 사용하여 레이아웃의 특정 영역(예: 사용자 정의 제목 표시줄 또는 헤더)을 드래그 가능한 영역으로 지정할 수 있습니다. 이러한 영역에서 포인터 드래그 제스처는 페이지 콘텐츠를 스크롤하거나 선택하는 대신 최상위 애플리케이션 창을 이동시킵니다. 이는 이전 
app-region
속성을 표준화하고 이름을 변경한 것으로, 
move
및 
none
값을 표준 CSS 상속과 함께 사용합니다.

OpaqueRange
API

Chrome 152는 
<textarea>
및 텍스트 기반 
<input>
요소와 같은 폼 컨트롤 값 내의 라이브 텍스트 범위를 나타내는 
OpaqueRange
를 도입합니다.
OpaqueRange
는 
getBoundingClientRect()
, 
getClientRects()
, CSS Custom Highlight API를 포함한 범위 기반 API가 폼 컨트롤 텍스트에 대해 인라인 제안, 맞춤법 강조 표시 및 고정된 팝오버에 작동하도록 합니다. 이는 내부 섀도우 트리를 컨테이너 노드가 아닌 값 오프셋을 노출함으로써 컴포넌트 캡슐화를 유지합니다.

Firefox의 새로운 
Iterator
헬퍼 메서드

Firefox 154는 
Iterator.prototype
에 여러 가지 새로운 메서드를 추가합니다.
  • includes()
    : 이터레이터가 지정된 값을 생성하는지 확인하고 
    true
    또는 
    false
    를 반환합니다.
  • join()
    : 이터레이터가 생성한 모든 요소를 구분 기호로 구분된 문자열로 연결합니다. 
    Array.prototype.join()
    과 유사합니다.
  • chunks()
    : 기본 이터레이터에서 연속적인 고정 크기 배열 청크를 생성하는 헬퍼 이터레이터를 반환합니다.
  • windows()
    : 이터레이터에 대한 슬라이딩 창 배열을 생성하는 헬퍼 이터레이터를 반환합니다.

Firefox의 WebRTC 전송 개선 사항

Firefox 154는 여러 WebRTC 전송 추가 사항을 도입합니다.
  • RTCIceTransport.getSelectedCandidatePair()
    및 
    selectedcandidatepairchange
    이벤트: 애플리케이션이 현재 활성화된 ICE 후보 쌍을 검사할 수 있습니다.
  • RTCDtlsTransport
    의 
    error
    이벤트: 애플리케이션이 DTLS 전송 및 핑거프린트 오류를 수신할 수 있습니다.
  • RTCRtpReceiver.getParameters()
    및 
    RTCRtpSender.getParameters()
    의 
    rtcp
    구성 매개변수 지원.
  • WebRTC 전송 통계: 
    RTCCertificateStats
    및 추가 
    RTCTransportStats
    를 보고합니다.
Chrome, Safari, 그리고 이제 Firefox 154에서 지원됨에 따라, 
RTCIceTransport.getSelectedCandidatePair()
및 
RTCDtlsTransport
error
이벤트는 이제 Baseline Newly Available이 되었습니다.

베타 브라우저 릴리스

베타 브라우저 버전은 다음 안정 버전에서 제공될 기능에 대한 미리 보기를 제공합니다. 모든 사용자에게 도달하기 전에 새로운 기능을 테스트하거나 중단 변경 사항을 확인하기에 이상적인 시기입니다. 이번 달의 새로운 베타 버전은 Chrome 153 및 Firefox 155입니다. 이번 달에는 Safari 베타 버전이 없습니다.
Chrome 153 베타 버전에는 단일 축 스크롤 컨테이너(
overflow: scroll clip
)와 제스처 축 잠금을 방지하는 
scroll-axis-lock
CSS 속성이 포함됩니다. JavaScript 측면에서는 TC39 Iterator 
join()
및 joint iteration (
zip
)을 추가합니다. Web API 추가 사항에는 전용 단일 기능 선언적 요소 
<camera>
및 
<microphone>
이 포함됩니다.
Firefox 155 베타 버전은 
SVGAElement
를 업데이트하여 
HyperlinkElementUtils
를 구현하고, SVG 
<a>
요소에서 표준 URL 속성(protocol, hostname, pathname, search, hash) 및 
origin
을 노출합니다. 또한 SVG 목록 인터페이스(SVGNumberList, SVGPointList, SVGStringList, SVGTransformList)에 indexed setter를 추가합니다.
목록으로