Chrome 140 베타

Rachel Andrew

게시일: 2025년 8월 6일

별도로 명시되지 않는 한 다음 변경사항은 Android, ChromeOS, Linux, macOS, Windows용 최신 Chrome 베타 채널 버전에 적용됩니다. 제공된 링크 또는 ChromeStatus.com의 목록을 통해 여기에 나열된 기능에 대해 자세히 알아보세요. 2025년 8월 6일 현재 Chrome 140은 베타 버전입니다. 데스크톱의 경우 공식 Chrome 웹사이트에서, Android의 경우 Google Play 스토어에서 최신 버전을 다운로드할 수 있습니다.

CSS 및 UI

CSS 유형 산술

타입 산술을 사용하면 CSS에서 calc(10em / 1px) 또는 calc(20% / 0.5em * 1px)과 같은 표현식을 작성할 수 있습니다. 이는 예를 들어 타이포그래피에서 유용합니다. 입력된 값을 입력되지 않은 값으로 변환하고 숫자 허용 속성에 재사용할 수 있기 때문입니다. 또 다른 사용 사례는 단위가 없는 값을 다른 유형으로 곱하는 것입니다. 예를 들어 픽셀에서 도로 변환할 수 있습니다.

scroll-target-group 속성

scroll-target-group 속성은 요소가 스크롤 마커 그룹 컨테이너인지 지정합니다. 다음 값 중 하나를 허용합니다.

  • 'none': 요소가 스크롤 마커 그룹 컨테이너를 설정하지 않습니다.
  • 'auto': 요소가 스크롤 마커 그룹 컨테이너를 설정하여 이 컨테이너가 가장 가까운 상위 스크롤 마커 그룹 컨테이너인 모든 스크롤 마커 요소를 포함하는 스크롤 마커 그룹을 형성합니다.

스크롤 마커 그룹 컨테이너를 설정하면 이러한 컨테이너 내에 있는 프래그먼트 식별자가 있는 앵커 HTML 요소가 ::scroll-marker 가상 요소의 HTML에 상응하게 됩니다. 스크롤 타겟이 현재 표시되는 앵커 요소는 :target-current 유사 클래스를 사용하여 스타일을 지정할 수 있습니다.

content 속성의 대체 텍스트에서 counter() 및 counters() 사용 설정

이 기능은 content 속성의 대체 텍스트에서 counter() 및 counters()를 사용할 수 있는 기능을 추가합니다. 이를 통해 접근성을 개선하기 위한 더 의미 있는 정보를 제공할 수 있습니다.

뷰 전환 의사 요소가 더 많은 애니메이션 속성을 상속함

이제 뷰 전환 가상 트리는 다음과 같은 여러 애니메이션 속성을 상속합니다.

  • animation-delay
  • animation-timing-function
  • animation-iteration-count
  • animation-direction
  • animation-play-state

중첩된 뷰 전환 사용 설정

이 기능을 사용하면 뷰 전환이 플랫한 트리가 아닌 중첩된 가상 요소 트리를 생성할 수 있습니다. 이렇게 하면 뷰 전환이 원래 요소 및 시각적 의도와 더 일치하는 것처럼 표시됩니다. 이를 통해 클리핑, 중첩된 3D 변환, 불투명도, 마스크, 필터와 같은 효과의 적절한 적용이 가능합니다.

루트에서 overscroll-behavior 표시 영역 전파

이 변경사항은 본문 대신 루트에서 overscroll-behavior를 전파합니다. CSS 작업 그룹은 <body>에서 뷰포트로 속성을 전파하지 않기로 결정했습니다. 대신 표시 영역의 속성은 루트(<html>) 요소에서 전파됩니다. 따라서 overscroll-behavior는 루트 요소에서 전파되어야 합니다. 하지만 Chrome에는 <body>이 아닌 루트에서 overscroll-behavior을 전파하는 오랜 문제가 있습니다. 이 동작은 다른 브라우저와 상호 운용되지 않습니다. 이 변경사항으로 인해 Chrome이 사양을 준수하고 다른 구현과 상호 운용이 가능해집니다.

ScrollIntoView 컨테이너 옵션

ScrollIntoViewOptions 컨테이너 옵션을 사용하면 개발자가 가장 가까운 상위 스크롤 컨테이너만 스크롤하는 scrollIntoView 작업을 실행할 수 있습니다. 예를 들어 다음 스니펫은 target의 스크롤 컨테이너만 스크롤하여 target를 뷰로 가져오지만 모든 스크롤 컨테이너를 뷰포트로 스크롤하지는 않습니다.

target.scrollIntoView({container: 'nearest'});

CSS caret-animation 속성 추가

Chromium은 caret-color 속성의 애니메이션을 지원합니다. 하지만 애니메이션을 적용하면 캐럿의 기본 깜박임 동작이 애니메이션을 방해합니다.

CSS caret-animation 속성에는 auto 및 manual의 두 가지 값이 있을 수 있습니다. auto는 브라우저 기본값 (깜박임)을 의미하고 manual는 개발자가 캐럿 애니메이션을 제어함을 의미합니다. 또한 깜박이는 시각적 요소로 인해 불편함을 느끼거나 부작용을 겪는 사용자는 사용자 스타일시트를 사용하여 깜박임을 사용 중지할 수 있습니다.

highlightsFromPoint API

highlightsFromPoint API를 사용하면 개발자가 맞춤 강조 표시와 상호작용할 수 있습니다. 문서 내 특정 지점에 어떤 하이라이트가 있는지 감지합니다. 이 상호작용은 여러 강조 표시가 겹치거나 섀도우 DOM 내에 있을 수 있는 복잡한 웹 기능에 유용합니다. 정확한 포인트 기반 하이라이트 감지를 제공하는 API를 통해 개발자는 맞춤 하이라이트를 사용한 동적 상호작용을 더 효과적으로 관리할 수 있습니다. 예를 들어 개발자는 강조 표시된 영역에서 사용자의 클릭 또는 마우스 오버 이벤트에 응답하여 맞춤 도움말, 컨텍스트 메뉴 또는 기타 대화형 기능을 트리거할 수 있습니다.

뷰 전환 완료 프로미스 타이밍 변경

현재 완료된 약속 타이밍은 렌더링 수명 주기 단계 내에서 발생합니다. 즉, 프라미스 해결의 결과로 실행되는 코드는 뷰 전환을 삭제하는 시각적 프레임이 생성된 후에 발생합니다. 스크립트가 시각적으로 유사한 상태를 유지하기 위해 스타일을 이동하면 애니메이션이 끝날 때 깜박임이 발생할 수 있습니다. 이 변경사항은 수명 주기가 완료된 후 비동기적으로 실행되도록 ViewTransition 정리 단계를 이동하여 문제를 해결합니다.

ToggleEvent 소스 속성 추가

ToggleEvent의 source 속성에는 ToggleEvent이 실행되도록 트리거한 요소가 포함됩니다(해당하는 경우). 예를 들어 사용자가 팝오버를 열도록 설정된 popovertarget 또는 commandfor 속성이 있는 <button> 요소를 클릭하면 팝오버에서 실행된 ToggleEvent의 소스 속성이 호출 <button>로 설정됩니다.

SVG foreignObject가 blob URL의 캔버스를 오염시키지 않도록 방지

모든 브라우저는 HTML 캔버스 drawImage 작업에서 SVG 소스와 함께 <img> 요소를 사용하는 것을 오랫동안 지원해 왔습니다. 하지만 캔버스 오염 동작은 플랫폼마다 다릅니다. SVG 소스에 foreignObject 태그가 포함되어 있고 HTTP URI로 참조되는 경우 모든 브라우저에서 캔버스가 오염됩니다. 동일한 SVG가 데이터 URI를 통해 참조되면 모든 브라우저가 캔버스를 오염시키지 않습니다. 하지만 blob URI를 사용하는 경우 Chromium (이 변경사항 이전)과 WebKit은 모두 캔버스를 오염시키지만 Gecko는 그렇지 않습니다. 이 기능이 제공되면 Chromium의 동작이 Gecko와 일치하므로 더 광범위한 SVG 콘텐츠를 캔버스 drawImage 호출에서 오염 없이 사용할 수 있습니다.

@font-face rule에서 font-variation-settings 설명자 지원

CSS를 사용하면 개발자가 개별 요소에서 font-variation-settings 속성을 사용하여 글꼴의 가중치, 너비, 기울기 및 기타 축을 조정할 수 있습니다. 하지만 Chromium 기반 브라우저에서는 @font-face 선언 내에서 이 속성을 지원하지 않습니다. 이 기능은 CSS 글꼴 수준 4에 정의된 대로 font-variation-settings의 문자열 기반 구문을 지원합니다. 잘못되었거나 인식할 수 없는 기능 태그는 사양에 따라 무시됩니다. 바이너리 또는 비표준 형식은 지원되지 않습니다. 가변 글꼴은 성능과 서체 유연성 모두를 위해 널리 채택되고 있습니다. Chromium에 이 설명자에 대한 지원을 추가하면 제어가 향상되고 반복이 줄어들며 웹 타이포그래피에 대한 확장 가능하고 현대적인 접근 방식이 지원됩니다.

Web API

Uint8Array을 base64 및 16진수로 변환

Base64는 임의의 바이너리 데이터를 ASCII로 표현하는 일반적인 방법입니다. JavaScript에는 바이너리 데이터를 위한 Uint8Arrays가 있습니다. 하지만 이 데이터가 base64로 인코딩되거나 base64 데이터를 가져와서 해당하는 Uint8Array를 생성하는 기본 제공 메커니즘이 없습니다. 이 기능은 16진수 문자열과 Uint8Arrays 간에 변환하는 기능과 메서드를 추가합니다.

ReadableStreamBYOBReader min 옵션 사용

이 기능은 기존 ReadableStreamBYOBReader.read(view) 메서드에 min 옵션을 도입합니다. 이 메서드는 이미 데이터를 읽어오는 ArrayBufferView를 허용하지만 현재 읽기가 해결되기 전에 작성되는 요소의 수를 보장하지는 않습니다. min 값을 지정하면 읽기를 해결하기 전에 스트림이 최소한 그만큼의 요소를 사용할 수 있을 때까지 기다리도록 요구할 수 있습니다. 이렇게 하면 뷰에 포함할 수 있는 요소보다 적은 요소로 읽기가 해결될 수 있는 현재 동작이 개선됩니다.

경우에 따라 서버 측에서 서버가 설정한 쿠키와 클라이언트가 설정한 쿠키를 구분하는 것이 중요합니다. 이러한 사례 중 하나는 일반적으로 서버에서 항상 설정하는 쿠키와 관련이 있습니다. 하지만 예기치 않은 코드 (예: XSS 악용, 악성 확장 프로그램, 혼란스러운 개발자의 커밋)가 클라이언트에서 설정할 수 있습니다. 이 제안에서는 서버가 이러한 구분을 할 수 있도록 하는 신호를 추가합니다. 더 구체적으로는 스크립트를 사용하여 클라이언트 측에 쿠키가 설정되지 않도록 하는 __Http 및 __HostHttp 접두사를 정의합니다.

로컬 네트워크 액세스 제한

Chrome 140에서는 사용자 로컬 네트워크에 대한 요청을 제한하여 권한 메시지가 필요합니다. 로컬 네트워크 요청은 공개 웹사이트에서 로컬 IP 주소 또는 루프백으로 또는 로컬 웹사이트 (예: 인트라넷)에서 루프백으로 전송되는 모든 요청을 의미합니다. 권한 뒤에 이러한 요청을 실행하는 웹사이트의 기능을 제한하면 라우터와 같은 로컬 네트워크 기기에 대한 크로스 사이트 요청 위조 공격의 위험이 완화됩니다. 또한 사이트가 이러한 요청을 사용하여 사용자의 로컬 네트워크를 핑거프린팅하는 기능도 줄어듭니다. 이 권한은 보안 컨텍스트로 제한됩니다. 권한이 부여되면 다양한 이유로 많은 로컬 기기가 공개적으로 신뢰할 수 있는 TLS 인증서를 획득할 수 없으므로 로컬 네트워크 요청에 대한 혼합 콘텐츠 차단도 완화됩니다.

로컬 네트워크 액세스를 위한 새로운 권한 메시지에서 자세히 알아보세요.

SharedWorker 스크립트가 blob 스크립트 URL의 컨트롤러를 상속하도록 지원

사양에 따르면 작업자는 blob URL의 컨트롤러를 상속해야 합니다. 하지만 기존 코드에서는 전용 워커만 컨트롤러를 상속할 수 있으며 공유 워커는 컨트롤러를 상속할 수 없습니다. 이렇게 하면 Chrome의 동작이 사양에 맞게 수정됩니다. SharedWorkerBlobURLFixEnabled 엔터프라이즈 정책으로 이 기능을 제어할 수 있습니다.

ServiceWorkerStaticRouterTimingInfo 추가

이 기능은 개발자가 사용할 수 있도록 탐색 타이밍 API 및 리소스 타이밍 API에 노출된 ServiceWorker 정적 라우팅 API의 타이밍 정보를 추가합니다. ServiceWorker는 특정 시점을 표시하는 타이밍 정보를 제공합니다.

이 기능은 정적 라우팅 API 관련 타이밍 정보 두 개를 추가합니다.

  • RouterEvaluationStart: 등록된 라우터 규칙과 요청을 매칭하기 시작하는 시간입니다.
  • CacheLookupStart: 소스가 "cache"인 경우 캐시 저장소를 조회하기 시작하는 시간입니다.

또한 이 기능은 일치하는 라우터 소스와 최종 라우터 소스라는 두 가지 라우터 소스 정보를 추가합니다.

Android에서 웹 인증 조건부 생성 사용 설정 (제공되지 않음)

분리형 웹 앱

Controlled Frame API 도입

이 기능은 분리형 웹 앱 (IWA)에서만 사용할 수 있는 Controlled Frame API를 추가합니다. 다른 플랫폼의 이름이 비슷한 API와 마찬가지로 Controlled Frame을 사용하면 <iframe>에 삽입할 수 없는 서드 파티 콘텐츠를 포함한 모든 콘텐츠를 삽입할 수 있습니다. 또한 Controlled Frame을 사용하면 API 메서드 및 이벤트 모음을 사용하여 삽입된 콘텐츠를 제어할 수 있습니다. 분리형 웹 앱에 관한 자세한 내용은 분리형 웹 앱 설명을 참고하세요.

새 오리진 트라이얼

Chrome 140에서는 다음 새로운 오리진 트라이얼을 선택할 수 있습니다.

clipboardchange 이벤트 추가

clipboardchange 이벤트는 웹 앱이나 다른 시스템 애플리케이션이 시스템 클립보드 콘텐츠를 변경할 때마다 발생합니다. 이를 통해 원격 데스크톱 클라이언트와 같은 웹 앱이 클립보드를 시스템 클립보드와 동기화할 수 있습니다. JavaScript로 클립보드의 변경사항을 폴링하는 효율적인 대안을 제공합니다.

수신 전화 알림 사용 설정

이 기능은 설치된 PWA가 수신 전화 알림(전화 스타일 버튼과 벨소리가 있는 알림)을 보낼 수 있도록 Notifications API를 확장합니다. 이 확장 프로그램은 사용자가 통화 알림을 더 쉽게 인식하고 응답할 수 있도록 하여 VoIP 웹 앱이 더 매력적인 환경을 만들 수 있도록 지원합니다. 또한 이 기능은 네이티브와 웹이 모두 있는 앱의 네이티브 구현과 웹 구현 간의 격차를 해소하는 데 도움이 됩니다.

비정상 종료 보고 키-값 API 소개

이 기능은 비정상 종료 보고서에 추가된 데이터를 보유하는 문서별 맵으로 지원되는 새로운 키-값 API(window.crashReport)를 도입합니다.

이 API의 지원 맵에 배치된 데이터는 사이트에서 렌더러 프로세스 비정상 종료가 발생하는 경우 CrashReportBody로 전송됩니다. 이를 통해 개발자는 애플리케이션의 어떤 특정 상태가 특정 비정상 종료를 유발하는지 디버그할 수 있습니다.

지원 중단 및 삭제

이 버전의 Chrome에서는 아래에 나열된 지원 중단 및 삭제가 도입되었습니다. 계획된 지원 중단, 현재 지원 중단, 이전 삭제 목록은 ChromeStatus.com을 참고하세요.

이번 Chrome 출시에서는 한 가지 기능이 지원 중단됩니다.

일부 요소 내에서 <h1>의 특수 글꼴 크기 규칙 지원 중단

HTML 사양에는 <article>, <aside>, <nav> 또는 <section> 요소 내에 중첩된 <h1> 태그에 관한 특수 규칙 목록이 포함되어 있습니다.

이 특별 규칙은 접근성 문제를 일으키므로 지원 중단되었습니다. 즉, 중첩된 <h1>의 글꼴 크기를 시각적으로 줄여 <h2>처럼 보이게 하지만 접근성 트리에는 이러한 시각적 변경사항이 반영되지 않습니다.