feat(skill): route fixes, delivery report, composition diversity, platform refresh

- route table: extension route for products with an existing visual
  language, feedback row, derived state tokens stay local
- completion: blocking 0 plus reported unverified; hard-gate surface is
  the touched scope; delivery report starts with what and how to open
- design.md created at step 0 with a skeleton, fingerprint line and
  change log; product-surface rubric reading; direction delegation
  states the chosen card and reason
- layout: hero families, nav forms, footer forms; art-direction page
  convergence 6 axes; genre sections; image treatments; placeholder
  conventions; multi-screen order; Tailwind theme mapping
- platform: scroll-driven examples, anchor positioning, canvas OT,
  three/R3F pins, shadcn style prefixes, Safari 26 notes, subgrid
- design-gate: four result states, exit codes, cwd module resolution,
  --url/--out-dir/--strict, oklch contrast, dead selector word match
- Korean font budget split from the Latin baseline
This commit is contained in:
Yun Chan 2026-10-06 16:55:38 +09:00
parent 9bcb45cbd3
commit 88c11682b1
51 changed files with 5834 additions and 2259 deletions

View file

@ -1,8 +1,8 @@
# product-copy — 제품 UI 카피
4단계에서 버튼·폼 라벨·상태 메시지·오류·빈 상태·토글처럼 제품이 스스로 말하는 문구를 쓸 때 읽는다. 5단계 프리플라이트의 카피 검토에서 다시 연다.
4단계에서 버튼·폼 라벨·상태 메시지·오류·빈 상태·토글처럼 제품이 스스로 말하는 문구를 쓸 때 읽는다. 히어로 표제·섹션 제목·소개 문단을 쓸 때는 §13-b·§13-c를 연다. 5단계 프리플라이트의 카피 검토에서 다시 연다.
브랜드 차별성을 주장하는 마케팅 헤드라인·브랜드 약속의 슬롭 지문(`so you can…` 테스트, 구문·어휘 지문)은 이 문서가 아니라 [antipatterns.md](antipatterns.md) 6절이 정본이다. 두 문서는 같은 대상을 다른 각도에서 본다 — 헤드라인이 버튼·토글 같은 제품 UI 라벨을 겸하면 두 문서를 모두 확인한다.
브랜드 차별성을 주장하는 마케팅 헤드라인·브랜드 약속의 슬롭 지문(`so you can…` 테스트, 구문·어휘 지문)은 이 문서가 아니라 [antipatterns.md](antipatterns.md) 6절이 정본이다. 히어로 표제·섹션 제목·소개 문단의 한국어 문장 결함(번역체, 선언·잠언형 과장, 감성 어휘 반복, 영문 장식 라벨)은 이 문서 §13-c가 정본이다. 두 문서는 같은 대상을 다른 각도에서 본다 — 헤드라인이 버튼·토글 같은 제품 UI 라벨을 겸하면 두 문서를 모두 확인한다.
라벨은 셋 중 하나다. **하드 게이트**는 위반하면 통과시키지 않는다(WCAG 등 규범·기능 요건). **프로젝트 계약**은 이 프로젝트가 그 조건을 선택했을 때 지키는 약속이다(용어 체계, 어투 통일 같은 자체 결정). **관찰 후보**는 시작값이고 실제 렌더·독자 반응에서 확인해 조정한다. 절 제목에 주된 위계를 붙이고, 절 안에서 다른 위계가 섞이면 문장 앞에 굵게 라벨을 따로 단다.
@ -21,9 +21,13 @@
| `{name}을(를) 삭제했습니다` 같은 변수 삽입 문장 | §9 |
| 토글·링크 텍스트·placeholder | §10 |
| 물음표·느낌표·줄임표를 언제 쓰나 | §11 |
| 숫자·단위·금액·날짜·시간 표기 | §11-1 |
| 영문 라벨의 대소문자 규칙 | §12 |
| 실제 서비스 사례가 궁금하다 | §13 |
| 브랜드 헤드라인 후보를 고른다 · 메타 서술 금지 | §13-b |
| 히어로 표제·섹션 제목·소개 문단이 번역체이거나 과장돼 보인다 | §13-c |
| 카피 findings를 어떻게 검증·보고하나 | §14 |
| 상호·가격·후기 같은 실제 값이 아직 없다 | §16 |
| 감사 직전 | §15 |
---
@ -126,7 +130,7 @@
## 8. 평이한 말·기기 동사·독자 지칭·내부 용어 — 관찰 후보
- **최종 사용자 어휘로 쓴다.** 시스템 구현 방식이 아니라 사용자가 실제로 하는 일로 이름 붙인다 — `webhook`이 아니라 `알림`, `payload`가 아니라 `보낸 내용`. 이 검사는 [antipatterns.md](antipatterns.md) §6(진단)·§9(grep)의 내부 구현 용어 grep 후보(`webhook`·`config`·`payload`·`schema`)와 같은 검사이며, 여기서는 화면에 노출되는 **모든** 라벨·설정 이름에 같은 기준을 적용한다[SKILL-FRONTEND-DESIGN].
- **독자의 어휘로 쓴다.** 일반 사용자 제품은 시스템 구현 방식이 아니라 사용자가 실제로 하는 일로 이름 붙인다 — `webhook`이 아니라 `알림`, `payload`가 아니라 `보낸 내용`. **개발자·전문가가 독자인 제품은 업계 표준 용어를 그대로 쓴다** — 개발자 도구에서 `webhook`·`API 키`·`payload`는 정확한 도메인 용어이고, 풀어 쓰면 오히려 무엇인지 알 수 없다. 독자가 누구인지는 브리프에서 정한다. 이 검사는 [antipatterns.md](antipatterns.md) §6(진단)·§9(grep)의 내부 구현 용어 grep 후보(`webhook`·`config`·`payload`·`schema`)와 같은 검사이며, 여기서는 화면에 노출되는 **모든** 라벨·설정 이름에 같은 기준을 적용한다[SKILL-FRONTEND-DESIGN].
- **입력 방식에 맞는 동사를 쓴다.** 터치 인터페이스 안내에 `클릭`을, 마우스 중심 안내에 `탭`을 쓰지 않는다. 입력 방식을 특정할 수 없는 라벨(아이콘 버튼 등)은 동사 없는 명사형도 대안이다[SKILL-BETTER-WRITING].
- **독자 지칭과 소유격을 절제한다.** 안내문은 한국어의 주어 생략을 살려 `-하세요`체로 직접 쓰는 편이 자연스럽다. 오류 문구에서 `저희가`·`우리가` 같은 서비스 쪽 주어를 남용하지 않는다(§6의 `불러오지 못했습니다`처럼 상황 주어가 더 담백하다). 소유격도 필요할 때만 쓴다 — `내 즐겨찾기`가 다른 사용자의 즐겨찾기와 헷갈릴 우려가 없으면 `즐겨찾기`로 충분하다[SKILL-BETTER-WRITING].
- **특정 집단을 전제하는 표현을 쓰지 않는다.** 성별·연령 등을 전제한 예시 문구나 관용구는 다른 독자를 배제할 수 있다.
@ -174,7 +178,7 @@ const josa = pickJosa(name, '을', '를');
**관찰 후보** — 스크린리더의 링크 목록 탐색 모드는 맥락 없이 링크 텍스트만 순서대로 읽으므로, 그런 상황에서도 통하도록 목적어를 넣는다 — `더보기` 단독 대신 `가격표 보기`[SKILL-BETTER-WRITING]. 한 화면에 `더보기` 링크가 여러 개면 각각 접미사로 구분한다(`사례 더보기`, `요금제 더보기`).
링크 존재 여부 자체는 이미 [preflight.md](preflight.md) §4-1이 확인한다 — 이 절은 그 링크의 문구 작성법만 더한다.
링크 텍스트가 목적지를 말하는지는 [preflight.md](preflight.md) C5가 판정한다 — 이 절은 그 링크의 문구 작성법만 더한다.
### 10-3. placeholder는 라벨이 아니다 — 하드 게이트
@ -195,6 +199,22 @@ const josa = pickJosa(name, '을', '를');
- 진행 중 상태는 줄임표로 표시할 수 있다(`저장 중…`, `불러오는 중…`). 스피너·프로그레스 표시와 함께 써도 된다.
- 물음표·느낌표는 §3의 톤과 위험 수위를 넘지 않는 범위에서만 쓴다. 오류·파괴적 확인에는 느낌표를 쓰지 않는다(§6과 같은 이유).
### 11-1. 숫자·단위·금액·날짜 표기 — 프로젝트 계약(한 프로젝트 안에서 하나로 통일)
[typography.md](typography.md)가 값과 단위 표기의 정본으로 이 절을 가리킨다. 아래는 한국어 UI의 시작값이다. 프로젝트에 이미 표기 규칙이 있으면 그것을 따르고, 어느 쪽이든 `design.md`에 한 줄로 고정한다.
| 항목 | 시작값 | 비고 |
|---|---|---|
| 숫자 + 한글 단위 | 붙여 쓴다: `3개`, `10명`, `2시간` | 단위 명사는 원칙상 띄어 쓰지만 아라비아 숫자와 함께 쓰면 붙여 쓸 수 있다(한글 맞춤법 제43항). UI에서는 붙여 쓰기가 관행이다 |
| 숫자 + 단위 기호 | `10kg`, `25%`, `3.5GB` 붙여 쓰기가 한국 UI 관행 | 과학·기술 문서처럼 SI 표기를 따르는 맥락이면 `10 kg`으로 띄운다. 섞지 않는다 |
| 금액 | `12,000원`(세 자리 쉼표 + `원` 뒤붙임) | `₩12,000`은 좁은 표·다국어 화면에서만. 큰 금액 요약은 `1.2만 원`, `3억 2,000만 원`처럼 만 단위로 끊는다. 정확한 값이 필요한 곳(결제·영수증)에서는 축약하지 않는다 |
| 날짜 | `2026. 10. 1.`(숫자 뒤 마침표, 마침표 뒤 띄움, 끝의 마침표 포함) 또는 `2026년 10월 1일` | 둘 중 하나로 통일. 표·목록처럼 좁은 곳은 숫자형, 문장 안은 글자형이 읽기 쉽다. 요일은 `(수)` |
| 시간 | `오후 3:30` 또는 `15:30` | 하나로 통일. 상대 시간(`3분 전`)은 24시간 안에서만 쓰고 정확한 시각을 툴팁·상세로 함께 둔다 |
| 범위 | `10~20개`, `10월 1일~3일` | 물결표를 붙여 쓴다 |
| 가운뎃점 | 짝을 이루는 어구를 묶을 때(`시·도`, `읽기·쓰기`) | 제목·라벨에서 남용하는 지문은 [antipatterns.md](antipatterns.md)가 맡는다 |
**코드로 만든다.** 금액·날짜·상대 시간·복수형은 손으로 문자열을 조립하지 않고 `Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW' })`, `Intl.DateTimeFormat`, `Intl.RelativeTimeFormat`, `Intl.PluralRules`(영어 등 복수형이 있는 언어)로 만든다. 로케일이 바뀌어도 표기가 따라온다. `Intl` 기본 출력이 위 표와 다르면(예: `₩12,000`) 프로젝트 규칙에 맞게 감싸는 함수 하나를 두고 모든 화면이 그것을 쓴다.
---
## 12. 라틴 문자 UI의 대소문자 정책 — 관찰 후보
@ -213,6 +233,70 @@ const josa = pickJosa(name, '을', '를');
---
## 13-b. 헤드라인 후보는 화법을 바꿔 비교한다 — 관찰 후보
브랜드·마케팅 헤드라인을 쓸 때 첫 문장을 그대로 채택하지 않는다.
1. 후보를 5개 쓴다.
2. 그중 **서로 다른 화법 3종**을 고른다 — 사실(무엇을 하는가, 숫자·대상이 있는 문장), 명령(독자가 할 행동), 장면(독자가 겪는 순간 하나).
3. 각 후보에 "경쟁사 이름으로 바꿔도 성립하는가"를 묻는다. 성립하면 버린다(반사실 검사, [antipatterns.md](antipatterns.md) §6).
4. 채택한 후보와 채택 이유 한 줄을 `design.md`에 적는다.
**메타 서술을 쓰지 않는다.** "이 페이지는 ~를 보여 줍니다", "~하는 방식을 살펴볼 수 있습니다"처럼 페이지가 자기 자신을 설명하는 문장은 브랜드의 목소리가 아니다. 브랜드는 자기 페이지를 해설하지 않고 대상에 대해 말한다. 시안이 가상이라는 고지도 히어로 헤드라인·본문에 넣지 않는다 — 고지 위치는 [trustworthy-showcases.md](trustworthy-showcases.md)를 따른다.
## 13-c. 마케팅·브랜드 카피 — 번역체·과장 걷어내기 — 프로젝트 계약
히어로 표제, 섹션 제목, 소개 문단처럼 브랜드가 방문자에게 직접 거는 문장에 적용한다. 실측 사고: 쇼케이스 페이지를 돌려 읽은 사용자가 "다 영어 번역체와 쓸데없이 너무 이상한 카피, 중2병 같은 게 많다"고 지적했다. 시각이 아무리 정교해도 표제 한 줄이 번역 소설처럼 읽히면 페이지 전체가 AI 결과물로 읽힌다.
이 절은 **한국어 문장 자체의 결함**(번역체·과장·감성 어휘 반복)의 정본이다. 경쟁사 이름으로 바꿔도 성립하는지(차별성)는 [antipatterns.md](antipatterns.md) §6, 후보를 화법별로 비교하는 절차는 §13-b, 한 회사의 어투 원칙 사례는 §13이 맡는다. 순서는 이렇다 — §13-b로 후보를 만들고, 이 절의 지문으로 걸러내고, antipatterns §6 치환 검사로 차별성을 확인한다.
**목표.** 실제 한국 회사·가게 사이트에 그대로 걸려도 어색하지 않은 문장. 읽는 사람이 3초 안에 무엇을, 누구에게, 왜 좋은지를 안다. 멋은 디자인이 내고, 문장은 정확하고 담백하게 쓴다.
### 13-c-1. 걷어낼 지문
| 지문 | 알아보는 법 | 나쁜 예 | 고친 예 |
|---|---|---|---|
| **무생물 주어 + 사람 동사** | 도시·빛·공간·데이터가 묻고, 말하고, 기억하고, 이야기한다 | 28개 도시가 10초마다 묻는다 (모니터링 SaaS) | 전 세계 28개 지점에서 10초마다 서버 상태를 확인합니다 |
| | | 빛이 먼저 말을 건다 (안경원) | 렌즈 굴절 검사부터 착용 조정까지 한 시간이면 끝납니다 |
| **명사로 끝나는 수수께끼 표제** | `~하는 각도`, `~하는 온도`, `~의 결`, `~라는 시간`으로 끝나고 무엇을 파는지 안 나온다 | 흰 빛 한 줄이 색으로 갈라지는 각도 (광학 부품) | 분광기용 프리즘과 회절격자를 소량 주문 제작합니다 |
| | | 아침을 데우는 온도 (카페) | 매일 아침 7시, 그날 볶은 원두로 내립니다 |
| **선언·잠언형 과장** | 짧은 단정문이 교훈처럼 끝난다. `침묵이 말한다`, `말이 없다`, `본질만 남겼다`, `우리는 ~를 믿는다` | 동의는 신호보다 먼저 기록됩니다 (학원 등록) | 등록 전에 환불 규정과 개인정보 이용 동의를 한 화면에서 확인합니다 |
| | | 본질만 남겼습니다 (가구) | 원목 다리와 상판, 나사 네 개로 조립합니다 |
| **`~가 아니라 ~다` 대구 남발** | 한 페이지에 대조 대구가 둘 이상. 첫 대구도 실제 비교 대상이 없으면 결함이다 | 향은 냄새가 아니라 기억이다 (향 공방) | 쑥·백단·침향을 손으로 빚어 30일 말린 선향입니다 |
| **영어 직역 구문** | `~를 통해`, `~에 있어서`, `~함에 있어`, `~되어지다`, `가장 ~한 ~ 중 하나`, 독자를 부르는 `당신의`, `여정`, `새로운 차원`, `재정의` | 당신의 건강 여정을 재정의합니다 (한의원) | 허리·어깨 통증 진료, 평일 저녁 8시까지 예약할 수 있습니다 |
| | | 데이터를 통해 가장 혁신적인 교육 경험 중 하나를 제공합니다 (온라인 강의) | 매주 퀴즈 결과로 다음 주 복습 범위를 정해 드립니다 |
| **`~를 만나보세요`·`~를 경험하세요` 반복** | 섹션마다 같은 권유 어미로 끝난다 | 새로운 위스키의 세계를 만나보세요 (위스키 바) | 싱글 캐스크 40종을 잔 단위로 주문할 수 있습니다 |
| **감성 어휘 반복** | `결`, `온도`, `숨`, `여백의 미`, `시간을 담다`, `머무는`, `스미는`, `깃든`이 한 페이지에 두 번 이상 | 시간이 깃든 공간, 머무는 숨의 결 (한옥 스테이) | 1938년에 지은 한옥, 객실 3개, 조식은 마당에서 냅니다 |
| **내용 없는 영문 장식 라벨** | `THE ARCHIVE`, `NO. 01 — ESSENCE`, `CHAPTER ONE`처럼 아래 내용과 관계없는 영문 대문자 라벨 | NO. 01 — ESSENCE (법률사무소 업무 소개) | 업무 분야 (또는 라벨을 지우고 섹션 제목만 둔다) |
영문 장식 라벨은 기본 언어 규칙(SKILL.md 핵심 규칙 8)과 같은 방향이다. 브랜드명·제품명처럼 원래 영문인 고유명사는 해당하지 않는다.
### 13-c-2. 이렇게 쓴다
- **표제는 사실 + 이득.** 무엇을 하는 곳·제품인지를 숫자나 구체 명사로 말하고, 그래서 방문자에게 무엇이 좋은지를 붙인다.
- **업종 관례 어휘를 쓴다.** 카페는 원두·로스팅·영업시간, 클리닉은 진료 과목·예약, SaaS는 요금·연동·도입 사례, 학원은 반 편성·수강료·시간표. 방문자가 검색창에 칠 단어가 표제와 소제목에 있어야 한다.
- **자연스러운 한국어 어순.** 주어를 사람이나 회사로 두거나 생략한다. 조사를 정확히 쓰고, 존댓말 어미는 하나로 통일한다(§4).
- **개성은 구체성에서 낸다.** 실제 공정, 장소, 사람, 숫자, 고유명사가 개성이다. 형용사와 은유로 내지 않는다.
- **은유는 한 페이지에 한 곳까지.** 브랜드 슬로건 하나 정도만 허용하고, 나머지 표제·섹션 제목·소개 문단은 정보 문장으로 쓴다. 은유를 쓴 자리 바로 아래에는 그 은유를 풀어 주는 사실 문장을 둔다.
### 13-c-3. 두 가지 읽기 검사
1. **소리 내어 읽기.** 표제·히어로 문단·섹션 제목을 소리 내어 읽는다. 번역 소설처럼 들리거나, 낭독하기 민망하면 고친다.
2. **그 업종 사장님 검사.** "이 가게·회사 대표가 손님에게 이 말을 직접 하겠는가"를 묻는다. 카페 사장님은 "아침을 데우는 온도"라고 하지 않고 "7시에 엽니다"라고 한다.
**grep 후보**(문맥 확인 필요, 검출 자체는 실패가 아니다).
```
를 통해|에 있어서|함에 있어|되어지|중 하나|당신의|여정|재정의|새로운 차원
만나보세요|경험하세요
결$|온도$|숨$|머무는|스미는|깃든|여백의 미|시간을 담
가 아니라|이 아니라
```
같은 후보가 한 페이지에서 두 번 이상 걸리면 반복 지문으로 본다. 판정은 [critique.md](critique.md) §2-1 R7(카피 목소리)이 하고, 0점이면 Direction(D6)이다.
---
## 14. 검증
카피 findings는 1차로 소스(코드·design.md) 대조만으로 판정할 수 있다 — 용어 일관성(§2), 버튼 동사(§5), 오류·빈 상태 문구 내용(§6·§7)은 렌더를 새로 켜지 않아도 확인 가능하다[SKILL-BETTER-WRITING]. 다만 잘림·줄바꿈의 영향을 받는 카피(버튼 라벨, 제목, 좁은 카드 안 문구)는 소스만으로 판정하지 않는다 — 실제 렌더에서 줄바꿈·말줄임(`text-overflow: ellipsis`)·좁은 폭 재배치를 확인한다.
@ -221,21 +305,36 @@ const josa = pickJosa(name, '을', '를');
---
## 15. 체크리스트
## 15. 체크리스트 (구현 중 자기 점검 — 납품 판정은 preflight.md X7)
- [ ] 새 카피를 쓰기 전에 기존 화면·design.md의 용어를 확인했다(§1)
- [ ] 같은 개념을 화면마다 다른 말로 부르지 않는다 — grep으로 소수파 표현을 찾아 통일했다(§2)
- [ ] 일상·주의·파괴·오류·금전 상황의 톤 강도가 다르다(§3)
- [ ] 한 화면·한 제품 안에서 해요체·합니다체가 섞이지 않는다(§4)
- [ ] 버튼 라벨이 동사형이고 결과를 말한다. 파괴적 확인 버튼은 결과를 반복한다(§5)
- [ ] 같은 행동이 버튼 → 확인 → 토스트까지 같은 이름을 쓴다(§5)
- [ ] 오류 문구가 무엇이 잘못됐는지와 어떻게 고치는지를 함께 말한다. 비난·과한 사과·느낌표가 없다(§6)
- [ ] 빈 상태가 정체성·이유·다음 행동을 말한다. 검색 빈 상태는 입력한 조건을 보여준다(§7)
- [ ] 내부 구현 용어(webhook·config·payload·schema)가 사용자 라벨로 새지 않았다(§8)
- [ ] 변수 주변에 문장 조각을 조립하지 않았다. 조사가 필요한 자리는 받침 판별 또는 문장 재구성으로 처리했다(§9)
- [ ] 토글 라벨이 켜진 상태를 기준으로 쓰였다(§10-1)
- [ ] 링크 텍스트가 맥락 없이도 목적지를 알려준다(§10-2)
- [ ] placeholder가 라벨을 대신하지 않고 형식 예시로만 쓰였다(§10-3)
- [ ] 아이콘 버튼의 `aria-label`이 화면에 보이는 문구를 포함한다(§10-4)
- [ ] 영문 라벨이 있다면 요소 유형별로 대소문자 정책이 통일돼 있다(§12)
- [ ] 잘림·줄바꿈에 영향받는 카피(버튼·제목·좁은 카드)는 실제 렌더로 확인했다(§14)
납품 판정은 [preflight.md](preflight.md) X7이 하고, 링크 텍스트의 목적지는 C5, placeholder와 라벨은 A5, 아이콘 버튼 이름은 A11이 판정한다.
- 숫자·단위·금액·날짜 표기를 §11-1 표의 한 방식으로 통일했고 `design.md`에 적었다
- 헤드라인이 메타 서술("이 페이지는 ~를 보여 줍니다")이 아니다. 후보를 화법별로 비교했다(§13-b)
- 히어로 표제·섹션 제목·소개 문단을 소리 내어 읽었고, 번역체·잠언형 과장·감성 어휘 반복·영문 장식 라벨이 없다. 은유는 페이지에 한 곳까지다(§13-c)
- 새 카피를 쓰기 전에 기존 화면·design.md의 용어를 확인했다(§1)
- 같은 개념을 화면마다 다른 말로 부르지 않는다 — grep으로 소수파 표현을 찾아 통일했다(§2)
- 일상·주의·파괴·오류·금전 상황의 톤 강도가 다르다(§3)
- 한 화면·한 제품 안에서 해요체·합니다체가 섞이지 않는다(§4)
- 버튼 라벨이 동사형이고 결과를 말한다. 파괴적 확인 버튼은 결과를 반복한다(§5)
- 같은 행동이 버튼 → 확인 → 토스트까지 같은 이름을 쓴다(§5)
- 오류 문구가 무엇이 잘못됐는지와 어떻게 고치는지를 함께 말한다. 비난·과한 사과·느낌표가 없다(§6)
- 빈 상태가 정체성·이유·다음 행동을 말한다. 검색 빈 상태는 입력한 조건을 보여준다(§7)
- 내부 구현 용어(webhook·config·payload·schema)가 사용자 라벨로 새지 않았다(§8)
- 변수 주변에 문장 조각을 조립하지 않았다. 조사가 필요한 자리는 받침 판별 또는 문장 재구성으로 처리했다(§9)
- 토글 라벨이 켜진 상태를 기준으로 쓰였다(§10-1)
- 영문 라벨이 있다면 요소 유형별로 대소문자 정책이 통일돼 있다(§12)
- 잘림·줄바꿈에 영향받는 카피(버튼·제목·좁은 카드)는 실제 렌더로 확인했다(§14)
---
## 16. 실제 값이 아직 없을 때 — placeholder 규약 — 프로젝트 계약
동네 가게나 새 제품의 사이트는 상호·주소·가격·시간표·사람 이름이 전부 사용자만 아는 값이다. 사용자가 "아직 없다"고 하면 두 가지 실패가 나온다: 중괄호 토큰이 날것으로 찍힌 납품물, 또는 그럴듯하게 지어낸 수업명과 강사 약력. 둘 다 막는다.
1. **무엇이 placeholder인가.** 사용자만 아는 사실 전부다 — 상호, 사람 이름, 주소·연락처, 가격, 시간표, 수업·상품 이름, 후기, 수치. 문장으로 된 사실(강사 약력, 연혁)도 같다. 그럴듯하게 지어내지 않는다(SKILL.md 하드 게이트 7).
2. **무엇은 써도 되나.** 업종에서 누구에게나 참인 설명(필라테스가 무엇인지), 행동 안내(예약 방법의 틀), 섹션 제목·버튼 라벨. 사용자가 준 말에서 벗어나는 주장은 쓰지 않는다.
3. **화면에서의 모양.** 자리의 뜻이 읽히는 대괄호 표기(`[스튜디오 이름]`, `[1회 체험 가격]`)를 실제 서체·크기로 넣고, 한 가지 표식(예: 점선 밑줄)을 토큰으로 정해 전부에 똑같이 준다. 표기는 사이트 기본 언어로 쓴다. 길이는 실제 값의 예상 길이에 맞춘다 — 짧은 자리표시로 맞춘 레이아웃은 실제 값에서 깨진다.
4. **코드에서의 모양.** 값은 한 곳(콘텐츠 파일이나 페이지 머리의 상수 블록)에 모으고 마크업은 거기서 읽는다. 사용자가 한 곳만 고치면 되게 한다.
5. **목록.** `design.md` 미확정 절과 납품 보고의 "정해 주셔야 할 것"에 placeholder를 전부 나열한다(이름 · 어디에 보이는지).
6. **빠지면 구조가 무너지는 자리**(후기 섹션, 강사 소개)는 placeholder로 채우지 말고 섹션을 뺀 뒤 "값을 주시면 넣을 자리"로 보고한다(하드 게이트 7의 (c)).