2026년 8월 웹 플랫폼 업데이트: 새로운 기능 소개

2026년 8월 동안 안정(stable) 및 베타 웹 브라우저에 출시된 흥미로운 기능들을 알아봅니다.

안정 브라우저 릴리스

Chrome 152와 Firefox 154가 2026년 8월 동안 안정 버전으로 출시되었습니다. 이번 달에는 새로운 Safari 안정 버전은 없었습니다. 본 글에서는 웹 플랫폼 전반에 걸쳐 새롭게 추가된 기능들을 살펴봅니다. 기능들이 Baseline Newly available 상태로 이용 가능해진 매우 좋은 한 달이었습니다.

text-box 속성 (properties)가 Baseline으로 지정됨

Firefox 154는 다음을 지원합니다:
text-box-trim,
text-box-edge,
그리고 text-box 축약형 속성(shorthand property).

이러한 속성들은 블록 방향에서 텍스트 정렬 및 간격에 대한 세밀한 제어를 제공합니다. 글꼴 측정값(Font metrics)에는 종종 글리프 위아래로 추가적인 수직 공간(leading 및 half-leading)이 포함되어 있어, 수직 정렬을 불균일하게 만들고 제목이나 아이콘 주변에 예상치 못한 간격을 유발할 수 있습니다.

text-box-edge 속성은 자르기 위해 지정하는 글꼴 측정값(예: cap alphabetic 또는 ex alphabetic)을 명시하며, text-box-trim은 오버 엣지(over edge), 언더 엣지(under edge) 중 어느 것을 자를지 지정합니다. 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() 함수는 부모 컨테이너 내의 형제(sibling) DOM 요소의 총 개수(요소 자신 포함)를 나타내는 정수를 반환합니다. sibling-index() 함수는 현재 요소가 형제들 사이에서 가지는 1 기반 위치를 반환합니다.

이러한 함수들은 JavaScript나 유틸리티 클래스를 사용할 필요 없이 CSS 내에서 레이아웃 크기, 순차 애니메이션 지연 시간(staggered animation delays), 색상 변화 등을 동적으로 계산할 수 있게 해줍니다. 이 기능들이 이제 Baseline Newly available 상태가 되었습니다.

autocorrect 전역 HTML 속성이 Baseline으로 지정됨

크롬 152는 전역 autocorrect 지원을 추가합니다.

HTML 속성으로 이를 반영하여 HTMLElement.prototype.autocorrect에 적용할 수 있습니다.

autocorrect 속성은 <input>, <textarea> 및 contenteditable 속성을 가진 요소 등 편집 가능한 요소에서 자동 철자 및 구두점 교정 활성화 여부를 제어할 수 있게 합니다. 이 속성은 on과 off 값을 받습니다.

Safari와 Firefox가 이미 이 속성을 지원하고 있어, 전역 autocorrect 속성이 이제 Baseline Newly로 사용 가능해졌습니다.

::backdrop, ::scroll-marker, 및 ::view-transition에 대한 CSSPseudoElement 지원

크롬 152는 CSSPseudoElement 지원을 확장합니다 (이전에는 ::after, ::before, 및 ::marker에 대해 사용 가능했음). 이제 ::backdrop, ::scroll-marker, 및 ::view-transition도 포함됩니다.

::backdrop에 대한 CSSPseudoElement를 지원하면, 좌표 경계 상자(coordinate bounding boxes)를 계산할 필요 없이 백드롭 요소 외부를 클릭했을 때 다이얼로그를 닫는 작업을 쉽게 할 수 있도록 이벤트 리스너를 직접 부착할 수 있습니다. ::scroll-marker의 경우 사용자 상호작용 이벤트를 포착하는 데 용이하며, ::view-transition의 경우 전환을 가로채거나 기하학적 인식 애니메이션(geometry-aware animations)을 구축할 수 있게 합니다.

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

크롬 152는 상대 알파 색상을 위해 CSS Color 5에서 alpha() 함수를 도입합니다.

alpha() 함수는 기존의 원본 색상(origin color)을 받아, 색상 채널은 유지하면서 조정된 알파(투명도) 채널을 가진 해당 색상을 반환하며 모든 색 공간에서 원활하게 작동합니다:

window-drag CSS 속성

크롬 152는 표준 window-drag CSS 속성 지원을 추가합니다.

설치된 데스크톱 웹 애플리케이션(installed desktop web applications)을 개발할 때, window-drag를 사용할 수 있습니다.

특정 레이아웃 영역—예를 들어 사용자 지정 제목 표시줄이나 헤더—을 드래그 가능한 영역으로 지정할 수 있습니다. 이러한 영역에서 포인터 드래그 제스처는 페이지 콘텐츠를 스크롤하거나 선택하는 대신 최상위 애플리케이션 창을 이동시킵니다. 이는 이전의 app-region 속성을 표준화하고 이름을 변경한 것으로, move와 none 값을 사용하며 표준 CSS 상속을 따릅니다.

브라우저 지원

OpaqueRange API

Chrome 152에서는 <textarea> 및 텍스트 기반 <input> 요소와 같은 폼 컨트롤 값 내의 실시간 텍스트 범위를 나타내는 OpaqueRange를 도입합니다.

OpaqueRange는 인라인 제안, 철자 하이라이트, 고정된 팝오버를 위한 폼 컨트롤 텍스트에 작동하는 getBoundingClientRect() 및 getClientRects()와 같은 범위 기반 API, 그리고 CSS Custom Highlight API를 가능하게 합니다. 이는 내부 그림자 트리 컨테이너 노드 대신 값 오프셋을 노출함으로써 컴포넌트 캡슐화를 유지합니다.

새로운 Iterator 헬퍼 메서드 (Firefox)

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 전송 및 지문(fingerprint) 오류를 감지하도록 들을 수 있습니다.
• RTCRtpReceiver.getParameters()와 RTCRtpSender.getParameters()에 대한 rtcp 구성 매개변수 지원.

• WebRTC 전송 통계(transport statistics) 보고 기능: RTCCertificateStats 및 추가된 RTCTransportStats.

Chrome, Safari에서 지원되던 기능에 더해 이제 Firefox 154에서도 RTCIceTransport.getSelectedCandidatePair()와 RTCDtlsTransport의 error 이벤트가 Baseline Newly로 사용 가능합니다.

베타 브라우저 릴리스

베타 브라우저 버전은 다음 안정화 버전에서 제공될 기능을 미리 볼 수 있게 해줍니다. 새로운 기능 테스트나 모든 사용자에게 도달하기 전에 발생하는 변경 사항(breaking changes)을 확인하기에 이상적인 시기입니다. 이번 달의 새 베타는 Chrome 153과 Firefox 155입니다. Safari 베타는 없습니다.

Chrome 153 베타에는 단일 축 스크롤 컨테이너(overflow: scroll clip)와 제스처 축 잠금(gesture axis locking)을 방지하는 scroll-axis-lock CSS 속성이 포함됩니다. JavaScript 측면에서는 TC39 Iterator의 join()과 공동 반복(joint iteration, zip)이 추가되었습니다. Web API 추가 사항으로는 전용 단일 기능 선언적 요소인 <camera>와 <microphone>이 있습니다.

Firefox 155 베타는 HyperlinkElementUtils를 구현하여 SVGAElement를 업데이트하고, SVG <a> 요소에 표준 URL 속성(protocol, hostname, pathname, search, hash)과 origin을 노출합니다. 또한 SVG 리스트 인터페이스(SVGNumberList, SVGPointList, SVGStringList, SVGTransformList)에 인덱스 설정자(indexed setters)를 추가했습니다.