docs(skill): 여백을 문장으로 채우지 마라, 부분 수정 뒤에는 전체를 다시 재라

packages/skill/references/antipatterns.md

@@ -339,6 +339,54 @@ WebGL 판이 본문 뒤를 지나가는 화면을 보고 "대비가 죽었다"
 
 ---
 
+### 여백이 필요하면 여백을 만들어라 — 문장으로 채우지 마라
+
+sticky 캔버스가 끝까지 돌려면 목록 뒤에 스크롤 구간이 필요했다.
+빈 요소를 두기가 뭐해서 마무리 문장을 한 줄 놓았다.
+
+> "여섯 단계 끝에 남는 것은 페이지 하나와 design.md 하나다."
+
+문장 자체는 틀리지 않았다. 다만 **읽는 사람이 그 자리에서 기대하는 말이 아니다.**
+사용자가 처음 한 말이 "이건 왜 있는 거예요" 였다.
+
+레이아웃이 필요해서 쓴 문장은 예외 없이 겉돈다. 여백이 필요하면
+`padding` 을 주고, 그 자리에 놓을 말이 정말 있을 때만 문장을 쓴다.
+
+> 자가 진단: 이 문장을 지우면 **레이아웃이 깨지는가, 뜻이 빠지는가?**
+> 레이아웃만 깨진다면 그 문장은 여백의 대역이고, 여백으로 바꿔야 한다.
+
+### 지적받은 자리만 고치면 전체가 무너진다
+
+한 페이지를 만들며 사용자 지적이 올 때마다 그 섹션을 손봤다.
+각각은 옳은 수정이었는데 합계는 이렇게 됐다.
+
+| 섹션 | 분량 | 역할 |
+|---|---|---|
+| 히어로 | 0.7 화면 | 이게 뭔가 |
+| 파이프라인 | 2.4 | 어떻게 작동하나 |
+| 기능 예시 A | **3.1** | 곁가지 |
+| 기능 예시 B | 1.8 | 곁가지 |
+| 증거 ①②③④ | 5.5 | 같은 말 네 번 |
+
+**곁가지 하나가 본론의 1.3 배, 첫인상이 가장 짧다.** 분량 배분이 중요도와 정반대다.
+사용자 표현으로는 "정신이 없어 보인다".
+
+부분 수정을 몇 번 하고 나면 반드시 전체를 다시 재라.
+
+```js
+// 섹션별 화면 수 — 배분이 우선순위와 맞는지 한 번에 보인다
+[...document.querySelectorAll('main > section')].map(s => ({
+  제목: s.querySelector('h2')?.textContent?.trim().slice(0, 24),
+  화면: +(s.getBoundingClientRect().height / innerHeight).toFixed(1),
+}))
+```
+
+읽는 순서도 같이 본다. **같은 성격끼리 붙어 있어야 한다** — 기능·증거·기능·증거로
+번갈아 나오면 독자는 지금 무슨 이야기를 듣고 있는지 놓친다.
+소개 페이지의 기본 묶음은 `무엇인가 → 무엇을 아는가 → 정말 그런가 → 행동` 이다.
+
+---
+
 ### 데모를 만들기 전에 카피부터 쓰지 마라
 
 실측 사례. 필터 데모 넷을 만들면서 각 데모의 결론 문장을 먼저 썼다 —