홈

Chrome

Chrome 150 베타

원문: Chrome 150 beta
 — Chrome Developers 원문은 CC-BY-4.0
 라이선스로 제공되며, 이 글은 한국어로 번역한 2차 저작물입니다.

CSS and UI

AccentColor
and 
AccentColorText
system colors

AccentColor
및 
AccentColorText
시스템 색상을 CSS에서 사용하여 사용자의 기기에 설정된 시스템 강조 색상에 접근할 수 있습니다. 이를 통해 설치된 웹 애플리케이션과 같이 사용자가 운영 체제 테마 통합을 기대하는 컨텍스트에서 앱과 같은 스타일링을 웹 콘텐츠에 적용할 수 있습니다. 사용자는 초기 프로필에서 설치된 웹 애플리케이션에 있을 때만 시스템 강조 색상이 렌더링되는 것을 볼 수 있습니다.

Allow optional rounding parameter for 
polygon()

polygon()
CSS 모양 함수에 선택적 모서리 둥글기 매개변수를 지정할 수 있습니다. 개발자는 베지어 곡선을 수동으로 계산하지 않고 길이 값을 지정하여 다각형 모서리를 둥글게 만들 수 있습니다.

Animatable zoom

CSS 
zoom
속성은 애니메이션이 가능하며 
<number>
로 보간됩니다. 개발자는 전환 및 애니메이션을 통해 줌을 사용하여 요소를 부드럽게 확장하고 레이아웃을 조정할 수 있으며, 기존의 transform 기반 확장을 보완합니다.

CSS URL request modifiers

CSS 
url()
함수는 따옴표로 묶인 URL 문자열 뒤에 선택적 요청 수정자 
cross-origin()
, 
integrity()
, 
referrer-policy()
를 사용할 수 있습니다. 이러한 수정자는 HTML 마크업이나 JavaScript 변경 없이 CSS에서 직접 참조된 리소스의 가져오기 동작을 제어합니다.
예를 들어, 
background-image: url("image.png" cross-origin(anonymous))
는 CORS 익명 모드를 사용하여 이미지를 가져옵니다.

CSS 
text-fit
property

텍스트 노드의 글꼴 크기를 컨테이너 너비에 완벽하게 맞도록 조정합니다.
이 속성을 통해 개발자는 수동 글꼴 크기 계산이나 복잡한 JavaScript 해결 방법 없이도 헤드라인이나 동적 콘텐츠가 사용 가능한 가로 공간을 채우도록 보장할 수 있습니다. 이 속성은 다양한 화면 크기와 가변 텍스트 길이에 걸쳐 시각적 정렬을 유지하는 반응형 타이포그래피를 위한 강력한 CSS 기본 솔루션을 제공합니다.

CSS 
background-clip: border-area

CSS Backgrounds Level 4에 정의된 CSS 
background-clip
속성에 대해 
border-area
값을 구현합니다. 
background-clip
값은 요소의 배경을 테두리 획이 칠해진 영역으로 잘라내며, 
border-width
및 
border-style
을 고려하는 동시에 
border-color
의 투명도는 무시합니다. 이 값을 사용하면 
border-image
없이 그라데이션 테두리를 만들 수 있습니다.

CSS 
image(<color>)
function

image()
함수를 사용하면 개발자가 어떤 색상이든 단색 이미지를 생성할 수 있습니다. 구문은 다음과 같습니다: 
image() = image( <color> )
.

CSS 
light-dark()
with image values

CSS 
light-dark()
함수를 이미지 값(예: 
url()
, 
image-set()
, 
none
)까지 수락하도록 확장하여 작성 스타일시트에서 
background-image
, 
list-style-image
, 
border-image-source
, 
cursor
, 
content
와 같은 이미지 속성이 사용자의 기본 색상 구성표에 따라 이미지 간에 자동으로 전환되도록 합니다. 이전에는 이 동작이 사용자 에이전트 스타일시트에서만 허용되었습니다. 이 변경 사항은 CSS Color 5 사양과 일치하며 Firefox의 기존 구현과 일치합니다.

Clone into all descendant 
selectedcontent
elements

selectedcontent
요소의 엣지 케이스에 몇 가지 작은 변경 사항이 적용됩니다.
  • <select>
    요소에 여러 
    selectedcontent
    요소가 동시에 배치될 때, DOM 순서상 첫 번째 요소만 업데이트되는 것이 아니라 모두 최신 상태로 유지됩니다.
  • 삽입, 제거 또는 이동 단계 중에 실행될 때 
    selectedcontent
    요소 업데이트가 연기되어 보안 문제가 수정됩니다. 업데이트는 삽입 후 단계 또는 마이크로태스크를 사용하여 연기됩니다.

Comma-separated container queries

@container
규칙당 여러 쿼리를 지원합니다. 
@container
규칙은 쿼리 중 하나라도 일치하는 경우 적용됩니다.
이 기능은 예를 들어 모든 브라우저에서 지원되지 않는 기능에 대한 대체 쿼리를 가능하게 합니다.
예:
@container --name1 not-supported(--foo: bar), --name2 (width > 600px) {}
여러 쿼리 지원과 함께 객체 모델이 확장되어 
CSSContainerRule
API의 
conditions
속성을 지원합니다.

Expose unprintable areas to CSS

프린터는 일반적으로 용지 가장자리에 4면 모두에 프린터의 용지 처리 메커니즘으로 인해 안정적으로 표시할 수 없는 작은 영역이 있습니다. 기본 페이지 여백은 이러한 영역보다 커야 하지만, 작성자가 자체적으로 여백을 설정하고 사용자 지정 헤더 및 바닥글에 대해 
@page
여백 상자를 추가하려는 경우에도 인쇄해도 안전한 위치를 결정하는 방법이 필요합니다.
CSS 설명자 
page-margin-safety
를 사용하여 인쇄할 수 없는 영역을 피할 수 있습니다.

The 
focusgroup
attribute

작성자가 합성 위젯에 화살표 키 탐색, 보장된 탭 중지, 마지막으로 포커스된 메모리를 선언적으로 제공할 수 있어 수동으로 코딩된 roving tabindex 스크립트를 대체할 수 있습니다. 예:
<div focusgroup="toolbar wrap" aria-label="Formatting">
  <button>Bold</button>
  <button>Italic</button>
  <button>Underline</button>
</div>

Media element pseudo-classes

:playing
, 
:paused
, 
:seeking
, 
:buffering
, 
:stalled
, 
:muted
, 
:volume-locked
CSS 의사 클래스는 상태를 기반으로 
<audio>
및 
<video>
요소를 일치시킵니다.
이 기능은 Interop 2026
의 주요 영역 중 하나입니다.

popover=hint
behavior changes

이 변경 사항은 
popover=hint
속성과 
popover=auto
와의 상호 작용에 대한 수정되고 단순화된 스태킹 모델을 구현합니다. 이전에는 이러한 두 유형의 팝오버 간의 상호 작용이 중첩된 
popover=auto
를 
popover=hint
내부에 넣는 것과 같은 일부 엣지 케이스 상황에서 복잡할 수 있었고 예상치 못한 동작으로 이어질 수 있었습니다. 새로운 모델에서는 
popover=hint
를 열어도 더 이상 무관한 
popover=auto
요소가 실수로 닫히지 않습니다. 힌트 팝오버는 상위 
popover=auto
가 숨겨지거나 새롭고 무관한 
popover=auto
가 열릴 때만 숨겨집니다. 또한, 개발자는 auto 팝오버를 힌트 팝오버 안에 안전하게 중첩할 수 있습니다. 예외를 발생시키거나 스택을 중단하는 대신, 중첩된 
popover=auto
는 graceful하게 다운그레이드되어 
popover=hint
처럼 작동합니다. 이 기능을 통해 개발자는 사용자 정의 가능한 
<select>
를 
popover=hint
내부에 배치할 수 있습니다.
예측 가능성을 더욱 높이고 복잡한 상태 변경을 방지하기 위해 Chrome은 
beforetoggle
이벤트 내에서 팝오버를 열고 닫는 동작도 더 엄격하게 관리합니다. 이전에는 일부 경우에 보호 기능이 있었지만 모든 경우에 적용되지는 않았습니다. 이 변경 사항은 이러한 경우를 감지하는 데 사용되는 메커니즘을 재정비하여 모든 경우에 
InvalidStateError
를 보다 안정적으로 발생시킵니다. 이 변경 사항은 팝오버 상태 관리가 안정적으로 유지되도록 보장하고 루프 재진입 버그를 방지합니다.
이러한 변경 사항은 GitHub의 HTML 사양 pull request
에 대한 Mozilla와의 표준 대화에 의해 동기 부여되었습니다.

Relative alpha colors

상대 알파 색상은 색상 채널을 다시 작성하지 않고 기존 색상의 반투명 버전을 직접 CSS 방식으로 파생할 수 있도록 합니다. 개발자는 현재 동일한 색상에 다른 불투명도를 원할 때 구성 요소 값을 복제하거나 별도의 사전 계산된 토큰을 만들어야 합니다. CSS Color 5의 
alpha()
함수는 원본 색상 구성 요소를 보존하고 알파만 변경하여 작성 오버헤드를 줄이고 색상 토큰의 재사용 및 유지 관리를 더 쉽게 만듭니다.

flex-wrap:balance

flex-wrap:balance
를 사용하면 개발자가 콘텐츠를 플렉스 라인 사이에 분배하여 
text-wrap:balance
와 유사하게 더 균형 잡히게 보일 수 있습니다.

named-feature()
function for CSS 
@supports

named-feature()
함수를 사용하면 CSS 
@supports
규칙이 다른 
@supports
메커니즘으로는 테스트할 수 없지만 테스트할 가치가 있다고 간주되는 특정 명명된 기능의 작은 세트에 대해 쿼리할 수 있습니다.

overscroll-behavior: chain

overscroll-behavior
에는 
none
, 
auto
, 
contain
의 세 가지 값이 있습니다. 이러한 값은 스크롤 전파와 로컬 경계 효과라는 두 가지 독립적인 효과에 영향을 미칩니다. 예를 들어 오버스크롤 늘림입니다.
  • none
    : 스크롤 전파 없음, 로컬 경계 효과 없음.
  • auto
    : 스크롤 전파, 로컬 경계 효과.
  • contain
    : 스크롤 전파 없음, 로컬 경계 효과.
이 릴리스는 새로운 값인 
chain
을 추적하여 세트를 완성합니다: 스크롤 전파, 로컬 경계 효과 없음.
이 값은 스크롤러로 구현된 측면 메뉴와 같은 효과에 유용합니다. 메뉴를 가져올 수 있으며, 가장자리에 닿으면 오버스크롤되거나 늘어나지 않습니다. 그러나 스크롤은 조상으로 체인됩니다.

Web APIs

Disable SVG filters on plugins and cross-origin or restricted iframes

Chrome 150은 교차 출처 또는 제한된 iframe(예: 샌드박스 처리된 iframe) 및 플러그인(예: PDF)에 Scalable Vector Graphics(SVG) 필터가 적용되는 것을 방지합니다. 프레임 또는 플러그인에 SVG 필터 효과가 칠해지면 효과 트리가 순회되어 SVG 필터가 없는 가장 높은 조상을 찾아 해당 효과가 대신 적용됩니다.

IndexedDB: SQLite backend

Chromium의 
IndexedDB
구현은 이전의 
LevelDB
및 평면 파일 혼합 구현을 대체하기 위해 
SQLite
위에 재작성되었습니다. 이 변경 사항은 Web API에 영향을 미치지 않습니다.
이 재작성은 안정성을 향상시키고, 덜하지만 성능도 향상시킬 것으로 예상됩니다.
현재 이 변경 사항은 _새로운 데이터 저장소_에 적용됩니다. 이 변경 사항은 다단계 점진적 릴리스의 2단계입니다. 1단계를 추적하는 SQLite 인메모리 컨텍스트의 ChromeStatus 기능 페이지
를 참조하십시오.

MediaStreamTrackProcessor
frame counters

MediaStreamTrackProcessor
인터페이스에 
discardedFrames
및 
totalFrames
속성을 추가합니다. 이러한 카운터는 웹 개발자가 프로세서에 의해 수신되고 삭제된 프레임 수를 추적하여 미디어 처리 파이프라인의 상태를 모니터링할 수 있도록 합니다.

Opaque origin for 
data:
URLs

Chrome 150은 
DedicatedWorker
및 
SharedWorker
가 
data:
URL
을 처리하는 방식을 업데이트합니다. 이들은 생성한 스크립트나 페이지의 보안 출처를 자동으로 상속하는 대신 고유한 불투명 출처가 할당됩니다.
이 변경 사항은 작업자 HTML 사양
과 일치하며, 이러한 작업자를 생성자의 동일 출처 상태에서 격리하여 
BroadcastChannel
또는 동일 출처 저장소와 같은 메커니즘을 통해 민감한 데이터에 접근하는 것을 방지함으로써 보안을 강화합니다. 올바른 격리 경계를 유지하기 위해 이러한 작업자는 여전히 생성자와 동일한 저장소 파티션(예: 최상위 사이트 또는 nonce 유지) 내에 있습니다.
이 보안 조정은 데스크톱 및 모바일 플랫폼 전반에서 기본적으로 활성화됩니다. 관리자는 중앙 집중식 구성을 통해 보안 경계를 검토하거나 확인할 수 있습니다. 기술 구현 세부 정보 및 사양 참조는 HTML Living Standard Worker Settings
의 3단계를 참조하십시오.

PWA origin migration

사용자가 프로그레시브 웹 앱(PWA)을 설치하면 해당 ID 및 보안 컨텍스트는 웹 출처(예: 
app.example.com
)에 엄격하게 바인딩됩니다. 이는 리브랜딩, 도메인 재구성 또는 기술 재아키텍처링으로 인해 PWA의 출처를 변경해야 하는 개발자에게 상당한 과제를 제기합니다. 이러한 변경은 사용자가 이전 앱을 수동으로 제거하고 새 앱을 다시 설치해야 하므로 사용자 경험을 방해하고 잠재적인 사용자 손실로 이어집니다. Chrome 150은 개발자가 설치된 PWA를 새롭고 동일한 사이트 출처로 마이그레이션
하여 사용자 신뢰와 권한을 보존할 수 있는 메커니즘을 도입합니다.
WebAppInstallForceList
 정책은 마이그레이션을 차단합니다. 기업 정책은 주로 URL 및 출처를 기반으로 하기 때문에 관리자가 구성했을 수 있는 특정 정책을 마이그레이션이 우회할 위험이 있습니다. Chrome은 기업 관리자가 앱을 강제 설치한 경우 사용자에게 마이그레이션을 제공하지 않고, 이 사실을 사용자에게 설명하는 배너를 표시합니다.

Parse processing instructions in HTML

처리 지침(구문: 
<?target data>
)은 XML에서 이미 존재하는 DOM 구성 요소로, 요소는 아니지만 문서 처리에 의미론적 의미를 가질 수 있는 노드 객체를 사용할 수 있도록 합니다.
예를 들어, 새로운 DOM 요소를 요구하거나 CSS에 대한 DOM 구조를 변경하지 않고 스트리밍 또는 강조 표시 범위를 지정하는 데 사용하거나, HTML 파서에 대한 버퍼링 및 스트리밍 방법에 대한 지시문으로 사용할 수 있습니다.

Out-of-order streaming

순서 없는 스트리밍
을 사용하면 
<template for>
와 처리 지침 범위(
<?start>
및 
<?end>
)를 사용하여 HTML을 비순차적으로 전달하고 JavaScript 없이 문서의 기존 부분을 업데이트할 수 있습니다.

Programmatic scroll promises

이 기능을 통해 프로그래밍 방식 스무스 스크롤의 완료 상태에 대한 안정적인 신호를 얻을 수 있습니다. 
Element
및 
Window
의 모든 스크롤 메서드는 스크롤 완료 시 해결되는 Promise 객체를 반환하며, 해결된 값은 스크롤이 중단되었는지 여부를 나타냅니다.

WebGPU Immediates

WGSL에 새로운 즉시 주소 공간과 렌더 패스, 컴퓨트 패스, 렌더 번들 인코더의 
setImmediateData()
메서드를 추가하여 GPU 버퍼 객체나 바인드 그룹을 생성하지 않고도 셰이더에 직접 작고 자주 업데이트되는 데이터를 전달할 수 있습니다. 이는 매번 그리기 호출 시 객체 인덱스, 재질 인덱스 또는 변환 행렬과 같은 그리기별 매개변수를 업데이트해야 하는 애플리케이션에 특히 유용하며, 버퍼 및 바인드 그룹 관리 오버헤드를 방지하여 상당한 성능 향상을 가능하게 합니다.

Web Speech API: On-device recognition quality

SpeechRecognition
인터페이스를 확장하여 
SpeechRecognitionOptions
에 
quality
속성을 추가합니다. 이 속성을 통해 개발자는 
processLocally: true
를 사용하여 온디바이스 인식에 필요한 의미론적 기능을 지정할 수 있습니다.
제안된 
quality
열거형은 
command
, 
dictation
, 
conversation
의 세 가지 수준을 지원하며, 이는 작업 복잡성과 하드웨어 요구 사항 증가에 매핑됩니다. 이 기능을 통해 개발자는 로컬 장치가 높은 수준의 사용 사례(예: 회의록 작성)를 처리할 수 있는지 또는 클라우드 서비스에 의존해야 하는지 확인할 수 있으며, 온디바이스 모델 기능의 불투명한 특성을 해결합니다.

New origin trials

Chrome 150에서는 다음 origin trials
에 옵트인할 수 있습니다.

Email Verification Protocol (
EVP
)

이메일 검증 프로토콜(EVP)은 수동 이메일 OTP 대신 암호화 증명을 원활하게 제공하여 사용자가 계정을 생성, 접근 및 복구하도록 돕습니다.

Deprecations and removals

이번 Chrome 릴리스에서는 다음의 사용 중단 및 제거가 도입됩니다.

Remove 
[LegacyNoInterfaceObject]
from 
FontFaceSet
IDL

Chromium의 FontFaceSet IDL은 이전에는 
[LegacyNoInterfaceObject]
를 잘못 사용했는데, 이는 
FontFaceSet
을 전역 속성으로 숨기고 생성자 속성을 프로토타입에서 삭제했습니다. 이 동작은 CSS Font Loading 사양과 달랐으며 Safari 및 Firefox 동작과도 달랐습니다.
이번 제거는 
FontFaceSet
IDL에서 
[LegacyNoInterfaceObject]
를 제거하여 
FontFaceSet
을 전역 속성으로 올바르게 접근할 수 있도록 합니다. IDL에 
constructor()
가 정의되어 있지 않으므로, JavaScript에서 
FontFaceSet()
을 호출하면 사양에서 의무화한 동작과 일치하게 
TypeError: Illegal constructor
가 발생합니다.

목차

목록으로