9월의 웹 플랫폼 신규 출시

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

Rachel Andrew

게시일: 2026년 10월 2일

안정화 브라우저 출시

2주마다 Chrome과 Firefox가 출시되는 첫 달입니다. 즉, Chrome 153, Chrome 154, Firefox 155, Firefox 156, Firefox 157, Safari 27이 2026년 9월에 안정 버전으로 출시됩니다. 이 게시물에서는 새로 제공되는 Baseline에 도달한 많은 기능을 비롯해 브라우저 전반에 적용되는 새로운 기능을 살펴봅니다.

progress() CSS 함수가 Baseline이 됨

Firefox 155에서 progress() CSS 수학 함수 지원이 추가되어 Baseline Newly Available이 되었습니다.

progress() 함수는 시작 값과 종료 값 사이의 한 계산 위치를 나타내는 <number>를 반환합니다. 일반적으로 결과는 0와 1 사이에 고정되므로 컨테이너 또는 표시 영역 크기에 따라 유연한 크기 조정, 불투명도 또는 색상을 제어하는 데 유용합니다. Firefox 155와 Safari 27에서는 no-clamp 키워드 옵션도 지원하여 반환된 진행률 값이 0 아래 또는 1 위로 확장될 수 있습니다.

.card {
  opacity: progress(100vw, 320px, 1200px);
}

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: 155.
  • Safari: 26.

Source

alpha()가 포함된 상대 알파 색상이 기준이 됨

Firefox 155와 Safari 27 모두 CSS Color 5의 alpha() 상대 색상 함수에 대한 지원을 추가합니다.

alpha() 함수는 원본 색상을 가져와 색상 채널과 색상 공간을 유지하면서 조정된 알파 (투명도) 채널이 있는 색상을 반환합니다.

.overlay {
  background-color: alpha(var(--brand-color) / 50%);
}

Chrome 151, Firefox 155, Safari 27에서 모두 alpha()를 지원하므로 이 함수는 이제 Baseline에서 새로 사용할 수 있습니다.

Browser Support

  • Chrome: 151.
  • Edge: 151.
  • Firefox: 155.
  • Safari: 27.

Source

revert-rule CSS 키워드가 기준이 됨

Safari 27에서는 revert-rule CSS 전체 키워드에 대한 지원이 추가되었습니다.

revert는 캐스케이드를 사용자 또는 사용자 에이전트 출처로 롤백하고 revert-layer는 이전 캐스케이드 레이어로 롤백하는 반면 revert-rule는 현재 스타일 규칙이 없는 경우 속성 값이 될 값으로 롤백합니다. Chrome, Firefox, 이제 Safari 27에서 지원되므로 revert-rule는 새로 사용할 수 있는 기준입니다.

Browser Support

  • Chrome: 148.
  • Edge: 148.
  • Firefox: 150.
  • Safari: 27.

Source

light-dark()의 <image> 값이 기준이 됨

Safari 27에서는 light-dark() CSS 함수 내에서 <image> 값을 사용하는 기능이 추가되었습니다.

이전에는 <color> 값으로 제한되었지만 이제 light-dark()는 활성 밝은 또는 어두운 color-scheme에 따라 두 이미지(예: url() 이미지 또는 CSS 그라데이션) 간에 전환할 수 있습니다. Chrome, Firefox, Safari 27에서 지원되므로 light-dark()의 <image> 값이 이제 새로 제공되는 기준입니다.

Browser Support

  • Chrome: 150.
  • Edge: 150.
  • Firefox: 150.
  • Safari: 27.

overflow-anchor를 사용한 스크롤 고정이 기준이 됨

Safari 27에서는 스크롤 고정을 사용 설정하고 overflow-anchor CSS 속성 지원을 추가합니다.

스크롤 고정은 사용자가 페이지를 읽거나 상호작용하는 동안 DOM이 표시 영역 위에서 변경되어 콘텐츠가 갑자기 이동하는 것을 방지하기 위해 스크롤 위치를 자동으로 조정합니다. overflow-anchor: none를 사용하여 특정 요소가 앵커 노드로 작동하지 않도록 선택할 수 있습니다. Safari 27이 Chrome 및 Firefox에 합류하면서 이제 스크롤 고정은 새로 사용 가능 기준선이 되었습니다.

Browser Support

  • Chrome: 56.
  • Edge: 79.
  • Firefox: 66.
  • Safari: 27.

Source

font-width 속성 및 @font-face 설명자가 기준이 됨

CSS 글꼴 4에서는 font-stretch을 font-width로 대체하여 일반, 압축 또는 확장 글꼴을 선택하는 표준 이름으로 사용하고 font-stretch은 기존 별칭으로 유지했습니다.

Firefox 155에서는 font-width CSS 속성, font-width @font-face 설명자, CSSStyleDeclaration.fontWidth에 대한 지원이 추가되었습니다. Chrome 154에서는 @font-face 규칙에 font-width 설명자와 FontFace 객체에 width 속성도 추가됩니다. Safari의 기존 지원과 함께 font-width가 이제 Baseline Newly available이 되었습니다.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 155.
  • Safari: 18.4.

Source

지연 로드된 이미지의 sizes="auto"가 기준이 됨

Safari 27에서는 loading="lazy"를 사용하는 <img> 요소의 sizes 속성에 auto 키워드 지원이 추가되었습니다.

sizes="auto" (또는 auto로 시작하는 sizes 목록)를 지정하면 브라우저가 지연 로드된 이미지의 렌더링된 레이아웃 너비를 사용하여 srcset에서 가장 적절한 이미지 소스를 선택합니다. Chrome, Firefox, 이제 Safari 27에서 지원되므로 sizes="auto"은 새로 사용할 수 있는 기준입니다.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: 150.
  • Safari: not supported.

Source

비동기 반복 및 전송 가능한 ReadableStream 객체가 기준이 됨

Safari 27에는 ReadableStream에 관한 몇 가지 업데이트가 포함되어 있습니다.

  • for await...of 루프와 ReadableStream.prototype.values()를 사용하여 ReadableStream 객체를 비동기적으로 반복하는 기능 지원
  • postMessage()을 사용하여 컨텍스트 간에 ReadableStream 객체 전송 지원
  • 반복 가능 객체 또는 비동기 반복 가능 객체에서 ReadableStream를 만드는 ReadableStream.from() 정적 메서드 지원 (Firefox에서도 지원됨)

이제 Safari 27에서 비동기 반복 가능 스트림과 전송 가능한 ReadableStream 객체를 Baseline Newly available로 사용할 수 있습니다.

Browser Support

  • Chrome: 124.
  • Edge: 124.
  • Firefox: 110.
  • Safari: 27.

AnimationEvent.animation 및 TransitionEvent.animation이 기준이 됩니다.

Safari 27에서는 AnimationEvent에 animation 속성이 추가되고 TransitionEvent에 animation 속성이 추가됩니다.

이 속성은 CSS 애니메이션 또는 전환 이벤트와 연결된 Animation 객체를 반환하므로 이벤트 리스너에서 직접 애니메이션을 검사하거나 제어하기가 더 쉬워집니다. Chrome, Firefox, Safari 27에서 이 속성을 지원하므로 이제 Baseline Newly available입니다.

Browser Support

  • Chrome: 151.
  • Edge: 151.
  • Firefox: 152.
  • Safari: 27.

Source

cookieStore.set()의 maxAge 옵션이 기준이 됨

Safari 27에서는 cookieStore.set()로 쿠키를 설정할 때 maxAge 옵션 지원이 추가되어 절대 expires 타임스탬프를 계산하는 대신 쿠키의 수명을 초 단위 기간으로 지정할 수 있습니다. Chrome, Firefox, Safari 27에서 지원되므로 maxAge 옵션이 이제 Baseline Newly available입니다.

Browser Support

  • Chrome: 145.
  • Edge: 145.
  • Firefox: 148.
  • Safari: 27.

Safari 27의 맞춤설정 가능한 <select>

Safari 27에서는 Chrome과 마찬가지로 appearance: base-select 및 <selectedcontent> 요소를 사용하여 맞춤설정 가능한 <select> 메뉴를 지원합니다.

<select> 및 ::picker(select) 의사 요소를 appearance: base-select로 선택하면 컨트롤이 스타일 지정 가능한 기본 모양으로 전환되어 <option> 요소 내에서 리치 HTML 콘텐츠를 사용할 수 있고 버튼과 드롭다운 선택기의 맞춤 스타일을 지정할 수 있습니다.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: behind a flag.
  • Safari: 27.

Chrome의 선언적 <camera> 및 <microphone> 요소

Chrome 153에서는 <camera> 및 <microphone> HTML 기능 요소가 도입되었습니다.

<usermedia> 요소를 기반으로 <camera> 및 <microphone>는 페이지 로드 시 스크립트 시작 권한 프롬프트를 트리거하지 않고 단일 기능 동영상 또는 오디오 캡처 액세스를 요청하는 전용 사용자 활성화 선언적 컨트롤을 제공합니다.

Browser Support

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

JavaScript Iterator 및 Promise 추가

Chrome 153에서는 Iterator.prototype.join()이 추가되고 Iterator.zip() 및 Iterator.zipKeyed()을 사용한 공동 반복이 추가됩니다.

Browser Support

  • Chrome: 153.
  • Edge: 153.
  • Firefox: 148.
  • Safari Technology Preview: supported.

Source

Firefox 155는 프로미스의 사전 객체를 허용하고 동일한 키가 있는 객체로 결정되는 Promise.allKeyed() 및 Promise.allSettledKeyed()를 구현합니다.

Browser Support

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

Source

Firefox 155의 WebTransport 업데이트

Firefox 155에서는 WebTransport 구현을 확장합니다.

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: 155.
  • Safari: 26.4.

Source

Safari 27의 서비스 워커 정적 라우팅 API

Safari 27에서는 InstallEvent.addRoutes()를 통해 Service Worker Static Routing API 지원이 추가됩니다.

이 API를 사용하면 서비스 워커가 설치 시 선언적 라우팅 규칙을 등록하여 일치하는 요청이 서비스 워커 시작을 우회하고 네트워크나 캐시에서 직접 가져와 탐색 성능을 개선할 수 있습니다.

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: not supported.
  • Safari: 27.

Source

베타 브라우저 출시

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

Chrome 155 베타에는 CSS margin-trim, symbols(), text-decoration-skip-spaces와 JPEG XL (image/jxl) 디코딩 지원, 텍스트 모듈 가져오기 (import ... with { type: "text" }), 디지털 사용자 인증 정보 API 발급 지원이 포함됩니다.

Chrome 156 베타에는 CSS random() 함수, CSS corner 약식 속성, 단일 축 스크롤 컨테이너, scroll-snap-type: pair, image-animation 속성 및 :animated-image 의사 클래스, 미디어 요소 상태 의사 클래스 (:playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-locked), 지연된 모듈 평가(import defer), HTML <install> 요소 및 웹 설치 API가 포함되어 있습니다.

Safari 27.2 베타는 normal와 페어링될 때 safe 및 unsafe 오버플로 정렬 지원을 추가하고, 고정 위치 상자 및 ::picker(select) 요소에서 safe 정렬을 사용 설정하며, display: grid-lanes의 경우 flow-tolerance를 fit-tolerance로 이름을 바꿉니다.