์›”๊ฐ„ ํฌ๋กฌ ์ด์Šˆ ๋ฆฌํฌํŠธ 2025๋…„ 4์›”ํ˜ธ


๋“ค์–ด๊ฐ€๋ฉฐ

ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์— ๊ฐ€์žฅ ๋งŽ์€ ์˜ํ–ฅ์„ ์ฃผ๋Š” ํฌ๋กฌ ๋ธŒ๋ผ์šฐ์ €์˜ ๋ฒ„์ „๋ณ„ ๋ณ€๊ฒฝ ์˜ˆ์ • ํ•ญ๋ชฉ์„ ์ •๋ฆฌ ๋ฐ ๊ณต์œ ํ•œ๋‹ค.

๐Ÿ’ก ๊ฐ ํ•ญ๋ชฉ์€ 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๋ฅผ ๊ทธ๋Œ€๋กœ ์ธ์šฉํ–ˆ๋‹ค.


๋ชฉ์ฐจ

  1. Chrome 136

    • โš ๏ธ canLoadOpaqueURL ๋ฉ”์„œ๋“œ ์ง€์› ์ค‘๋‹จ
    • โš ๏ธ ํŠน์ • ํƒœ๊ทธ์— ์ค‘์ฒฉ๋œ h1 ๊ธ€๊ผด ํฌ๊ธฐ ๊ทœ์น™ ์ œ๊ฑฐ ๐Ÿ“Œ
    • โœ… Pointer Capture ๋ฐฉ์‹์„ ํ™œ์šฉํ•œ click ์ด๋ฒคํŠธ ํƒ€๊นƒ ์š”์†Œ ์„ค์ •
    • โœ… ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์‹ฑ๊ณผ ์ปดํŒŒ์ผ ์ œ์–ด๋ฅผ ์œ„ํ•œ ์ฃผ์„ ์ถ”๊ฐ€
    • โœ… Chromium ์Šคํฌ๋กค๋ฐ” Fluent ๋””์ž์ธ ์ ์šฉ
    • โœ… ๋ฐฉ๋ฌธํ•œ ๋งํฌ(:visited)์˜ ๊ธฐ๋ก ๋ถ„ํ•  ๋ฐ ๋ณด์•ˆ ๊ฐ•ํ™”
    • โœ… RegExp.escape() ๋ฉ”์„œ๋“œ ์ถ”๊ฐ€
    • ๐Ÿงช CanvasRenderingContext2D ํ…์ŠคํŠธ ๋ Œ๋”๋ง ๊ตฌํ˜„ ์—…๋ฐ์ดํŠธ
    • ๐Ÿ—“๏ธ ๋ฐฐํฌ ์˜ˆ์ •์ผ
  2. Chrome 137

    • โœ… Blob URL ์‚ฌ์šฉ์ด ๊ต์ฐจ ์‚ฌ์ดํŠธ์—์„œ ์‚ฌ์šฉ ์ œํ•œ ๐Ÿ“Œ
    • โœ… CSS if() ํ•จ์ˆ˜ ์ถ”๊ฐ€
    • โœ… HTTP ํ”„๋กœํ† ์ฝœ์—์„œ ํ”„๋ฆฌ๋ Œ๋”๋ง ์ฐจ๋‹จ ๐Ÿ“Œ
    • โœ… SVG ์š”์†Œ์— transform ์†์„ฑ ์ง€์ • ๊ฐ€๋Šฅ
    • ๐Ÿ—“๏ธ ๋ฐฐํฌ ์˜ˆ์ •์ผ
  3. Chrome 138

    • โš ๏ธ SwiftShader fallback ์ œ๊ฑฐ ๐Ÿ“Œ
    • ๐Ÿงช ํ”„๋กฌํ”„ํŠธ API
    • ๐Ÿ—“๏ธ ๋ฐฐํฌ ์˜ˆ์ •์ผ
  4. Chrome NEXT

    • โš ๏ธ [Chrome 139] Chrome ์ผ๋ถ€ ๋ฒ„์ „ ์ง€์› ์ค‘๋‹จ: macOS 11 ๐Ÿ“Œ
    • โš ๏ธ Intl Locale ๊ฐ์ฒด์˜ getters ์†์„ฑ ์ง€์› ์ค‘๋‹จ ๐Ÿ“Œ
    • โš ๏ธ v8 ์—”์ง„์—์„œ Intl.v8BreakIterator ์ œ๊ฑฐ ๐Ÿ“Œ
    • โš ๏ธ DOM ์š”์†Œ ์ œ๊ฑฐ ์‹œ blur ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋„๋ก ๋ณ€๊ฒฝ ๐Ÿ“Œ
    • โš ๏ธ unload ์ด๋ฒคํŠธ ์ง€์› ์ค‘๋‹จ ๐Ÿ“Œ
    • โš ๏ธ Protected Audience API์˜ ๊ตฌ๋ฒ„์ „์ธ ์„œ๋ธŒ๋ฆฌ์†Œ์Šค ์›น ๋ฒˆ๋“ค ๋ฐฉ์‹ ์ง€์› ์ค‘๋‹จ ๐Ÿ“Œ
    • โš ๏ธ ISO-2022-JP ๋ฌธ์ž์…‹ ์ž๋™ ๊ฐ์ง€ ์ง€์› ์ œ๊ฑฐ
    • โš ๏ธ --load-extension ๋ช…๋ น์ค„ ํ”Œ๋ž˜๊ทธ ์ง€์› ์ค‘๋‹จ ๐Ÿ“Œ

1. Chrome 136

โš ๏ธ canLoadOpaqueURL ๋ฉ”์„œ๋“œ ์ง€์› ์ค‘๋‹จ

canLoadOpaqueURL()์„ HTMLFencedFrameElement์—์„œ ์ œ๊ฑฐํ•˜๊ณ , navigator.canLoadAdAuctionFencedFrame()์„ ํ‘œ์ค€์œผ๋กœ ์‚ฌ์šฉํ•˜๋„๋ก ๊ถŒ์žฅํ•œ๋‹ค.

2023๋…„๋ถ€ํ„ฐ ํ๊ธฐ ๊ฒฝ๊ณ ๊ฐ€ ํ‘œ์‹œ ์ค‘์ด๋ฉฐ, ์ƒˆ๋กœ์šด API๋กœ์˜ ์ „ํ™˜์„ ๊ถŒ์žฅํ–ˆ์œผ๋ฉฐ ์ด์ œ ์ง€์› ์ค‘๋‹จํ•œ๋‹ค.

์ด ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์›น ๊ฐœ๋ฐœ์ž์˜ ์˜๊ฒฌ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • Firefox: ์˜๊ฒฌ ์—†์Œ
  • Safari: ์˜๊ฒฌ ์—†์Œ
  • ์›น ๊ฐœ๋ฐœ์ž: ์˜๊ฒฌ ์—†์Œ

์ฐธ์กฐ


โš ๏ธ ํŠน์ • ํƒœ๊ทธ์— ์ค‘์ฒฉ๋œ h1 ๊ธ€๊ผด ํฌ๊ธฐ ๊ทœ์น™ ์ œ๊ฑฐ ๐Ÿ“Œ

HTML ๋ช…์„ธ์—๋Š” <article>, <aside>, <nav>, <section> ํƒœ๊ทธ ๋‚ด์— ์ค‘์ฒฉ๋œ <h1> ํƒœ๊ทธ์— ์ ์šฉ๋˜๋Š” ํŠน์ˆ˜ ๊ทœ์น™์ด ํฌํ•จ๋˜์–ด ์žˆ๋‹ค.

์ด ๊ทœ์น™์€ <h1>์˜ ๊ธ€๊ผด ํฌ๊ธฐ๋ฅผ ์‹œ๊ฐ์ ์œผ๋กœ <h2>์ฒ˜๋Ÿผ ์ถ•์†Œํ•˜์ง€๋งŒ, ์ ‘๊ทผ์„ฑ ํŠธ๋ฆฌ์—๋Š” ์ด๋Ÿฌํ•œ ๋“ฑ๊ธ‰ ํ•˜๋ฝ(demotion)์ด ๋ฐ˜์˜๋˜์ง€ ์•Š๊ณ  <h1> ํƒœ๊ทธ๋กœ ์ธ์‹ํ•œ๋‹ค. ์ด๋กœ ์ธํ•ด ์ ‘๊ทผ์„ฑ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

์ด ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์›น ๊ฐœ๋ฐœ์ž์˜ ์˜๊ฒฌ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

์ฐธ์กฐ


โœ… Pointer Capture ๋ฐฉ์‹์„ ํ™œ์šฉํ•œ 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

์ด๋ฅผ ํ†ตํ•ด, ์•„๋ž˜์™€ ๊ฐ™์€ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐ ํ•  ์ˆ˜ ์žˆ๋‹ค.

  1. ์›น์‚ฌ์ดํŠธ ๋กœ๋“œ ์‹œ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ•„์š”ํ•œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ถ„์„ํ•˜๊ณ  ์ปดํŒŒ์ผํ•ด ์ง€์—ฐ์ด ๋ฐœ์ƒํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๋‹ค. ์ด๋Ÿฌํ•œ ์ง€์—ฐ์„ ์ค„์ด๊ธฐ ์œ„ํ•ด ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ์–ด๋–ค ํ•จ์ˆ˜๊ฐ€ ๋ฏธ๋ฆฌ ์ปดํŒŒ์ผ๋˜์–ด์•ผ ํ•˜๋Š”์ง€ ์•Œ๋ ค์ค€๋‹ค.
  2. ์‚ฌ์šฉ์ž๊ฐ€ ์›น์‚ฌ์ดํŠธ์—์„œ ์ƒํ˜ธ์ž‘์šฉํ•  ๋•Œ ์›น์‚ฌ์ดํŠธ๊ฐ€ ์ƒํ˜ธ์ž‘์šฉ์— ์–ผ๋งˆ๋‚˜ ๋นจ๋ฆฌ ๋ฐ˜์‘ํ•ด์•ผ ํ•˜๋Š”์ง€์— ์ง€์—ฐ์ด ๋ฐœ์ƒํ•œ๋‹ค.

์ด ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์›น ๊ฐœ๋ฐœ์ž์˜ ์˜๊ฒฌ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

์ฐธ์กฐ


โœ… Chromium ์Šคํฌ๋กค๋ฐ” Fluent ๋””์ž์ธ ์ ์šฉ

Windows์™€ Linux์—์„œ Chromium์˜ ์Šคํฌ๋กค๋ฐ”(์˜ค๋ฒ„๋ ˆ์ด ๋ฐ ๋น„์˜ค๋ฒ„๋ ˆ์ด ๋ชจ๋‘)๋ฅผ Windows 11์˜ Fluent ๋””์ž์ธ์— ๋งž์ถฐ ๊ฐœ์„ ํ•œ๋‹ค.

๋น„์˜ค๋ฒ„๋ ˆ์ด ์Šคํฌ๋กค๋ฐ”๋Š” ๊ธฐ๋ณธ ์ ์šฉ์œผ๋กœ ์‚ฌ์šฉ์ž ๊ฐœ์ž… ์—†์ด ์ฆ‰์‹œ ๋ฐ˜์˜๋˜๋ฉฐ, ์˜ค๋ฒ„๋ ˆ์ด ์Šคํฌ๋กค๋ฐ”์˜ ๊ฒฝ์šฐ ์ถ”๊ฐ€ ์„ค์ • ๋ฐฉ์‹์„ ๋…ผ์˜ํ•˜๊ณ  ์žˆ๋‹ค.

full_mode

full_mode

minimal_mode

minimal_mode

์ด ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์›น ๊ฐœ๋ฐœ์ž์˜ ์˜๊ฒฌ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • Firefox: ์˜๊ฒฌ ์—†์Œ
  • Safari: ์˜๊ฒฌ ์—†์Œ
  • ์›น ๊ฐœ๋ฐœ์ž: ์˜๊ฒฌ ์—†์Œ

์ฐธ์กฐ


โœ… ๋ฐฉ๋ฌธํ•œ ๋งํฌ(:visited ์˜์‚ฌ ํด๋ž˜์Šค)์˜ ๊ธฐ๋ก ๋ถ„ํ•  ๋ฐ ๋ณด์•ˆ ๊ฐ•ํ™”

:visited ์˜์‚ฌ ํด๋ž˜์Šค๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ํŠน์ • ์‚ฌ์ดํŠธ๋ฅผ ๋ฐฉ๋ฌธํ–ˆ๋Š”์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

์ด๋Ÿฌํ•œ ํŠน์„ฑ์„ ํ™œ์šฉํ•ด ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์‚ฌ์ด๋“œ ์ฑ„๋„ ๊ณต๊ฒฉ(Side-Channel Attacks) ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

  1. ํƒ€์ด๋ฐ ๊ณต๊ฒฉ (Timing Attacks) โ†’ ์Šคํƒ€์ผ๋ง ์ ์šฉ ์†๋„ ์ฐจ์ด๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ฐฉ๋ฌธ ์—ฌ๋ถ€ ํ™•์ธ
  2. ํ”ฝ์…€ ์ƒ‰์ƒ ๊ณต๊ฒฉ (Pixel Color Attacks) โ†’ :visited ๋งํฌ์˜ ์ƒ‰์ƒ ์ฐจ์ด๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ฐ์ง€
  3. ํ”„๋กœ์„ธ์Šค ๊ณต๊ฒฉ (Process-Level Attacks) โ†’ ๋ธŒ๋ผ์šฐ์ €์˜ ๋‚ด๋ถ€ ํ”„๋กœ์„ธ์Šค ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€

์ด ๋ฌธ์ œ๋ฅผ ์•…์šฉํ•˜๋ฉด, ์‚ฌ์šฉ์ž์˜ ๋ธŒ๋ผ์šฐ์ง• ํžˆ์Šคํ† ๋ฆฌ๋ฅผ ์›น ์‚ฌ์ดํŠธ์—์„œ ๋ฌด๋‹จ์œผ๋กœ ์•Œ์•„๋‚ผ ์ˆ˜ ์žˆ๋‹ค.

์ด์ œ :visited ์Šคํƒ€์ผ๋ง์ด ์ ์šฉ๋˜๋Š” ์กฐ๊ฑด์ด ๊ฐ•ํ™”๋œ๋‹ค.

์•„๋ž˜ 3๊ฐ€์ง€ ๊ธฐ์ค€์œผ๋กœ ๋ถ„ํ• ํ•˜๋Š” ์‚ผ์ค‘ํ‚ค(Triple-Keying) ๋ฐฉ์‹์„ ์ ์šฉํ•ด ์„ธ ๊ฐ’์ด ๋™์ผํ•ด์•ผ :visited ์Šคํƒ€์ผ๋ง์ด ์ ์šฉ๋œ๋‹ค.

  • ๋งํฌ URL - ๋ฐฉ๋ฌธํ•œ ๋งํฌ์˜ ์‹ค์ œ URL
  • Top-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() ๋ฉ”์„œ๋“œ ๊ตฌํ˜„์ด ๋Œ€ํญ ๋ณ€๊ฒฝ๋˜์—ˆ๋‹ค. ์ด๋Š” ์›น์— ์ง์ ‘ ๋…ธ์ถœ๋˜๋Š” ๋ณ€๊ฒฝ์€ ์•„๋‹ˆ์ง€๋งŒ, ์„ฑ๋Šฅ์— ์˜ํ–ฅ์„ ๋ฏธ์น  ์ˆ˜ ์žˆ๋‹ค.

์บ”๋ฒ„์Šค๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์ƒˆ๋กœ์šด ๊ตฌํ˜„์„ ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์žˆ๋„๋ก ํ…Œ์ŠคํŠธ๋ฅผ ์ง„ํ–‰ํ•œ๋‹ค.

์ด ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์›น ๊ฐœ๋ฐœ์ž์˜ ์˜๊ฒฌ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • Firefox: ์˜๊ฒฌ ์—†์Œ
  • Safari: ์˜๊ฒฌ ์—†์Œ
  • ์›น ๊ฐœ๋ฐœ์ž: ์˜๊ฒฌ ์—†์Œ

์ฐธ์กฐ


๐Ÿ—“๏ธ ๋ฐฐํฌ ์˜ˆ์ •์ผ

Chrome 136์€ 2025๋…„ 4์›” 23์ผ์— ์ •์‹ ๋ฐฐํฌ ์˜ˆ์ •์ด๋‹ค.


2. Chrome 137

โœ… Blob URL ์‚ฌ์šฉ์ด ๊ต์ฐจ ์‚ฌ์ดํŠธ์—์„œ ์‚ฌ์šฉ ์ œํ•œ ๐Ÿ“Œ

Blob URL ์˜ ์ ‘๊ทผ์„ Storage Key(์ตœ์ƒ์œ„ ์‚ฌ์ดํŠธ, ํ”„๋ ˆ์ž„ ์ถœ์ฒ˜, ๊ต์ฐจ ์‚ฌ์ดํŠธ ์กฐ์ƒ์ด ์žˆ๋Š”์ง€ ์—ฌ๋ถ€)์— ๋”ฐ๋ผ Blob URL์˜ ์‚ฌ์šฉ์„ ์ œํ•œํ•œ๋‹ค.

์ด์— ๋”ฐ๋ผ Storage Key๊ฐ€ ๋‹ค๋ฅด๋ฉด ์ ‘๊ทผ ๋ถˆ๊ฐ€๋Šฅํ•ด์ง€๋ฏ€๋กœ, ๊ต์ฐจ ์‚ฌ์ดํŠธ๊ฐ„ Blob URL ๊ณต์œ ๊ฐ€ ์ฐจ๋‹จ๋œ๋‹ค.

์ด๋ฒˆ ๋ณ€๊ฒฝ์ ์œผ๋กœ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋ช‡ ๊ฐ€์ง€ ์˜ํ–ฅ์ด ์ƒ๊ธธ ์ˆ˜ ์žˆ๋‹ค.

  1. window.open(blobUrl)์„ ์‚ฌ์šฉํ•  ๋•Œ ํฌ๋กœ์Šค ์‚ฌ์ดํŠธ์ธ ๊ฒฝ์šฐ noopener๊ฐ€ ์ž๋™ ์ ์šฉ๋˜๋ฏ€๋กœ, ์ด๋ฅผ ํ™œ์šฉํ•œ ํŠน์ • ๋ณด์•ˆ ์ทจ์•ฝ์ ์ด ๋ฐฉ์–ด๋œ๋‹ค.
  2. ํฌ๋กฌ ํ™•์žฅ์ž ํ”„๋กœ๊ทธ๋žจ์—์„œ Blob URL์„ ์ƒ์„ฑ ํ›„ ์ผ๋ฐ˜ ์›น ํŽ˜์ด์ง€์—์„œ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด, ์ด์ œ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š”๋‹ค.

์ด ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์›น ๊ฐœ๋ฐœ์ž์˜ ์˜๊ฒฌ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • Firefox: ์˜๊ฒฌ ์—†์Œ
  • Safari: ์˜๊ฒฌ ์—†์Œ
  • ์›น ๊ฐœ๋ฐœ์ž: ์˜๊ฒฌ ์—†์Œ

์ฐธ์กฐ


โœ… CSS if() ํ•จ์ˆ˜ ์ถ”๊ฐ€

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 ํ”„๋กœํ† ์ฝœ์—์„œ ํ”„๋ฆฌ๋ Œ๋”๋ง ์ฐจ๋‹จ ๐Ÿ“Œ

HTTP ํŠธ๋ž˜ํ”ฝ์€ ์•”ํ˜ธํ™”๋˜์ง€ ์•Š์•„ ์ค‘๊ฐ„์ž ๊ณต๊ฒฉ(MITM)์— ์ทจ์•ฝํ•˜๋‹ค.

๋ณ€๊ฒฝ ์ „ (์ฐจ๋‹จ๋จ)
<link rel="prerender" href="http://example.com/page.html">
๋ณ€๊ฒฝ ํ›„ (์ฐจ๋‹จ๋จ)
<link rel="prerender" href="https://example.com/page.html">

HTTP ํ”„๋กœํ† ์ฝœ url์ด๋ผ๋„ ํ”„๋ฆฌ๋ Œ๋”๋ง์ด ์ˆ˜ํ–‰๋˜์—ˆ์œผ๋‚˜, ์ด์ œ HTTP ํ”„๋กœํ† ์ฝœ์—์„œ ํ”„๋ฆฌ๋ Œ๋”๋ง์ด ์ฐจ๋‹จ๋œ๋‹ค.


์ด ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์›น ๊ฐœ๋ฐœ์ž์˜ ์˜๊ฒฌ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

์ฐธ์กฐ


โœ… SVG ์š”์†Œ์— 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์ผ์— ์ •์‹ ๋ฐฐํฌ ์˜ˆ์ •์ด๋‹ค.


3. Chrome 138

โš ๏ธ SwiftShader fallback ์ œ๊ฑฐ ๐Ÿ“Œ

WebGL์ด SwiftShader๋กœ ์ž๋™ ๋Œ€์ฒด๋˜๋˜ ๋™์ž‘์ด ์ค‘๋‹จ๋œ๋‹ค.

SwiftShader๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด --enable-unsafe-swiftshader ํ”Œ๋ž˜๊ทธ๋ฅผ ๋ช…์‹œ์ ์œผ๋กœ ์„ค์ •ํ•ด์•ผ ํ•˜๋ฉฐ, WebGL ์‹คํŒจ ์‹œ ๋Œ€์ฒด API(Canvas2D ๋“ฑ)๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋Œ€๋น„ํ•ด์•ผ ํ•œ๋‹ค.

์ด ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์›น ๊ฐœ๋ฐœ์ž์˜ ์˜๊ฒฌ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • Firefox: ์˜๊ฒฌ ์—†์Œ
  • Safari: ์˜๊ฒฌ ์—†์Œ
  • ์›น ๊ฐœ๋ฐœ์ž: ์˜๊ฒฌ ์—†์Œ

์ฐธ์กฐ


๐Ÿงช ํ”„๋กฌํ”„ํŠธ API

Prompt API๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ๋ฐ”ํƒ•์œผ๋กœ AI ์–ธ์–ด ๋ชจ๋ธ์„ ์ง์ ‘ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋Š” ์ƒˆ๋กœ์šด Web Platform API์ด๋‹ค.

์›น์—์„œ์˜ ์ƒ์„ฑํ˜• AI ํ†ตํ•ฉ ์ˆ˜์š” ์ฆ๊ฐ€ํ•จ์— ๋”ฐ๋ผ ๊ธฐ์กด์—๋Š” ์„œ๋ฒ„ ์ธก API๋ฅผ ํ˜ธ์ถœํ•ด์•ผ ํ–ˆ๋˜ ๋ชจ๋ธ ํ˜ธ์ถœ์„, ์›น ํ‘œ์ค€ API๋กœ ๋กœ์ปฌ์—์„œ ์ฒ˜๋ฆฌ ๊ฐ€๋Šฅํ•˜๋„๋ก ๊ตฌํ˜„ํ•œ๋‹ค. ๋˜ํ•œ ๋กœ์ปฌ์—์„œ ์‹คํ–‰๋˜๋ฏ€๋กœ ์‚ฌ์šฉ์ž์˜ ๋กœ์ปฌ ๋ฐ์ดํ„ฐ์— ์ ‘๊ทผํ•˜์ง€ ์•Š์œผ๋ฉฐ, ํ•™์Šตํ•˜์ง€ ์•Š์•„ ๊ฐœ์ธ์ •๋ณด ๋ณดํ˜ธ์— ๋„์›€์ด ๋œ๋‹ค.

์ž…๋ ฅ ์œ ํ˜•์œผ๋กœ๋Š” ํ…์ŠคํŠธ ์™ธ์—๋„ ์ด๋ฏธ์ง€, ์˜ค๋””์˜ค ๋“ฑ์„ ์ž…๋ ฅ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ์ƒ์„ฑํ˜• AI ๊ธฐ๋ฐ˜ ์ธํ„ฐํŽ˜์ด์Šค๋‚˜ ๋„์šฐ๋ฏธ ๊ธฐ๋Šฅ ๊ตฌํ˜„์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

ํฌ๋กฌ์€ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ์ œ๊ณตํ•˜๋ฉฐ ํฌ๋กฌ ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์—์„œ๋„ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•˜๋„๋ก ์ฒ˜๋ฆฌํ•˜์˜€๋‹ค.

์ด ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์›น ๊ฐœ๋ฐœ์ž์˜ ์˜๊ฒฌ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

์ฐธ์กฐ


๐Ÿ—“๏ธ ๋ฐฐํฌ ์˜ˆ์ •์ผ

Chrome 138์€ 2025๋…„ 6์›” 18์ผ์— ์ •์‹ ๋ฐฐํฌ ์˜ˆ์ •์ด๋‹ค.


4. Chrome NEXT

โš ๏ธ [Chrome 139] Chrome ์ผ๋ถ€ ๋ฒ„์ „ ์ง€์› ์ค‘๋‹จ: macOS 11 ๐Ÿ“Œ


ํฌ๋กฌ์€ ์šด์˜์ฒด์ œ ์ œ์กฐ์‚ฌ์˜ ์ง€์› ์ฃผ๊ธฐ์— ๋”ฐ๋ผ ๋ธŒ๋ผ์šฐ์ € ์ง€์›์„ ์œ ์ง€ํ•œ๋‹ค.

์• ํ”Œ์ด macOS 11 (Big Sur) ์šด์˜์ฒด์ œ์— ๋Œ€ํ•œ ๊ณต์‹ ์ง€์›์„ ์ข…๋ฃŒํ•จ์— ๋”ฐ๋ผ Chrome 139 ๋ฒ„์ „๋ถ€ํ„ฐ ๋ธŒ๋ผ์šฐ์ € ์ง€์›์„ ์ข…๋ฃŒํ•œ๋‹ค.

์ข…๋ฃŒ ์‹œ์ ์„ ๊ธฐ์ค€์œผ๋กœ Chrome 138์œผ๋กœ ๊ณ„์† ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ๋ณด์•ˆ์ƒ ์œ„ํ—˜์ด ์กด์žฌํ•˜๋ฉฐ ์—…๋ฐ์ดํŠธ ๋ถˆ๊ฐ€ ๋ฐ ๊ฒฝ๊ณ  ๋ฉ”์‹œ์ง€๋ฅผ ๋…ธ์ถœํ•œ๋‹ค.

์ด ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์›น ๊ฐœ๋ฐœ์ž์˜ ์˜๊ฒฌ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • Firefox: ์˜๊ฒฌ ์—†์Œ
  • Safari: ์˜๊ฒฌ ์—†์Œ
  • ์›น ๊ฐœ๋ฐœ์ž: ์˜๊ฒฌ ์—†์Œ

์ฐธ์กฐ


โš ๏ธ Intl Locale ๊ฐ์ฒด์˜ getters ์†์„ฑ ์ง€์› ์ค‘๋‹จ ๐Ÿ“Œ

Intl Locale Info API๋Š” ECMAScript์˜ TC39์—์„œ ๊ฐœ๋ฐœ ์ค‘์ธ Stage 3 ๋‹จ๊ณ„์˜ ์ œ์•ˆ์ด๋‹ค. ์ด API๋Š” Intl.Locale ๊ฐ์ฒด๋ฅผ ํ™•์žฅํ•˜์—ฌ ์ง€์—ญ(locale)์— ๋Œ€ํ•œ ๋‹ค์–‘ํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๋ฉฐ ์‚ฌ์šฉ์ž๊ฐ€ ์œ„์น˜ํ•œ ์ง€์—ญ์˜ ๋ฌธํ™”์  ์š”์†Œ๋ฅผ ๋” ์ž˜ ์ดํ•ดํ•˜๊ณ  ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•๋Š” ๋„๊ตฌ๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

ํ•˜์ง€๋งŒ (์œ„์›ํšŒ๋Š”) ๊ธฐ์กด์— (์‚ฌ์šฉ์ž๋“ค์ด) ์‚ฌ์šฉํ•˜๋˜ ์ผ๋ถ€ getter ๋ฉ”์„œ๋“œ ์ œ์•ˆ์„ ์ƒˆ๋กญ๊ฒŒ ์ˆ˜์ •ํ•˜์˜€๋‹ค. ๋”ฐ๋ผ์„œ ๊ธฐ์กด์— (์‚ฌ์šฉ์ž๋“ค์ด) ์‚ฌ์šฉํ•˜๋˜ getter ๋ฉ”์„œ๋“œ๋ฅผ ์ง€์› ์ค‘๋‹จํ•˜๊ณ , ์ƒˆ๋กœ ์ œ์•ˆ๋œ ํ•จ์ˆ˜๋กœ ๋‹ค์‹œ ์ถœ์‹œํ•œ๋‹ค.

์ด ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์›น ๊ฐœ๋ฐœ์ž์˜ ์˜๊ฒฌ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

์ฐธ์กฐ


โš ๏ธ v8 ์—”์ง„์—์„œ Intl.v8BreakIterator ์ œ๊ฑฐ ๐Ÿ“Œ

Intl.Segmenter ๊ตฌํ˜„ ์ด์ „์— v8 ์—”์ง„ ์ „์šฉ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ API์ด๋‹ค.

์ด์ œ ์•ฝ 0.03%์˜ ์‚ฌ์šฉ๋Ÿ‰์„ ๋ณด์—ฌ ์ œ๊ฑฐํ•œ๋‹ค.

์ด ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์›น ๊ฐœ๋ฐœ์ž์˜ ์˜๊ฒฌ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • Firefox: ์˜๊ฒฌ ์—†์Œ
  • Safari: ์˜๊ฒฌ ์—†์Œ
  • ์›น ๊ฐœ๋ฐœ์ž: ์˜๊ฒฌ ์—†์Œ

์ฐธ์กฐ


โš ๏ธ DOM ์š”์†Œ ์ œ๊ฑฐ ์‹œ blur ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋„๋ก ๋ณ€๊ฒฝ ๐Ÿ“Œ

ํฌ์ปค์Šค๋œ DOM ์š”์†Œ ์ œ๊ฑฐ ์‹œ blur ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋„๋ก ๋ณ€๊ฒฝํ•œ๋‹ค. ๊ธฐ์กด ๋ช…์„ธ์—๋Š” ํฌ์ปค์Šค๋œ DOM ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๋Š” ๊ฒฝ์šฐ์— ๋Œ€ํ•œ ์ •์˜๊ฐ€ ์—†์–ด Chromium ๊ธฐ๋ฐ˜์˜ ๋ธŒ๋ผ์šฐ์ €๋Š” ํฌ์ปค์Šค๋œ DOM ์š”์†Œ ์ œ๊ฑฐ ์‹œ ํ•ด๋‹น ์š”์†Œ์— blur ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œ์ผฐ๋‹ค. ์ตœ์‹  ๋ช…์„ธ์—์„œ DOM ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๋Š” ๊ฒฝ์šฐ, ํฌ์ปค์Šค ์ œ๊ฑฐ ๋‹จ๊ณ„(blur, change ์ด๋ฒคํŠธ ๋ฐœ์ƒ)๋ฅผ ์ˆ˜ํ–‰ํ•˜์ง€ ์•Š๋„๋ก ์ •์˜ํ•จ์— ๋”ฐ๋ผ ํฌ๋กฌ๋„ ํฌ์ปค์Šค ์ œ๊ฑฐ ๋‹จ๊ณ„๋ฅผ ์ˆ˜ํ–‰ํ•˜์ง€ ์•Š๋„๋ก ๋ณ€๊ฒฝํ•  ์˜ˆ์ •์ด๋‹ค.

๋‹ค๋งŒ ์ •์‹ ์ ์šฉ ์ผ์ •์€ ๋ถˆ๋ถ„๋ช…ํ•˜๋‹ค. ํฌ๋กฌ์€ ์˜ˆ๊ธฐ์น˜ ๋ชปํ•œ ๋ฒ„๊ทธ๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์–ด ๊ด€๋ จ ์‚ฌ์ด๋“œ ์ดํŽ™ํŠธ๋ฅผ ๊ผผ๊ผผํžˆ ๊ฒ€ํ†  ํ›„ ๊ธฐ๋Šฅ์„ ์ ์šฉํ•œ๋‹ค๋Š” ์ž…์žฅ์ด๋‹ค.

์ด ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์›น ๊ฐœ๋ฐœ์ž์˜ ์˜๊ฒฌ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • Firefox: ๋ฐฐํฌ ์™„๋ฃŒ
  • Safari: ๋ฐฐํฌ ์™„๋ฃŒ
  • ์›น ๊ฐœ๋ฐœ์ž: ์˜๊ฒฌ ์—†์Œ

์ฐธ์กฐ


โš ๏ธ 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์˜ ๋ฏธ๋ฆฌ ๋ณด๊ธฐ๋ฅผ ์ถ”๊ฐ€ํ–ˆ๋‹ค.

์ด ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์›น ๊ฐœ๋ฐœ์ž์˜ ์˜๊ฒฌ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

์ฐธ์กฐ


โš ๏ธ Protected Audience API์˜ ๊ตฌ๋ฒ„์ „์ธ ์„œ๋ธŒ๋ฆฌ์†Œ์Šค ์›น ๋ฒˆ๋“ค ๋ฐฉ์‹ ์ง€์› ์ค‘๋‹จ ๐Ÿ“Œ

Protected Audience API๋Š” ํฌ๋กœ์Šค ์‚ฌ์ดํŠธ ์„œ๋“œ ํŒŒํ‹ฐ ์ถ”์  ์—†์ด ๋ฆฌ๋งˆ์ผ€ํŒ… ๋ฐ ๊ด‘๊ณ  ํƒ€๊ฒŸํŒ…์„ ์ง€์›ํ•˜๋Š” API๋‹ค.

API ์‹ ํ˜ธ์˜ ์ง„์œ„์„ฑ๊ณผ ๋ฌด๊ฒฐ์„ฑ์„ ๋ณด์žฅํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์„œ๋ธŒ๋ฆฌ์†Œ์Šค ์›น ๋ฒˆ๋“ค์„ ์‚ฌ์šฉํ•œ ์ด์ „ ๋ฒ„์ „๊ณผ ํŽ˜์ด์ง€ ์‹œ์ž‘ fetch() ์š”์ฒญ์— ํŠน์ˆ˜ HTTP ์‘๋‹ต ํ—ค๋”๋ฅผ ์‚ฌ์šฉํ•œ ์ƒˆ๋กœ์šด ๋ฒ„์ „์ด ์กด์žฌํ•œ๋‹ค.

์„œ๋ธŒ๋ฆฌ์†Œ์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์ „ ๋ฒ„์ „์ด 5์–ต๋ถ„์˜ 1 ์ •๋„๋กœ ๋‚ฎ์€ ํŽ˜์ด์ง€ ์‚ฌ์šฉ๋Ÿ‰์„ ๋ณด์ด๊ณ  ์žˆ์–ด ์ œ๊ฑฐํ•˜๊ณ ์ž ํ•œ๋‹ค.

์ด ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์›น ๊ฐœ๋ฐœ์ž์˜ ์˜๊ฒฌ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • Firefox: ์˜๊ฒฌ ์—†์Œ
  • Safari: ์˜๊ฒฌ ์—†์Œ
  • ์›น ๊ฐœ๋ฐœ์ž: ์˜๊ฒฌ ์—†์Œ

์ฐธ์กฐ


โš ๏ธ ISO-2022-JP ๋ฌธ์ž์…‹ ์ž๋™ ๊ฐ์ง€ ์ง€์› ์ œ๊ฑฐ

ISO-2022-JP ๋ฌธ์ž์…‹์˜ ์ž๋™ ๊ฐ์ง€(charset auto-detection)์— ์•Œ๋ ค์ง„ ๋ณด์•ˆ ๋ฌธ์ œ๊ฐ€ ์กด์žฌํ•œ๋‹ค (์ฐธ๊ณ ). ์‚ฌ์šฉ๋ฅ ์ด ๋งค์šฐ ๋‚ฎ๊ณ  Safari๊ฐ€ ์ด๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ, Chromium์—์„œ ํ•ด๋‹น ์ง€์›์„ ์ œ๊ฑฐํ•œ๋‹ค.

์‚ฌ์šฉ ํ†ต๊ณ„์— ๋”ฐ๋ฅด๋ฉด, ISO-2022-JP ์ž๋™ ๊ฐ์ง€๋Š” ํŽ˜์ด์ง€ ๋กœ๋“œ์˜ ์•ฝ 0.000002%์—์„œ๋งŒ ๋ฐœ์ƒํ•œ๋‹ค.

ChromeStatus Use Counter

์ด ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์›น ๊ฐœ๋ฐœ์ž์˜ ์˜๊ฒฌ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

์ฐธ์กฐ


โš ๏ธ --load-extension ๋ช…๋ น์ค„ ํ”Œ๋ž˜๊ทธ ์ง€์› ์ค‘๋‹จ ๐Ÿ“Œ

ํฌ๋กฌ ๊ณต์‹ ๋ธŒ๋žœ๋“œ ๋นŒ๋“œ์—์„œ ๋ณด์•ˆ๊ณผ ์•ˆ์ •์„ฑ์„ ๊ฐ•ํ™”ํ•˜๊ธฐ ์œ„ํ•ด, M137๋ถ€ํ„ฐ --load-extension ๋ช…๋ น์ค„ ํ”Œ๋ž˜๊ทธ๋ฅผ ํ†ตํ•œ ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ ๋กœ๋“œ๊ฐ€ ํ์ง€๋œ๋‹ค.

์ด ๋ณ€๊ฒฝ์€ ์•…์„ฑ ๋˜๋Š” ์›์น˜ ์•Š๋Š” ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ๊ณผ ๊ด€๋ จ๋œ ์œ„ํ—˜์„ ์ค„์ด๊ธฐ ์œ„ํ•œ ์กฐ์น˜์ด๋‹ค. ๋Œ€์‹ , ๊ฐœ๋ฐœ์ž ๋ชจ๋“œ๋ฅผ ํ™œ์„ฑํ™”ํ•œ ์ƒํƒœ์—์„œ ํ™•์žฅ ๊ด€๋ฆฌ ํŽ˜์ด์ง€์˜ "Load Unpacked" ๋ฒ„ํŠผ์„ ํ†ตํ•ด ์••์ถ• ํ•ด์ œ๋œ ํ™•์žฅ์„ ๋กœ๋“œํ•  ์ˆ˜ ์žˆ๋‹ค.

๊ฐœ๋ฐœ์ž๋Š” Chromium์ด๋‚˜ Chrome For Testing ๊ฐ™์€ ํ™˜๊ฒฝ์—์„œ --load-extension ์Šค์œ„์น˜๋ฅผ ๊ณ„์† ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์ด ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์›น ๊ฐœ๋ฐœ์ž์˜ ์˜๊ฒฌ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • Firefox: ์˜๊ฒฌ ์—†์Œ
  • Safari: ์˜๊ฒฌ ์—†์Œ
  • ์›น ๊ฐœ๋ฐœ์ž: ์˜๊ฒฌ ์—†์Œ

์ฐธ์กฐ


์กฐ์ข…ํ˜„2025.05.02
Back to list