게시일: 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-color의 투명도를 무시하면서 border-width 및 border-style을 고려하여 요소의 배경을 테두리 획으로 칠해진 영역으로 자릅니다. 이 값을 사용하면 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 색상 5 사양과 일치하며 Firefox의 기존 구현과 일치합니다.
모든 하위 selectedcontent 요소로 클론
selectedcontent 요소의 엣지 케이스에 몇 가지 작은 변경사항이 적용됩니다.
- 여러
selectedcontent요소가<select>요소에 동시에 배치되면 DOM 순서의 첫 번째 요소만 최신 상태로 유지되는 대신 모든 요소가 최신 상태로 유지됩니다. - 보안 문제를 해결하기 위해 삽입, 삭제 또는 이동 단계 중에 실행될 때
selectedcontent요소 업데이트가 지연됩니다. 업데이트는 삽입 후 단계 또는 마이크로태스크를 사용하여 지연됩니다.
쉼표로 구분된 컨테이너 쿼리
@container 규칙당 여러 쿼리를 지원합니다. 쿼리 중 하나라도 일치하면 @container 규칙이 적용됩니다.
이 기능을 사용하면 모든 브라우저에서 지원되지 않는 기능에 대한 대체 쿼리를 사용할 수 있습니다.
예:
@container --name1 not-supported(--foo: bar), --name2 (width > 600px) {}
여러 쿼리 지원과 함께 객체 모델이 확장되어 CSSContainerRule API의 conditions 속성을 지원합니다.
인쇄할 수 없는 영역을 CSS에 노출
프린터에는 일반적으로 프린터의 용지 처리 메커니즘으로 인해 안정적으로 표시할 수 없는 용지 4개 가장자리에 작은 영역이 있습니다. 기본 페이지 여백은 이러한 영역보다 클 것으로 예상되지만 작성자가 직접 여백을 설정하고 맞춤 헤더 및 바닥글과 같은 @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=hint 내에 popover=auto를 중첩하는 것과 같은 일부 엣지 케이스 상황에서 이러한 두 가지 유형의 팝오버 간의 상호작용이 복잡할 수 있으며 예기치 않은 동작이 발생할 수 있었습니다. 새 모델에서는 popover=hint를 열어도 관련 없는 popover=auto 요소가 실수로 닫히지 않습니다. 힌트 팝오버는 상위 popover=auto가 숨겨지거나 관련 없는 새 popover=auto가 열릴 때만 숨겨집니다. 또한 개발자는 힌트 팝오버 내에 자동 팝오버를 안전하게 중첩할 수 있습니다. 예외를 발생시키거나 스택을 중단하는 대신 중첩된 popover=auto가 정상적으로 다운그레이드되고 popover=hint로 동작합니다.
이 기능을 사용하면 개발자가 <select>을(를)
popover=hint 내에 배치할 수 있습니다.
예측 가능성을 개선하고 복잡한 상태 변경을 방지하기 위해 Chrome은 beforetoggle 이벤트 내에서 팝오버를 열고 닫는 동작도 강화합니다. 이전에는 가능한 모든 케이스에 대한 가드가 있었지만 일부 케이스에는 없었습니다. 이 변경사항은 이러한 케이스를 감지하는 데 사용되는 메커니즘을 개선하여 모든 케이스에 대해 InvalidStateError를 더 안정적으로 발생시킵니다. 이 변경사항은 팝오버 상태 관리가 안정적으로 유지되고 루핑 재진입 버그를 방지합니다.
이러한 변경사항은 GitHub의 HTML 사양 pull 요청에 대한 Mozilla와의 표준 대화를 통해 이루어졌습니다.
상대 알파 색상
상대 알파 색상은 색상 채널을 다시 작성하지 않고도 기존 색상의 반투명 버전을 파생시키는 직접적인 CSS 방법을 제공합니다.
개발자는 현재 불투명도가 다른 동일한 색상을 원하는 경우 구성요소 값을 복제하거나 별도의 사전 계산된 토큰을 만들어야 합니다.
CSS 색상 5 alpha() 함수는 원래 색상 구성요소를 유지하고 알파만 변경하므로 작성 오버헤드가 줄어들고 색상 토큰을 더 쉽게 재사용하고 유지관리할 수 있습니다.
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 구현은 LevelDB와 플랫 파일의 하이브리드를 사용하는 이전 구현을 대체하기 위해 SQLite를 기반으로 다시 작성됩니다. 이 변경사항은 Web API에 영향을 미치지 않습니다.
이 재작성은 안정성을 개선하고 성능을 약간 개선할 것으로 예상됩니다.
현재 이 변경사항은 새 데이터 저장소 에 적용됩니다. 이 변경사항은 다단계 점진적 출시의 2단계입니다. 1단계를 추적하는 SQLite 인메모리 컨텍스트의 ChromeStatus 기능 페이지 를 참고하세요.
MediaStreamTrackProcessor 프레임 카운터
MediaStreamTrackProcessor 인터페이스에 discardedFrames 및 totalFrames 속성을 추가합니다. 이러한 카운터를 사용하면 웹 개발자가 프로세서에서 수신하고 삭제한 프레임 수를 추적하여 미디어 처리 파이프라인의 상태를 모니터링할 수 있습니다.
data: URL의 불투명 출처
Chrome 150은 DedicatedWorker 및 SharedWorker가
data: URL을 처리하는 방식을 업데이트합니다. 이러한 작업자는 이를 만든 스크립트 또는 페이지의 보안 출처를
자동으로 상속하는 대신 고유한 불투명 출처가 할당됩니다.
이 변경사항은 작업자
HTML 사양
과 일치하며 이러한 작업자를 작성자의 동일 출처
상태에서 격리하여 보안을 강화하고
BroadcastChannel 또는 동일 출처 스토리지와 같은 메커니즘을 통해 민감한 정보에 액세스하지 못하도록 합니다. 올바른 격리 경계를 유지하기 위해 이러한 작업자는 여전히 작성자와 동일한 스토리지 파티션 (예: 최상위 사이트 또는 nonce 유지) 내에 있습니다.
이 보안 조정은 데스크톱 및 모바일 플랫폼에서 기본적으로 사용 설정되어 있습니다. 관리자는 중앙 집중식 구성을 통해 보안 경계를 검토하거나 확인할 수 있습니다. 기술 구현 세부정보 및 사양 참조는 HTML Living Standard 작업자 설정의 3단계를 참고하세요.
PWA 출처 이전
사용자가 프로그레시브 웹 앱(PWA)을 설치하면 해당 앱의 ID와 보안 컨텍스트가 웹 출처(예: app.example.com)에 밀접하게 바인딩됩니다.
이 바인딩은 리브랜딩, 도메인 재구성 또는 기술적 재설계 과정에서 PWA의 출처를 변경해야 하는 개발자에게 상당한 문제를 야기합니다. 이러한 변경으로 인해 사용자가 기존 앱을 수동으로 제거하고 새 앱을 재설치해야만 하므로, 사용자 경험의 중단과 잠재적인 사용자 손실이 발생할 수 있습니다. Chrome 150에서는 개발자가 설치된 PWA를
새로운 동일 사이트 출처로 이전할 수 있는
메커니즘이 도입되어, 사용자 신뢰와
권한을 유지할 수 있습니다.
WebAppInstallForceList 정책은 이전을 차단합니다. 웹 애플리케이션에 관한 엔터프라이즈 정책은 주로 URL과 출처를 기반으로 하므로 이전 시 관리자가 구성한 특정 정책이 우회될 위험이 있습니다. 앱이 엔터프라이즈 관리자에 의해 강제 설치된 경우 Chrome은 사용자에게 이전 옵션을 제공하지 않으며 대신 이를 설명하는 배너를 사용자에게 표시합니다.
HTML에서 처리 명령어 파싱
처리 명령어 (구문: <?target data>)는 XML에 노출된 기존 DOM 구성으로,
요소는 아니지만 문서 처리에 일부
의미를 가질 수 있는 노드 객체를 허용합니다.
예를 들어 새 DOM 요소를 요구하지 않고 CSS에 관한 한 DOM 구조를 변경하지 않거나 버퍼링 및 스트리밍 방법에 관한 HTML 파서의 지시어로 스트리밍 또는 강조표시를 위한 범위를 나타내는 데 사용할 수 있습니다.
순서가 지정되지 않은 스트리밍
순서가 지정되지 않은 스트리밍을 사용하면 <template for> 및 처리 명령어 범위
(<?start> 및 <?end>)를 사용하여 순서가 지정되지 않은 HTML을 제공하고
JavaScript 없이 문서의 기존 부분을 업데이트할 수 있습니다.
프로그래매틱 스크롤 프로미스
이 기능은 프로그래매틱 부드러운 스크롤의 완료 상태에 대한 안정적인 신호를 제공합니다. Element 및 Window의 모든 스크롤 메서드는 스크롤 완료 시 확인되는 프로미스 객체를 반환하며 확인된 값은 스크롤이 중단되었는지 여부를 나타냅니다.
WebGPU 즉시
WGSL에 새로운 즉시 주소 공간을 추가하고 렌더링 패스, 컴퓨팅 패스, 렌더링 번들 인코더에 setImmediateData() 메서드를 추가하여 GPU 버퍼 객체 또는 바인드 그룹을 만들지 않고도 자주 업데이트되는 소량의 데이터를 셰이더에 직접 전달할 수 있습니다. 이는 모든 그리기 호출에서 객체 색인, 머티리얼 색인 또는 변환 행렬과 같은 그리기별 매개변수를 업데이트해야 하는 애플리케이션에 특히 유용하며 버퍼 및 바인드 그룹 관리 오버헤드를 방지하여 성능을 크게 개선할 수 있습니다.
Web Speech API: 온디바이스 인식 품질
SpeechRecognitionOptions에 quality 속성을 추가하여 SpeechRecognition 인터페이스를 확장합니다. 이 속성을 사용하면 개발자가 processLocally: true를 사용하여 온디바이스 인식에 필요한 시맨틱 기능을 지정할 수 있습니다.
제안된 quality enum은 작업 복잡성과 하드웨어 요구사항 증가에 매핑되는 세 가지 수준(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가 올바르게 발생합니다.