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

이 출시에서는 새로운 CSS 및 UI 기능 7개를 추가합니다.

if() 함수

CSS if() 함수는 조건부 값을 간결하게 표현하는 방법을 제공합니다. 세미콜론으로 구분된 일련의 조건-값 쌍을 허용합니다. 이 함수는 각 조건을 순차적으로 평가하고 첫 번째 참 조건과 연결된 값을 반환합니다. 조건이 모두 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 속성은 플렉스, 그리드 또는 블록 레이아웃의 요소가 접근성 도구에 노출되고 탭 키보드 포커스 탐색을 사용하여 포커스가 설정되는 순서를 제어합니다. 다음 키워드 값 중 하나를 사용합니다.

  • 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비트 고정 소수점 대신 부동 소수점 픽셀 형식을 사용할 수 있는 기능을 도입합니다. 이는 고정밀 애플리케이션 (예: 의료 시각화), HDR 콘텐츠, 선형 작업 색상 공간에 필요합니다.

신뢰할 수 없는 일반 텍스트 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 보고 커넥터를 사용하여 퍼스트 파티 및 서드 파티 SIEM 공급업체에 IP 주소를 전송할 수 있습니다. 이 기능은 Chrome Enterprise Core 고객에게 제공됩니다.

JavaScript Promise 통합

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

Language Detector API

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

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

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

SVGMatrix, SVGRect, SVGPoint에서 부동 소수점 속성과 인수를 제한합니다.

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

선택 API getComposedRanges 및 direction

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

  • Selection.direction: 선택의 방향을 "none", "forward" 또는 "backward"로 반환합니다.
  • Selection.getComposedRanges(): 0 또는 1의 '조합된' StaticRange 목록을 반환합니다.

'조합된' 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를 만들 때 GPUTextureView를 externalTexture 바인딩에 사용할 수 있습니다.

WebGPU: copyBufferToBuffer 오버로드

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

새로운 오리진 트라이얼

Chrome 137에서는 다음과 같은 새로운 출처 무료 체험판을 선택할 수 있습니다.

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

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

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

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

Rewriter API

Rewriter API는 기기 내 AI 언어 모델을 기반으로 요청된 방식으로 입력 텍스트를 변환하고 문구를 바꿉니다. 개발자는 이 API를 사용하여 단어 수 제한에 맞추기 위해 텍스트 내 중복을 삭제하거나, 의도한 대상층에 맞게 메시지를 재구성하거나, 메시지에서 유해한 표현이 발견된 경우 더 건설적인 표현으로 바꾸거나, 더 간단한 단어와 개념을 사용하도록 게시물이나 기사를 재구성하는 등의 작업을 할 수 있습니다.

Writer API

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