diff --git a/packages/skill/references/antipatterns.md b/packages/skill/references/antipatterns.md index 3688380..27a7e26 100644 --- a/packages/skill/references/antipatterns.md +++ b/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), +})) +``` + +읽는 순서도 같이 본다. **같은 성격끼리 붙어 있어야 한다** — 기능·증거·기능·증거로 +번갈아 나오면 독자는 지금 무슨 이야기를 듣고 있는지 놓친다. +소개 페이지의 기본 묶음은 `무엇인가 → 무엇을 아는가 → 정말 그런가 → 행동` 이다. + +--- + ### 데모를 만들기 전에 카피부터 쓰지 마라 실측 사례. 필터 데모 넷을 만들면서 각 데모의 결론 문장을 먼저 썼다 —