프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다.
💡 각 항목은 Chrome Platform Status의 Roadmap과 한 달간의 blink-dev 활동 요약을 바탕으로 정리했다.
💡 각 항목의 ⚠️는 지원 중단(Deprecated), ✅는 새로운 기능(Enabled by default), 🧪는 미리 보기(Developer Trial, Origin Trial)를 의미한다.
💡 각 항목 중 기존 서비스에 미치는 영향이 크다고 판단한 항목은 소제목 뒤에 📌 표시를 했다.
💡 지원 중단(⚠️) 외의 항목은 공유 가치가 있다고 판단한 경우에만 포함했다.
💡 미리 보기(🧪)는 chrome://flags
페이지에서 Experimental Web Platform features
를 활성화(Developer Trial) 또는 출처 미리 보기(Origin Trial)를 신청해 사용할 수 있다.
💡 각 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 Chrome Platform Status를 그대로 인용했다.
<position-area>
값이 특정 CSS 속성의 값으로 사용될 때 inset-area()
함수 사용 제거DelegatedInkTrailPresenter
인터페이스에서 expectedImprovement
속성 제거GPUAdapterInfo
정보를 가져오는 방식 변경scrollIntoViews
동작 시 여러 스크롤 컨텐츠에서 동시에 부드러운 스크롤 동작 지원inset-area
의 position-area
로의 이름 변경 📌@page
속성에 margin-box
값 추가@property
속성에 <string>
구문 요소 이름 지원Chrome 129 버전은 2024년 9월 11일에 정식 배포 되었다.
2024년 8월호에서 소개하지 못한 변경 항목을 추가로 공유한다.
<position-area>
값이 특정 CSS 속성의 값으로 사용될 때 inset-area()
함수 사용 제거CSSWG의 명세에 따라 <position-area>
값이 position-try-fallbacks
같은 CSS 속성의 값으로 사용될 때 inset-area()
함수를 사용하지 않고 직접 <position-area>
값을 사용할 수 있게 된다.
- position-try-fallbacks: inset-area(top);
+ position-try-fallbacks: top;
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
<position-area>
<position-area>
Scroll Snap API를 활용하면 스크롤 스냅 위치를 선언적으로 제어 가능한 환경을 만들 수 있다. 예를 들어, 사진 앨범 기능을 제공하는 상황에 어떤 사진이 선택되어 있는지에 따라 스크롤 위치를 제어하거나 추가적인 스타일을 추가할 수 있다.
터치를 통한 스와이프나 마우스 스크롤 동작은 부정확한 입력 특성을 가지고 있어 스크롤 이벤트가 발생했을 때 스크롤의 종료 위치가 정확하게 사진 영역에 맞지 않을 수 있다. 이 API는 이벤트가 발생했을 때 스크롤이 제어된 위치에서 종료될 수 있도록 도와주는 기능을 제공한다.
스냅(snap)이란 스크롤 컨테이너에서 터치 스와이프 혹은 휠 스크린 액션을 발생시킨 정도에 따라 컨테이너의 스크롤을 제어하여 스냅 포트(컨텐트 영역)를 현재 표시하고 있는 자식 요소에 계속 위치시키거나 다음의 자식 요소로 이동시키는 동작이다.
이번 버전에서 스냅 이벤트에 두 가지 타입을 추가한다. 이 이벤트들은 스크롤 제어 시 발생하는 이벤트로 상황에 따라 스크롤 제어를 더욱 효율적으로 할 수 있게 도와준다.
scrollSnapChange
스크롤 완료되어(
scrollEnd
이벤트 이전) 새로운 스냅 요소로 변경되었을 때 발생한다.
scrollSnapChanging
스크롤 하는 동안(
scroll
이벤트 이전) 스크롤러가 스냅 되는 대상이 변경되었을 경우 발생한다.
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
DelegatedInkTrailPresenter
인터페이스에서 expectedImprovement
속성 제거Delegated Ink Trails는 캔버스에 잉크와 같은 입력을 표시할 때 낮은 지연 시간(latency)을 달성하기 위한 API다.
이번에 제거되는 expectedImprovement
속성은 DelegatedInkTrailPresenter
인터페이스의 속성이다. 이는 현재 잉크 지연을 얼마나 개선할 수 있는지 계산한다.
하지만 이 속성은 지문 인식(fingerprinting) 가능성을 높이는 것에 비해 그 가치가 낮다고 판단되어 제거된다.
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
WebGPU는 GPUAdapterInfo
의 requestAdapterInfo
메서드가 불필요한 동작을 포함하고 있어 GPUAdapter
에 info
속성으로 대체된다.
GPUAdapter
정보 속성은 아직 어떤 브라우저에도 구현되지 않아 큰 영향도는 없다.
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
scrollIntoViews
동작 시 여러 스크롤 컨텐츠에서 동시에 부드러운 스크롤 동작 지원이제 scroll-behavior
속성에 smooth
값을 추가한다. 이를 통해 서로의 자식도 부모도 아닌 스크롤 컨테이너에서 동시에 실행될 수 있다.
scrollIntoView
메서드를 사용할 때 두 스크롤 컨텐츠 사이에서 충돌이 발생했다.이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
중첩된 CSS를 직접 지원하기 위한 일환으로 CSSNestedDeclarations 규칙을 추가로 도입한다.
.container {
color: blue;
.child {
color: red;
}
}
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
IndexedDB 사용 시 큰 파일에 접근하는 과정에서 오류가 발생하면, "Failed to read large IndexedDB value"
라는 메시지와 함께 DOMException
이 발생했다.
기존 에러는 에러가 발생한 파일이 복구할 수 있는 상태인지 알 수 있는 방법이 없어 적절한 조치를 취할 수 없게 했다.
이번 변경으로 DOMException
에 NotFoundError
에러를 내려주도록 변경한다. 이 에러에는 에러가 발생한 파일에 대해 복구 가능 여부를 파악할 수 있도록 해 적절한 조치를 취할 수 있도록 한다.
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
스크롤 컨테이너 요소를 자동으로 초점을 맞출 수 있는(focusable) 요소로 취급한다. 브라우저는 스크롤 컨테이너 요소에 tabindex
가 없어도 <input>
, <button>
처럼 해당 요소에 자동으로 초점을 맞추며, 사용자는 화살표 방향키로 해당 요소를 스크롤 할 수 있다.
이는 마우스가 없는 환경에서 접근성을 높이기 위한 조치이다. 하지만 실제 사이트에서 이 기능이 동작하는 경우는 찾기 어려울 것으로 보인다. 이 기능은 하위 요소 중 초점을 맞출 수 있는 요소가 없을 때만 적용되기 때문이다.
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
크롬은 Special Url와 Non-special URL 대해 아래와 같이 정의하고 있다.
크롬은 기존 표준이 아닌 불투명 경로(opaque path)에 대해 파싱 할 때 URL 표준에 적합하지 않은 방식을 채택했다.
호환성 문제를 해결하기 위해 Chromium 브라우저 URL 파서가 표준을 준수해 Non-special URLs를 URL 표준에 맞게 처리한다.
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
Chrome 130은 2024년 10월 9일에 정식 배포 예정이다.
inset-area
의 position-area
로의 이름 변경 📌inset-area
는 anchor
요소에 대한 위치 지정에 그리드 기반 개념을 제공한다.
inset-area
속성이 inset
속성과 함께 사용할 수 없다는 오해를 줄 수 있다.
이에 CSS 그룹은 초기 기획에는 position-area
로 제안되었으나 inset
속성과 관련이 있어 수정되었다고 전달한다.
토론 끝에 CSSWG는 inset-area
의 이름을 position-area
로 변경하기로 결정했다.
다만 한편에서는 많은 문서와 구현에서 inset-area
가 사용되고 있어 이름을 변경하지 말자는 의견도 존재한다.
@page
속성에 margin-box
값 추가CSS @page
는 인쇄 페이지의 다양한 속성을 지정할 수 있는 규칙이다. 이 규칙은 페이지의 여백, 크기, 방향, 색상 등을 지정할 수 있다.
CSS @page
에 margin-box
기능을 추가한다. 이 기능은 페이지의 여백 영역에 대한 스타일을 지정할 수 있게 해준다.
문서를 작성하거나, PDF를 생성할 때 페이지 여백에 번호를 표시하거나, 페이지의 헤더와 푸터를 지정할 때 유용하다.
@page {
margin: 20mm;
@top-left-corner {
content: "1";
background-color: #1a202c;
color: #fff;
text-align: center;
}
@top-left{
content:"2";
background-color:#742a2a;
color:#fff;
text-align:center;
}
// ...
}
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
@property
속성에 <string>
구문 요소 이름 지원CSS @property
속성은 사용자 정의 속성을 정의할 때 사용한다. 이 속성은 사용자 정의 속성을 정의하고, 사용자 정의 속성을 사용할 때 사용하는 문법을 제공한다.
이제 @property
속성에 <string>
구문을 지원한다.
@property --property-content {
syntax: "<string>";
inherits: false;
initial-value: "This string has Content Name";
}
#element::before {
content: var(--property-content);
width: 100px;
height: 10px;
background-color: black;
}
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
Chrome 131은 2024년 11월 6일에 정식 배포 예정이다.
Intl Locale Info API는 ECMAScript의 TC39 위원회에서 개발 중인 Stage 3 단계의 제안이다. 이 API는 Intl.Locale 객체를 확장하여 지역(locale)에 대한 다양한 정보를 제공하며 사용자가 위치한 지역의 문화적 요소를 더 잘 이해하고 처리할 수 있도록 돕는 도구를 제공한다.
하지만 기존에 사용되던 몇몇 getter 메서드가 함수로 제안이 수정됨에 따라 기존에 구현된 deprecated(사용 중단)된 getter를 제거하고, 새로 제안된 함수로 다시 출시한다.
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
Chrome 132은 2024년 12월 11일에 정식 배포 예정이다.
unload
이벤트는 해당 문서를 떠나거나 하위 자원(.js
, .css
등)을 메모리에서 해제할 때 발생하는 이벤트다. 이 이벤트를 이용하면 사용자가 페이지를 종료하기 전에 특정 동작을 실행할 수 있다.
window.addEventListener('unload', (event) => {
navigator.sendBeacon('/api/log', 'unload!');
});
하지만 unload
이벤트는 beforeunload
이벤트와 달리 기본 동작을 취소(event.preventDefault()
)할 수 없어 이벤트가 아예 발생하지 않기도 한다. W3C의 통계에 따르면 unload
이벤트가 제대로 발생하는 경우가 크롬 데스크탑에서는 95%, 모바일에서는 57%~68% 정도로, 이는 모바일 환경의 특성상 브라우저가 아닌 다른 앱을 보다가 브라우저 자체를 종료하는 경우가 빈번하기 때문이다.
영향도가 큰 만큼, 크롬은 점진적으로 unload
이벤트를 제거할 계획이다. 먼저 Permissions-Policy
를 추가해 사용 여부 허용을 결정할 수 있도록 하고, 나중에는 해당 권한의 기본값을 deny
로 바꿀 예정이다. 참고로, Chrome 117에서 unload
이벤트의 허용 여부를 결정하는 Permissions-Policy
의 미리 보기를 추가했다.
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
포커스된 DOM 요소 제거 시 blur
이벤트가 발생하지 않도록 변경한다. 기존 명세에는 포커스된 DOM 요소를 제거하는 경우에 대한 정의가 없어 Chromium 기반의 브라우저는 포커스된 DOM 요소 제거 시 해당 요소에 blur
이벤트를 발생시켰다. 최신 명세에서 DOM 요소를 제거하는 경우, 포커스 제거 단계(blur
, change
이벤트 발생)를 수행하지 않도록 정의함에 따라 Chrome도 포커스 제거 단계를 수행하지 않도록 변경할 예정이다.
다만 정식 적용 일정은 불분명하다. 크롬은 예기치 못한 버그가 있을 수 있어 관련 사이드 이펙트를 꼼꼼히 검토 후 기능을 적용한다는 입장이다.
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
제3자 쿠키(Third-Party Cookies)는 현재 도메인과 다른 도메인에서 발행한 쿠키를 말한다. 제3자 쿠키를 활용하면 사용자의 취향, 활동 정보 등을 파악할 수 있어 광고 마케팅 분야에서 자주 사용했으나, 원하지 않는 개인정보까지 유출될 수 있다는 큰 단점이 있다.
Chrome은 이미 관련 법 준수를 위해 2020년 1월부터 제3자 쿠키의 중단을 예고했다. 그동안 영향이 큰 점을 고려해 지원 중단을 계속 미뤄왔으나, 2024년에는 점진적으로 제3자 쿠키를 지원 중단할 예정이다.
참고로, 구글이 대안으로 사용자의 개인정보는 보호하되, 기존의 제3자 쿠키가 하던 역할을 대체할 수 있는 Privacy Sandbox를 개발 중이다.
현재 배포된 Chrome 127에서 미리보기를 통해 미리 확인할 수 있다.
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
독립적인 파티션 상태가 있는 쿠키(이하 CHIPS)는 개발자가 최상위 사이트마다 별도의 쿠키 저장소를 사용하여 분할된 스토리지에 쿠키를 사용할 수 있다.
WebView에서 쿠키를 확인하기 위해 사용하는 Android CookieManager API
가 CHIPS
를 가져올 수 있는 방법을 제공하지 않는다.
WebView에서 CHIPS
를 비활성화하고 문제를 해결한 뒤 다시 제공할 수 있도록 준비한다.
이로 인해 실제 내용과 API 내용이 불일치하는 문제가 발생했고 크롬은 이를 해결하기 위해 영향도를 파악중이다.
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.