게시일: 2026년 6월 3일
별도로 명시되지 않는 한 다음 변경사항은 Android, ChromeOS, Linux, macOS, Windows용 최신 Chrome 베타 채널 출시에 적용됩니다. 제공된 링크 또는 ChromeStatus.com의 목록을 통해 여기에 나열된 기능에 대해 자세히 알아보세요. 2026년 6월 2일 현재 Chrome은 베타 버전입니다. 데스크톱의 경우 Google.com에서, Android의 경우 Google Play 스토어에서 최신 버전을 다운로드할 수 있습니다.
CSS 및 UI
AccentColor 및 AccentColorText 시스템 색상
AccentColor 및 AccentColorText 시스템 색상은 CSS에서 사용하여 사용자의 기기에 지정된 시스템 강조 색상에 액세스할 수 있습니다. 이 기능을 사용하면 개발자가 설치된 웹 애플리케이션과 같이 사용자가 운영체제 테마 통합을 기대하는 컨텍스트에서 웹 콘텐츠에 앱과 유사한 스타일을 적용할 수 있습니다. 시스템 강조 색상이 렌더링되려면 사용자가 초기 프로필에 설치된 웹 애플리케이션에 있어야 합니다.
polygon()의 선택적 반올림 매개변수 허용
polygon() CSS 도형 함수에서 선택적 모서리 둥글게 하기 매개변수를 지정할 수 있습니다. 개발자는 베지어 곡선을 수동으로 계산하지 않고도 다각형 모서리를 둥글게 하는 길이 값을 지정할 수 있습니다.
애니메이션 가능한 확대/축소
CSS zoom 속성은 애니메이션화할 수 있으며 <number>로 보간됩니다. 개발자는 전환 및 애니메이션을 통해 요소를 부드럽게 확대/축소하고 레이아웃을 조정하여 기존 변환 기반 크기 조절을 보완할 수 있습니다.
CSS URL 요청 수정자
CSS url() 함수는 따옴표로 묶인 URL 문자열 뒤에 선택적 요청 수정자를 허용합니다(cross-origin(), integrity(), referrer-policy()). 이러한 수정자는 HTML 마크업이나 JavaScript를 변경하지 않고 CSS에서 직접 참조된 리소스의 가져오기 동작을 제어합니다.
예를 들어 background-image: url("image.png" cross-origin(anonymous))는 CORS 익명 모드를 사용하여 이미지를 가져옵니다.
CSS text-fit 속성
텍스트 노드의 글꼴 크기를 포함하는 상자의 너비에 딱 맞게 조정합니다.
이 속성을 사용하면 개발자가 수동 글꼴 크기 계산이나 복잡한 JavaScript 해결 방법 없이도 헤드라인이나 동적 콘텐츠가 사용 가능한 가로 공간을 채울 수 있습니다. 이 속성은 다양한 화면 크기와 다양한 텍스트 길이에 걸쳐 시각적 정렬을 유지하는 반응형 타이포그래피를 위한 강력한 CSS 네이티브 솔루션을 제공합니다.
CSS background-clip: border-area
CSS 배경 레벨 4에 정의된 대로 CSS background-clip 속성에 border-area 값을 구현합니다. background-clip 값은 border-width 및 border-style를 고려하면서 border-color의 투명도를 무시하여 테두리 획으로 칠해진 영역에 요소의 배경을 클리핑합니다. 이 값을 사용하면 border-image 없이 그라데이션 테두리를 만들 수 있습니다.
CSS image(<color>) 함수
image() 함수를 사용하면 개발자가 모든 색상에서 단색 이미지를 생성할 수 있습니다.
구문은 image() = image( <color> )입니다.
이미지 값이 있는 CSS light-dark()
CSS light-dark() 함수를 확장하여 작성자 스타일시트에서 url(), image-set(), none와 같은 이미지 값을 허용하므로 background-image, list-style-image, border-image-source, cursor, content와 같은 이미지 속성이 사용자가 선호하는 색상 구성표에 따라 이미지 간에 자동으로 전환됩니다.
이전에는 사용자 에이전트 스타일시트에서만 이 동작이 허용되었습니다. 이 변경사항은 CSS Color 5 사양과 일치하며 Firefox의 기존 구현과도 일치합니다.
모든 하위 selectedcontent 요소에 클론
selectedcontent 요소의 특이 사례가 다음과 같이 약간 변경됩니다.
- 여러
selectedcontent요소가 동시에<select>요소에 배치되면 DOM 순서의 첫 번째 요소만 업데이트되는 것이 아니라 모든 요소가 최신 상태로 유지됩니다. - 보안 문제를 해결하기 위해 삽입, 삭제 또는 이동 단계 중에 실행될 때
selectedcontent요소 업데이트가 지연됩니다. 업데이트는 삽입 후 단계나 마이크로태스크를 사용하여 지연됩니다.
쉼표로 구분된 컨테이너 쿼리
@container 규칙당 여러 쿼리를 지원합니다. 하나 이상의 쿼리가 일치하면 @container 규칙이 적용됩니다.
이 기능을 사용하면 모든 브라우저에서 지원되지 않는 기능의 대체 쿼리를 사용할 수 있습니다.
예:
@container --name1 not-supported(--foo: bar), --name2 (width > 600px) {}
여러 쿼리 지원과 함께 객체 모델이 확장되어 CSSContainerRule API에서 conditions 속성을 지원합니다.
인쇄할 수 없는 영역을 CSS에 노출
프린터에는 일반적으로 프린터의 용지 처리 메커니즘으로 인해 용지의 네 모서리에 안정적으로 표시할 수 없는 작은 영역이 있습니다. 기본 페이지 여백은 이러한 영역보다 클 것으로 예상되지만, 작성자가 직접 여백을 설정하고 맞춤 헤더 및 바닥글과 같은 @page 여백 상자를 추가하려는 경우 인쇄해도 안전한 위치를 결정할 방법이 필요합니다.
CSS 설명자 page-margin-safety를 사용하여 인쇄할 수 없는 영역을 피할 수 있습니다.
focusgroup 속성
작성자가 선언적으로 합성 위젯에 화살표 키 탐색, 보장된 탭 정지, 마지막으로 포커스가 지정된 메모리를 제공하여 손으로 코딩된 이동 tabindex 스크립트를 대체할 수 있습니다. 예:
<div focusgroup="toolbar wrap" aria-label="Formatting">
<button>Bold</button>
<button>Italic</button>
<button>Underline</button>
</div>
미디어 요소 가상 클래스
:playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-locked CSS 의사 클래스는 상태에 따라 <audio> 및 <video> 요소와 일치합니다.
이 기능은 Interop 2026의 중점 분야 중 하나입니다.
popover=hint 동작 변경사항
이 변경사항은 popover=hint 속성과 popover=auto와의 상호작용을 위한 수정되고 간소화된 스태킹 모델을 구현합니다. 이전에는 popover=auto을 popover=hint 내에 중첩하는 등 일부 특수한 상황에서 이러한 두 유형의 팝오버 간 상호작용이 복잡해 예기치 않은 동작이 발생할 수 있었습니다. 새 모델에서는 popover=hint을 열어도 관련 없는 popover=auto 요소가 더 이상 실수로 닫히지 않습니다. 힌트 팝오버는 상위 popover=auto가 숨겨지거나 관련이 없는 새 popover=auto가 열릴 때만 숨겨집니다. 또한 개발자는 힌트 팝오버 내부에 자동 팝오버를 안전하게 중첩할 수 있습니다. 예외를 발생시키거나 스택을 중단하는 대신 중첩된 popover=auto가 정상적으로 다운그레이드되고 popover=hint로 작동합니다.
이 기능을 사용하면 개발자가 맞춤설정 가능한 <select>를 popover=hint 내에 배치할 수 있습니다.
예측 가능성을 더욱 개선하고 복잡한 상태 변이를 방지하기 위해 Chrome은 beforetoggle 이벤트 내에서 팝오버를 열고 닫는 동작도 강화하고 있습니다. 이전에는 일부 가능한 사례에만 가드가 있었습니다. 이 변경사항은 이러한 사례를 감지하는 데 사용되는 메커니즘을 개선하여 이러한 모든 사례에 대해 더 안정적으로 InvalidStateError를 발생시킵니다. 이 변경사항은 팝오버 상태 관리가 안정적으로 유지되도록 하고 루프 재진입 버그를 방지합니다.
이러한 변경사항은 GitHub의 HTML 사양 pull 요청에 관한 Mozilla와의 표준 대화에서 비롯되었습니다.
상대 알파 색상
상대 알파 색상은 색상 채널을 다시 작성하지 않고 기존 색상의 반투명 버전을 파생하는 직접적인 CSS 방법을 제공합니다.
현재 개발자는 불투명도가 다른 동일한 색상을 원하는 경우 구성요소 값을 중복하거나 사전 계산된 별도의 토큰을 만들어야 합니다.
CSS Color 5 alpha() 함수는 원래 색상 구성요소를 유지하고 알파만 변경하므로 작성 오버헤드가 줄어들고 색상 토큰을 더 쉽게 재사용하고 유지할 수 있습니다.
반응형 크기 <iframe>
사이트에서 반응형 크기 조정이 적용된 iframe을 선택할 수 있습니다. 이렇게 하면 하위 문서에서 스크롤하는 것을 방지하기 위해 상위 문서의 <iframe> 요소가 iframe 문서의 레이아웃 오버플로 크기로 조정됩니다.
flex-wrap:balance
flex-wrap:balance를 사용하면 개발자가 콘텐츠를 유연한 선 사이에 분배하여 text-wrap:balance와 마찬가지로 더 균형 있게 표시할 수 있습니다.
CSS @supports의 named-feature() 함수
named-feature() 함수를 사용하면 CSS @supports 규칙이 다른 @supports 메커니즘을 사용하여 테스트할 수는 없지만 테스트하는 것이 매우 유용하다고 간주되는 특정 명명된 기능의 작은 집합을 쿼리할 수 있습니다.
overscroll-behavior: chain
overscroll-behavior에는 none, auto, contain의 세 가지 값이 있습니다. 이러한 값은 스크롤 전파와 로컬 테두리 효과라는 두 가지 독립적인 효과에 영향을 미칩니다. 예를 들어 오버스크롤 스트레치입니다.
none: 스크롤 전파 없음, 로컬 경계 효과 없음auto: 스크롤 전파, 로컬 경계 효과contain: 스크롤 전파 없음, 로컬 경계 효과
이 출시에서는 chain(스크롤 전파, 로컬 경계 효과 없음)라는 새로운 값을 추적하여 세트를 완료합니다.
이 값은 스크롤러로 구현된 측면 메뉴와 같은 효과에 유용합니다. 메뉴를 가져올 수 있으며, 메뉴가 가장자리에 도달하면 오버스크롤되거나 늘어나고 변환되지 않습니다. 하지만 스크롤이 상위 요소로 연결됩니다.
Web API
플러그인 및 교차 출처 또는 제한된 iframe에서 SVG 필터 사용 중지
Chrome 150에서는 Scalable Vector Graphics(SVG) 필터가 교차 출처 또는 제한된 iframe(예: 샌드박스 처리된 iframe) 및 삽입된 플러그인(예: PDF)에 적용되지 않습니다. 프레임이나 플러그인이 SVG 필터 효과로 페인트되면 효과 트리가 순회되어 SVG 필터가 없는 가장 높은 상위 요소를 찾고 해당 효과가 대신 적용됩니다.
IndexedDB: SQLite 백엔드
Chromium의 IndexedDB 구현은 SQLite 위에 다시 작성되어 LevelDB와 플랫 파일의 하이브리드를 사용하는 이전 구현을 대체합니다. 이 변경사항은 웹 API에 영향을 미치지 않습니다.
이 재작성을 통해 안정성이 개선되고 성능도 약간 개선될 것으로 예상됩니다.
현재 이 변경사항은 새 데이터 스토어에 적용됩니다. 이 변경사항은 다단계 점진적 출시의 2단계입니다. 1단계를 추적하는 SQLite 메모리 내 컨텍스트의 ChromeStatus 기능 페이지를 참고하세요.
MediaStreamTrackProcessor 프레임 카운터
MediaStreamTrackProcessor 인터페이스에 discardedFrames 및 totalFrames 속성을 추가합니다. 이러한 카운터를 사용하면 웹 개발자가 프로세서에서 수신하고 삭제한 프레임 수를 추적하여 미디어 처리 파이프라인의 상태를 모니터링할 수 있습니다.
data: URL의 불투명 출처
Chrome 150에서는 DedicatedWorker 및 SharedWorker가 data: URL을 처리하는 방식을 업데이트합니다. 이러한 작업자는 이를 생성한 스크립트 또는 페이지의 보안 출처를 자동으로 상속받는 대신 고유한 불투명 출처가 할당됩니다.
이 변경사항은 작업자 HTML 사양과 일치하며, 이러한 작업자를 생성자의 동일 출처 상태에서 격리하여 BroadcastChannel 또는 동일 출처 스토리지와 같은 메커니즘을 통해 민감한 정보에 액세스하지 못하도록 함으로써 보안을 강화합니다. 올바른 격리 경계를 유지하기 위해 이러한 작업자는 생성자와 동일한 스토리지 파티션 내에 계속 상주합니다 (예: 최상위 사이트 또는 nonce를 보존).
이 보안 조정은 데스크톱 및 모바일 플랫폼에서 기본적으로 사용 설정됩니다. 관리자는 중앙 집중식 구성을 통해 보안 경계를 검토하거나 확인할 수 있습니다. 기술 구현 세부정보 및 사양 참조는 HTML Living Standard Worker 설정의 3단계를 참고하세요.
PWA 출처 이전
사용자가 프로그레시브 웹 앱(PWA)을 설치하면 ID와 보안 컨텍스트가 웹 출처(예: app.example.com)에 긴밀하게 바인딩됩니다.
이 바인딩은 리브랜딩, 도메인 재구성 또는 기술 재설계로 인해 PWA의 출처를 변경해야 하는 개발자에게 심각한 문제를 야기합니다. 이러한 변경으로 인해 사용자가 기존 앱을 수동으로 제거하고 새 앱을 재설치해야만 하므로, 사용자 경험의 중단과 잠재적인 사용자 손실이 발생할 수 있습니다. Chrome 150에서는 개발자가 설치된 PWA를 이전하여 새로운 동일 사이트 출처로 이동할 수 있는 메커니즘이 도입되어, 사용자 신뢰와 권한을 유지할 수 있습니다.
WebAppInstallForceList 정책은 이전을 차단합니다. 웹 애플리케이션에 관한 엔터프라이즈 정책은 주로 URL과 출처를 기반으로 하므로 이전 시 관리자가 구성한 특정 정책이 우회될 위험이 있습니다. 앱이 엔터프라이즈 관리자에 의해 강제 설치된 경우 Chrome에서는 사용자에게 이전 옵션을 제공하지 않으며 대신 이를 설명하는 배너를 표시합니다.
HTML에서 처리 명령 파싱
처리 명령어 (구문: <?target data>)는 XML에 노출된 기존 DOM 구조로, 요소는 아니지만 문서 처리에 대한 일부 의미론적 의미를 가질 수 있는 노드 객체를 허용합니다.
예를 들어 CSS에 관한 한 새 DOM 요소가 필요하지 않고 DOM 구조를 변경하지 않고도 스트리밍 또는 강조 표시를 위한 범위를 나타내거나 버퍼링 및 스트리밍 방법에 관한 HTML 파서의 지시어로 사용할 수 있습니다.
순서가 잘못된 스트리밍
순서가 지정되지 않은 스트리밍을 사용하면 <template for> 및 처리 명령 범위(<?start> 및 <?end>)를 사용하여 순서가 지정되지 않은 HTML을 제공하고 JavaScript 없이 문서의 기존 부분을 업데이트할 수 있습니다.
프로그래매틱 스크롤 약속
이 기능은 프로그래매틱 부드러운 스크롤의 완료 상태에 관한 신뢰할 수 있는 신호를 제공합니다. Element 및 Window의 모든 스크롤 메서드는 스크롤 완료 시 확인되는 Promise 객체를 반환하며, 확인된 값은 스크롤이 중단되었는지 여부를 나타냅니다.
WebGPU Immediates
GPU 버퍼 객체나 바인드 그룹을 생성하지 않고 자주 업데이트되는 소량의 데이터를 셰이더에 직접 전달할 수 있는 WGSL의 새로운 즉시 주소 공간과 렌더링 패스, 컴퓨팅 패스, 렌더링 번들 인코더의 setImmediateData() 메서드를 추가합니다. 이는 객체 색인, 재질 색인, 변환 행렬과 같은 그리기별 매개변수를 모든 그리기 호출에서 업데이트해야 하는 애플리케이션에 특히 유용하며, 버퍼 및 바인드 그룹 관리 오버헤드를 방지하여 성능을 크게 개선할 수 있습니다.
Web Speech API: 온디바이스 인식 품질
SpeechRecognitionOptions에 quality 속성을 추가하여 SpeechRecognition 인터페이스를 확장합니다. 이 속성을 사용하면 개발자가 processLocally: true를 사용하여 온디바이스 인식에 필요한 시맨틱 기능을 지정할 수 있습니다.
제안된 quality 열거형은 작업 복잡성과 하드웨어 요구사항이 증가하는 데 매핑되는 세 가지 수준(command, dictation, conversation)을 지원합니다.
이 기능을 통해 개발자는 로컬 기기에서 위험도가 높은 사용 사례 (예: 회의록 작성)를 처리할 수 있는지 또는 클라우드 서비스로 대체해야 하는지 파악하여 온디바이스 모델 기능의 불투명한 특성을 해결할 수 있습니다.
새 오리진 트라이얼
Chrome 150에서는 다음 새로운 오리진 트라이얼을 선택할 수 있습니다.
이메일 인증 프로토콜 (EVP)
이메일 인증 프로토콜 (EVP)을 사용하면 사용자가 이메일 OTP를 수동으로 입력하는 대신 소유권에 대한 암호화 증명을 원활하게 제공하여 계정을 만들고, 액세스하고, 복구할 수 있습니다.
지원 중단 및 삭제
이번 Chrome 출시에서는 다음과 같은 지원 중단 및 삭제가 도입되었습니다.
FontFaceSet IDL에서 [LegacyNoInterfaceObject] 삭제
이전에는 Chromium의 FontFaceSet IDL이 [LegacyNoInterfaceObject]를 잘못 사용하여 FontFaceSet를 전역 속성으로 숨기고 프로토타입에서 생성자 속성을 삭제했습니다. 이 동작은 CSS 글꼴 로드 사양에서 벗어나 Safari 및 Firefox 동작과 달랐습니다.
이렇게 삭제하면 FontFaceSet IDL에서 [LegacyNoInterfaceObject]이 삭제되어 FontFaceSet이 전역 속성으로 적절하게 액세스할 수 있게 됩니다. IDL에 constructor()가 정의되어 있지 않으므로 JavaScript에서 새 FontFaceSet()를 호출하면 사양에서 요구하는 동작과 일치하는 TypeError: Illegal constructor가 올바르게 발생합니다.