월간 크롬 이슈 리포트 2024년 10월호
들어가며
프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다.
💡 각 항목은 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를 그대로 인용했다.
목차
-
Chrome 131
- ⚠️ CSS
inset-area의position-area로의 이름 변경 📌 - ⚠️ WebGPU 내 GPUAdapterInfo 정보를 가져오는 방식 변경
- ✅ CSS Anchor 조회 범위 제한을 위한
anchor-scope속성 추가 - ✅ CSS
font-variant-emoji속성 추가 - ✅
COOP에noopener-allow-popups값 추가 - ✅ CSS
@page규칙에margin-box값 추가 - ✅ CSS
@property규칙에<string>구문 요소 이름 지원 - ✅ CSS 상대 색상 구문에서
currentcolor지원 - 🧪
inset및margin속성에 대해anchor-size()허용 - 🧪 Summarizer API
- 🗓️ 배포 예정일
- ⚠️ CSS
-
Chrome 132
- ⚠️ Intl Locale 객체의 getters 속성 지원 중단 📌
- 🗓️ 배포 예정일
-
Chrome 133
- ✅ 내부망 페이지 이동 시 사전 요청 발송 - 경고 모드
- 🗓️ 배포 예정일
-
Chrome NEXT
- ⚠️ unload 이벤트 지원 중단 📌
- ⚠️ DOM 요소 제거 시 blur 이벤트가 발생하지 않도록 변경 📌
- ⚠️ 제3자 쿠키 지원 중단 📌
- ⚠️ WebView에서 CHIPS 임시 비활성화
1. Chrome 131
⚠️ CSS inset-area을 position-area로 이름 변경 📌
inset-area는 anchor 요소에 대한 위치 지정에 그리드 기반 개념을 제공한다.
inset-area 속성이 inset 속성과 함께 사용할 수 없다는 오해를 줄 수 있다.
CSSWG는 초기 기획으로 position-area가 제안되었으나 inset 속성과 관련이 있어 inset-area로 수정되었다고 말했다.
토론 끝에 CSSWG는 inset-area을 position-area로 변경하기로 결정했다.
한 편에서는 이미 inset-area가 많이 사용되고 있어 이름을 변경하지 말자는 의견도 있다.
- Firefox: 의견 없음
- Safari: 의견 없음
- 웹 개발자: 의견 없음
참조
⚠️ WebGPU 내 GPUAdapterInfo 정보를 가져오는 방식 변경
WebGPU는 GPUAdapterInfo의 requestAdapterInfo 메서드가 불필요한 동작을 포함하고 있어 GPUAdapter의 info 속성으로 대체된다.
GPUAdapter의 인포(requestAdapterInfo) 속성은 아직 어떤 브라우저에도 구현되지 않아 큰 영향도는 없다.
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
- Firefox: 의견 없음
- Safari: 의견 없음
- 웹 개발자: 의견 없음
참조
✅ CSS Anchor 조회 범위 제한을 위한 anchor-scope 속성 추가
anchor-scope 속성은 anchor-name의 조회 범위를 특정 요소의 하위 트리로 제한한다.
li {
anchor-name: --list-item;
anchor-scope: --list-item;
}
li .positioned {
position: absolute;
position-anchor: --list-item;
position-area: inline-start;
}참조
✅ CSS font-variant-emoji 속성 추가
오래된 이모티콘들은 흑백 텍스트 또는 다색 이모티콘으로 렌더링 될 수 있다.
☺︎✈︎☢︎☣︎☘︎☠︎♻︎☄︎☂︎☃︎☹︎☮︎⚠︎⛱︎✌︎✂︎✍︎✏︎☯︎ℹ︎♠︎♣︎⚖︎⚰︎✔︎➡︎또한 특정 글꼴이나 운영체제에 따라 이모티콘이 다르게 보이거나 누락되어 변형될 수 있다.
국가 이모티콘
운영체제에 따른 이모티콘
MacOS
Windows
CSS font-variant-emoji를 사용하면 웹 개발자가 이모지 표현을 CSS 속성으로 쉽게 제어할 수 있다. 다색 이모티콘으로 표현하고 싶은 경우 emoji를, 흑백 텍스트로 표현하고 싶은 경우 text 속성 값을 사용한다.
h1 {
font-variant-emoji: emoji;
}
h1 {
font-variant-emoji: text;
}
참조
✅ COOP에 noopener-allow-popups 값 추가
COOP(Cross-Origin-Opener-Policy)는 다른 사이트의 창을 열 때 창이 열린 사이트와의 관계를 제어하는 정책이다.
일부 상황에 보안 요구 사항 수준이 다른 애플리케이션이 포함될 수 있다.
COOP에 noopener-allow-popups 값을 추가하여 동일 출처 애플리케이션이 열리더라도 스크립팅이 되지 않도록 방지할 수 있다.
참조
✅ CSS @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;
}
// ...
}
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
참조
✅ CSS @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;
}이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
참조
✅ CSS 상대 색상 구문에서 currentcolor 지원
currentcolor 키워드는 설정된 color 색상을 다른 CSS 요소로 사용할 때 유용하게 사용할 수 있다.
div {
color: red;
border: 5px solid currentcolor; // red
box-shadow: 0 0 5px solid currentcolor; // red
}CSS 상대 색상 구문은 CSS Level 5 명세에 포함된 새로운 기능이다.
기존 색을 바탕으로 상대적인 색을 정의하여 사용할 수 있다.
이제 currentcolor를 상대 색상 구문에서 사용할 수 있다.
body {
color: red;
}
h1 {
border: 1px solid rgb(from currentcolor r g b);
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// result: rgb(255 0 0)
}참조
- Feature: Support currentcolor in Relative Color Syntax
- Chrome for Developers - CSS 상대 색상 구문
- CSS Tricks - currentcolor
🗓️ 배포 예정일
Chrome 131은 2024년 11월 6일에 정식 배포 예정이다.
🧪 inset 및 margin 속성에 대해 anchor-size() 허용
CSS 스펙이 변경되어 inset 및 margin 속성에 대해 anchor-size() 값을 허용한다.
- Firefox: 의견 없음
- Safari: 의견 없음
- 웹 개발자: 의견 없음
참조
- Feature: CSS Anchor Positioning: allow anchor-size() in inset and margin Properties
- MDN - anchor-size()
- CSSWG - anchor-size()
🧪 Summarizer API
크롬은 브라우저에서 사용할 수 있는 Built-in AI APIs를 개발 중이다.
이 중 Summarizer API는 AI 언어 모델을 기반으로, 입력 텍스트의 요약본을 생성하는 JavaScript API이다.
데모에서 확인할 수 있다.
참조
2. Chrome 132
⚠️ Intl Locale 객체의 getters 속성 지원 중단 📌
Intl Locale Info API는 ECMAScript의 TC39 위원회에서 개발 중인 Stage 3의 제안이다. 이 API는 Intl.Locale 객체를 확장하여 지역(locale)에 대한 다양한 정보와 사용자가 위치한 지역의 문화적 요소를 더 잘 이해하고 처리할 수 있도록 돕는 정보를 제공한다.
몇 가지 getter 메서드가 함수로 제안이 수정됨에 따라, deprecated(사용 중단)된 getter를 제거하고 새로 제안된 함수로 다시 출시된다.
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
- Firefox: 의견 없음
- Safari: 의견 없음
- 웹 개발자: 의견 없음
참조
🗓️ 배포 예정일
Chrome 132은 2025년 1월 8일에 정식 배포 예정이다.
3. Chrome 133
✅ 내부망 페이지 이동 시 사전 요청 발송 - 경고 모드
내부망 보안 강화를 위한 내부망 접근 규칙(Private Network Access)의 일부를 적용한다. 내부망에서 페이지 이동 시 접근 가능 여부를 먼저 확인하며, 실패 시 개발자 도구에 경고를 노출한다.
내부망에서 페이지를 이동하면 브라우저는 서버가 보안 컨텍스트(HTTPS)를 사용하는지 확인한다. 그리고 사전 요청을 보내 서버가 내부망 접근을 허용하는지 확인한다.
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Allow-Credentials: true
Access-Control-Allow-Private-Network: true서버가 위처럼 접근을 허용하면 요청을 그대로 진행하며, 거부하면 개발자 도구에 경고를 노출한다. 크롬은 보안 강화를 위해 점차 경고를 노출하는 대신 요청을 실패 처리할 예정이다. 참고로, Chrome 104에서 하위 리소스(.js, .css 등)에는 미리 같은 기능을 적용했다.
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
참조
- Feature: Private network access checks for navigation requests: warning-only mode
- Private Network Access
🗓️ 배포 예정일
Chrome 133은 2025년 1월 29일에 정식 배포 예정이다.
4. Chrome NEXT
⚠️ unload 이벤트 지원 중단 📌
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 요소 제거 시 blur 이벤트가 발생하지 않도록 변경한다. 기존 명세에는 포커스된 DOM 요소를 제거하는 경우에 대한 정의가 없어 Chromium 기반의 브라우저는 포커스된 DOM 요소 제거 시 해당 요소에 blur 이벤트를 발생시켰다. 최신 명세에서 DOM 요소를 제거하는 경우, 포커스 제거 단계(blur, change 이벤트 발생)를 수행하지 않도록 정의함에 따라 Chrome도 포커스 제거 단계를 수행하지 않도록 변경할 예정이다.
다만 정식 적용 일정은 불분명하다. 크롬은 예기치 못한 버그가 있을 수 있어 관련 사이드 이펙트를 꼼꼼히 검토 후 기능을 적용한다는 입장이다.
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
- Firefox: 배포 완료
- Safari: 배포 완료
- 웹 개발자: 의견 없음
참조
⚠️ 제3자 쿠키 지원 중단 📌
제3자 쿠키(Third-Party Cookies)는 현재 도메인과 다른 도메인에서 발행한 쿠키를 말한다. 제3자 쿠키를 활용하면 사용자의 취향, 활동 정보 등을 파악할 수 있어 광고 마케팅 분야에서 자주 사용했으나, 원하지 않는 개인정보까지 유출될 수 있다는 큰 단점이 있다.
Chrome은 이미 관련 법 준수를 위해 2020년 1월부터 제3자 쿠키의 중단을 예고했다. 그동안 영향이 큰 점을 고려해 지원 중단을 계속 미뤄왔으나, 2024년에는 점진적으로 제3자 쿠키를 지원 중단할 예정이다.
참고로, 구글이 대안으로 사용자의 개인정보는 보호하되, 기존의 제3자 쿠키가 하던 역할을 대체할 수 있는 Privacy Sandbox를 개발 중이다.
현재 배포된 Chrome 127에서 미리보기를 통해 미리 확인할 수 있다.
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
- Firefox: 배포 완료
- Safari: 배포 완료
- 웹 개발자: 복합적
참조
⚠️ WebView에서 CHIPS 임시 비활성화
독립적인 파티션 상태가 있는 쿠키(이하 CHIPS)는 개발자가 최상위 사이트마다 별도의 쿠키 저장소를 사용하여 분할된 스토리지에 쿠키를 사용할 수 있다.
WebView에서 쿠키를 확인하기 위해 사용하는 Android CookieManager API가 CHIPS를 가져올 수 있는 방법을 제공하지 않는다.
WebView에서 CHIPS를 비활성화하고 문제를 해결한 뒤 다시 제공할 수 있도록 준비한다.
이로 인해 실제 내용과 API 내용이 불일치하는 문제가 발생했고 크롬은 이를 해결하기 위해 영향도를 파악중이다.
이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.
- Firefox: 의견 없음
- Safari: 의견 없음
- 웹 개발자: 의견 없음