카피를 혜택 중심으로 고치고, 필터 데모를 실무 소재에 건다

지적 세 가지를 전부 확인했고 실제 결함도 하나 나왔다.

1. 재료 섹션 h2 가 아무것도 전달하지 않았다
   '표면은 CSS 가 정하고, 공간은 GPU 가 맡는다'
   금칙어도 없고 치환 테스트도 통과하는데 독자가 얻는 게 없다.
   구현 이야기를 대구로 포장한 것이었다.
   -> '텍스처 200KB 를 300바이트가 대신한다'

   카피라이팅 방법론(so you can 테스트 / 6~12단어 / 검증 가능한 수치)을
   찾아 적용했다. 우리 antipatterns 의 카피 절은 금지 목록뿐이라
   이런 문장을 못 잡는다 — 작법 절을 새로 넣었다.

2. 필터 데모가 줄무늬였다
   필터가 무엇을 하는지는 보이지만 왜 쓰는지는 안 보인다.
   각 필터를 실제로 걸리는 자리로 옮겼다.
     그레인  -> 매끈한 그라디언트 (없으면 밋밋하다는 대비)
     굴절    -> 글자 (유리 뒤가 실제로 휘는 것)
     듀오톤  -> 사진풍 면 (한 팔레트로 묶이는 것)
   타일마다 '언제 쓰는가' 한 줄을 추가했다.

3. 그레인 필터가 아무 효과도 못 내고 있었다
   feComposite in='SourceGraphic' in2='soft' operator='over' 는
   원본을 노이즈 위에 올린다. 노이즈가 통째로 가려진다.
   에러도 경고도 없이 조용히 죽는다.
   feBlend overlay 로 바꾸고 baseFrequency 0.9 -> 0.62.

섹션 간 검은 띠도 고쳤다. 파이프라인 캔버스가 섹션 패딩(112px) 아래에서
시작해 히어로 배경이 끝난 자리와 사이에 200px 이 비었다.

스킬
  antipatterns.md  카피 작법 — 금지 목록만으로는 못 잡는 실패
  svg-filters.md   데모는 실무 소재에 · feComposite 입력 순서 함정

packages/skill/references/antipatterns.md

@@ -129,6 +129,40 @@ Show HN 랜딩 1,590개 실측에서 검출률이 가장 높았던 셋이다. **
 카피에서 제품·회사 이름을 **경쟁사 이름으로 바꿔 읽는다.**
 **여전히 자연스러우면 그 카피는 아무것도 말하지 않은 것이다. 다시 써라.**
 
+### 작법 — 금지 목록만으로는 못 잡는다
+
+위의 지문 목록은 **나쁜 문장**을 걸러낸다. 그런데 지문에 하나도 안 걸리면서
+**아무것도 전달하지 않는 문장**이 있다. 대개 대구가 예뻐서 통과된다.
+
+> 실측 사례: `"표면은 CSS 가 정하고, 공간은 GPU 가 맡는다"`
+> 치환 테스트 통과(다른 제품엔 안 맞는다), 금칙어 없음, 리듬도 좋다.
+> 그런데 **독자가 얻는 것이 없다.** 구현 이야기를 대구로 포장한 것뿐이다.
+
+**세 가지로 거른다.**
+
+**1. `so you can…` 테스트** — 문장 뒤에 이어 붙여 완성해봐라.
+
+```
+"feTurbulence 로 노이즈를 만든다"        so you can → 200KB 텍스처를 300바이트로 줄인다  ✅
+"표면은 CSS 가 정하고 공간은 GPU 가 맡는다"  so you can → ???                              ❌
+```
+
+완성되지 않으면 기능만 쓴 것이다. **완성된 뒷부분을 헤드라인으로 올려라.**
+
+**2. 6~12단어** — 2초 안에 훑히면서 가치를 전달하는 폭이다.
+한국어는 어절 기준으로 6~12, 글자 수로는 12~28자.
+
+**3. 헤딩에 검증 가능한 것을 넣어라** — 숫자·조건·비교 대상 중 하나.
+
+| 고치기 전 | 고친 뒤 | 무엇이 달라졌나 |
+|---|---|---|
+| 표면은 CSS 가 정하고, 공간은 GPU 가 맡는다 | **텍스처 200KB 를 300바이트가 대신한다** | 구현 → 이득. 수치가 검증 가능 |
+| Powerful Features | 엑셀 없이 정산이 끝난다 | 명사구 → 주장 |
+| 빠르고 안정적인 배포 | 배포 실패가 롤백까지 90초 | 형용사 → 측정치 |
+
+**대구·대조·리듬은 마지막에 얹는 것이다.** 먼저 말할 내용을 정하고,
+그것이 정해진 뒤에도 대구가 성립하면 그때 써라. 대구부터 잡으면 내용이 비어도 모른다.
+
 ### 구문 지문
 
 | 지문 | 왜 문제 | 대신 |

packages/skill/references/svg-filters.md

@@ -434,3 +434,50 @@ if (reduceEffects()) document.documentElement.classList.add('reduce-effects');
 - `width: 200%` — 요소보다 크게 잡아야 납작한 형태에서도 모서리까지 닿는다
 
 `prefers-reduced-motion` 에서는 애니메이션만 빼면 된다. 정지 상태의 광은 그대로 남는다.
+
+---
+
+## 데모는 추상 도형이 아니라 실무 소재에 걸어라
+
+필터를 소개할 때 줄무늬·체크무늬 같은 도형에 걸면 **필터가 무엇을 하는지는 보이지만
+그것을 왜 쓰는지는 보이지 않는다.** 보는 사람이 "그래서?" 하고 넘어간다.
+
+**각 필터를 그 필터가 실제로 걸리는 자리에 올려라.**
+
+| 필터 | 실무 소재 | 그 소재라야 보이는 것 |
+|---|---|---|
+| `feTurbulence` 그레인 | **매끈한 그라디언트 면** | 노이즈가 없으면 밋밋하다는 대비 |
+| `feDisplacementMap` 굴절 | **글자** | 유리 뒤의 것이 실제로 휘는 것 |
+| `feColorMatrix` 듀오톤 | **사진** | 출처가 다른 사진이 한 팔레트로 묶이는 것 |
+
+실측: 셋 다 같은 줄무늬에 걸었더니 "이게 어필이 되는 예시냐"는 지적을 받았다.
+소재를 바꾸자 설명 문장 없이도 용도가 읽혔다.
+
+**어필 포인트는 효과가 아니라 대체 비용이다.** `feTurbulence` 의 진짜 매력은
+"노이즈가 예쁘다"가 아니라 **200KB JPEG 텍스처를 300바이트 코드가 대신한다**는 것이다.
+카피에 그 수치를 써라.
+
+## `feComposite` 입력 순서를 뒤집으면 필터가 조용히 죽는다
+
+```xml
+<!-- 틀림: 원본이 노이즈 위에 올라가 노이즈를 통째로 가린다 -->
+<feComposite in="SourceGraphic" in2="soft" operator="over" />
+```
+
+`operator="over"` 는 **`in` 을 `in2` 위에** 올린다. 원본을 `in` 에 두면 효과가 전부 덮인다.
+**에러도 경고도 없다.** 필터는 정상적으로 적용되고 결과만 원본과 같다.
+
+그레인처럼 표면에 **섞이는** 효과는 합성이 아니라 블렌드다.
+
+```xml
+<feBlend in="SourceGraphic" in2="soft" mode="overlay" />
+```
+
+그리고 `baseFrequency` 를 0.8 이상으로 올리면 노이즈가 픽셀보다 촘촘해져
+화면에서 회색으로 뭉갠다. 그레인은 **0.5~0.7** 이 보인다.
+
+**필터를 붙였는데 "아무 변화가 없다"면 의심 순서는 이렇다.**
+
+1. `in`/`in2` 순서가 뒤집혔는가
+2. `baseFrequency` 가 너무 높은가
+3. 필터 영역(`x`/`y`/`width`/`height`)이 좁아 결과가 잘렸는가