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
parent
9bcb45cbd3
commit
88c11682b1
51 changed files with 5834 additions and 2259 deletions
|
|
@ -10,9 +10,24 @@
|
|||
|
||||
목표는 경고문을 많이 붙이는 것이 아니다. **주장의 구조가 정직하고, 그 정직함이 디자인을 약하게 만들지 않게 하는 것**이다.
|
||||
|
||||
## 이 문서를 읽는 법
|
||||
|
||||
| 상황 | 읽을 곳 |
|
||||
|---|---|
|
||||
| 1단계 — 목표 시장과 금지 문법을 잠근다 | §2 |
|
||||
| 2단계 — 고객·관리자처럼 표면이 여럿이다 | §3, §5 |
|
||||
| 가상 브랜드·예시 값의 라벨을 정한다 | §4 (4-a 공통 부모, 4-b 라벨 예산) |
|
||||
| 생성 이미지를 쓴다 | §6 |
|
||||
| AI 결과·맞춤 분석을 싣는다 | §7 |
|
||||
| 진단·예약·거래 같은 규제 행동이 있다 | §8 |
|
||||
| 지도·차트·도식이 있다 | §9 |
|
||||
| 5단계 — 시각 E2E와 캡처 계약 | §10, §11, §13 |
|
||||
|
||||
충돌하면 §1의 순서로 해석한다.
|
||||
|
||||
---
|
||||
|
||||
## 1. 기존 근본 규칙과의 충돌 해결
|
||||
## 1. SKILL.md 핵심 규칙과의 충돌 해결
|
||||
|
||||
이 문서는 기존 규칙을 느슨하게 만들지 않는다. 충돌하면 다음 순서로 해석한다.
|
||||
|
||||
|
|
@ -22,7 +37,7 @@
|
|||
4. 게이트의 기본값은 유지한다. 예외가 필요하면 페이지 계약으로 좁게 선언하고 더 넓은 매트릭스로 검증한다.
|
||||
5. 생성 이미지는 분위기와 재질을 맡고, 가격·상태·근거·판정은 DOM이 맡는다.
|
||||
|
||||
예: 마케팅 h1에 2줄이 필요하면 범용 1줄 규칙을 삭제하지 않는다. 그 페이지만 `h1MaxLines: 2`로 선언하고 375·390px × 글꼴 확대에서도 2줄 이하인지 잰다.
|
||||
예: 마케팅 h1의 줄 수를 계약으로 잠그려면 그 페이지에 `h1MaxLines: 2`를 선언하고 375·390px × 글꼴 확대에서도 2줄 이하인지 잰다. 선언이 없으면 게이트는 줄 수를 판정하지 않는다.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -37,7 +52,7 @@
|
|||
```
|
||||
|
||||
- R1은 같은 업종·목적이면서 가능하면 **같은 목표 시장**에서 고른다. 구조에는 단위·용어·연락 방식·신뢰 표지가 들어 있기 때문이다.
|
||||
- R2는 다른 업종이어야 한다는 근본 규칙을 유지한다. 다만 목표 시장의 미감이 중요하면 **같은 문화권의 다른 업종**을 우선한다.
|
||||
- R2는 다른 업종·매체를 우선한다는 기본값을 유지한다. 다만 목표 시장의 미감이 중요하면 **같은 문화권의 다른 업종**을 우선한다.
|
||||
- R3가 다른 문화권에서 왔다면 가져올 것은 구현 기법 하나뿐이다. 색·카피·상징까지 따라오면 시장 계약을 어긴다.
|
||||
- 국내화는 태극 문양이나 한옥 장식을 붙이는 일이 아니다. **단위·정보 순서·검색 축·사진의 조도·문의 단계**를 현지 관습에 맞추는 일이다.
|
||||
|
||||
|
|
@ -57,7 +72,7 @@
|
|||
예시:
|
||||
|
||||
```md
|
||||
공통: Pretendard, 8px 리듬, 먹색, 강조색 1개, 직설형 카피
|
||||
공통: <본문 서체>, 8px 리듬, <잉크색>, 강조색 1개, 직설형 카피
|
||||
고객 랜딩: 표현 2 / 밀도 1 / 모션 1 / 증거 2
|
||||
관리자: 표현 0 / 밀도 3 / 모션 0 / 증거 3
|
||||
```
|
||||
|
|
@ -96,6 +111,8 @@
|
|||
- 자식 하나라도 상태·출처·행동 가능성이 다르면 그 자식에 예외 라벨을 둔다.
|
||||
- 공통 부모의 범위가 화면과 보조기술에서 명확하지 않으면 묶지 않는다. 폼은 `fieldset/legend`, 표는 `caption`, 카드 집합은 제목·설명과 `aria-describedby` 같은 프로그램적 연결을 쓴다.
|
||||
- 전역 띠는 사이트 전체의 가상 브랜드 상태를 맡을 수 있지만, 특정 가격·이미지·제출 행동의 서로 다른 경계까지 대신하지 않는다.
|
||||
- **"한 번"의 뜻**: 부모가 라벨을 가졌으면 그 범위 안의 자식·셀·캡션·버튼 옆에서 같은 진실 상태를 다시 말하지 않는다. 같은 범위를 두 번 말하는 흔한 형태 — 히어로 본문 + CTA 옆, 상단 배너 + 히어로 박스 + 푸터, 표 `caption` + 모든 행의 `상태 예시`, 가격 열 제목 + 가격마다 `예시`. 전역 띠가 "가상 브랜드"를 맡았으면 히어로는 그 사실을 반복하지 않는다.
|
||||
- 공통 부모의 경계가 화면에서 보이지 않을 만큼 멀면(긴 표가 스크롤로 머리글을 벗어나는 경우 등) 반복하지 말고 머리글 고정(`position: sticky`)이나 그룹 분할로 부모를 가깝게 만든다.
|
||||
|
||||
구현 전에 진실 라벨의 `문구 / 소유 컨테이너 / 예외 자식`을 표로 만들고, 같은 문구의 반복 횟수가 아니라 의미 범위가 닫혔는지 감사한다.
|
||||
|
||||
|
|
@ -109,6 +126,17 @@
|
|||
|
||||
라벨은 작은 회색 각주로 숨기지 않는다. 본문 대비를 지키고 해당 주장과 같은 시각 그룹에 둔다.
|
||||
|
||||
### 4-b. 라벨은 브랜드 목소리를 대체하지 않는다
|
||||
|
||||
실측 사고(2026-10-01 레드팀): 가상 브랜드 쇼케이스들의 히어로 본문 자체가 면책 문구였고("이 페이지의 수치와 시험 기록은 … 예시입니다"), 한 페이지에 `예시`가 13~17회 나왔다. 헤드라인마저 정직함을 변명하는 말이 됐다. 첫 3초에 읽히는 문장이 "이건 진짜가 아닙니다"면 어떤 비주얼도 감정을 만들지 못하고, 같은 경고가 반복되면 경고 자체도 묻힌다. 진실성은 **위치와 범위**로 해결한다.
|
||||
|
||||
- **h1·히어로 본문·헤드라인·섹션 표제에 고지 문구를 넣지 않는다.** 그 자리는 가상 브랜드의 1인칭 목소리가 소유한다. 가상 브랜드라는 사실은 전역 띠(또는 푸터의 페이지 범위 고지)가 맡는다.
|
||||
- 헤드라인이 정직함을 변명하지 않게 한다("정직하게 설명합니다", "말 대신 보여 줍니다"류). 브랜드는 자기 페이지의 성격을 설명하지 않는다.
|
||||
- **페이지 범위 고지는 두 곳까지**: 전역 띠 또는 푸터 1곳 + 실제 오해 비용이 생기는 행동 직전 1곳(예: 폼 제출 버튼 옆 `실제 접수되지 않음`).
|
||||
- 개별 값의 라벨은 공통 부모(열 머리글·단위·`caption`)에 한 번만 단다 — `가격(예시)`.
|
||||
- **라벨 예산 상한**: 가시 텍스트에서 `예시·가상·실제 아님·않습니다` 같은 고지성 표현은 페이지당 대략 1,000자에 3회 이하를 목표로 한다. 넘으면 4-a의 공통 부모로 묶을 수 있는 반복부터 지운다. 이 수치는 감사용 경보이지 진실성 기준이 아니다 — 오해 지점이 실제로 많아서 넘는다면 표·그룹 구조를 바꿔 부모 수를 줄인다.
|
||||
- 생성 이미지 캡션(`연출 이미지`)은 이미지마다 필요할 수 있다. 같은 갤러리의 이미지가 모두 연출이면 갤러리 제목에 한 번 둔다.
|
||||
|
||||
---
|
||||
|
||||
## 5. 성공 행동이 다르면 경로를 나눈다
|
||||
|
|
@ -307,7 +335,7 @@ if (assertionCount < EXPECTED_ASSERTIONS) throw new Error("assertion count drift
|
|||
|
||||
---
|
||||
|
||||
## 12. 구현과 사용자 게이트에서 검증된 교훈 21개
|
||||
## 12. 구현과 사용자 게이트에서 검증된 교훈 22개
|
||||
|
||||
| # | 교훈 | 스킬에 반영하는 규칙 |
|
||||
|---|---|---|
|
||||
|
|
@ -332,24 +360,19 @@ if (assertionCount < EXPECTED_ASSERTIONS) throw new Error("assertion count drift
|
|||
| 19 | 같은 `예시` 경고를 모든 자식에 반복하면 가치와 경고가 함께 묻힌다 | 같은 진실 범위는 가장 가까운 명확한 공통 부모가 한 번 소유 |
|
||||
| 20 | 공개 페이지에 내부 ID·게시 채널·감사 원장을 복제하면 제품 설명서가 된다 | 공개는 해석·제한·다음 행동, 관리자는 재현 가능한 내부 증거를 소유 |
|
||||
| 21 | 보이는 입력과 계산 조건이 다르면 맞춤 분석은 임의 결과가 된다 | 입력 필드·판정 의존성·출력 주장을 한 SSOT 표로 잠그고 초기 미실행 상태를 검증 |
|
||||
| 22 | 히어로 본문을 면책 문구로 쓰면 첫인상과 브랜드 목소리가 사라진다 | h1·히어로·헤드라인은 브랜드 목소리, 고지는 전역 띠 + 행동 직전, 라벨 예산 상한 |
|
||||
|
||||
---
|
||||
|
||||
## 13. 통과 조건
|
||||
## 13. 통과 조건 (설계 완료 조건 — 납품 판정은 preflight.md §4-2 T1~T11)
|
||||
|
||||
- [ ] 시장 계약과 금지 문법이 적혀 있다
|
||||
- [ ] R1은 목표 시장의 정보 관습을 설명하고, R2는 다른 업종이다
|
||||
- [ ] 각 표면의 표현·밀도·모션·증거 다이얼이 적혀 있다
|
||||
- [ ] 모든 숫자·주소·상태·AI 결과가 사실/예시/추론/미정 중 하나이고 출처 계층이 추적된다
|
||||
- [ ] 진실 라벨이 전역 공지뿐 아니라 오해 지점 가까이에 있고, 같은 범위는 명확한 공통 부모가 한 번 소유하며 다른 자식만 예외 표시된다
|
||||
- [ ] 데스크톱·모바일 이미지 슬롯과 폴백이 따로 정의됐다
|
||||
- [ ] 고위험 업종의 생성 이미지 금지 증거와 민감 입력·저장·전송 경계가 검증됐다
|
||||
- [ ] 보이는 입력과 판정 의존성이 한 SSOT이고, 분석 전 완료 결과가 없으며 복합 비용 일부로 적합을 확정하지 않는다
|
||||
- [ ] AI 결과에 출처가 붙은 입력/검증 사실·추론·불확실성과 수정·사람 검토 경로가 있다
|
||||
- [ ] 규제 행동은 필수 검증이 없을 때 실패 폐쇄형이다
|
||||
- [ ] 공개는 사용자 해석·제한·다음 행동을, 관리자는 재현 가능한 내부 증거를 소유한다
|
||||
- [ ] 지도·차트·도식의 DOM 쌍둥이가 있다
|
||||
- [ ] URL별 390·1440 기본 캡처와 핵심 상태 캡처를 실제로 열어 봤다
|
||||
- [ ] E2E 시나리오·단언·캡처 수가 잠겨 있고 재귀 정적 검사가 새 서브페이지를 포함한다
|
||||
설계를 끝냈는지 확인한다. 숫자·주소의 사실/예시/추론/미정 구분(T1), 진실 라벨의 공통 부모(T2), AI 결과 출처(T4), 규제 행동의 실패 폐쇄형(T5), 공개/관리 소유(T7), DOM 쌍둥이(T8), SSOT(T10), E2E 잠금(T11)은 [preflight.md](preflight.md) §4-2가, 390·1440 캡처는 [critique.md](critique.md) §2-2와 [audit-gate-rules.md](audit-gate-rules.md) G18이 판정한다.
|
||||
|
||||
- 시장 계약과 금지 문법이 적혀 있다
|
||||
- R1은 목표 시장의 정보 관습을 설명하고, R2는 다른 업종·매체를 우선 검토했다(같은 업종이면 이유를 적었다)
|
||||
- 각 표면의 표현·밀도·모션·증거 다이얼이 적혀 있다
|
||||
- h1·히어로 본문·헤드라인에 고지 문구가 없고, 페이지 범위 고지는 두 곳 이하이며, 고지성 표현이 라벨 예산(§4-b) 안에 있다(넘으면 이유가 적혀 있다)
|
||||
- 데스크톱·모바일 이미지 슬롯과 폴백이 따로 정의됐다
|
||||
- 고위험 업종에서 생성 이미지를 쓰지 않는다는 증거가 있다
|
||||
|
||||
하나라도 빠지면 4단계로 돌아간다. 정직함을 각주로 미루지 말고 구조로 해결한다.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue