이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 123 베타

달리 명시되지 않는 한 다음 변경사항은 Android, ChromeOS, Linux, macOS, Windows용 최신 Chrome 베타 채널 출시에 적용됩니다. 제공된 링크 또는 ChromeStatus.com의 목록을 통해 여기에 나열된 기능에 관해 자세히 알아보세요. Chrome 123은 2024년 2월 21일부터 베타 버전입니다. 데스크톱용 Google.com 또는 Android의 Google Play 스토어에서 최신 버전을 다운로드할 수 있습니다.

CSS

이 버전에는 5가지 새로운 CSS 기능이 추가되었습니다.

CSS `light-dark()` 색상 함수

CSS의 light-dark() 함수를 사용하면 개발자가 밝은 모드나 어두운 모드에 관한 사용자의 환경설정에 맞게 색 구성표를 더 쉽게 조정할 수 있습니다.

light-dark()를 사용하여 단일 CSS 속성 내에서 서로 다른 두 가지 색상 값을 지정합니다. 브라우저 (또는 기기)는 요소의 계산된 color-scheme 값을 기반으로 적절한 색상을 자동으로 선택합니다. 예를 들어 다음 CSS를 사용합니다.

사용자가 밝은 테마를 선택하면 .target 요소의 배경이 라임색으로 표시됩니다.
사용자가 어두운 테마를 선택한 경우 .target 요소의 배경이 녹색이 됩니다.

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

CSS PIP 모드 표시 모드

picture-in-picture 값의 CSS display-mode 미디어 기능 지원을 추가합니다. 이를 통해 웹 개발자는 웹 앱이 PIP 모드로 표시될 때만 (일부) 적용되는 특정 CSS 규칙을 작성할 수 있습니다.

PIP 모드 문서에서 이 미디어 기능에 관해 자세히 알아보세요.

블록의 align-content CSS 속성

이제 align-content CSS 속성이 블록 컨테이너 및 표 셀에서 지원됩니다. 이전에는 이 속성이 그리드 및 가변 항목에서만 지원되었습니다. 예를 들어 display: block, display: list-item, display: table-cell는 이제 align-content를 사용하여 정렬할 수 있습니다.

블록 및 테이블 레이아웃에서 align-content 지원에서 자세히 알아보세요.

`field-sizing` CSS 속성

개발자는 field-sizing 속성을 사용하여 양식 컨트롤의 고정된 기본 크기를 사용 중지하고 그 크기가 콘텐츠에 따라 달라지도록 할 수 있습니다. 이를 통해 자동으로 증가하는 텍스트 필드를 만들 수 있습니다.

CSS `text-spacing-trim` 속성

이 속성은 JLREQ (일본어 텍스트 레이아웃 요구사항) 및 CLREQ (중국어 텍스트 레이아웃 요구사항)에 정의된 대로 시각적으로 보기 좋은 서체를 만들기 위해 CJK (중국어, 일본어, 한국어) 구두점 문자에 커닝을 적용합니다.

CJK 구두점 문자에는 글리프 안쪽에 공백이 포함된 경우가 많습니다. 예를 들어 CJK 전체 정류장과 CJK 닫는 괄호는 일반적으로 글리프 공간의 오른쪽에 글리프 내부 공백이 있어 다른 표의 문자처럼 계속 발전할 수 있습니다. 그러나 연속으로 표시되면 글리프 내부 간격이 과도하게 커집니다. 이 기능은 이러한 과도한 공백을 조정합니다.

text-spacing-trim 속성은 normal, trim-start, space-all, space-first의 4가지 값 중 하나를 허용합니다. 자세한 내용은 CSS의 새로운 네 가지 기능 소개를 참조하세요.

Web API

교차 출처 iframe에서 WebAuthn 사용자 인증 정보 생성 허용

이 기능을 사용하면 웹 개발자가 교차 출처 iframe에서 WebAuthn 사용자 인증 정보 (패스키라고 하는 '공개키' 사용자 인증 정보)를 만들 수 있습니다. 이 새로운 기능에는 두 가지 조건이 필요합니다.

iframe에는 publickey-credentials-create-feature 권한 정책이 있습니다.
iframe에 일시적인 사용자 활성화가 있습니다.

이를 통해 개발자는 신뢰 당사자가 제휴 ID 환경을 제공하는 ID 단계별 절차 이후와 같은 삽입된 시나리오에서 패스키를 만들 수 있습니다.

기여 분석 보고 기능 번들

Chrome 123에서는 다음에 중점을 둔 Attribution Reporting API에 트리거 데이터 맞춤설정 및 집계 가능한 값 필터를 추가합니다.

트리거 데이터 카디널리티 및 값의 맞춤설정을 지원하여 이벤트 수준 보고를 위한 추가 API 구성 가능 여부
집계 가능한 값에서 필터를 지원하여 요약 보고서의 추가 API 구성 가능

교차 앱 및 웹 기여 분석 측정

Attribution Reporting API를 확장하여 웹에서 발생하는 전환을 다른 애플리케이션 내의 브라우저 외부에서 발생하는 이벤트에 기여할 수 있도록 합니다.

여기서 제안서는 OS 수준의 기여 분석 지원을 활용합니다. 특히 다른 플랫폼에 대한 지원을 구현할 수도 있지만 개발자에게 모바일 웹의 이벤트를 Android의 개인 정보 보호 샌드박스의 이벤트에 조인할 수 있도록 허용하는 옵션을 제공합니다.

인라인 모듈 스크립트의 `blocking=render`

이는 <script blocking="render">에서 인위적인 제한을 제거하는 작은 변경사항입니다. 이 변경 이전에는 이 src가 데이터 URI이더라도 <script blocking="render"type="module">에 src 속성이 필요합니다. 이는 불필요한 제약 조건입니다. 다른 스크립트를 가져오는 인라인 모듈 스크립트는 여전히 렌더링 차단이 가능해야 하기 때문입니다.

이렇게 하는 이유는 문서 간 뷰 전환이 맞춤설정을 위해 렌더링 차단 스크립트를 사용하는 경우가 많기 때문입니다. 따라서 렌더링 차단 스크립트를 더 쉽게 작성할 수 있도록 하면 이 기능을 지원할 수 있습니다.

PIP 모드 문서화: `focus()` API가 오프너에 포커스를 맞출 수 있습니다.

이제 문서 PIP 모드 창에서 opener.focus()를 사용하여 문서 PIP 모드 창을 소유한 탭으로 시스템 수준의 포커스를 가져올 수 있습니다.

이렇게 하면 필요한 경우 개발자가 원래 탭을 포그라운드로 다시 가져올 수 있습니다. 예를 들어 사용자가 작은 PIP 모드 창에 맞지 않는 UI 환경에 액세스해야 하는 경우입니다.

속성 `with` 구문 가져오기

가져오기 속성은 가져오기 선언에 주석을 달 수 있는 JavaScript 기능입니다(예: import xxx from "mod" with { type: "json" }). Chrome은 원래 Chrome 91에서 assert를 키워드로 사용하여 이전 버전의 제안서를 제공했습니다. 이 버전은 JSON 및 CSS 모듈의 HTML과 통합하는 동안 필요한 일부 변경사항으로 인해 with를 사용하도록 업데이트되었습니다.

jitterBufferTarget

jitterBufferTarget 속성을 사용하면 애플리케이션이 RTCRtpReceiver 잡음 버퍼가 유지할 미디어의 타겟 기간을 밀리초 단위로 지정할 수 있습니다. 이는 사용자 에이전트가 실행하는 버퍼링 양에 영향을 미쳐 재전송 및 패킷 손실 복구에 영향을 줍니다. 타겟 값을 변경하면 애플리케이션이 재생 지연과 네트워크 잡음으로 인한 오디오 또는 동영상 프레임 부족 위험 간의 균형을 제어할 수 있습니다.

긴 애니메이션 프레임 타이밍

Long Animation Frames API는 Long Tasks API의 확장 프로그램입니다. 장기 실행 스크립트, 렌더링 시간, 레이아웃 스래싱이라고 하는 강제 레이아웃 및 스타일에 사용된 시간과 같은 정보를 추가하여 후속 렌더링 업데이트와 함께 작업을 측정합니다.

개발자는 종종 잘못된 INP의 원인인 기본 스레드 정체의 원인을 찾아 INP로 측정되는 '느림'의 진단으로 이를 사용할 수 있습니다.

NavigationActivation

NavigationActivation 인터페이스는 navigation.activation를 추가합니다. 여기에는 현재 문서가 활성화된 시점 (예: 초기화된 시점 또는 뒤로-앞으로 캐시에서 복원된 시점)에 대한 상태가 저장됩니다.

즉, 개발자는 사용자가 이동한 위치를 기반으로 맞춤설정된 페이지를 제공할 수 있습니다. 예를 들어 홈페이지에서 가져온 경우 다른 애니메이션을 실행합니다.

페이지 공개 이벤트

문서가 처음 로드되거나, 뒤로-앞으로 캐시에서 복원되거나, 사전 렌더링에서 활성화된 후 첫 번째 렌더링 기회 시 문서의 창 객체에서 pagereveal 이벤트가 발생합니다.

페이지 작성자가 페이지 입력 환경(예: 이전 상태에서의 뷰 전환)을 설정하는 데 사용할 수 있습니다.

멀티펜 잉크용 PointerEvent.deviceId

고급 펜 입력 기능을 갖춘 기기가 점점 보급됨에 따라 최종 사용자와 개발자 모두에게 풍부한 환경을 제공하기 위해 이러한 고급 기능을 완벽하게 지원하도록 웹 플랫폼이 계속 발전하는 것이 중요합니다. 이러한 발전 중 하나는 기기의 디지타이저가 동시에 상호작용하는 두 개 이상의 펜 기기를 인식할 수 있다는 것입니다. 이 기능은 PointerEvent 인터페이스의 확장 기능으로, 새로운 속성 deviceId를 포함합니다. 이 속성은 개발자가 페이지와 상호작용하는 개별 펜을 식별하는 데 안정적으로 사용할 수 있는 세션 영구적이고 문서 격리된 고유 식별자를 나타냅니다.

내비게이션 요청에 대한 비공개 네트워크 액세스 확인: 경고 전용 모드

웹사이트 A가 사용자의 비공개 네트워크에 있는 다른 사이트 B로 이동하기 전에 이 기능은 다음을 실행합니다.

요청이 보안 컨텍스트에서 시작되었는지 확인합니다.
실행 전 요청을 전송하고 B가 비공개 네트워크 액세스를 허용하는 헤더로 응답하는지 확인합니다.

하위 리소스와 worker를 위한 기능이 이미 있지만 이 추가 기능은 특히 탐색 요청에 해당되는 기능입니다.

이러한 확인은 사용자의 비공개 네트워크를 보호하기 위한 것입니다. 이 기능은 '경고 전용' 모드이므로 검사 중 하나라도 실패해도 요청이 실패하지 않습니다. 대신 개발자가 예정된 시행에 대비할 수 있도록 DevTools에 경고가 표시됩니다.

Sec-CH-UA-폼 팩터 클라이언트 힌트

이 힌트는 사이트에서 응답을 맞춤설정할 수 있도록 사용자 에이전트 또는 기기의 '폼 팩터'를 나타냅니다.

서비스 워커 정적 라우팅 API

개발자는 이 API를 사용하여 라우팅을 구성하고 서비스 워커가 하는 간단한 작업을 오프로드할 수 있습니다. 조건이 일치하면 서비스 워커를 시작하거나 JavaScript를 실행하지 않고도 탐색이 수행되므로 웹페이지에서 서비스 워커 가로채기로 인한 성능 저하를 방지할 수 있습니다. 자세한 내용은 이 API에 관한 이전 블로그 게시물을 참고하세요.

공유 저장소 업데이트

이 업데이트는 iframe을 만들지 않고도 교차 출처 워크릿 실행을 지원합니다.

zstd 콘텐츠 인코딩

Zstandard 또는 zstd는 RFC8878에 설명된 데이터 압축 메커니즘입니다. 빠른 무손실 압축 알고리즘으로, zlib 수준과 더 나은 압축률에서 실시간 압축 시나리오를 타겟팅합니다. zstd 토큰은 IANA에 등록된 Content-Encoding 토큰으로 추가되었습니다.

zstd 지원을 콘텐츠 인코딩으로 추가하면 페이지를 더 빠르게 로드하고 대역폭을 더 적게 사용하며 서버의 압축에 소요되는 시간, CPU, 전력을 줄여 서버 비용을 절감할 수 있습니다.

새로운 오리진 트라이얼

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

WebAssembly 자바스크립트 프로미스 통합

WebAssembly를 사용하여 작성된 반응형 애플리케이션을 지원하려면 WebAssembly 프로그램을 정지하고 재개할 수 있는 기능을 제공해야 합니다.

프로미스 통합의 주요 초기 사용 사례는 소스가 동기 API에 의존하는 WebAssembly 프로그램이 웹 플랫폼에서 점점 더 보편화되고 있는 비동기 API를 사용하도록 허용하는 것입니다.

promise 통합 오리진 트라이얼에 등록합니다.

이사

Chrome 123에서는 다음 기능이 삭제됩니다.

권한 및 권한 정책 `window-management`의 `window-placement` 별칭

Chrome 111에서는 window-placement 권한 및 권한 정책 문자열의 별칭으로 window-management가 추가되었습니다. 이는 최종적으로 window-placement를 지원 중단하고 삭제하여 문자열 이름을 바꾸려는 광범위한 노력의 일환입니다. 시간이 지나면서 Window Management API가 발전함에 따라 용어가 변경되면 설명어의 수명이 향상됩니다.

window-placement 별칭의 지원 중단 경고는 Chrome 113부터 시작되었으며 이제 삭제될 예정입니다.