designpaca/packages/skill/references/trustworthy-showcases.md

# trustworthy-showcases — 실제처럼 보이되 거짓말하지 않는 쇼케이스

다음 중 하나라도 해당하면 **1·2·4·5단계**에서 읽는다. 1단계에서 시장과 위험 경계를 잠그고, 2단계에서 정보 구조를 나누고, 4단계에서 구현하며, 5단계에서 실제 상태를 검증한다.

- 가상 브랜드·가상 매물·예시 가격·예시 매장을 실제 서비스처럼 설계한다
- AI 분석·추천·점수·예측을 화면에 싣는다
- 부동산·금융·의료처럼 규제되거나 오해 비용이 큰 주제를 다룬다
- 고객용 랜딩과 관리자·가맹·운영 화면을 한 브랜드로 함께 만든다
- 생성 이미지를 실제 상품·공간·사람의 증거처럼 오인할 수 있다

목표는 경고문을 많이 붙이는 것이 아니다. **주장의 구조가 정직하고, 그 정직함이 디자인을 약하게 만들지 않게 하는 것**이다.

## 이 문서를 읽는 법

| 상황 | 읽을 곳 |
|---|---|
| 1단계 — 목표 시장과 금지 문법을 잠근다 | §2 |
| 2단계 — 고객·관리자처럼 표면이 여럿이다 | §3, §5 |
| 가상 브랜드·예시 값의 라벨을 정한다 | §4 (4-a 공통 부모, 4-b 라벨 예산) |
| 생성 이미지를 쓴다 | §6 |
| AI 결과·맞춤 분석을 싣는다 | §7 |
| 진단·예약·거래 같은 규제 행동이 있다 | §8 |
| 지도·차트·도식이 있다 | §9 |
| 5단계 — 시각 E2E와 캡처 계약 | §10, §11, §13 |

충돌하면 §1의 순서로 해석한다.

---

## 1. SKILL.md 핵심 규칙과의 충돌 해결

이 문서는 기존 규칙을 느슨하게 만들지 않는다. 충돌하면 다음 순서로 해석한다.

1. 접근성·사실성·사용자 안전이 언제나 이긴다.
2. 브리프와 목표 시장이 레퍼런스의 멋을 이긴다.
3. 하나의 브랜드 방향은 유지하되, 서로 다른 과업의 표면 밀도까지 같게 만들지는 않는다.
4. 게이트의 기본값은 유지한다. 예외가 필요하면 페이지 계약으로 좁게 선언하고 더 넓은 매트릭스로 검증한다.
5. 생성 이미지는 분위기와 재질을 맡고, 가격·상태·근거·판정은 DOM이 맡는다.

예: 마케팅 h1의 줄 수를 계약으로 잠그려면 그 페이지에 `h1MaxLines: 2`를 선언하고 375·390px × 글꼴 확대에서도 2줄 이하인지 잰다. 선언이 없으면 게이트는 줄 수를 판정하지 않는다.

---

## 2. 목표 시장을 먼저 잠근다

`R1/R2/R3`보다 먼저 **시장 계약** 한 줄을 쓴다.

```md
시장: 한국 / 서울 생활권 / 모바일 우선
행동 관습: 원·만원·억, ㎡와 평 병기, 동네·역·도보 기준, 국내형 문의 순서
금지: 서구 럭셔리 부동산 문법, 미국 다이너 문법, 번역투 카피, 이국화 장식
```

- R1은 같은 업종·목적이면서 가능하면 **같은 목표 시장**에서 고른다. 구조에는 단위·용어·연락 방식·신뢰 표지가 들어 있기 때문이다.
- R2는 다른 업종·매체를 우선한다는 기본값을 유지한다. 다만 목표 시장의 미감이 중요하면 **같은 문화권의 다른 업종**을 우선한다.
- R3가 다른 문화권에서 왔다면 가져올 것은 구현 기법 하나뿐이다. 색·카피·상징까지 따라오면 시장 계약을 어긴다.
- 국내화는 태극 문양이나 한옥 장식을 붙이는 일이 아니다. **단위·정보 순서·검색 축·사진의 조도·문의 단계**를 현지 관습에 맞추는 일이다.

---

## 3. 한 방향, 여러 표면

고객용 랜딩·관리자·가맹 페이지가 함께 있을 때 전부 같은 표현 강도로 만들면 둘 중 하나가 망가진다. 공통 토큰을 공유하고 표면 다이얼을 따로 적는다.

| 다이얼 | 0 | 1 | 2 | 3 |
|---|---|---|---|---|
| 표현성 | 문서 | 조용한 제품 | 캠페인 | 실험적 |
| 정보 밀도 | 넉넉함 | 표준 | 조밀함 | 운영 콘솔 |
| 모션 | 없음 | 피드백만 | 절제된 전환 | 브랜드 연출 |
| 증거 노출 | 요약 | 근거 링크 | 근거 병기 | 감사 기록 |

예시:

```md
공통: <본문 서체>, 8px 리듬, <잉크색>, 강조색 1개, 직설형 카피
고객 랜딩: 표현 2 / 밀도 1 / 모션 1 / 증거 2
관리자:     표현 0 / 밀도 3 / 모션 0 / 증거 3
```

이렇게 해야 랜딩은 설득하고 관리자는 판정한다. 프리셋을 두 개 쓰는 것이 아니라 **같은 브랜드가 과업에 맞춰 목소리 크기를 바꾸는 것**이다.

---

## 4. 먼저 진실 계약을 만든다

화면을 그리기 전에 모든 주장과 행동을 네 종류로 분류한다. 이 **진실 상태**와 값이 어디서 왔는지 나타내는 **출처 계층**을 섞지 않는다.

| 종류 | 예 | 화면 규칙 |
|---|---|---|
| 사실 | 검증 가능한 문장: `사용자가 40억을 입력했다`, `공식 원문에 전용 118㎡로 적혔다` | 무엇이 사실인지 주어·출처·기준일을 가까이에 둔다 |
| 예시 | 가상 매물, 예시 가격, 합성 매장 | 주장·가격·카드·행동 근처에 `예시`를 붙인다 |
| 추론 | AI 추천, 위험 신호, 적합도 | 근거·불확실성·수정 경로를 함께 둔다 |
| 미정 | 가맹비, 수익, 실제 주소처럼 검증 안 된 값 | `미정`으로 남기고 숫자를 만들지 않는다 |

같은 값이라도 출처가 다르면 화면의 말투와 가능한 행동이 달라진다.

| 출처 계층 | 뜻 | 허용 표현 |
|---|---|---|
| `USER_SELF_REPORT` | 사용자가 직접 입력·진술했지만 외부 검증은 안 됨 | `입력한 조건`, `사용자 진술` |
| `VERIFIED_SOURCE` | 기준일과 원문을 확인한 외부·공식 출처 | `확인된 정보` + 출처·기준일 |
| `SYSTEM_STATE` | 현재 제품이 직접 계산·관측한 상태 | 계산 규칙·측정 시점 병기 |
| `SYNTHETIC_FIXTURE` | 쇼케이스 동작 확인용 합성 값 | `예시`, 실제 행동 차단 |

사용자 진술의 값 자체를 곧바로 도메인 사실로 승격하지 않는다. `사용자가 붉음을 선택했다`는 사실일 수 있지만 `피부가 실제로 붉다`는 임상 상태는 검증 전 미정이다. 합성 픽스처도 시스템 관측처럼 표현하지 않는다. 승격에는 출처·기준일·검증 이벤트가 필요하다. AI·모델 출력은 제품이 생성했다는 의미에서 시스템 상태일 수 있어도, 내용의 진실 상태는 여전히 **추론**이다.

### 4-a. 같은 진실 범위는 가장 가까운 공통 부모가 소유한다

`오해 지점 가까이에 라벨`은 같은 경고를 모든 자식에 복제하라는 뜻이 아니다.

- 그룹의 모든 자식이 같은 진실 상태·출처·행동 가능성을 공유하면, 제목과 시각 경계가 분명한 **가장 가까운 공통 부모**에 라벨을 한 번 둔다.
- 자식 하나라도 상태·출처·행동 가능성이 다르면 그 자식에 예외 라벨을 둔다.
- 공통 부모의 범위가 화면과 보조기술에서 명확하지 않으면 묶지 않는다. 폼은 `fieldset/legend`, 표는 `caption`, 카드 집합은 제목·설명과 `aria-describedby` 같은 프로그램적 연결을 쓴다.
- 전역 띠는 사이트 전체의 가상 브랜드 상태를 맡을 수 있지만, 특정 가격·이미지·제출 행동의 서로 다른 경계까지 대신하지 않는다.
- **"한 번"의 뜻**: 부모가 라벨을 가졌으면 그 범위 안의 자식·셀·캡션·버튼 옆에서 같은 진실 상태를 다시 말하지 않는다. 같은 범위를 두 번 말하는 흔한 형태 — 히어로 본문 + CTA 옆, 상단 배너 + 히어로 박스 + 푸터, 표 `caption` + 모든 행의 `상태 예시`, 가격 열 제목 + 가격마다 `예시`. 전역 띠가 "가상 브랜드"를 맡았으면 히어로는 그 사실을 반복하지 않는다.
- 공통 부모의 경계가 화면에서 보이지 않을 만큼 멀면(긴 표가 스크롤로 머리글을 벗어나는 경우 등) 반복하지 말고 머리글 고정(`position: sticky`)이나 그룹 분할로 부모를 가깝게 만든다.

구현 전에 진실 라벨의 `문구 / 소유 컨테이너 / 예외 자식`을 표로 만들고, 같은 문구의 반복 횟수가 아니라 의미 범위가 닫혔는지 감사한다.

전역 데모 띠 하나만으로는 부족하다. 사용자는 스크롤 중 그 띠를 보지 못한다. **라벨은 오해가 발생하는 지점에 붙인다.**

- 후보 전체가 같은 상태인 카드 집합: 부모 설명 `아래 세 후보는 예시 · 거래 불가`; 실제·예시가 섞이면 각 카드에 예외 라벨
- 생성 사진: 각 이미지 캡션 `연출 이미지 · 실제 증빙 아님`
- 가격 집합이 모두 같은 상태면 표 `caption`이나 열 제목 `예시 가격`; 상태가 다른 값만 개별 표시
- 매장 상태: `화면 동작 확인용 예시`
- 폼: `실제 접수되지 않음 · 개인정보 입력 금지`

라벨은 작은 회색 각주로 숨기지 않는다. 본문 대비를 지키고 해당 주장과 같은 시각 그룹에 둔다.

### 4-b. 라벨은 브랜드 목소리를 대체하지 않는다

실측 사고(2026-10-01 레드팀): 가상 브랜드 쇼케이스들의 히어로 본문 자체가 면책 문구였고("이 페이지의 수치와 시험 기록은 … 예시입니다"), 한 페이지에 `예시`가 13~17회 나왔다. 헤드라인마저 정직함을 변명하는 말이 됐다. 첫 3초에 읽히는 문장이 "이건 진짜가 아닙니다"면 어떤 비주얼도 감정을 만들지 못하고, 같은 경고가 반복되면 경고 자체도 묻힌다. 진실성은 **위치와 범위**로 해결한다.

- **h1·히어로 본문·헤드라인·섹션 표제에 고지 문구를 넣지 않는다.** 그 자리는 가상 브랜드의 1인칭 목소리가 소유한다. 가상 브랜드라는 사실은 전역 띠(또는 푸터의 페이지 범위 고지)가 맡는다.
- 헤드라인이 정직함을 변명하지 않게 한다("정직하게 설명합니다", "말 대신 보여 줍니다"류). 브랜드는 자기 페이지의 성격을 설명하지 않는다.
- **페이지 범위 고지는 두 곳까지**: 전역 띠 또는 푸터 1곳 + 실제 오해 비용이 생기는 행동 직전 1곳(예: 폼 제출 버튼 옆 `실제 접수되지 않음`).
- 개별 값의 라벨은 공통 부모(열 머리글·단위·`caption`)에 한 번만 단다 — `가격(예시)`.
- **라벨 예산 상한**: 가시 텍스트에서 `예시·가상·실제 아님·않습니다` 같은 고지성 표현은 페이지당 대략 1,000자에 3회 이하를 목표로 한다. 넘으면 4-a의 공통 부모로 묶을 수 있는 반복부터 지운다. 이 수치는 감사용 경보이지 진실성 기준이 아니다 — 오해 지점이 실제로 많아서 넘는다면 표·그룹 구조를 바꿔 부모 수를 줄인다.
- 생성 이미지 캡션(`연출 이미지`)은 이미지마다 필요할 수 있다. 같은 갤러리의 이미지가 모두 연출이면 갤러리 제목에 한 번 둔다.

---

## 5. 성공 행동이 다르면 경로를 나눈다

한 페이지에서 소비자와 운영자, 구매자와 중개 관리자를 동시에 설득하지 않는다.

- 소비자 성공: 메뉴·가격·가까운 매장·조합 확인
- 가맹 성공: 운영 조건·상권·점포·문의 검토
- 고객 성공: 조건 입력·근거 확인·사람 상담
- 관리자 성공: 검수·보류 사유·게시 채널 판정

성공 행동이 다르면 URL과 IA를 나눈다. 공통 헤더에서 경로는 연결하되, 각 페이지의 첫 화면 메시지와 CTA는 하나의 성공 행동만 말한다. 별도 경로는 중복이 아니라 **우선순위 충돌을 제거하는 구조**다.

### 5-a. 공개 해석과 내부 검수의 소유권을 나눈다

URL을 나눠도 관리자 언어를 공개 페이지에 복제하면 경로 분리가 끝난 것이 아니다.

| 공개 화면이 소유 | 관리자 화면이 소유 |
|---|---|
| 사용자가 결정을 해석하는 데 필요한 근거·한계·다음 행동 | 내부 ID·원문 출처 원장·검증 이벤트·모델/규칙 버전 |
| 사용자 행동을 막거나 바꾸는 제한과 그 이유 | 규제 채널 판정 상세·역할 권한·감사 로그 |
| 정정·사람 확인 경로 | 승인·보류·변경 이력과 운영 실패 로그 |

내부 상수와 감사 원장은 관리자에 두되, 제한이 사용자의 행동을 막는다는 사실과 사용자가 이해해야 할 이유까지 숨기지 않는다. 공개는 **해석 가능한 요약**, 관리자는 **재현 가능한 증거**를 소유한다. 구현 전에 각 콘텐츠 블록에 `public / admin / both-summary` 소유자를 표시한다.

### 5-b. 고위험 데모의 데이터 경계

의료·금융·법률·주거 상담처럼 입력 자체가 민감할 수 있는 쇼케이스는 폼이 예뻐 보이는 것보다 **수집하지 않는 증거**가 먼저다.

- 과업 시연에 필요한 최소 필드만 둔다. 이름·연락처·정확한 주소·증상 원문처럼 없어도 되는 자유 입력은 빼거나 로컬 예시 선택지로 바꾼다.
- 합성 픽스처가 아닌 **민감 입력과 그 파생값**은 기본적으로 새로고침 후 남기지 않는다. 해당 값의 영속 저장·쿠키 기록·분석 이벤트 포함·네트워크 전송이 0회인지 E2E로 단언한다. 정적 이미지·폰트 요청과 일반 페이지 조회 자체는 이 0회 계약의 대상이 아니다.
- `실제 접수되지 않음` 문구만으로는 부족하다. 제출 성공 UI가 있어도 실제 요청·저장 부작용이 없어야 GREEN이다.
- 실제 운영 연결이 생기면 동의·보관 기간·삭제·전송 대상을 별도 제품 계약으로 설계한다. 쇼케이스 계약을 조용히 확장하지 않는다.

---

## 6. 이미지 바이블은 슬롯 단위로 만든다

이미지 한 장을 만든 뒤 여기저기 크롭하지 않는다. 생성 전에 슬롯 표를 만든다.

| 슬롯 | 역할 | 피사체 | 비율 | 구도 안전영역 | 진실 라벨 | 폴백 |
|---|---|---|---|---|---|---|
| 데스크톱 히어로 | 첫 인상 | 손+제품 | 16:9 | 우측 55% | 연출 이미지 | 단색+제품명 |
| 모바일 히어로 | 첫 화면 행동 | 제품+손 | 4:5 | 하단 중심 | 연출 이미지 | 같은 톤 정지컷 |
| 증거 컷 | 재질·동선 | 공간 일부 | 3:2 | 중앙 | 합성 예시 | DOM 도식 |

**모바일 전용 생성은 데스크톱 크롭의 사치 버전이 아니다.** 첫 화면에서 보여야 할 주체가 달라지면 별도 원본이 필요하다. 얼굴이 먼저 나오고 제품이 폴드 아래로 밀리면 비율이 맞아도 실패다.

- 같은 톤 접두사를 공유해 색온도·광원·재질을 잠근다.
- 장면별로 피사체·행동·카메라 높이만 바꾼다.
- 음식은 손가락·포장 접힘·재료 층, 공간은 문·난간·가구 접합부를 확대해 본다.
- 이미지 안에 가격·주소·지도·점수·차트를 굽지 않는다. 그 정보는 DOM으로 만든다.
- 이미지 파일이 존재한다는 것과 채택 가능하다는 것은 다르다. 원본을 눈으로 보고 조건부 채택 사유를 기록한다.

고위험 업종은 공통 이미지 규칙 위에 **도메인 금지 오버레이**를 한 장 더 만든다.

| 도메인 | 생성 이미지로 만들지 않는 증거 |
|---|---|
| 의료·미용 | 전후 비교, 병변·치료 효과, 가짜 의료진·자격·기관 로고 |
| 금융·투자 | 수익 인증, 잔고·체결 내역, 보장 수익 그래프 |
| 부동산 | 실제 매물 인증, 권리 서류, 조망·주소·중개 자격 증명 |
| 음식·가맹 | 실제 매출표, 실재 점포 운영 인증, 검증하지 않은 원산지 표식 |

생성 이미지는 분위기·재질·사용 장면까지만 맡긴다. 자격·효과·소유·수익을 증명하는 장면은 DOM 라벨로도 합법화되지 않는다.

---

## 7. AI는 답이 아니라 검토 가능한 기록이다

AI 화면에는 최소 다섯 블록이 필요하다.

1. **입력 조건** — 사용자가 무엇을 말했는지
2. **출처가 붙은 입력·검증 사실** — 사용자가 무엇을 진술했는지와 외부·공식 자료로 무엇을 확인했는지 분리
3. **추론** — 사실에서 어떻게 결론으로 갔는지
4. **불확실·누락** — 모르는 것과 데이터 기준일
5. **사람 검토·수정** — 틀린 조건을 고치고 담당자에게 넘기는 경로

단일 점수와 반짝이는 링만 보여 주지 않는다. 점수는 정밀해 보이지만 근거가 없으면 장식이다. 추천 카드마다 `왜`, `무엇이 부족`, `다음 확인`을 붙인다.

모델 출력은 제품 내부에서 생성됐다는 이유만으로 `SYSTEM_STATE`의 관측 사실이 되지 않는다. 출력 내용은 `추론`, 실행·모델 버전·생성 시각만 `SYSTEM_STATE`다.

AI 결과를 바꿀 수 있는 입력을 하나 이상 제공하고, E2E에서 입력을 바꿨을 때 근거·결과·불확실성도 함께 바뀌는지 단언한다.

### 7-a. 보이는 입력과 판정 의존성은 하나의 계약이다

맞춤 분석이 참조하는 조건을 UI와 코드가 따로 관리하지 않는다. 구현 전에 `입력 필드 / 출처 / 판정 사용처 / 출력 주장` 표를 만들고 하나의 스키마·데이터 객체에서 폼과 판정을 함께 만든다.

- 사용자가 입력하지 않은 숨은 기본값을 `희망 조건`처럼 결과에 쓰지 않는다.
- 화면에 받은 조건을 판정에서 무시한 채 맞춤 결과라고 부르지 않는다.
- 분석 실행 전에는 완료 수치·추천·충돌을 보여 주지 않는다. `아직 분석하지 않음` 상태가 정직한 초기값이다.
- 보증금+월 납부액처럼 단일 축으로 비교할 수 없는 복합 비용은 일부 값만으로 `예산 안쪽`이라 판정하지 않고 `별도 확인`으로 남긴다.
- E2E에서 보이는 입력 이름 집합과 판정 함수의 사용자 조건 의존성 집합이 일치하는지, 입력 변경 뒤 근거·결과·불확실성이 함께 변하는지 단언한다.

---

## 8. 규제된 행동은 실패 폐쇄형으로

게시만 규제되는 것이 아니다. 진단·개인화 추천·예약·상담 전송·거래·문서 내보내기처럼 실제 사람이나 시장에 영향을 주는 행동을 쇼케이스 성공 상태와 같은 버튼으로 다루지 않는다. 행동·채널별 판정 함수를 둔다.

```js
// 예시 구조다. 실제 필수 요건은 목표 시장·업종의 공식 기준으로 다시 잠근다.
const requiredByAction = {
  DIAGNOSE: ["requiredConsent", "verifiedClinicalData", "licensedReviewer", "humanReview"],
  BOOK_APPOINTMENT: ["requiredConsent", "verifiedProvider", "availableSlot"],
  EXPORT_RECORD: ["requiredConsent", "verifiedRecord", "accessControl", "auditLog"],
  PUBLISH_LISTING: ["verifiedBroker", "verifiedAddress", "sourceFiles", "humanReview"],
};

function regulatedActionDecision(record, action) {
  if (action === "SHOWCASE_PREVIEW") {
    return record.syntheticLabelled
      ? { allowed: true, reason: "예시 범위가 명확한 미리보기" }
      : { allowed: false, reason: "예시 범위 표지 누락" };
  }

  const required = requiredByAction[action];
  if (!required) return { allowed: false, reason: "등록되지 않은 행동" };
  if (record.syntheticFixture) return { allowed: false, reason: "합성 자료로 실제 행동 불가" };

  const missing = required.filter((field) => !record[field]);
  if (missing.length) return { allowed: false, reason: `필수 검증 누락: ${missing.join(", ")}` };
  return { allowed: true, reason: "필수 검증 완료" };
}
```

- 화면에서 비활성 버튼만 두지 말고 **왜 막혔는지**를 말한다.
- 알 수 없는 행동은 기본 거절한다. 행동마다 필수 검증 목록이 다르며, 한 묶음의 불리언으로 모든 규제 행동을 열지 않는다.
- 관리자 검수 큐에는 `사실 / 추론 / 미정 / 위험` 상태와 출처 계층을 분리한다.
- 보류·거절은 사유를 필수로 받고, 닫기·Esc·포커스 복귀를 검증한다.
- 가상 데이터만 있는 쇼케이스라면 실제 진단·추천·예약·전송·거래·게시·내보내기 경로가 끝까지 막힌 상태가 정상 GREEN이다.

---

## 9. 시각화에는 읽을 수 있는 쌍둥이를 둔다

지도·차트·도식은 시선을 모으지만 사실을 완전히 전달하지 못한다. 같은 정보를 DOM 목록·표·설명으로도 제공한다.

- 지도 핀 ↔ 매장 목록
- 적합도 그래프 ↔ 조건별 근거 목록
- 재료 도식 ↔ 알레르기·구성 텍스트
- 운영 흐름 그림 ↔ 단계별 제목·설명

이미지나 SVG가 실패해도 과업을 끝낼 수 있어야 한다. 두 표현의 값이 어긋나지 않도록 데이터 원천은 하나로 둔다.

---

## 10. 시각 E2E는 캡처가 아니라 계약이다

정적·기하 게이트와 눈 검사는 역할이 다르다.

1. HTML/CSS/JS 정적 검사
2. 320·390·768·1024·1440 기하·대비·터치·h1 계약
3. 사용자 여정 E2E와 기대값 단언
4. 기본 화면 + 중요한 상호작용 상태 캡처
5. 캡처를 실제로 열어 목표 시장 적합성·시선 위계·크롭·반복을 판정

최소 캡처 계약:

- 각 URL의 390px·1440px 기본 화면
- 결과가 바뀌는 입력 상태 1개
- 관리자 보류·게시 차단 상태 1개
- 폼 검토 또는 오류 상태 1개

폭을 숫자 목록으로만 쓰지 말고 각 폭이 잡아야 하는 실패를 적는다.

| 폭 | 검증 목적 |
|---|---|
| 320 | 긴 한국어 라벨·최소 터치 영역·긴급 수축 스트레스 |
| 375 + 글꼴 확대 | 페이지별 `h1MaxLines`·한국어 어절 줄바꿈·보조 행동 수축 |
| 390 | 실제 모바일 첫 화면의 주체·CTA·고정 요소 |
| 768 | 카드 재배치와 중간 폭 공백·절대 배치 기준 |
| 1024 | 태블릿·관리자 분할면의 트랙 회수와 표 오버플로 |
| 1440 | 데스크톱 시선 위계·콘텐츠 최대폭·과도한 빈 면 |

하니스는 캡처의 **개수·가로세로·0바이트 여부·해시 중복**을 단언한다. 모델은 그 뒤에 `국내 감각인가`, `제품이 첫 화면에 보이는가`, `운영 화면이 과장됐는가` 같은 지점을 평가한다.

실측 사고: 기하 게이트 8/8을 통과한 모바일 페이지에서 `position: static`으로 바뀐 지도 부모 때문에 절대 배치 자식의 기준이 `BODY`가 됐다. 격자와 핀이 히어로 전체를 덮고 실제 지도는 빈 판이 됐다. **시각 캡처를 열지 않았다면 GREEN으로 오판했다.**

---

## 11. 시나리오·단언 수를 잠근다

대규모 E2E가 중간 리팩터링에서 조용히 줄어드는 것을 막는다.

```js
const EXPECTED_SCENARIOS = 90;
const EXPECTED_ASSERTIONS = 350;

if (scenarios.length !== EXPECTED_SCENARIOS) throw new Error("scenario count drift");
if (assertionCount < EXPECTED_ASSERTIONS) throw new Error("assertion count drift");
```

숫자를 채우려고 같은 검사를 복제하지 않는다. 공통·고객·관리자·오류·접근성·시각 상태로 분류하고, 각 시나리오는 `행동 → 기대 DOM/상태 → 부작용 없음`을 단언한다.

정적 파일도 재귀 glob으로 잡는다. 새 서브페이지가 생겼는데 `public/work/*/index.html`만 검사하면 관리자·가맹 화면이 검증 밖으로 빠진다.

---

## 12. 구현과 사용자 게이트에서 검증된 교훈 22개

| # | 교훈 | 스킬에 반영하는 규칙 |
|---|---|---|
| 1 | 서구 레퍼런스는 국내 행동 관습을 자동으로 주지 않는다 | R1을 목표 시장에서 우선 탐색 |
| 2 | 국내 감각은 장식보다 단위·용어·정보 순서에서 생긴다 | 시장 계약을 R1/R2/R3보다 먼저 작성 |
| 3 | 다른 업종 R2는 유지해야 카테고리 평균을 피한다 | 같은 문화권의 다른 업종을 우선 |
| 4 | 랜딩과 관리자는 같은 표현 밀도를 쓰면 둘 다 약해진다 | 표면 다이얼 4종을 별도 선언 |
| 5 | 강조색은 비율만으로 통제되지 않는다 | 허용 역할과 최대 면적을 함께 적음 |
| 6 | 생성 이미지는 데이터 증거가 아니다 | 이미지=재질, DOM=가격·상태·근거 |
| 7 | 데스크톱 크롭은 모바일 핵심 피사체를 보장하지 않는다 | 의미가 바뀌면 모바일 원본 별도 생성 |
| 8 | 성공 행동이 다른 두 청중은 한 히어로에서 경쟁한다 | URL·IA를 분리하고 공통 브랜드만 공유 |
| 9 | AI 점수만 있으면 신뢰가 아니라 정밀함의 연출이다 | 사실·추론·불확실·수정·사람 검토를 병기 |
| 10 | 가상 데이터로 실제 규제 행동이 성공하면 버그다 | 행동별 요구 조건·미등록 기본 거절·합성 자료 차단 |
| 11 | 지도·도식만으로는 접근성과 사실 확인이 닫히지 않는다 | DOM 목록·표 쌍둥이를 의무화 |
| 12 | 전역 데모 띠는 스크롤 후 오해를 막지 못한다 | 주장·가격·행동 가까이에 진실 라벨 |
| 13 | 자동 승인은 검증 면제가 아니다 | 사용자 게이트 상태와 기계/시각 게이트를 분리 |
| 14 | 구조 PASS는 시각 PASS가 아니다 | 상태 캡처를 열어 직접 판정하고 재촬영 |
| 15 | 테스트 수는 리팩터링 중 조용히 줄어든다 | 시나리오·단언·캡처 수를 hard-lock |
| 16 | 채운 버튼과 텍스트 링크는 `align-items:center`여도 시각 중심이 어긋난다 | 실제 hitbox 44px·중심 y 차이 ≤2px를 단언 |
| 17 | 역할이 다른 섹션도 같은 5:7 제목+목록을 반복하면 구조가 복제돼 보인다 | 장소=도식, 비용=원장, 판정=흐름처럼 의미에 맞는 토폴로지를 배정 |
| 18 | 인스펙터만 숨기고 그리드 트랙을 남기면 빈 면이 고장처럼 보인다 | 닫힘 상태에서 주 표면이 전체 폭을 회수하고 재선택 때 분할을 복원 |
| 19 | 같은 `예시` 경고를 모든 자식에 반복하면 가치와 경고가 함께 묻힌다 | 같은 진실 범위는 가장 가까운 명확한 공통 부모가 한 번 소유 |
| 20 | 공개 페이지에 내부 ID·게시 채널·감사 원장을 복제하면 제품 설명서가 된다 | 공개는 해석·제한·다음 행동, 관리자는 재현 가능한 내부 증거를 소유 |
| 21 | 보이는 입력과 계산 조건이 다르면 맞춤 분석은 임의 결과가 된다 | 입력 필드·판정 의존성·출력 주장을 한 SSOT 표로 잠그고 초기 미실행 상태를 검증 |
| 22 | 히어로 본문을 면책 문구로 쓰면 첫인상과 브랜드 목소리가 사라진다 | h1·히어로·헤드라인은 브랜드 목소리, 고지는 전역 띠 + 행동 직전, 라벨 예산 상한 |

---

## 13. 통과 조건 (설계 완료 조건 — 납품 판정은 preflight.md §4-2 T1~T11)

설계를 끝냈는지 확인한다. 숫자·주소의 사실/예시/추론/미정 구분(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단계로 돌아간다. 정직함을 각주로 미루지 말고 구조로 해결한다.