Chrome 137 베타

Rachel Andrew

게시일: 2025년 5월 1일

별도로 명시되지 않는 한 다음 변경사항은 Android, ChromeOS, Linux, macOS, Windows용 최신 Chrome 베타 채널 출시에 적용됩니다. 여기에 나열된 기능에 관한 자세한 내용은 제공된 링크 또는 ChromeStatus.com의 목록을 참고하세요. Chrome 130은 2025년 4월 30일 기준으로 베타 버전입니다. 데스크톱용 최신 버전은 Google.com에서, Android용 최신 버전은 Google Play 스토어에서 다운로드할 수 있습니다.

CSS 및 UI

이 출시 버전에는 7가지 새로운 CSS 및 UI 기능이 추가되었습니다.

if() 함수

CSS if() 함수는 조건부 값을 간결하게 표현하는 방법을 제공합니다. 세미콜론으로 구분된 일련의 조건-값 쌍을 허용합니다. 이 함수는 각 조건을 순차적으로 평가하고 첫 번째 true 조건과 연결된 값을 반환합니다. 조건이 true로 평가되지 않으면 함수는 빈 토큰 스트림을 반환합니다. 이를 통해 복잡한 조건부 로직을 간단하고 간결하게 표현할 수 있습니다. 예:

div {
      color: var(--color);
      background-color: if(style(--color: white): black; else: white);
  }
  .dark {
      --color: black;
  }
  .light {
      --color: white;
  }

<div class="dark">dark</div>
<div class="light">light</div>

reading-flow 및 reading-order 속성

reading-flow CSS 속성은 flex, 그리드 또는 블록 레이아웃의 요소가 접근성 도구에 노출되고 탭 키보드 포커스 탐색을 사용하여 포커스가 맞춰지는 순서를 제어합니다. 다음 키워드 값 중 하나를 사용합니다.

  • normal
  • flex-visual
  • flex-flow
  • grid-rows
  • grid-columns
  • grid-order
  • source-order

reading-order CSS 속성을 사용하면 읽기 흐름 컨테이너 내의 순서를 수동으로 재정의할 수 있습니다. 기본값이 0인 정수입니다.

자세한 내용은 논리적 순차 포커스 탐색에 CSS 읽기 흐름 사용을 읽고 읽기 흐름의 몇 가지 예 를 사용해 보세요.

offset-path: shape()

shape() 함수는 이미 clip-path에서 지원되며 반응형 클리핑을 허용합니다. offset-path에서도 사용 설정하면 동일한 종류의 도형을 해당 속성에 사용할 수 있는 작은 간격이 닫힙니다.

SVGSVGElement에서 변환 속성 지원

이 기능을 사용하면 변환 속성(예: 크기 조정, 회전, 변환, 기울이기)을 변환 속성을 사용하여 <svg> 루트 요소 에 직접 적용할 수 있습니다. 이 개선사항을 사용하면 전체 SVG 좌표계 또는 콘텐츠를 전체적으로 조작하여 동적, 반응형, 대화형 벡터 그래픽을 만드는 데 더 큰 유연성을 제공할 수 있습니다. 이 속성을 지원하면 추가 래퍼 요소나 복잡한 CSS 해결 방법을 사용하지 않고도 SVG 요소를 변환할 수 있으므로 확장 가능한 애니메이션 웹 그래픽을 빌드하는 프로세스를 간소화할 수 있습니다.

프래그먼트를 생략하여 <use>가 외부 문서의 루트 요소를 참조하도록 허용

이 기능에서는 참조 요구사항을 완화하여 SVG <use> 요소를 간소화합니다. 현재 SVG 문서 내에서 프래그먼트를 명시적으로 참조해야 합니다. 프래그먼트 ID가 제공되지 않으면 <use>가 대상을 확인할 수 없으며 렌더링되거나 참조되는 항목이 없습니다.

이 기능을 사용하면 프래그먼트를 생략하거나 외부 SVG 파일 이름만 지정해도 루트 요소가 자동으로 참조되므로 루트에 ID를 할당하기 위해 참조된 문서를 변경할 필요가 없습니다. 이 개선사항은 이 수동 편집 프로세스를 간소화하고 효율성을 개선합니다.

accent-color 속성의 시스템 강조 색상이 Windows 및 ChromeOS로 확장됨

이를 통해 양식 요소에 운영체제의 강조 색상을 사용할 수 있습니다. accent-color CSS 속성을 사용하면 체크박스, 라디오 버튼, 진행률 표시줄과 같은 양식 요소가 사용자의 운영체제에서 정의한 강조 색상을 자동으로 채택하도록 할 수 있습니다. 이 기능은 2021년부터 macOS에서 지원되었으며 이제 Windows 및 ChromeOS에서 지원됩니다.

view-transition-name: match-element

view-transition 속성의 match-element 값은 요소의 ID를 기반으로 고유 ID를 생성하며 이 요소에 대해 동일하게 유지됩니다. 요소가 이동되고 뷰 전환으로 애니메이션을 적용하려는 단일 페이지 앱 사례에서 사용됩니다.

Web API

'결제' WebAuthn 사용자 인증 정보 생성 시 발생하는 오류 유형 조정

payment 사용자 인증 정보의 WebAuthn 사용자 인증 정보 생성 중에 발생하는 오류 유형을 수정합니다. 이전의 사양 불일치로 인해, 사용자 활성화 없이 교차 출처 iframe에서 payment 사용자 인증 정보를 생성하면 NotAllowedError가 아니라 SecurityError가 발생하는데, 이는 결제 외 사용자 인증 정보에 대한 오류 유형입니다. 브레이킹 체인지입니다. 이전에 발생한 오류 유형을 감지한 코드 (예: e instanceof SecurityError)가 영향을 받습니다. 사용자 인증 정보 생성 중에 오류를 일반적으로 처리하는 코드 (예: catch (e))는 계속 올바르게 작동합니다.

Blob URL 파티셔닝: 가져오기/탐색

저장용량 파티셔닝의 연장으로, 저장용량 키 (최상위 사이트, 프레임 출처, has-cross-site-ancestor 불리언)별로 Blob URL 액세스의 파티셔닝을 구현합니다. 단, 프레임 출처로만 파티셔닝된 상태로 유지되는 최상위 탐색은 예외입니다.

PartitionedBlobURLUsage 정책을 설정하여 이 변경사항을 일시적으로 되돌릴 수 있습니다. 이 정책은 다른 저장용량 파티셔닝 관련 엔터프라이즈 정책이 지원 중단되면 지원 중단됩니다.

응답하지 않는 웹페이지의 비정상 종료 보고서의 호출 스택

이 기능은 JavaScript 코드가 무한 루프 또는 기타 매우 긴 계산을 실행하여 웹페이지가 응답하지 않게 될 때 JavaScript 호출 스택을 캡처합니다. 이를 통해 개발자는 응답하지 않는 원인을 파악하고 더 쉽게 수정할 수 있습니다. 이유가 응답하지 않는 경우 JavaScript 호출 스택이 비정상 종료 보고 API에 포함됩니다.

캔버스 부동 소수점 색상 유형

CanvasRenderingContext2D, OffscreenCanvasRenderingContext2D, ImageData에서 8비트 고정 소수점과 달리 부동 소수점 픽셀 형식을 사용할 수 있는 기능을 도입합니다. 이는 고정밀 애플리케이션 (예: 의료 시각화), 높은 동적 범위 콘텐츠, 선형 작업 색상 공간에 필요합니다.

신뢰할 수 없는 일반 텍스트 HTTP 사전 렌더링 허용 안 함

현재 사전 렌더링은 HTTP 및 HTTPS를 통해 허용되지만 사전 가져오기는 HTTPS를 통해서만 작동합니다. 사전 가져오기와 일관되도록 사전 렌더링을 제한합니다.

Document-Isolation-Policy

Document-Isolation-Policy 를 사용하면 COOP 또는 COEP를 배포하지 않고도 페이지의 crossOriginIsolation 상태와 관계없이 문서에서 자체적으로 crossOriginIsolation을 사용 설정할 수 있습니다. 이 정책은 프로세스 격리를 기반으로 합니다. 또한 문서 비 CORS 교차 출처 하위 리소스는 사용자 인증 정보 없이 로드되거나 CORP 헤더가 있어야 합니다.

자세한 내용은 문서 격리 정책: 강력한 웹 기능을 쉽게 사용 설정 을 참고하세요.

웹 암호화의 Ed25519

이 기능은 웹 암호화 API에서 Curve25519 알고리즘, 즉 서명 알고리즘 Ed25519를 지원합니다.

IP 주소 로깅 및 보고

Chrome Enterprise는 보안 모니터링 및 사고 대응 기능을 개선하기 위해 로컬 및 원격 IP 주소를 수집 및 보고하며, 해당 IP 주소를 보안 조사 로그 (SIT)로 전송합니다. 또한 Chrome Enterprise에서는 관리자가 원하는 경우 Chrome Enterprise 보고 커넥터를 통해 1P 및 3P SIEM 공급업체에 IP 주소를 전송할 수 있습니다. 이 기능은 Chrome Enterprise Core 고객에게 제공됩니다.

JavaScript Promise 통합

JavaScript Promise 통합 (JSPI)은 WebAssembly 애플리케이션이 JavaScript Promise와 통합할 수 있도록 하는 API입니다. 이를 통해 WebAssembly 프로그램이 Promise의 생성기 역할을 할 수 있으며 WebAssembly 프로그램이 Promise를 포함하는 API와 상호작용할 수 있습니다. 특히 애플리케이션이 JSPI를 사용하여 Promise를 포함하는 (JavaScript) API를 호출하면 WebAssembly 코드가 일시중지되고 WebAssembly 프로그램이 최종적으로 완료될 때 충족되는 Promise가 WebAssembly 프로그램의 원래 호출자에게 제공됩니다.

Language Detector API

Language Detector API는 제공된 문자열 의 언어를 식별하는 JavaScript API입니다. 이 API는 언어 감지 작업을 실행하도록 미세 조정된 기본 모델을 기반으로 합니다.

문자열이 주어지면 Language Detector API는 감지된 언어의 정렬된 목록과 각 결과의 신뢰도 점수를 반환합니다.

개발자는 특정 언어에서 감지가 실행될 것으로 예상되는 사용 사례에 맞게 최적화할 수 있도록 Language Detector 인스턴스를 만들 때 예상되는 입력 언어 목록을 전달할 수 있습니다.

SVGMatrix, SVGRect, SVGPoint에서 float 속성 및 인수 제한

SVGMatrix, SVGRect, SVGPoint에서 float 속성 또는 인수를 설정할 때 이제 Infinity 또는 Nan으로 설정할 수 없습니다. SVG 사양에 정의된 대로 설정하려고 하면 JavaScript 예외가 발생합니다.

Selection API getComposedRanges 및 direction

이 기능은 Selection API를 위한 두 가지 새로운 API 메서드를 제공합니다.

  • Selection.direction 선택의 방향을 "none"로 반환하는 "forward" 또는 "backward"
  • 0 또는 1개의 '구성된' StaticRange 목록을 반환하는 Selection.getComposedRanges()

'구성된' StaticRange는 일반 범위가 교차할 수 없는 그림자 경계를 교차할 수 있습니다.

예를 들면 다음과 같습니다.

const range = getSelection().getComposedRanges({ shadowRoots: [root] });

선택이 shadowRoots 목록에 제공되지 않은 그림자 루트 경계를 교차하면 StaticRange의 엔드포인트가 해당 트리 외부에 있도록 '범위가 재지정'됩니다. 이렇게 하면 알 수 없는 그림자 트리가 노출되지 않습니다.

웹 앱 범위 확장 프로그램

웹 앱이 범위를 다른 출처로 확장할 수 있도록 하는 scope_extensions 웹 앱 매니페스트 필드를 추가합니다.

예:

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    {"type" : "type", "origin" : "https://example.com"}
  ]
}

이를 통해 여러 하위 도메인과 최상위 도메인을 제어하는 사이트를 단일 웹 앱으로 표시할 수 있습니다.

나열된 출처에서 .well-known/web-app-origin-association 구성 파일을 사용하여 웹 앱과의 연결을 확인해야 합니다.

{
  "https://sample-app.com/": {
    "scope": "/"
  }
}

WebAssembly 분기 힌트

특정 분기 명령어가 특정 경로를 사용할 가능성이 매우 높다는 것을 엔진에 알림으로써 컴파일된 WebAssembly 코드의 성능을 개선합니다. 이를 통해 엔진은 코드 레이아웃 (명령어 캐시 적중률 개선) 및 레지스터 할당에 대해 더 나은 결정을 내릴 수 있습니다.

WebGPU: externalTexture 결합을 위한 GPUTextureView

이제 GPUBindGroup을 만들 때 externalTexture 결합에 GPUTextureView를 사용할 수 있습니다.

WebGPU: copyBufferToBuffer 오버로드

이제 GPUCommandEncoder copyBufferToBuffer() 메서드에는 선택적 오프셋 및 크기 매개변수가 있는 새 오버로드를 사용하여 전체 버퍼를 복사하는 더 간단한 방법이 포함됩니다.

새 오리진 트라이얼

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

전체 프레임 속도 렌더링 차단 속성

차단 속성에 새 렌더링 차단 토큰 full-frame-rate를 추가합니다. 렌더러가 full-frame-rate 토큰으로 차단되면 렌더러는 로드를 위해 더 많은 리소스를 예약할 수 있도록 더 낮은 프레임 속도로 작동합니다.

렌더링되지 않은 iframe에서 미디어 재생 일시중지

렌더링되지 않은(즉, 'display' 속성이 'none'으로 설정된) 삽입된 iframe의 미디어 재생을 삽입기 웹사이트에서 일시중지할 수 있도록 "media-playback-while-not-rendered" 권한 정책을 추가합니다. 이를 통해 개발자는 더 사용자 친화적인 환경을 빌드하고 브라우저가 사용자에게 표시되지 않는 콘텐츠의 재생을 처리하도록 하여 성능을 개선할 수 있습니다.

Rewriter API

Rewriter API는 기기 내 AI 언어 모델을 기반으로 요청된 방식으로 입력 텍스트를 변환하고 다시 표현합니다. 개발자는 이 API를 사용하여 단어 제한에 맞게 텍스트 내 중복을 삭제하고, 대상에 맞게 또는 메시지가 유해한 언어를 사용하는 것으로 확인된 경우 더 건설적으로 메시지를 다시 표현하고, 더 간단한 단어와 개념을 사용하도록 게시물 또는 기사를 다시 표현할 수 있습니다.

Writer API

Writer API는 기기 내 AI 언어 모델을 기반으로 쓰기 작업 프롬프트가 제공된 새 자료를 작성하는 데 사용할 수 있습니다. 개발자는 이 API를 사용하여 구조화된 데이터의 텍스트 설명을 생성하고, 리뷰 또는 제품 설명을 기반으로 제품에 관한 게시물을 작성하고, 찬반 목록을 전체 뷰로 확장할 수 있습니다.