2026년 6월 웹 플랫폼 업데이트 기능 소개

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

안정 버전 브라우저 출시

Chrome 149, Chrome 150, 그리고 Firefox 152가 6월 동안 안정화 버전에 출시되었습니다. 이번 달에는 Safari의 안정 버전 출시는 없었습니다. 본 게시물에서는 웹 브라우저에 새롭게 적용되는 기능들을 살펴봅니다.

field-sizing을 사용한 폼 컨트롤 크기 조정이 Baseline으로 전환

Firefox 152는 field-sizing CSS 속성 지원을 도입하여, 폼 컨트롤의 자동 크기 조절(Automatic form control sizing) 기능이 Baseline으로 새로 제공됩니다.

field-sizing 속성은 <textarea>, <input>, <select>와 같은 폼 컨트롤들이 기본 크기에 고정되는 대신 콘텐츠에 맞게 동적으로 축소되거나 확장되도록 합니다 (field-sizing: content). 이를 통해 사용자가 타이핑할 때 크기가 조정되는 텍스트 입력란이나 텍스트 영역을 만들 때 JavaScript 우회 방지(workarounds)가 필요 없어집니다.

textarea {
  field-sizing: content;
}

shape-outside에서 기본 도형인 rect()와 xywh()가 Baseline으로 전환

Chrome 149가 shape-outside 속성에서 rect() 및 xywh() 모양 함수 지원을 탑재함에 따라, 이 기본적인 도형들이 주요 브라우저 전반에 걸쳐 Baseline으로 새로 제공됩니다.

rect()와 xywh() 함수를 사용하면 정확한 안쪽 좌표(inset coordinates) 또는 원점-크기(origin-and-dimensions) 구문을 사용하여 직사각형 플로트 제외 영역(rectangular float exclusion areas)을 정의할 수 있습니다. 이는 직사각형 플로팅 감싸기 모양에 polygon()을 사용하는 것보다 더 간단하고 읽기 쉬운 구문입니다.

CSS text-fit을 사용한 자동 글꼴 크기 조정

Chrome 150은 text-fit CSS 속성을 도입하여, 개발자들이 콘텐츠가 포함된 박스(containing box)의 너비에 맞게 글꼴 크기를 자동으로 조정할 수 있게 합니다.

.headline {
  text-fit: grow;
}

브라우저 지원

CSS 간격 장식 (gap decorations)

Chrome 149는 그리드(grid) 및 플렉스박스(flexbox) 레이아웃에서 CSS 간격 장식(CSS gap decorations) 지원을 도입합니다. 간격 장식은 다중 열 레이아웃에서의 column-rule과 유사하게, 그리드 항목과 플렉스 항목 사이의 간격에 직접 선이나 스타일링을 추가할 수 있게 합니다.

.grid-container {
display: grid;
gap: 20px;
...

Gap decorations에 대해 더 알아보기: Chromium에서 사용 가능합니다.

CSS background-clip: border-area

Chrome 150이 background-clip: border-area 지원을 추가합니다

CSS Backgrounds
레벨 4.

이 값은 요소 배경을 경계 영역(border area)에만 구체적으로 클립하여, 추가적인 감싸기 요소나 가상 요소 없이 사용자 정의 그라디언트 테두리, 장식 프레임 가장자리, 애니메이션 테두리 효과를 만들 수 있게 해줍니다.

브라우저 지원

프로그래밍 방식 스크롤 Promise

Chrome 150이 프로그래밍 방식 스크롤 메서드(scrollTo(),
scrollBy(),
그리고 scrollIntoView())
를 Promise 반환으로 업데이트합니다.

반환된 Promise는 부드러운 스크롤 애니메이션이 완료될 때 해결(resolve)되어, 스크롤이 안정화된 후 후속 조치를 트리거하는 신뢰할 수 있는 신호를 제공합니다.

focusgroup을 사용한 선언적 키보드 탐색

Chrome 150이 focusgroup 속성 지원을 도입합니다.

focusgroup 속성은 개발자가 포커스 그룹(예: 도구 모음, 탭 목록, 메뉴) 전반에 걸친 화살표 키 탐색을 수동으로 키보드 이벤트 리스너를 작성하지 않고 선언적으로 관리할 수 있게 해줍니다.

<div focusgroup="toolbar wrap" aria-label="Text formatting">
<button type="button">Bold</button>
<button type="button">Italic</button>
...

Focusgroup Explainer에서 더 알아보기.

Back/Forward Cache (bfcache)에서 지원되는 WebSockets

Chrome 149에서는 활성 WebSocket 연결을 가진 페이지가 이제 Back/Forward Cache (bfcache)에 진입할 수 있습니다.

이전에는 열려 있는 WebSocket 연결이 페이지를 bfcache 적격이 아니게 만들었습니다. 이제 브라우저는 bfcache 진입 시 활성 WebSocket 연결을 자동으로 닫아, 페이지가 캐시되고 뒤로 이동했을 때 즉시 복원될 수 있도록 합니다.

Resource Timing의 중간 및 헤더 응답 타이밍

Firefox 152는 PerformanceResourceTiming 인터페이스에 firstInterimResponseStart와 finalResponseHeadersStart 지원을 추가합니다.

이러한 값들은 요청을 보낸 후 브라우저가 중간 HTTP 응답과 최종 HTTP 응답을 받는 데 걸리는 시간을 각각 측정하는 데 사용될 수 있습니다.

알림용 액션 버튼

Firefox 152는 Notification의 actions 속성과 ServiceWorkerRegistration.showNotification() 옵션을 사용하여 알림용 액션 버튼을 지원합니다.

이제 OS 알림에 액션 버튼을 포함하고, 버튼이 탭되었을 때 사용자 상호작용을 수신할 수 있습니다.

베타 브라우저 릴리스

베타 브라우저 버전은 다음 안정화 버전의 기능을 미리 볼 수 있게 해줍니다. 전 세계가 해당 릴리스를 받기 전에 사이트에 영향을 줄 수 있는 새로운 기능이나 제거된 기능을 테스트하기에 아주 좋은 시기입니다. 이번 달의 새로운 베타는 Firefox 153과 Safari 27입니다.

Firefox 153 베타에서는 최대 캡처 스택 추적 깊이를 구성하는 Error.stackTraceLimit 지원, 인덱싱된 레코드를 검색하기 위한 IDBObjectStore.getAllRecords() 및 IDBIndex.getAllRecords(), 그리고 WebRTC 보안 검사를 위한 RTCDtlsTransport.getRemoteCertificates()가 도입됩니다.
애드온 개발자는 또한 온디맨드 스크립트 주입을 위한 새로운 publicSuffix API와 userScripts.execute() 메서드를 얻게 됩니다.

Safari 27 베타에서는 변환 인식 앵커 위치 지정(transform-aware anchor positioning), 헤딩 요소를 일치시키기 위한 :heading 의사 클래스, 캐스케이드 레이어를 되돌리는 데 사용되는 revert-rule 키워드, 박스 크기 지정에 대한 stretch 키워드 지원, 그리고 :host:has() 복합 선택자가 도입됩니다.