Chrome 148 베타

Rachel Andrew

게시일: 2026년 4월 8일

별도로 명시되지 않는 한 다음 변경사항은 Android, ChromeOS, Linux, macOS, Windows용 최신 Chrome 베타 채널 출시에 적용됩니다. 제공된 링크를 사용하거나 ChromeStatus.com을 방문하여 이러한 기능에 대해 자세히 알아보세요. 이 출시 버전을 기준으로 Chrome은 베타 버전입니다. 데스크톱용 최신 베타 버전은 Google.com에서 다운로드하거나 Android의 Google Play 스토어에서 다운로드할 수 있습니다.

CSS 및 UI

CSS의 이름 전용 컨테이너 쿼리

이제 요소에 container-type을 설정하지 않고도 container-name만으로 CSS 컨테이너를 쿼리할 수 있습니다.

#container {
  container-name: --foo;
}
@container --foo {
  input { background-color: green; }
}

<div id="container">
  <div><input></div>
</div>

사용자 상호작용 시 텍스트 오버플로 클립

사용자가 text-overflow: ellipsis가 설정된 텍스트와 상호작용 (예: 수정 또는 캐럿 탐색 사용)하면 텍스트가 일시적으로 줄임표에서 클립으로 전환됩니다. 이렇게 하면 사용자가 숨겨진 오버플로 콘텐츠를 보고 상호작용할 수 있습니다. 이 기능은 수정 가능한 요소와 수정 불가능한 요소 모두에 적용됩니다. 양식 컨트롤(예: <textarea> 및 <input>)의 경우 이 동작이 이미 지원됩니다.

`dragEnter`, `dragLeave`, `dragOver` 이벤트의 `dropEffect`를 올바르게 설정

드래그 앤 드롭 사양에서는 dataTransfer 객체의 dropEffect 속성이 dragEnter, dragOver, dragLeave에서 특정 사전 결정된 값을 가져야 합니다. dragEnter 및 dragOver에는 현재 effectAllowed를 기반으로 하는 dropEffect가 있어야 합니다. dragLeave 에는 항상 none dropEffect가 있어야 합니다. 현재 Chrome은 이러한 규칙을 준수하지 않습니다. Chrome 148부터 Chrome은 사양을 준수하고 이 속성에 올바른 값을 할당합니다.

동영상 및 오디오 요소 지연 로드

이 기능은 loading 속성을 <video> 및 <audio> 요소에 추가합니다. 이렇게 하면 개발자가 요소가 뷰포트 근처에 있을 때까지 미디어 리소스 로드를 loading="lazy"지연시킬 수 있습니다. 이는 페이지 로드 성능을 개선하고 데이터 사용량을 줄이는 <img> 및 <iframe> 요소의 기존 지연 로드 동작과 일치합니다.

기능 감지를 위한 CSS `at-rule()` 함수

이 기능은 CSS @supports에 at-rule() 함수를 추가하여 작성자가 CSS at-rule 지원을 기능 감지할 수 있도록 합니다.

`revert-rule` 키워드 추가

revert-rule 키워드는 revert-layer가 캐스케이드를 이전 레이어로 롤백하는 것과 유사하게 캐스케이드를 이전 규칙으로 롤백합니다. 예를 들면 다음과 같습니다.

div { color: green; }
div { color: revert-rule; /* Effectively green */ }

조건이 충족되지 않는 경우 현재 규칙을 삭제할 수 있으므로 조건부와 함께 사용하면 특히 유용합니다.

div {
  display: if(style(--layout: fancy): grid; else: revert-rule);
}

`text-decoration-skip-ink: all` 지원

이 기능은 CSS text-decoration-skip-ink 속성의 all 값에 대한 지원을 추가합니다. text-decoration-skip-ink 속성은 이미 auto 및 none을 지원합니다. all 값은 CJK 문자를 포함한 모든 글리프에 잉크 건너뛰기를 무조건 적용하여 이를 확장합니다. 반대로 auto는 일반적인 밑줄 위치에서 표의 문자 스크립트에 바람직하지 않은 시각적 결과를 생성하는 경향이 있으므로 CJK 문자를 건너뛰지 않습니다. text-decoration-skip-ink: all을 사용하면 CJK 글리프와의 충돌을 방지하기 위해 text-underline-position 또는 text-underline-offset을 조정한 작성자가 이러한 문자에 대해 잉크 건너뛰기를 명시적으로 선택할 수 있습니다.

Web API

매니페스트 구성원 현지화

이 기능은 매니페스트 구성원의 현지화를 지원하므로 앱이 이름, 설명, 아이콘, 바로가기를 사용자의 언어 및 지역에 맞게 조정할 수 있습니다. 개발자는 웹 앱 매니페스트에서 현지화된 값을 제공합니다. 브라우저는 사용자의 언어 설정을 기반으로 적절한 리소스를 자동으로 선택하여 다양한 시장에서 언어 지원을 도입합니다.

텍스트 셰이핑 및 글리프 렌더링을 위한 Open Font Format `avar2` 지원

avar (축 변형) 테이블 버전 2를 사용하면 글꼴 디자이너가 보간을 더 잘 제어할 수 있는 가변 글꼴을 만들 수 있습니다. 원래 가변 글꼴 사양은 축을 독립적으로 처리하지만 avar2를 사용하면 축이 서로 영향을 미칠 수 있습니다. 이렇게 하면 콘텐츠 작성자가 더 쉽게 사용할 수 있는 글꼴이 생성되고 컴팩트한 스토리지가 가능해집니다.

Avar2 는 익숙한 글꼴 변형 개념을 사용하여 작동하지만 가변 델타 값을 디자인 축 자체에 적용할 수 있습니다. 여러 축의 범위에서 이 작업을 실행할 수 있습니다.

예를 들어 여러 변형 축을 한 번에 제어하는 메타 슬라이더를 만들 수 있습니다. 이렇게 하면 사용자가 글꼴 디자인 공간의 유용한 구석을 미세 조정하고 찾는 데 도움이 됩니다.

Avar2 를 사용하면 글꼴 디자이너가 글꼴의 사용 가능한 변형 공간을 더 잘 제어하고 여러 축에서 디자인 축 조정을 조정할 수 있습니다. avar 버전 2 테이블 내에서 축 간의 관계를 수학적으로 정의하면 글꼴이 더 적은 마스터로 복잡한 디자인을 구현할 수 있습니다. 보간이 더 효율적으로 저장되므로 파일 크기가 작아집니다.

웹 인증 즉시 UI 모드

navigator.credentials.get()의 이 새 모드는 사이트의 패스키 또는 비밀번호를 브라우저가 즉시 알고 있는 경우 브라우저 로그인 UI가 사용자에게 표시되도록 합니다. 그렇지 않으면 이러한 사용자 인증 정보를 사용할 수 없는 경우 NotAllowedError로 프로미스를 거부합니다. 이렇게 하면 브라우저가 성공할 가능성이 높은 로그인 사용자 인증 정보를 선택할 수 있는 경우 사이트에서 로그인 페이지를 표시하지 않을 수 있습니다. 이러한 사용자 인증 정보가 없는 경우에도 로그인 페이지 흐름을 허용합니다.

Android의 Web Serial API 지원

Web Serial API는 직렬 기기에 연결하기 위한 인터페이스를 제공합니다. 이러한 기기는 사용자 시스템의 직렬 포트 또는 직렬 포트를 에뮬레이션하는 이동식 USB 및 블루투스 기기를 통해 연결할 수 있습니다. 이제 API가 Android에서 지원됩니다.

특히 교육, 취미, 산업 분야의 사용자는 제어하기 위해 맞춤 소프트웨어가 필요한 주변기기를 컴퓨터에 연결합니다. 예를 들어 로봇 공학은 학교에서 컴퓨터 프로그래밍과 전자 공학을 가르치는 데 자주 사용됩니다. 이를 위해서는 코드를 로봇에 업로드하거나 원격으로 제어할 수 있는 소프트웨어가 필요합니다. 산업 또는 취미 환경에서 밀링 머신, 레이저 커터, 3D 프린터와 같은 장비는 연결된 컴퓨터에서 실행되는 프로그램에 의해 제어됩니다. 이러한 기기는 직렬 연결을 통해 소형 마이크로컨트롤러로 제어되는 경우가 많습니다.

WebGPU `linear_indexing` 기능

이 기능은 사용자 환경을 개선하기 위해 두 개의 새로운 컴퓨팅 셰이더 기본 제공 값을 추가합니다. 이러한 값은 모든 백엔드에 대해 구현됩니다 (기존 기본 제공 값의 폴리필).

Android의 `SharedWorker` 지원

예측할 수 없는 프로세스 수명 주기에 대한 우려로 인해 Android에서 SharedWorker가 오랫동안 사용 중지되었습니다. Chrome 개발자는 SharedWorker 인스턴스가 사용자 또는 웹 개발자에게 알리지 않고 예기치 않게 종료될 수 있다고 생각했습니다. 이는 허용되지 않는 것으로 간주되었습니다.

그러나 최근 GitHub 토론 에 따르면 예측 불가능한 SharedWorker의 프로세스 수명 주기의 특성은 이전보다 심각한 문제가 아닐 수 있습니다. 이에 따라 Chrome은 안정적이고 신뢰할 수 있는 환경을 보장하기 위해 이 동작을 조사하는 동시에 Android에서 SharedWorker를 다시 사용 설정합니다.

공유 작업자의 수명 연장

이 업데이트는 SharedWorker 생성자에 새 옵션인 extendedLifetime: true를 추가합니다. 이렇게 하면 현재 모든 클라이언트가 언로드된 후에도 공유 작업자가 활성 상태를 유지하도록 요청합니다. 기본 사용 사례는 서비스 작업자에 의존하지 않고 페이지가 언로드된 후 JavaScript가 필요한 비동기 작업을 페이지에서 실행할 수 있도록 하는 것입니다.

프롬프트 API

프롬프트 API를 사용하면 웹 개발자가 브라우저에서 제공하는 온디바이스 AI 언어 모델에 직접 액세스할 수 있습니다. API 디자인은 클라우드 API 모양에 맞춰 세부적인 제어를 제공합니다. 이렇게 하면 개별 사용 사례에 맞게 모델 상호작용으로 사이트를 점진적으로 개선할 수 있습니다. 이는 작업 기반 언어 모델 API (예: Summarizer API)와 개발자가 제공한 ML 모델을 사용하여 일반화된 온디바이스 추론을 위한 다양한 API 및 프레임워크 를 보완합니다. 초기 구현은 텍스트, 이미지, 오디오 입력은 물론 응답 제약 조건이 생성된 텍스트가 사전 정의된 정규 표현식 및 JSON 스키마 형식을 준수하도록 합니다.

다양한 사용 사례를 지원합니다. 예를 들어 이미지 캡션을 생성하고, 시각적 검색을 실행하고, 오디오를 스크립트 작성하고, 사운드 이벤트를 분류하고, 특정 안내에 따라 텍스트를 생성하고, 멀티모달 소스 자료에서 정보 또는 통계를 추출할 수 있습니다.

이 API는 이미 Chrome 확장 프로그램에서 제공되었습니다. 이 인텐트는 웹에서의 제공을 추적합니다. 엔터프라이즈 정책인 GenAILocalFoundationalModelSettings를 사용하면 기본 모델 다운로드를 사용 중지할 수 있으며, 이 경우 해당 API는 사용할 수 없게 됩니다. 엔터프라이즈 관리자는 BuiltInAIAPIsEnabled 정책을 설정하여 다른 온디바이스 GenAI 기능을 허용하면서 기본 제공 AI API 사용을 차단할 수도 있습니다.

언어 지원 로그:

Chrome 139 및 이전 버전은 영어 ('en')만 지원했습니다.
Chrome 140에서는 스페인어 및 일본어 ('es' 및 'ja') 지원이 추가되었습니다.

보안 결제 확인 기능 가져오기

이 기능은 웹 개발자가 보안 결제 확인의 브라우저 구현 기능을 가져올 수 있도록 하는 새 정적 메서드를 결제 요청 API에 추가합니다. 이렇게 하면 웹 개발자가 보안 결제 확인에 사용할 수 있는 기능을 파악하는 데 도움이 됩니다. 그런 다음 이러한 기능으로 보안 결제 확인을 사용할지 결정할 수 있습니다.

IDNA ContextJ 규칙

IDNA는 도메인 이름의 비ASCII 문자를 위한 메커니즘입니다. http://네이버.한국/과 같은 URL을 http://xn--950bt9s8xi.xn--3e0b707e/ (naver.com으로 리디렉션)으로 인코딩합니다.

URL 사양은 IDNA2008에서 ContextJ 규칙을 사용 설정하는 CheckJoiners 플래그를 설정합니다. 이렇게 하면 URL의 대부분의 위치에서 ZWNJ (U+200C ZERO WIDTH NON-JOINER) 및 ZWJ (U+200D ZERO WIDTH JOINER)가 허용되지 않습니다. 구현은 이 규칙이 구현되는 ICU에 UIDNA_CHECK_CONTEXTJ 옵션을 전달합니다.

동일한 src 재할당 시 no-store 이미지 재사용

이 기능을 사용하면 동일한 src 값이 <img> 요소에 다시 할당될 때 동일한 문서에서 사용 가능한 이미지 재사용이 Cache-Control: no-store 다시 로드를 우회할 수 있습니다. 이전에는 이미 디코딩되어 문서에서 사용할 수 있는 경우에도 Blink가 이미지를 다시 가져왔습니다. 이는 기존 Gecko 및 WebKit 동작과 일치합니다.

리소스 타이밍에 `contentType` 필드 추가

이 기능은 서버에서 반환된 대로 가져온 리소스의 콘텐츠 유형에 해당하는 문자열을 보유하기 위해 contentType 필드를 PerformanceResourceTiming에 추가합니다.

드래그 시작 시 포인터 이벤트 표시 안함

HTML 사양에 따르면 드래그가 시작되면 사용자 에이전트는 포인터 이벤트 스트림이 종료되었으며 이 포인터에서 더 이상 이벤트를 예상해서는 안 된다는 것을 나타내기 위해 적절한 이벤트를 드래그 소스에 전송해야 합니다. 이 코드는 마우스 이벤트에 대해 부분적으로 구현되었고 Android의 터치 드래그에 대해 완전히 구현되었습니다. 이 기능을 사용하면 Chrome은 다른 모든 플랫폼에서 이 사양 요구사항을 완전히 충족하는 것을 목표로 합니다. 실제로 이는 드래그가 시작된 후 드래그 소스가 현재 이벤트 스트림이 완료되었음을 나타내는 pointercancel, pointerout, pointerleave 이벤트를 수신한다는 의미입니다.

WebRTC 데이터 채널: 항상 데이터 채널 협상

이 기능은 데이터 채널을 만들기 전에 애플리케이션이 SDP 제안에서 데이터 채널을 협상하는 방법을 정의하는 WebRTC 확장 프로그램인 alwaysNegotiateDataChannels를 구현합니다. 또한 오디오 또는 동영상 m 섹션 전에 데이터 m= 섹션을 협상하고 [BUNDLE]의 '제안자 태그가 지정된 m= 섹션'으로 사용합니다.

즉, alwaysNegotiateDataChannels: true로 RTCPeerConnection을 만든 다음 createOffer()를 호출하면 SDP에 애플리케이션 m-라인이 있는 제안이 생성됩니다. 예를 들면 다음과 같습니다.

  const pc = new RTCPeerConnection({
    alwaysNegotiateDataChannels: true});
  const offer = await pc.createOffer();

오디오 트랜시버와 데이터 채널도 추가하면 제안은 SDP에서 애플리케이션 m-라인과 오디오 m-라인을 협상합니다.

  const pc = new RTCPeerConnection({
    alwaysNegotiateDataChannels: true});
  pc.addTransceiver('audio');
  pc.createDataChannel('somechannel');
  const offer = await pc.createOffer();

새 오리진 트라이얼

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

에이전트 제휴 로그인

에이전트 브라우저가 제휴 계정을 사용하여 웹사이트에 사용자를 안전하게 로그인할 수 있도록 지원하는 FedCM 확장 프로그램 세트입니다.

연결 허용 목록

연결 허용 목록은 문서 또는 작업자에서 Fetch API 또는 기타 웹 플랫폼 API를 통해 시작된 연결을 제한하여 외부 엔드포인트를 명시적으로 제어할 수 있도록 설계된 기능입니다. 제안된 구현은 HTTP 응답 헤더를 통해 서버에서 승인된 엔드포인트 목록을 배포합니다. 사용자 에이전트가 페이지를 대신하여 연결을 설정하기 전에 에이전트는 이 허용 목록에 대해 대상을 평가합니다. 확인된 엔드포인트에 대한 연결은 허용되지만 목록의 항목과 일치하지 않는 연결은 차단됩니다.

컨테이너 타이밍

컨테이너 타이밍 API를 사용하면 DOM의 주석 처리된 섹션이 화면에 표시되고 초기 페인트를 완료한 시점을 모니터링할 수 있습니다. DOM의 하위 섹션을 containertiming 속성으로 표시하고 (요소 타이밍 API의 elementtiming과 유사) 해당 섹션이 처음 페인트될 때 성능 항목을 수신할 수 있습니다. 이 API를 사용하면 페이지의 다양한 구성요소의 타이밍을 측정할 수 있습니다.

선언적 CSS 모듈 스크립트

선언적 CSS 모듈 스크립트는 기존 스크립트 기반 CSS 모듈 스크립트의 확장입니다. 이를 통해 개발자는 선언적 섀도우 루트를 포함한 선언적 스타일시트를 섀도우 루트와 공유할 수 있습니다. 개발자는 인라인 스타일 모듈을 <style type="module" specifier="foo">를 사용하여 정의하고 선언적 모듈을 선언적 섀도우 DOM에 specifier 또는 <template shadowrootmode="open" shadowrootadoptedstylesheets="foo">와 같은 URL을 참조하여 적용할 수 있습니다.

캔버스 내 HTML

HTML-in-canvas 는 콘텐츠의 상호작용성과 접근성을 유지하면서 렌더링 DOM 요소를 캔버스 또는 WebGL / WebGPU 텍스처로 직접 맞춤설정할 수 있는 새로운 API입니다. 캔버스 요소 선택 속성 (layoutsubtree), 하위 요소 그리기 메서드 (2d: drawElementImage, webgl:texElementImage2D, webgpu: copyElementImageToTexture), 상호작용을 위해 화면에서 요소의 변환을 올바르게 업데이트하는 방법의 세 부분으로 구성됩니다.

긴 애니메이션 프레임 스타일 지속 시간

이 기능은 긴 애니메이션 프레임 API에 styleDuration 및 forcedStyleDuration 정보를 추가합니다. 이렇게 하면 개발자가 스타일과 레이아웃 시간을 구분할 수 있습니다.

`OpaqueRange`

OpaqueRange는 양식 컨트롤 값 (예: <textarea> 또는 텍스트 <input>) 내의 실시간 텍스트 범위를 나타내므로 개발자는 범위와 유사한 API를 사용하여 값 텍스트로 작업할 수 있습니다.

getBoundingClientRect() 및 getClientRects()와 같은 작업을 사용 설정하고 인라인 추천, 강조표시, 고정된 팝오버와 같은 UI에 CSS Highlights API와 함께 사용할 수 있습니다. 값 오프셋만 노출하고 (startContainer 및 endContainer에 null 반환) 캡슐화를 유지하므로 DOM 엔드포인트와 내부 구조가 노출되지 않습니다.

HTML에서 처리 명령어 파싱

처리 명령어 (구문: <?target data>)는 XML에 노출된 기존 DOM 구성입니다. 이 구성은 요소가 아닌 노드 객체가 문서 처리에 의미론적 의미를 갖도록 합니다. 예를 들어 새 DOM 요소가 필요하지 않고 CSS와 관련된 DOM 구조를 변경하지 않고도 스트리밍 또는 강조표시를 위한 범위를 나타내는 데 사용할 수 있습니다. 버퍼링 및 스트리밍 방법에 관한 HTML 파서의 지시어로 사용할 수도 있습니다.

권한 정책: focus-without-user-activation

이 정책은 focus-without-user-activation 권한 정책을 통해 삽입자가 삽입된 콘텐츠의 프로그래매틱 포커스를 제어할 수 있도록 합니다. 프레임에 대해 정책이 거부되면 사용자 활성화에 의해 트리거되지 않는 한 프로그래매틱 포커스 호출 (element.focus(), autofocus, window.focus(), dialog.showModal(), 팝오버 포커스)이 차단됩니다. 클릭 또는 탭과 같은 사용자 시작 포커스는 영향을 받지 않습니다. Permissions-Policy HTTP 응답 헤더 또는 iframe allow 속성을 통해 정책을 설정할 수 있습니다. 포커스 위임이 지원됩니다. 포커스가 있는 상위 프레임은 하위 프레임에 정책이 거부된 경우에도 프로그래매틱 방식으로 포커스를 하위 iframe에 전달할 수 있습니다. 프레임에 포커스가 있으면 자체 하위 트리 내에서 포커스를 이동할 수 있습니다.

프롬프트 API 샘플링 매개변수

이 기능은 프롬프트 API에 샘플링 매개변수를 추가합니다. 이러한 매개변수는 모델에서 토큰이 샘플링되는 방식을 제어하여 개발자가 출력의 창의성 또는 무작위성을 제어할 수 있도록 합니다. 또한 설정된 값을 읽기 위해 LanguageModel 인스턴스에 속성을 추가합니다. 또한 이러한 매개변수의 기본값과 최댓값을 가져오는 정적 LanguageModel 함수를 추가합니다. 첫 번째 구현은 temperature 및 topK 매개변수를 추가합니다.

웹 앱 HTML 설치 요소

이 기능을 사용하면 웹사이트에서 사용자에게 웹 앱을 설치하라는 메시지를 선언적으로 표시할 수 있습니다. 요소는 선택적으로 두 개의 속성을 허용하므로 다른 출처의 콘텐츠를 설치할 수 있습니다.

Chrome 148 베타 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.