10월에 도입된 새로운 웹 플랫폼

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

Rachel Andrew

게시일: 2026년 10월 29일

안정화 브라우저 버전

Chrome 155, Chrome 156, Firefox 158, Firefox 159, Safari 27.1, Safari 27.2가 2026년 10월에 안정화 버전으로 출시되었습니다. 이 게시물에서는 이번 달에 여러 브라우저에 출시되는 새로운 기능을 살펴봅니다. 몇 가지 주요 기능이 Baseline에 새로 제공됩니다.

스크롤 기반 애니메이션이 Baseline에 포함됨

Firefox 159에서는 기본적으로 스크롤 기반 애니메이션을 사용 설정합니다.

스크롤 기반 애니메이션을 사용하면 scroll-timeline 및 scroll() 함수를 사용하여 CSS 애니메이션 또는 Web Animations API 애니메이션의 진행 상황을 스크롤 컨테이너의 스크롤 오프셋에 연결하거나, animation-timeline로 할당된 view-timeline 및 view() 함수를 사용하여 스크롤 포트 내 요소의 공개 상태에 연결할 수 있습니다.

Chrome, Safari, 이제 Firefox 159에서 지원되는 스크롤 기반 애니메이션은 Baseline 신규 지원입니다.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 159.
  • Safari: 26.

Source

스크롤 기반 애니메이션: Baseline Newly available로 가는 길을 참고하고 타임라인을 스크롤하여 스크롤 기반 애니메이션이 2014년 초 제안에서 모든 핵심 브라우저 엔진에 제공되는 상호 운용 가능한 웹 표준으로 어떻게 발전했는지 살펴보세요.

범위가 지정된 맞춤 요소 레지스트리가 기준이 됨

Firefox 159에서는 범위가 지정된 맞춤 요소 레지스트리에 대한 지원이 추가되었습니다.

이전에는 모든 맞춤 요소를 단일 전역 window.customElements 레지스트리에 등록해야 했기 때문에 서로 다른 라이브러리나 팀의 구성요소를 결합할 때 이름 충돌이 발생할 수 있었습니다. 이제 CustomElementRegistry() 생성자를 사용하여 독립적인 CustomElementRegistry 인스턴스를 만들고 정의의 범위를 특정 shadow tree로 지정할 수 있습니다. customElementRegistry 속성은 Document, Element, ShadowRoot에서도 사용할 수 있습니다.

Chrome, Safari, Firefox 159에서 지원되는 범위가 지정된 맞춤 요소 레지스트리는 이제 새로 사용 가능한 기준입니다.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: 159.
  • Safari: 26.

Source

JPEG XL 이미지 지원

Chrome 155와 Firefox 158은 모두 기본적으로 JPEG XL(image/jxl) 이미지 형식을 지원합니다.

JPEG XL은 ISO/IEC 18181로 표준화된 로열티 없는 래스터 이미지 형식입니다. 손실 및 무손실 압축, 프로그레시브 디코딩, 넓은 색 영역, HDR (High Dynamic Range), 높은 비트 심도, 투명도, 애니메이션은 물론 기존 JPEG 파일의 무손실 트랜스코딩을 지원합니다. Firefox 158은 이미지 요청의 기본 HTTP Accept 헤더도 업데이트하여 image/jxl를 포함합니다.

Chrome에서 JPEG XL 제공에서 자세히 알아보세요.

Browser Support

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

Source

CSS 유형 산술이 기준이 됨

Firefox 158에서는 calc()와 같은 수학 함수에서 CSS 유형 산술을 지원합니다.

CSS 유형 산술을 사용하면 단위가 다르더라도 동일한 데이터 유형의 두 값을 나누어 단위가 없는 <number> 몫을 생성할 수 있습니다. 단위가 없는 결과를 숫자 (예: opacity 또는 line-height)를 허용하는 속성에 직접 사용하거나 다른 단위로 곱하여 유형 간에 변환할 수 있습니다.

Chrome 및 Safari의 기존 지원에 Firefox 158이 추가되면서 이제 CSS 유형 산술이 Baseline Newly available이 되었습니다.

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: 158.
  • Safari: 26.

PerformanceResourceTiming.deliveryType

Firefox 158에서는 PerformanceResourceTiming.deliveryType 속성 지원이 추가되었습니다.

이 속성은 리소스가 전송된 방식을 나타냅니다. 예를 들어 리소스가 캐시에서 제공된 경우 "cache"를 반환합니다.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 158.
  • Safari: 26.4.

Source

random() CSS 함수

Chrome 156에서는 random() CSS 함수에 대한 지원이 추가되었습니다.

random() 함수는 지정된 최소 및 최대 범위 내에서 선택적 단계 간격으로 임의의 숫자 값을 생성합니다. 기본적으로 각 random() 호출은 고유한 무작위 값으로 확인되거나 <random-key>를 첫 번째 인수로 전달하여 속성 또는 요소 간에 무작위 값을 공유할 수 있습니다.

Smashing Magazine의 CSS random() 함수를 사용하여 장난기 가득한 불완전함 수용 도움말에서 예시를 참고하세요.

Browser Support

  • Chrome: 156.
  • Edge: 156.
  • Firefox Technology Preview: supported.
  • Safari: 26.2.

Source

margin-trim CSS 속성

Chrome 155에서는 블록 컨테이너와 다중 열 컨테이너에서 margin-trim CSS 속성을 지원합니다.

컨테이너에서 margin-trim를 사용하여 하위 요소가 컨테이너의 가장자리와 만나는 부분의 여백을 생략할 수 있습니다. 이렇게 하면 :first-child 또는 :last-child 재정의 없이 첫 번째 하위 요소 앞이나 마지막 하위 요소 뒤에 추가 공백이 생기지 않습니다.

자세한 내용은 margin-trim 속성으로 시작 및 끝 여백 삭제를 참고하세요.

Browser Support

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

Source

symbols() CSS 함수를 사용한 인라인 카운터 스타일

Chrome 155에서는 symbols() CSS 함수를 지원합니다.

symbols() 함수를 사용하면 별도의 이름이 지정된 @counter-style at-rule을 선언하지 않고도 list-style-type, list-style 약식, counter() 또는 counters() 내에서 직접 익명 카운터 스타일을 정의할 수 있습니다.

Browser Support

  • Chrome: 155.
  • Edge: 155.
  • Firefox: 35.
  • Safari Technology Preview: supported.

Source

text-decoration-skip-spaces CSS 속성

Chrome 155에는 밑줄, 윗줄, 취소선과 같은 텍스트 장식 선이 공백 문자를 건너뛰는지 여부를 제어하는 text-decoration-skip-spaces CSS 속성이 추가되었습니다. 이렇게 하면 선행, 후행 또는 단어 간 공백 아래에 장식이 그려지지 않도록 할 수 있습니다.

Browser Support

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

:navigation-source CSS 의사 클래스

Chrome 156에는 :navigation-source CSS 가상 클래스가 도입되었습니다. 탐색을 시작한 링크, 버튼 또는 양식 요소와 일치하며 탐색 전반에서 해당 요소를 선택된 상태로 유지합니다.

Browser Support

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

JavaScript 텍스트 모듈 가져오기 및 실패한 모듈 로드 재시도

Chrome 155에서는 import ... with { type: "text" }를 사용한 텍스트 모듈 가져오기 지원이 추가되어 Firefox와 함께 사용할 수 있습니다. type: "text" 가져오기 속성은 대상 모듈의 콘텐츠를 JavaScript 문자열로 로드합니다.

Browser Support

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

Source

Chrome 156은 모듈 로드 동작도 업데이트하므로 실패한 모듈 로드가 더 이상 영구적으로 캐시되지 않습니다. 이제 애플리케이션에서 실패한 모듈 로드를 다시 시도할 수 있습니다. 예를 들어 일시적인 네트워크 장애 후 import()를 다시 호출할 수 있습니다.

Chrome 및 Firefox의 WebTransport 업데이트

Firefox 158과 Chrome 156은 모두 WebTransport를 확장합니다.

Firefox 158에서는 연결 및 데이터그램 통계를 가져오는 WebTransport.getStats() 메서드와 브라우저가 안정적인 전송을 통해서만 WebTransport 세션을 지원하는지 나타내는 정적 WebTransport.supportsReliableOnly 속성이 추가되었습니다.

Browser Support

  • Chrome: 157.
  • Edge: 157.
  • Firefox: 158.
  • Safari: 26.4.

Source

Chrome 156에서는 초기 CONNECT 핸드셰이크 중에 WebTransportOptions에서 커스텀 HTTP 요청 헤더를 전달하고 WebTransport 인스턴스에서 서버 응답 헤더를 읽는 기능이 추가되었습니다.

Firefox의 Notification navigate 옵션

Firefox 158은 Safari와 마찬가지로 Notification() 생성자 및 ServiceWorkerRegistration.showNotification()의 navigate 옵션과 Notification.navigate 속성을 지원합니다. 이 옵션은 사용자가 시스템 알림을 클릭할 때 브라우저가 이동할 URL을 지정합니다.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 158.
  • Safari: 18.5.

Source

Firefox의 HTML Sanitizer API 업데이트

Firefox 158은 javascriptURLs 구성 옵션과 Sanitizer.setJavascriptURLs()를 HTML Sanitizer API에 추가하여 Element.setHTMLUnsafe()와 같은 안전하지 않은 HTML 삽입 메서드를 사용할 때 javascript: URL이 포함된 속성을 삭제할지 여부를 제어합니다.

Browser Support

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

Firefox 159는 Element.setHTML()와 같은 안전한 살균기 메서드도 업데이트하여 DOM 트리를 빌드한 후가 아니라 파싱 중에 원치 않는 요소와 속성을 제거하여 인접한 텍스트가 단일 텍스트 노드에 유지되도록 합니다.

Safari에서 flow-tolerance의 이름을 fit-tolerance(으)로 변경

Safari 27.2에서는 그리드 레인 레이아웃(display: grid-lanes)의 flow-tolerance 속성 이름을 fit-tolerance로 변경하고 flow-tolerance를 지원 중단된 별칭으로 유지합니다.

Browser Support

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

베타 브라우저 출시

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

Chrome 157 베타에는 border-radius 및 corner-shape, text-decoration-inset, text-overflow: <string>, position-visibility: anchor-valid, anchor-visible를 함께 설정하는 CSS corner 약식 및 에지 하위 약식이 포함되어 있습니다. 또한 HTML-in-canvas 렌더링 지원과 <camera>, <microphone>, <geolocation> 기능 요소의 아이콘 전용 displaymode 속성도 포함되어 있습니다.

Chrome 158 베타에는 교차 출처 웹 앱 설치를 위한 선언적 HTML <install> 요소와 Web Install API (navigator.install())가 도입되었습니다. CSS 및 SVG 추가에는 ::highlight(*) 범용 커스텀 하이라이트 선택기, 미디어 요소 상태 가상 클래스 (:playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-locked), flow-start 및 flow-end 정렬 키워드, circle() 및 ellipse() 기본 도형의 closest-corner 및 farthest-corner 반지름이 포함됩니다.

Firefox 160 베타는 WebExtensions runtime.PlatformInfo API를 업데이트하여 ARM64 플랫폼에서 arch를 aarch64 대신 arm64로 반환하도록 하여 Chrome과 일치시킵니다.