이제 Modern Web Guidance가 안정화되었습니다. 전문가가 검증한 웹 개발 권장사항으로 코딩 에이전트를 업그레이드하세요. 공지 확인하기

Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

Chrome 148 베타

Rachel Andrew Technical Writer

게시일: 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 규칙에 대한 지원을 기능 감지할 수 있도록 합니다.

`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 및 블루투스 기기를 통해 연결할 수 있습니다. 이제 Android에서 API가 지원됩니다.

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

WebGPU `linear_indexing` 기능

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

Android의 `SharedWorker` 지원

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

하지만 GitHub의 최근 토론에 따르면 SharedWorker 프로세스 수명 주기의 예측 불가능한 특성이 이전에 생각했던 것만큼 큰 문제가 아닐 수도 있습니다. 이를 바탕으로 Chrome은 Android에서 SharedWorker를 다시 사용 설정하는 동시에 안정적이고 신뢰할 수 있는 환경을 보장하기 위해 이 동작을 조사하고 있습니다.

공유 워커의 수명 연장

이 업데이트에서는 SharedWorker 생성자에 extendedLifetime: true라는 옵션이 새로 추가되었습니다. 이 옵션은 현재 연결된 모든 클라이언트의 로드가 취소된 후에도 공유 워커를 활성 상태로 유지하도록 요청합니다. 페이지의 로드가 취소된 후에도 서비스 워커에 의존할 필요 없이 JavaScript가 필요한 비동기 작업을 실행할 수 있도록 하기 위해 주로 사용됩니다.

Prompt API

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

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

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

언어 지원 로그:

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

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

이 기능은 Payment Request API에 새로운 정적 메서드를 추가하여 웹 개발자가 브라우저의 보안 결제 확인 구현 기능을 사용할 수 있도록 합니다. 이를 통해 웹 개발자는 보안 결제 확인에 사용할 수 있는 기능을 알 수 있습니다. 그런 다음 이러한 기능을 사용하여 보안 결제 확인을 사용할지 결정할 수 있습니다.

IDNA ContextJ 규칙

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

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

same-src 재할당 시 no-store 이미지 재사용

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

Resource Timing에 `contentType` 필드 추가

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

드래그 시작 시 포인터 이벤트 억제

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

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

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

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

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

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

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

새로운 오리진 트라이얼

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

에이전트형 제휴 로그인

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

연결 허용 목록

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

컨테이너 타이밍

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

선언적 CSS 모듈 스크립트

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

HTML-in-canvas

HTML-in-canvas는 콘텐츠의 상호작용성과 접근성을 유지하면서 캔버스 또는 WebGL/WebGPU 텍스처에 직접 렌더링 DOM 요소를 맞춤설정할 수 있는 새로운 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 구성입니다. 이 구문을 사용하면 요소가 아닌 노드 객체가 문서 처리에 시맨틱 의미를 가질 수 있습니다. 예를 들어 CSS와 관련하여 새 DOM 요소를 요구하거나 DOM 구조를 변경하지 않고도 스트리밍 또는 강조 표시의 범위를 나타내는 데 사용할 수 있습니다. 버퍼링 및 스트리밍 방법에 관한 HTML 파서의 지시어로 사용할 수도 있습니다.

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

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

Prompt API 샘플링 파라미터

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

웹 앱 HTML 설치 요소

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

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