From 9a09678deef7e245e5ddbd641e0f62d4b4db938f Mon Sep 17 00:00:00 2001
From: Yun Chan <yunchan@twentyoz.kr>
Date: Thu, 20 Aug 2026 23:30:15 +0900
Subject: [PATCH] =?UTF-8?q?feat(site):=20=EB=A6=AC=ED=80=B4=EB=93=9C=20?=
 =?UTF-8?q?=EA=B8=80=EB=9E=98=EC=8A=A4=20=EA=B5=B4=EC=A0=88=EC=9D=84=20?=
 =?UTF-8?q?=EC=98=AC=EB=B0=94=EB=A5=B8=20=EB=B3=80=EC=9C=84=20=EC=A7=80?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9C=20=EB=8B=A4=EC=8B=9C=20=EB=B6=99=EC=9D=B8?=
 =?UTF-8?q?=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

앞선 커밋에서 "backdrop-filter 체인에서 displacement 가 안 먹는다" 고 적고
데모를 뺐다. 틀렸다. svg-filters.md 에 이미 적혀 있던 두 규칙을 안 지킨 것이다.

- 변위 지도는 노이즈가 아니다. feTurbulence 로 만들면 값이 중립(128)으로
  수렴해 scale 을 아무리 키워도 곱해지는 값이 0 이다.
- feImage 의 크기는 요소 크기와 같아야 한다. 자동으로 안 맞춰준다.

가장자리에서 안쪽으로 미는 그라디언트를 직접 그렸다. linearGradient 한 장으로는
R 과 G 를 따로 못 만들므로 지도를 두 장 놓고 displacement 를 두 번 건다.
쓰지 않는 축에는 128 고정인 B 채널을 물려 이동량을 0 으로 만든다.

실측: 평균 채널차 1.66(난류 지도) → 9.29(그린 지도), 최대 126.
배경에 격자를 깔아 확인했다 — 패널 가장자리에서 격자 셀이 눌린다.

svg-filters.md 에 지도 두 장 기법과 확인 방법을 기록했다.
---
 apps/site/src/components/FilterArt.astro | 51 +++++++++++++++++++++++-
 apps/site/src/components/Materials.astro | 42 +++++++++++++++++++
 apps/site/src/i18n/content.ts            | 28 ++++++++++---
 packages/skill/references/svg-filters.md | 39 ++++++++++++++++++
 4 files changed, 154 insertions(+), 6 deletions(-)

diff --git a/apps/site/src/components/FilterArt.astro b/apps/site/src/components/FilterArt.astro
index 6aa600d..d3ff84c 100644
--- a/apps/site/src/components/FilterArt.astro
+++ b/apps/site/src/components/FilterArt.astro
@@ -1,6 +1,7 @@
 ---
 import { Image } from "astro:assets";
 import paper from "../assets/bg/bg-paper.webp";
+import split from "../assets/bg/bg-split.webp";
 
 /**
  * 필터 데모의 소재. 같은 소재를 두 번 그리고 한쪽에만 필터를 건다.
@@ -8,7 +9,7 @@ import paper from "../assets/bg/bg-paper.webp";
  * 보이는 차이가 필터 때문인지 소재 때문인지 알 수 없다.
  */
 interface Props {
-  kind: "scrim" | "cvd" | "goo";
+  kind: "scrim" | "cvd" | "goo" | "glass";
   on: boolean;
 }
 const { kind, on } = Astro.props;
@@ -48,6 +49,18 @@ const { kind, on } = Astro.props;
   )
 }
 
+{
+  kind === "glass" && (
+    <div class="art art-glass">
+      <Image src={split} alt="" widths={[300, 600]} sizes="300px" loading="lazy" />
+      {/* 격자를 함께 깐다. 굴절은 직선이 휘어야 보인다 —
+          사진만 놓으면 무엇이 어떻게 밀렸는지 알 수 없다 */}
+      <span class="glass-grid" />
+      <span class:list={["glass-panel", { on }]}>산미 8.5</span>
+    </div>
+  )
+}
+
 <style>
   .art {
     height: var(--art-h, 118px);
@@ -130,6 +143,42 @@ const { kind, on } = Astro.props;
   }
 
 
+  /* ---- 유리 ----------------------------------------------------
+     feImage 는 요소 크기에 맞춰 자동 조정되지 않는다.
+     그래서 패널 크기를 필터의 지도 크기(216×72)와 똑같이 고정한다 */
+  .art-glass :global(img) {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .glass-grid {
+    position: absolute;
+    inset: 0;
+    background:
+      repeating-linear-gradient(90deg, rgb(255 255 255 / 0.5) 0 1px, transparent 1px 20px),
+      repeating-linear-gradient(0deg, rgb(255 255 255 / 0.5) 0 1px, transparent 1px 20px);
+  }
+  .glass-panel {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 216px;
+    height: 72px;
+    margin: -36px 0 0 -108px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--radius-md);
+    border: 1px solid rgb(255 255 255 / 0.28);
+    background: rgb(255 255 255 / 0.05);
+    color: #fff;
+    font-weight: var(--weight-medium);
+    /* 굴절을 못 읽는 엔진은 여기서 멈춘다 */
+    backdrop-filter: blur(1px);
+  }
+  .glass-panel.on { backdrop-filter: blur(1px) url(#f-lens); }
+
   @media (prefers-reduced-transparency: reduce) {
     .cap { text-shadow: 0 1px 3px rgb(0 0 0 / 0.9); }
   }
diff --git a/apps/site/src/components/Materials.astro b/apps/site/src/components/Materials.astro
index 4e732f0..418cfc4 100644
--- a/apps/site/src/components/Materials.astro
+++ b/apps/site/src/components/Materials.astro
@@ -5,6 +5,26 @@ import type { Content } from "../i18n/content";
 
 interface Props { c: Content["materials"]; }
 const { c } = Astro.props;
+
+/* 변위 지도 두 장. 가장자리에서 안쪽으로 미는 값만 담고 가운데는 중립(128)이다.
+   `#` 이 data URI 를 끊으므로 색은 rgb() 로 적는다. */
+const W = 216;
+const H = 72;
+const map = (vertical: boolean, from: string, to: string) => {
+  const dir = vertical ? 'x1="0" y1="0" x2="0" y2="1"' : 'x1="0" y1="0" x2="1" y2="0"';
+  const svg =
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}">` +
+    `<defs><linearGradient id="g" ${dir}>` +
+    `<stop offset="0" stop-color="${from}"/>` +
+    `<stop offset="0.30" stop-color="rgb(128,128,128)"/>` +
+    `<stop offset="0.70" stop-color="rgb(128,128,128)"/>` +
+    `<stop offset="1" stop-color="${to}"/>` +
+    `</linearGradient></defs>` +
+    `<rect width="${W}" height="${H}" fill="url(#g)"/></svg>`;
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+};
+const MAP_X = map(false, "rgb(255,128,128)", "rgb(0,128,128)");
+const MAP_Y = map(true, "rgb(128,255,128)", "rgb(128,0,128)");
 ---
 
 {/*
@@ -113,6 +133,28 @@ const { c } = Astro.props;
       <feComposite in="SourceGraphic" in2="goo" operator="atop" />
     </filter>
 
+
+    <!--
+      리퀴드 글래스. 변위 지도는 **노이즈가 아니다** — 유리는 무작위로 휘지 않고
+      가장자리에서 안쪽으로 휜다. feTurbulence 로 만들면 지도가 중립값(128)으로
+      수렴해 scale 을 아무리 키워도 아무 일도 안 일어난다(실측: 채널차 1.66).
+
+      R 채널이 X, G 채널이 Y 이동량이고 128 이 "움직이지 마라" 다.
+      한 장의 그라디언트로 R 과 G 를 따로 만들 수 없으니, 지도 두 장을 놓고
+      displacement 를 두 번 건다. 안 쓰는 축은 B(=128 고정)를 물려 0 으로 만든다.
+
+      feImage 의 width/height 는 요소 크기와 같아야 한다 — 자동으로 안 맞춰준다.
+      그래서 이 패널만 크기를 고정해 뒀다.
+    -->
+    <filter id="f-lens" color-interpolation-filters="sRGB"
+            x="0" y="0" width="100%" height="100%">
+      <feImage href={MAP_X} x="0" y="0" width="216" height="72" result="mx" />
+      <feDisplacementMap in="SourceGraphic" in2="mx" scale="30"
+                         xChannelSelector="R" yChannelSelector="B" result="dx" />
+      <feImage href={MAP_Y} x="0" y="0" width="216" height="72" result="my" />
+      <feDisplacementMap in="dx" in2="my" scale="30"
+                         xChannelSelector="B" yChannelSelector="G" />
+    </filter>
   </defs>
 </svg>
 
diff --git a/apps/site/src/i18n/content.ts b/apps/site/src/i18n/content.ts
index 1603f77..0540ea1 100644
--- a/apps/site/src/i18n/content.ts
+++ b/apps/site/src/i18n/content.ts
@@ -61,7 +61,7 @@ export interface Content {
     h2: string;
     lead: string;
     demos: {
-      id: "scrim" | "cvd" | "goo";
+      id: "scrim" | "cvd" | "goo" | "glass";
       name: string;
       problem: string;
       beforeLabel: string;
@@ -230,9 +230,9 @@ export const ko: Content = {
   },
   materials: {
     eyebrow: "SVG 필터",
-    h2: "이미지 편집기를 열지 않고 고치는 세 가지",
+    h2: "이미지 편집기를 열지 않고 고치는 네 가지",
     lead:
-      "질감을 만드는 필터 데모는 많다. 손이 실제로 줄어드는 자리는 따로 있다. 아래 셋은 왼쪽이 매번 손으로 맞추던 것, 오른쪽이 같은 소재에 선언 하나만 얹은 것이다. 아래 수치는 이 화면을 그대로 캡처해 잰 값이다.",
+      "질감을 만드는 필터 데모는 많다. 손이 실제로 줄어드는 자리는 따로 있다. 아래 넷은 왼쪽이 매번 손으로 맞추던 것, 오른쪽이 같은 소재에 선언 하나만 얹은 것이다. 아래 수치는 이 화면을 그대로 캡처해 잰 값이다.",
     demos: [
       {
         id: "scrim",
@@ -261,6 +261,15 @@ export const ko: Content = {
         how: "크게 블러한 뒤 feColorMatrix 로 알파만 18배 세워 잘라낸다. 붙을지 말지는 눈대중이 아니라 산수다 — 두 원 사이 중간점의 블러 알파가 문턱(7÷18 ≒ 0.39)을 넘어야 한다. 간격 18px 에 블러 7 로는 0.2 근처라 못 넘었고, 12px 에 10 으로 넘겼다.",
         verdict: "가로로 세어 덩어리 3개 → 1개 · JS 0줄",
       },
+      {
+        id: "glass",
+        name: "배경을 휘게 하는 오버레이",
+        problem: "반투명 패널은 뒤를 흐리게만 만든다. 실제 유리는 빛을 휜다 — 그 차이가 패널을 화면 위가 아니라 화면 안에 놓는다.",
+        beforeLabel: "backdrop-filter: blur",
+        afterLabel: "blur + url(#lens)",
+        how: "변위 지도를 backdrop-filter 에 넘긴다. R 이 X, G 가 Y 이동량이고 128 이 중립이다. 지도를 feTurbulence 로 만들면 값이 128 로 수렴해 아무 일도 일어나지 않는다 — 가장자리에서 안쪽으로 미는 그라디언트를 직접 그려야 한다.",
+        verdict: "가장자리에서 격자가 눌린다 · 지도 크기가 요소와 다르면 조용히 아무 일도 안 일어난다 · Chromium 전용",
+      },
     ],
   },
   metrics: {
@@ -485,9 +494,9 @@ export const en: Content = {
   },
   materials: {
     eyebrow: "SVG filters",
-    h2: "Three things you fix without opening an image editor",
+    h2: "Four things you fix without opening an image editor",
     lead:
-      "There is no shortage of filter demos that make texture. The places where filters actually save you work are elsewhere. In all three below, the left is what you used to hand-tune every time and the right is the same material with one declaration added. The numbers come from capturing this screen and measuring it.",
+      "There is no shortage of filter demos that make texture. The places where filters actually save you work are elsewhere. In all four below, the left is what you used to hand-tune every time and the right is the same material with one declaration added. The numbers come from capturing this screen and measuring it.",
     demos: [
       {
         id: "scrim",
@@ -516,6 +525,15 @@ export const en: Content = {
         how: "Blur hard, then stand the alpha up 18× with feColorMatrix. Whether they fuse is arithmetic, not taste — the blurred alpha midway between two circles has to clear the threshold (7÷18 ≒ 0.39). At 18px apart with a blur of 7 it sat near 0.2 and never merged; 12px and 10 clears it.",
         verdict: "counted across the middle row: 3 blobs → 1 · 0 lines of JS",
       },
+      {
+        id: "glass",
+        name: "An overlay that bends the backdrop",
+        problem: "A translucent panel only blurs what is behind it. Real glass bends light — that difference puts the panel inside the picture instead of on top of it.",
+        beforeLabel: "backdrop-filter: blur",
+        afterLabel: "blur + url(#lens)",
+        how: "Hand a displacement map to backdrop-filter. R is the X offset, G is the Y offset, 128 is neutral. Build the map with feTurbulence and every value collapses toward 128, so nothing moves — the map has to be a gradient you draw, pushing inward from the edges.",
+        verdict: "the grid compresses at the edges · size the map wrong and nothing happens, silently · Chromium only",
+      },
     ],
   },
   metrics: {
diff --git a/packages/skill/references/svg-filters.md b/packages/skill/references/svg-filters.md
index 912f5f6..18e7699 100644
--- a/packages/skill/references/svg-filters.md
+++ b/packages/skill/references/svg-filters.md
@@ -646,3 +646,42 @@ Chrome 151 에서 실측하면 computed 값이 `none` 이 아니라 `url("#id")`
 
 > 진단법: 굴절이 안 보일 때 `scale` 부터 올리지 마라. 지도를 화면에 직접 그려
 > **128 이 아닌 픽셀이 실제로 있는지** 먼저 봐라. 없으면 지도가 문제다.
+
+### 지도를 SVG 로 그릴 때 — R 과 G 를 한 장에 못 담는다
+
+`linearGradient` 하나로는 R 과 G 를 각각 다르게 변화시킬 수 없다.
+겹쳐 그리면 뒤엣것이 앞엣것을 덮고, 블렌드 모드로는 채널이 섞인다.
+**지도를 두 장 놓고 displacement 를 두 번 건다.** 쓰지 않는 축에는
+128 로 고정된 `B` 채널을 물려 이동량을 0 으로 만든다.
+
+```xml
+<filter id="lens" color-interpolation-filters="sRGB" x="0" y="0" width="100%" height="100%">
+  <feImage href={MAP_X} x="0" y="0" width="216" height="72" result="mx"/>
+  <feDisplacementMap in="SourceGraphic" in2="mx" scale="30"
+                     xChannelSelector="R" yChannelSelector="B" result="dx"/>
+  <feImage href={MAP_Y} x="0" y="0" width="216" height="72" result="my"/>
+  <feDisplacementMap in="dx" in2="my" scale="30"
+                     xChannelSelector="B" yChannelSelector="G"/>
+</filter>
+```
+
+지도 한 장은 가장자리에서만 중립을 벗어나는 그라디언트다.
+data URI 안에서 `#` 은 URI 를 끊으므로 색은 `rgb()` 로 적는다.
+
+```js
+`<svg xmlns="http://www.w3.org/2000/svg" width="216" height="72">` +
+  `<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="0">` +
+    `<stop offset="0"    stop-color="rgb(255,128,128)"/>` +   // 왼쪽 끝: +X 최대
+    `<stop offset="0.30" stop-color="rgb(128,128,128)"/>` +   // 가운데: 중립
+    `<stop offset="0.70" stop-color="rgb(128,128,128)"/>` +
+    `<stop offset="1"    stop-color="rgb(0,128,128)"/>` +     // 오른쪽 끝: -X 최대
+  `</linearGradient></defs>` +
+  `<rect width="216" height="72" fill="url(#g)"/></svg>`
+```
+
+**확인 방법**: 배경에 격자를 깔아라. 사진만 놓으면 무엇이 어떻게 밀렸는지 알 수 없다.
+제대로 걸리면 **패널 가장자리에서 격자 셀이 눌린다** — 그것이 렌즈의 지문이다.
+실측: 필터 전후 평균 채널차 1.66(난류 지도) → **9.29**(그린 지도), 최대 126.
+
+`backdrop-filter` 앞의 `blur()` 는 약하게 둬라. 세게 걸면 굴절이 뭉개져서
+지도를 고쳐도 차이가 안 보인다.