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

2026년 6월에 안정화 버전 및 베타 웹브라우저에 도입된 흥미로운 기능을 알아보세요.

Rachel Andrew

게시일: 2026년 6월 30일

안정화 브라우저 출시

Chrome 149, Chrome 150, Firefox 152가 6월에 안정화 버전으로 출시되었습니다. 이번 달에는 Safari 안정화 버전이 출시되지 않았습니다. 이 게시물에서는 웹브라우저에 도입되는 새로운 기능을 살펴봅니다.

field-sizing로 양식 컨트롤 크기 조정이 기준이 됨

Firefox 152에서는 field-sizing CSS 속성을 지원하여 모든 주요 브라우저 엔진에서 자동 양식 컨트롤 크기 조절 기준선을 새로 사용할 수 있습니다.

field-sizing 속성을 사용하면 <textarea>, <input>, <select>과 같은 양식 컨트롤이 기본 크기(field-sizing: fixed)로 고정되지 않고 콘텐츠(field-sizing: content)에 맞게 동적으로 축소되거나 확대될 수 있습니다. 이렇게 하면 사용자가 입력할 때 크기가 조절되는 텍스트 입력 또는 텍스트 영역을 빌드할 때 JavaScript 해결 방법이 필요하지 않습니다.

textarea {
  field-sizing: content;
}

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 152.
  • Safari: 26.2.

Source

shape-outside의 기본 모양 rect() 및 xywh()이 기준선이 됨

Chrome 149에서 shape-outside 속성의 rect() 및 xywh() 모양 함수 지원이 제공되면서 이제 이러한 기본 모양을 주요 브라우저에서 사용할 수 있습니다.

rect() 및 xywh() 함수를 사용하면 정확한 인셋 좌표 또는 원점 및 크기 구문을 사용하여 직사각형 부동 제외 영역을 정의할 수 있습니다. 이렇게 하면 직사각형 부동 소수점 래핑 도형에 polygon()를 사용하는 것보다 더 간단하고 가독성이 높은 문법을 사용할 수 있습니다.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: 149.
  • Safari: 17.2.

Source

CSS text-fit를 사용한 자동 글꼴 크기 조절

Chrome 150에서는 개발자가 포함 상자의 너비에 맞게 글꼴 크기를 자동으로 조정할 수 있는 text-fit CSS 속성이 도입되었습니다.

.headline {
  text-fit: grow;
}

CSS 간격 장식

Chrome 149에서는 그리드 및 플렉스박스 레이아웃에서 CSS 간격 장식 지원이 도입되었습니다. 간격 장식을 사용하면 다단 레이아웃의 column-rule와 마찬가지로 그리드와 플렉스 항목 사이의 간격에 직접 선과 스타일을 추가할 수 있습니다.

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

자세한 내용은 갭 장식: 이제 Chromium에서 사용 가능을 참고하세요.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

CSS background-clip: border-area

Chrome 150에서는 CSS 배경 레벨 4의 background-clip: border-area에 대한 지원이 추가됩니다.

이 값은 요소 배경을 테두리 영역으로 특별히 클리핑하여 추가 래핑 요소나 의사 요소 없이 맞춤 그라데이션 테두리, 장식 프레임 가장자리, 애니메이션 테두리 효과를 만들 수 있습니다.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: not supported.
  • Safari: 18.2.

프로그래매틱 스크롤 약속

Chrome 150에서는 프로그래매틱 스크롤 메서드 (scrollTo(), scrollBy(), scrollIntoView())가 Promise를 반환하도록 업데이트합니다.

반환된 Promise는 부드러운 스크롤 애니메이션이 완료되면 해결되어 스크롤이 완료된 후 후속 조치를 트리거하는 안정적인 신호를 제공합니다.

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

Chrome 150에서는 focusgroup 속성 지원이 도입됩니다.

focusgroup 속성을 사용하면 개발자가 키보드 이벤트 리스너를 수동으로 작성하지 않고도 복합 UI 컨트롤 (예: 툴바, 탭 목록, 메뉴)에서 선언적으로 화살표 키 탐색을 관리할 수 있습니다.

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

Focusgroup 해설에서 자세히 알아보세요.

뒤로/앞으로 캐시 (bfcache)에서 WebSocket 지원

Chrome 149에서는 활성 WebSocket 연결이 있는 페이지가 이제 뒤로/앞으로 캐시 (bfcache)에 들어갈 수 있습니다.

이전에는 열린 WebSocket 연결로 인해 페이지에서 뒤로-앞으로 캐시를 사용할 수 없었습니다. 이제 브라우저가 bfcache 진입 시 활성 WebSocket 연결을 자동으로 닫아 페이지를 캐시하고 다시 탐색할 때 즉시 복원할 수 있습니다.

리소스 타이밍의 임시 및 헤더 응답 타이밍

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

이를 사용하여 브라우저가 요청을 보낸 후 각각 중간 HTTP 응답과 최종 HTTP 응답을 수신하는 데 걸리는 시간을 측정할 수 있습니다.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 152.
  • Safari: 26.4.

Source

알림 작업 버튼

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

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

Browser Support

  • Chrome: 53.
  • Edge: 18.
  • Firefox: 152.
  • Safari: not supported.

Source

베타 브라우저 출시

베타 브라우저 버전에서는 브라우저의 다음 안정화 버전의 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 미칠 수 있는 새 기능이나 삭제를 테스트하기에 좋은 시기입니다. 이번 달의 새로운 베타는 Firefox 153과 Safari 27입니다.

Firefox 153 베타에서는 최대 캡처된 스택 트레이스 깊이를 구성하는 Error.stackTraceLimit, 색인화된 레코드를 가져오는 IDBObjectStore.getAllRecords() 및 IDBIndex.getAllRecords(), WebRTC 보안 검사를 위한 RTCDtlsTransport.getRemoteCertificates() 지원이 도입되었습니다. 부가기능 개발자는 주문형 스크립트 삽입을 위한 새로운 publicSuffix API와 userScripts.execute() 메서드도 사용할 수 있습니다.

Safari 27 베타에서는 변환 인식 앵커 위치 지정, 제목 요소를 일치시키는 :heading 의사 클래스, 캐스케이드 레이어를 롤백하는 revert-rule 키워드, 박스 크기 조정의 stretch 키워드 지원, :host:has() 복합 선택자가 도입되었습니다.