ํ๋ฐํธ์๋ ๊ฐ๋ฐ์ ๊ฐ์ฅ ๋ง์ ์ํฅ์ ์ฃผ๋ ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ์ ๋ฒ์ ๋ณ ๋ณ๊ฒฝ ์์ ํญ๋ชฉ์ ์ ๋ฆฌ ๋ฐ ๊ณต์ ํ๋ค.
๐ก ๊ฐ ํญ๋ชฉ์ 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 136
h1
๊ธ๊ผด ํฌ๊ธฐ ๊ท์น ์ ๊ฑฐ ๐click
์ด๋ฒคํธ ํ๊น ์์ ์ค์ RegExp.escape()
๋ฉ์๋ ์ถ๊ฐCanvasRenderingContext2D
ํ
์คํธ ๋ ๋๋ง ๊ตฌํ ์
๋ฐ์ดํธChrome 137
transform
์์ฑ ์ง์ ๊ฐ๋ฅChrome 138
Chrome NEXT
canLoadOpaqueURL()
์ HTMLFencedFrameElement์์ ์ ๊ฑฐํ๊ณ , navigator.canLoadAdAuctionFencedFrame()
์ ํ์ค์ผ๋ก ์ฌ์ฉํ๋๋ก ๊ถ์ฅํ๋ค.
2023๋ ๋ถํฐ ํ๊ธฐ ๊ฒฝ๊ณ ๊ฐ ํ์ ์ค์ด๋ฉฐ, ์๋ก์ด API๋ก์ ์ ํ์ ๊ถ์ฅํ์ผ๋ฉฐ ์ด์ ์ง์ ์ค๋จํ๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
h1
๊ธ๊ผด ํฌ๊ธฐ ๊ท์น ์ ๊ฑฐ ๐HTML ๋ช
์ธ์๋ <article>
, <aside>
, <nav>
, <section>
ํ๊ทธ ๋ด์ ์ค์ฒฉ๋ <h1>
ํ๊ทธ์ ์ ์ฉ๋๋ ํน์ ๊ท์น์ด ํฌํจ๋์ด ์๋ค.
์ด ๊ท์น์ <h1>
์ ๊ธ๊ผด ํฌ๊ธฐ๋ฅผ ์๊ฐ์ ์ผ๋ก <h2>
์ฒ๋ผ ์ถ์ํ์ง๋ง, ์ ๊ทผ์ฑ ํธ๋ฆฌ์๋ ์ด๋ฌํ ๋ฑ๊ธ ํ๋ฝ(demotion)์ด ๋ฐ์๋์ง ์๊ณ <h1>
ํ๊ทธ๋ก ์ธ์ํ๋ค. ์ด๋ก ์ธํด ์ ๊ทผ์ฑ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
click
์ด๋ฒคํธ ํ๊น ์์ ์ค์ Pointer Capture
๊ฐ ์๋ ๊ธฐ์กด click
์ด๋ฒคํธ๋ pointerdown
๊ณผ pointerup
์ด ๋ฐ์ํ ์์๋ค์ ๊ฐ์ฅ ๊ฐ๊น์ด ๊ณตํต ์กฐ์(nearest common ancestor
)์ ์ ๋ฌ๋๋ค.
์๋ก์ด Pointer Capture
์ฌ์ฉ ์ pointerup
์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ ๋์ ํฌ์ธํฐ๊ฐ ์บก์ฒ๋๊ณ , click
์ด๋ฒคํธ๋ ์บก์ฒ๋ ๋์(captured target
)์ผ๋ก ์ ๋ฌ๋๋ค.
๋ฐ๋ผ์ ๋ช
์์ ์ผ๋ก ์บก์ฒ๋ ์์๊ฐ click
์ด๋ฒคํธ๋ฅผ ๋ฐ์ ์ ์์ด ์ง๊ด์ ์ผ๋ก ์ ์ดํ ์ ์๋ค.
const box = document.getElementById("box");
box.addEventListener("pointerdown", (event) => {
// ๋ช
์์ ์ผ๋ก ์บก์ฒ๋ ๋์ ์ค์
box.setPointerCapture(event.pointerId);
console.log("Pointer captured!");
});
box.addEventListener("pointerup", () => {
console.log("Pointer up!");
});
// ๊ธฐ์กด์๋ click์ด ๋ถ๋ชจ์์ ๋ฐ์ํ์ง๋ง, ์ด์ ๋ ์บก์ฒ๋ box ์์์์ click์ด ๋ฐ์.
box.addEventListener("click", () => {
console.log("Click event on box!");
});
PEWG(Pointer Events Working Group) ์์ ๋
ผ์๋ฅผ ๊ฑฐ์ณ 2023๋
PointerEvents
์คํ์ ์์ ํ๋ฉฐ ๊ฒฐ์ ๋์๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
์น ๊ฐ๋ฐ์๊ฐ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ํน์ ํจ์๋ฅผ ํ์ฑํ๊ณ ์ปดํ์ผํด์ผ ํ๋์ง์ ๋ํ ์ฃผ์์ eagerCompilation
์ฃผ์์ ํตํด ์ถ๊ฐํ ์ ์๋ค.
//# eagerCompilation=all
์ด๋ฅผ ํตํด, ์๋์ ๊ฐ์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐ ํ ์ ์๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
Windows์ Linux์์ Chromium์ ์คํฌ๋กค๋ฐ(์ค๋ฒ๋ ์ด ๋ฐ ๋น์ค๋ฒ๋ ์ด ๋ชจ๋)๋ฅผ Windows 11์ Fluent ๋์์ธ์ ๋ง์ถฐ ๊ฐ์ ํ๋ค.
๋น์ค๋ฒ๋ ์ด ์คํฌ๋กค๋ฐ๋ ๊ธฐ๋ณธ ์ ์ฉ์ผ๋ก ์ฌ์ฉ์ ๊ฐ์ ์์ด ์ฆ์ ๋ฐ์๋๋ฉฐ, ์ค๋ฒ๋ ์ด ์คํฌ๋กค๋ฐ์ ๊ฒฝ์ฐ ์ถ๊ฐ ์ค์ ๋ฐฉ์์ ๋ ผ์ํ๊ณ ์๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
:visited ์์ฌ ํด๋์ค๋ ์ฌ์ฉ์๊ฐ ํน์ ์ฌ์ดํธ๋ฅผ ๋ฐฉ๋ฌธํ๋์ง ํ์ธํ ์ ์๋ค.
์ด๋ฌํ ํน์ฑ์ ํ์ฉํด ์ฌ๋ฌ๊ฐ์ง ์ฌ์ด๋ ์ฑ๋ ๊ณต๊ฒฉ(Side-Channel Attacks) ์ด ๊ฐ๋ฅํ๋ค.
Timing Attacks
) โ ์คํ์ผ๋ง ์ ์ฉ ์๋ ์ฐจ์ด๋ฅผ ์ด์ฉํ์ฌ ๋ฐฉ๋ฌธ ์ฌ๋ถ ํ์ธPixel Color Attacks
) โ :visited
๋งํฌ์ ์์ ์ฐจ์ด๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ฐ์งProcess-Level Attacks
) โ ๋ธ๋ผ์ฐ์ ์ ๋ด๋ถ ํ๋ก์ธ์ค ๋ณํ๋ฅผ ๊ฐ์ง์ด ๋ฌธ์ ๋ฅผ ์ ์ฉํ๋ฉด, ์ฌ์ฉ์์ ๋ธ๋ผ์ฐ์ง ํ์คํ ๋ฆฌ๋ฅผ ์น ์ฌ์ดํธ์์ ๋ฌด๋จ์ผ๋ก ์์๋ผ ์ ์๋ค.
์ด์ :visited
์คํ์ผ๋ง์ด ์ ์ฉ๋๋ ์กฐ๊ฑด์ด ๊ฐํ๋๋ค.
์๋ 3๊ฐ์ง ๊ธฐ์ค์ผ๋ก ๋ถํ ํ๋ ์ผ์คํค(Triple-Keying
) ๋ฐฉ์์ ์ ์ฉํด ์ธ ๊ฐ์ด ๋์ผํด์ผ :visited
์คํ์ผ๋ง์ด ์ ์ฉ๋๋ค.
๋งํฌ URL
- ๋ฐฉ๋ฌธํ ๋งํฌ์ ์ค์ URLTop-Level Site
- ์ฌ์ฉ์๊ฐ ๋ฐฉ๋ฌธ ์ค์ธ ์ต์์ ์ฌ์ดํธFrame Origin
- ํด๋น ๋งํฌ๊ฐ ์กด์ฌํ๋ ํ๋ ์์ ์ถ์ฒ (iframe ํฌํจ)๋ค๋ง, ์๊ธฐ ์์ ์ ์ฌ์ดํธ(self-link
)๋ก ์ด๋ํ๋ ๊ฒฝ์ฐ ์์ธ๋ก ํ๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
RegExp.escape()
๋ฉ์๋ ์ถ๊ฐRegExp.escape()
๋ ๋ฌธ์์ด์ ์ ๊ท์์์ ์์ ํ๊ฒ ์ฌ์ฉํ ์ ์๋๋ก ์ด์ค์ผ์ดํํ๋ ์๋ก์ด ์๋ฐ์คํฌ๋ฆฝํธ ์ ์ ๋ฉ์๋์ด๋ค.
๊ธฐ์กด์๋ ์๋์ผ๋ก ์ด์ค์ผ์ดํ ์ฒ๋ฆฌ๋ฅผ ํด์ฃผ์ด์ผ ํ์ผ๋ฉฐ, ํน์ ๋ฌธ์๊ฐ ๋๋ฝ๋๊ฑฐ๋ ์ ์ฉ ๋ฐฉ์์ด ๋ฌ๋ผ ์ผ๊ด์ฑ์ด ๋ถ์กฑํ๋ค.
function escapeRegExp(str) {
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
์ด์ ์๋ฐ์คํฌ๋ฆฝํธ API๊ฐ ๊ณต์์ ์ผ๋ก ์ ๊ณตํ๋ ๋ฉ์๋๋ฅผ ํ์ฉํด ์๋ ๊ตฌํ ์์ด ์์ ํ๊ฒ ์ ๊ท์์์ ์ด์ค์ผ์ดํ ๋ฌธ์๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
const str = "Hello. How are you?";
const escaped = RegExp.escape(str);
console.log(escaped);
// ์ถ๋ ฅ: "Hello\. How are you\?"
.
๊ณผ ?
๊ฐ์ ์ ๊ท์ ํน์ ๋ฌธ์๋ค์ด ์๋์ผ๋ก ์ด์ค์ผ์ดํ๋๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
CanvasRenderingContext2D
ํ
์คํธ ๋ ๋๋ง ๊ตฌํ ์
๋ฐ์ดํธCanvasRenderingContext2D์ measureText()
, fillText()
, strokeText()
๋ฉ์๋ ๊ตฌํ์ด ๋ํญ ๋ณ๊ฒฝ๋์๋ค. ์ด๋ ์น์ ์ง์ ๋
ธ์ถ๋๋ ๋ณ๊ฒฝ์ ์๋์ง๋ง, ์ฑ๋ฅ์ ์ํฅ์ ๋ฏธ์น ์ ์๋ค.
์บ๋ฒ์ค๋ฅผ ๋ง์ด ์ฌ์ฉํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์๋ก์ด ๊ตฌํ์ ํ ์คํธํ ์ ์๋๋ก ํ ์คํธ๋ฅผ ์งํํ๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
Chrome 136์ 2025๋ 4์ 23์ผ์ ์ ์ ๋ฐฐํฌ ์์ ์ด๋ค.
Blob URL
์ ์ ๊ทผ์ Storage Key
(์ต์์ ์ฌ์ดํธ, ํ๋ ์ ์ถ์ฒ, ๊ต์ฐจ ์ฌ์ดํธ ์กฐ์์ด ์๋์ง ์ฌ๋ถ)์ ๋ฐ๋ผ Blob URL์ ์ฌ์ฉ์ ์ ํํ๋ค.
์ด์ ๋ฐ๋ผ Storage Key๊ฐ ๋ค๋ฅด๋ฉด ์ ๊ทผ ๋ถ๊ฐ๋ฅํด์ง๋ฏ๋ก, ๊ต์ฐจ ์ฌ์ดํธ๊ฐ Blob URL ๊ณต์ ๊ฐ ์ฐจ๋จ๋๋ค.
์ด๋ฒ ๋ณ๊ฒฝ์ ์ผ๋ก ๊ฐ๋ฐ์์๊ฒ ๋ช ๊ฐ์ง ์ํฅ์ด ์๊ธธ ์ ์๋ค.
window.open(blobUrl)
์ ์ฌ์ฉํ ๋ ํฌ๋ก์ค ์ฌ์ดํธ์ธ ๊ฒฝ์ฐ noopener
๊ฐ ์๋ ์ ์ฉ๋๋ฏ๋ก, ์ด๋ฅผ ํ์ฉํ ํน์ ๋ณด์ ์ทจ์ฝ์ ์ด ๋ฐฉ์ด๋๋ค.Blob URL
์ ์์ฑ ํ ์ผ๋ฐ ์น ํ์ด์ง์์ ์ฌ์ฉํ๋ค๋ฉด, ์ด์ ๋์ํ์ง ์๋๋ค.์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
CSS if()
ํจ์๋ ์กฐ๊ฑด๋ถ ๊ฐ์ ๊ฐ๊ฒฐํ๊ฒ ํํํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ๋ค. ์ด ํจ์๋ ์ธ๋ฏธ์ฝ๋ก ์ผ๋ก ๊ตฌ๋ถ๋ ์กฐ๊ฑด-๊ฐ ์์ ์์ฐจ์ ์ผ๋ก ํ๊ฐํ๋ฉฐ, ์ฒ์์ผ๋ก ์ฐธ์ธ ์กฐ๊ฑด์ ์ฐ๊ด๋ ๊ฐ์ ๋ฐํํ๋ค. ๋ชจ๋ ์กฐ๊ฑด์ด ๊ฑฐ์ง์ผ ๊ฒฝ์ฐ ๋น ํ ํฐ ์คํธ๋ฆผ์ ๋ฐํํ๋ค.
div {
color: var(--color);
background-color: if(style(--color: white): black; else: white);
}
.dark {
--color: black;
}
.light {
--color: white;
}
๊ธฐ์กด์ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ @supports์ ๊ฐ์ ๋ฐฉ๋ฒ๋ณด๋ค ๋ ์ ์ฐํ๊ณ ๊ฐ๊ฒฐํ ๋์์ ์ ๊ณตํ๋ค. ํนํ CSS Mixins์์ ์ฌ์ฉ์ ์ ์ ํจ์์ ๊ฒฐํฉํ์ฌ ํ์ฉ๋ ๊ฐ๋ฅ์ฑ์ด ์ฃผ๋ชฉ๋ฐ๊ณ ์๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
HTTP ํธ๋ํฝ์ ์ํธํ๋์ง ์์ ์ค๊ฐ์ ๊ณต๊ฒฉ(MITM)์ ์ทจ์ฝํ๋ค.
<link rel="prerender" href="http://example.com/page.html">
<link rel="prerender" href="https://example.com/page.html">
HTTP ํ๋กํ ์ฝ url์ด๋ผ๋ ํ๋ฆฌ๋ ๋๋ง์ด ์ํ๋์์ผ๋, ์ด์ HTTP ํ๋กํ ์ฝ์์ ํ๋ฆฌ๋ ๋๋ง์ด ์ฐจ๋จ๋๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
transform
์์ฑ ์ง์ ๊ฐ๋ฅ<svg>
์์๋ XML ๊ธฐ๋ฐ ๋ฒกํฐ ๊ทธ๋ํฝ ํ์ผ ํ์์ผ๋ก, 2์ฐจ์ ๊ทธ๋ํฝ์ ํํํ๊ธฐ ์ํ ํ์ค์ด๋ค.
์ด์ <svg>
๋ฃจํธ ์์์ ์ง์ transform
์์ฑ์ ์ง์ ํ์ฌ ํ์ , ํ๋/์ถ์, ์ด๋, ๊ธฐ์ธ๊ธฐ๊ธฐ ๋ฑ์ ์ ์ฉํด ์ ์ฒด์ ๋ํ ์ขํ๊ณ ์กฐ์์ ๊ฐ๋ฅํ๊ฒ ํ๋ค.
๊ธฐ์กด์๋ <svg>
์์ ์์ ๋ํผ๋ฅผ ์ค์ ํ๊ฑฐ๋, ์ธ๋ถ์์ css
์ค์ ์ ํตํด ๋ณ๊ฒฝํด์ผ ํ๋ค.
<svg transform="rotate(45)" width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="blue"/>
</svg>
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
Chrome 137์ 2025๋ 5์ 21์ผ์ ์ ์ ๋ฐฐํฌ ์์ ์ด๋ค.
WebGL์ด SwiftShader๋ก ์๋ ๋์ฒด๋๋ ๋์์ด ์ค๋จ๋๋ค.
SwiftShader๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด --enable-unsafe-swiftshader
ํ๋๊ทธ๋ฅผ ๋ช
์์ ์ผ๋ก ์ค์ ํด์ผ ํ๋ฉฐ, WebGL ์คํจ ์ ๋์ฒด API(Canvas2D ๋ฑ)๋ฅผ ์ฌ์ฉํ ์ ์๋๋ก ๋๋นํด์ผ ํ๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
Prompt API๋ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ฌ์ฉ์ ์ ๋ ฅ์ ๋ฐํ์ผ๋ก AI ์ธ์ด ๋ชจ๋ธ์ ์ง์ ํธ์ถํ ์ ์๋ ์๋ก์ด Web Platform API์ด๋ค.
์น์์์ ์์ฑํ AI ํตํฉ ์์ ์ฆ๊ฐํจ์ ๋ฐ๋ผ ๊ธฐ์กด์๋ ์๋ฒ ์ธก API๋ฅผ ํธ์ถํด์ผ ํ๋ ๋ชจ๋ธ ํธ์ถ์, ์น ํ์ค API๋ก ๋ก์ปฌ์์ ์ฒ๋ฆฌ ๊ฐ๋ฅํ๋๋ก ๊ตฌํํ๋ค. ๋ํ ๋ก์ปฌ์์ ์คํ๋๋ฏ๋ก ์ฌ์ฉ์์ ๋ก์ปฌ ๋ฐ์ดํฐ์ ์ ๊ทผํ์ง ์์ผ๋ฉฐ, ํ์ตํ์ง ์์ ๊ฐ์ธ์ ๋ณด ๋ณดํธ์ ๋์์ด ๋๋ค.
์ ๋ ฅ ์ ํ์ผ๋ก๋ ํ ์คํธ ์ธ์๋ ์ด๋ฏธ์ง, ์ค๋์ค ๋ฑ์ ์ ๋ ฅ ๊ฐ๋ฅํ๋ฉฐ, ์์ฑํ AI ๊ธฐ๋ฐ ์ธํฐํ์ด์ค๋ ๋์ฐ๋ฏธ ๊ธฐ๋ฅ ๊ตฌํ์ด ๊ฐ๋ฅํ๋ค.
ํฌ๋กฌ์ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ์ ๊ณตํ๋ฉฐ ํฌ๋กฌ ํ์ฅ ํ๋ก๊ทธ๋จ์์๋ ์ฌ์ฉ๊ฐ๋ฅํ๋๋ก ์ฒ๋ฆฌํ์๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
Chrome 138์ 2025๋ 6์ 18์ผ์ ์ ์ ๋ฐฐํฌ ์์ ์ด๋ค.
ํฌ๋กฌ์ ์ด์์ฒด์ ์ ์กฐ์ฌ์ ์ง์ ์ฃผ๊ธฐ์ ๋ฐ๋ผ ๋ธ๋ผ์ฐ์ ์ง์์ ์ ์งํ๋ค.
์ ํ์ด macOS 11 (Big Sur) ์ด์์ฒด์ ์ ๋ํ ๊ณต์ ์ง์์ ์ข ๋ฃํจ์ ๋ฐ๋ผ Chrome 139 ๋ฒ์ ๋ถํฐ ๋ธ๋ผ์ฐ์ ์ง์์ ์ข ๋ฃํ๋ค.
์ข ๋ฃ ์์ ์ ๊ธฐ์ค์ผ๋ก Chrome 138์ผ๋ก ๊ณ์ ์ฌ์ฉ ๊ฐ๋ฅํ์ง๋ง ๋ณด์์ ์ํ์ด ์กด์ฌํ๋ฉฐ ์ ๋ฐ์ดํธ ๋ถ๊ฐ ๋ฐ ๊ฒฝ๊ณ ๋ฉ์์ง๋ฅผ ๋ ธ์ถํ๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
Intl Locale Info API๋ ECMAScript์ TC39์์ ๊ฐ๋ฐ ์ค์ธ Stage 3 ๋จ๊ณ์ ์ ์์ด๋ค. ์ด API๋ Intl.Locale ๊ฐ์ฒด๋ฅผ ํ์ฅํ์ฌ ์ง์ญ(locale)์ ๋ํ ๋ค์ํ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ฉฐ ์ฌ์ฉ์๊ฐ ์์นํ ์ง์ญ์ ๋ฌธํ์ ์์๋ฅผ ๋ ์ ์ดํดํ๊ณ ์ฒ๋ฆฌํ ์ ์๋๋ก ๋๋ ๋๊ตฌ๋ฅผ ์ ๊ณตํ๋ค.
ํ์ง๋ง (์์ํ๋) ๊ธฐ์กด์ (์ฌ์ฉ์๋ค์ด) ์ฌ์ฉํ๋ ์ผ๋ถ getter ๋ฉ์๋ ์ ์์ ์๋กญ๊ฒ ์์ ํ์๋ค. ๋ฐ๋ผ์ ๊ธฐ์กด์ (์ฌ์ฉ์๋ค์ด) ์ฌ์ฉํ๋ getter ๋ฉ์๋๋ฅผ ์ง์ ์ค๋จํ๊ณ , ์๋ก ์ ์๋ ํจ์๋ก ๋ค์ ์ถ์ํ๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
Intl.Segmenter ๊ตฌํ ์ด์ ์ v8 ์์ง ์ ์ฉ ์๋ฐ์คํฌ๋ฆฝํธ API์ด๋ค.
์ด์ ์ฝ 0.03%์ ์ฌ์ฉ๋์ ๋ณด์ฌ ์ ๊ฑฐํ๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
ํฌ์ปค์ค๋ DOM ์์ ์ ๊ฑฐ ์ blur
์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ง ์๋๋ก ๋ณ๊ฒฝํ๋ค. ๊ธฐ์กด ๋ช
์ธ์๋ ํฌ์ปค์ค๋ DOM ์์๋ฅผ ์ ๊ฑฐํ๋ ๊ฒฝ์ฐ์ ๋ํ ์ ์๊ฐ ์์ด Chromium ๊ธฐ๋ฐ์ ๋ธ๋ผ์ฐ์ ๋ ํฌ์ปค์ค๋ DOM ์์ ์ ๊ฑฐ ์ ํด๋น ์์์ blur
์ด๋ฒคํธ๋ฅผ ๋ฐ์์์ผฐ๋ค. ์ต์ ๋ช
์ธ์์ DOM ์์๋ฅผ ์ ๊ฑฐํ๋ ๊ฒฝ์ฐ, ํฌ์ปค์ค ์ ๊ฑฐ ๋จ๊ณ(blur
, change
์ด๋ฒคํธ ๋ฐ์)๋ฅผ ์ํํ์ง ์๋๋ก ์ ์ํจ์ ๋ฐ๋ผ ํฌ๋กฌ๋ ํฌ์ปค์ค ์ ๊ฑฐ ๋จ๊ณ๋ฅผ ์ํํ์ง ์๋๋ก ๋ณ๊ฒฝํ ์์ ์ด๋ค.
๋ค๋ง ์ ์ ์ ์ฉ ์ผ์ ์ ๋ถ๋ถ๋ช ํ๋ค. ํฌ๋กฌ์ ์๊ธฐ์น ๋ชปํ ๋ฒ๊ทธ๊ฐ ์์ ์ ์์ด ๊ด๋ จ ์ฌ์ด๋ ์ดํํธ๋ฅผ ๊ผผ๊ผผํ ๊ฒํ ํ ๊ธฐ๋ฅ์ ์ ์ฉํ๋ค๋ ์ ์ฅ์ด๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
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
์ ๋ฏธ๋ฆฌ ๋ณด๊ธฐ๋ฅผ ์ถ๊ฐํ๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
Protected Audience API๋ ํฌ๋ก์ค ์ฌ์ดํธ ์๋ ํํฐ ์ถ์ ์์ด ๋ฆฌ๋ง์ผํ ๋ฐ ๊ด๊ณ ํ๊ฒํ ์ ์ง์ํ๋ API๋ค.
API ์ ํธ์ ์ง์์ฑ๊ณผ ๋ฌด๊ฒฐ์ฑ์ ๋ณด์ฅํ๋ ๋ฐฉ์์ผ๋ก ์๋ธ๋ฆฌ์์ค ์น ๋ฒ๋ค์ ์ฌ์ฉํ ์ด์ ๋ฒ์ ๊ณผ ํ์ด์ง ์์ fetch()
์์ฒญ์ ํน์ HTTP ์๋ต ํค๋๋ฅผ ์ฌ์ฉํ ์๋ก์ด ๋ฒ์ ์ด ์กด์ฌํ๋ค.
์๋ธ๋ฆฌ์์ค๋ฅผ ์ฌ์ฉํ๋ ์ด์ ๋ฒ์ ์ด 5์ต๋ถ์ 1 ์ ๋๋ก ๋ฎ์ ํ์ด์ง ์ฌ์ฉ๋์ ๋ณด์ด๊ณ ์์ด ์ ๊ฑฐํ๊ณ ์ ํ๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
ISO-2022-JP ๋ฌธ์์ ์ ์๋ ๊ฐ์ง(charset auto-detection)์ ์๋ ค์ง ๋ณด์ ๋ฌธ์ ๊ฐ ์กด์ฌํ๋ค (์ฐธ๊ณ ). ์ฌ์ฉ๋ฅ ์ด ๋งค์ฐ ๋ฎ๊ณ Safari๊ฐ ์ด๋ฅผ ์ง์ํ์ง ์์ผ๋ฏ๋ก, Chromium์์ ํด๋น ์ง์์ ์ ๊ฑฐํ๋ค.
์ฌ์ฉ ํต๊ณ์ ๋ฐ๋ฅด๋ฉด, ISO-2022-JP ์๋ ๊ฐ์ง๋ ํ์ด์ง ๋ก๋์ ์ฝ 0.000002%์์๋ง ๋ฐ์ํ๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.
ํฌ๋กฌ ๊ณต์ ๋ธ๋๋ ๋น๋์์ ๋ณด์๊ณผ ์์ ์ฑ์ ๊ฐํํ๊ธฐ ์ํด, M137๋ถํฐ --load-extension
๋ช
๋ น์ค ํ๋๊ทธ๋ฅผ ํตํ ํ์ฅ ํ๋ก๊ทธ๋จ ๋ก๋๊ฐ ํ์ง๋๋ค.
์ด ๋ณ๊ฒฝ์ ์ ์ฑ ๋๋ ์์น ์๋ ํ์ฅ ํ๋ก๊ทธ๋จ๊ณผ ๊ด๋ จ๋ ์ํ์ ์ค์ด๊ธฐ ์ํ ์กฐ์น์ด๋ค. ๋์ , ๊ฐ๋ฐ์ ๋ชจ๋๋ฅผ ํ์ฑํํ ์ํ์์ ํ์ฅ ๊ด๋ฆฌ ํ์ด์ง์ "Load Unpacked" ๋ฒํผ์ ํตํด ์์ถ ํด์ ๋ ํ์ฅ์ ๋ก๋ํ ์ ์๋ค.
๊ฐ๋ฐ์๋ Chromium์ด๋ Chrome For Testing ๊ฐ์ ํ๊ฒฝ์์ --load-extension
์ค์์น๋ฅผ ๊ณ์ ์ฌ์ฉํ ์ ์๋ค.
์ด ํญ๋ชฉ์ ๋ํ ์ฃผ์ ๋ธ๋ผ์ฐ์ ๋ฐ ์น ๊ฐ๋ฐ์์ ์๊ฒฌ์ ๋ค์๊ณผ ๊ฐ๋ค.