release: v0.10.0

apps/site/research/showcase-duo-direction-2026-08-29.md

@@ -0,0 +1,447 @@
+# 두 쇼케이스 방향 보드 — 인간 검증 게이트 1
+
+> **최신 재설계 게이트 H04 (2026-08-29):** 사용자가 한남자리 공개 화면의 중복과 전체 구조를 RED로 판정했다. 아래 초기 공개 IA 9개 장은 더 이상 정본이 아니다. 관리자와 철판클럽 방향은 유지하되, 한남자리 공개는 `브리핑 시작 / 예시 AI 브리핑 / 세 집 비교 데스크 / 선택 집 검토 서류철 / 사람에게 넘기기` 5개 핵심 섹션으로 전면 압축한다. 임의 지도·조망·거리·시간, 공개 화면의 게시 채널과 법정 검수 원장, 01~06 장문 상세는 폐기한다. 진실성은 경고 반복이 아니라 보이는 입력·비교 로직·출처·행동의 일치와 범위별 한 번의 가까운 라벨로 증명한다.
+
+> 상태: 국내 방향으로 교정한 게이트 1.1 승인 완료. 2026-08-29 첫 방향은 해외 레퍼런스 비중이 지나치다는 판정을 받아 폐기했다.
+> 사용자가 모든 중간 게이트를 자율 승인한다고 명시했다. 이후 게이트는 생략하지 않고 실행 증거로 자동 판정하며, 실패 항목은 수정 후 재검사한다.
+
+## 사용자 피드백 1 — 국내 감각으로 근본 교정
+
+판정:
+
+- Sotheby's, Hennessy, Rolls-Royce, Teenage Engineering을 주축으로 둔 합성은 사용하지 않는다.
+- 기능 일부가 한국형이어도 시각과 문장의 중심축이 해외 사례이면 `한국어를 얹은 해외 템플릿`이 된다.
+- 한국성은 전통 문양, 붓글씨, 한지, 인장 같은 표면 장식으로 만들지 않는다.
+- 단위, 용어, 정보 순서, 상담 행동, 주문 행동, 상업 사진만 남겨도 국내 서비스로 읽혀야 한다.
+
+교정 원칙:
+
+1. R1 주 레퍼런스는 국내 동종 업계의 실제 정보 구조와 모바일 전환으로 바꾼다.
+2. R2 주 레퍼런스는 국내 금융, 리테일, 숙박, 외식 브랜드의 한글 밀도와 상업 사진으로 바꾼다.
+3. 해외 레퍼런스는 특정 상호작용 한 가지의 지원 범위만 검증하는 보조 자료로 강등한다.
+4. 기존 19개 쇼케이스가 이미 점유한 검정과 앰버, 한남 고급 거실, 아카이브 에디토리얼, 검정과 코발트 기술 화면을 반복하지 않는다.
+5. 초기 생성 이미지 두 장은 배포하지 않는다. 국내 방향의 새 시안을 별도로 만들고 다시 승인받는다.
+
+새 게이트 시안:
+
+- 부동산: 생성 작업 `exec-137f9913-b133-4583-8e6f-d73a6b6e8bd0` — 초기 시안은 폐기하고 저장소에 포함하지 않음
+- 햄버거: 생성 작업 `exec-7fae4537-c8f2-4e29-a848-8480b3606b7f` — 최종 파생본만 `public/work/griddle-club/assets/`에 보관
+- 두 장 모두 1672×941, 약 1.78:1의 생성 원본이다.
+- 현재는 게이트 시안이며, 배포 자산으로 복사하거나 압축하지 않는다.
+
+## 목표와 고정 조건
+
+### 부동산
+
+- 한국에서 실제로 운영될 법한 고급 공인중개 홍보 사이트를 만든다.
+- 검정과 금색을 사용하되 장식보다 정보와 사진이 고급감을 만든다.
+- 생성 이미지를 실제 배경 자산으로 사용한다.
+- 사용자 조건에 맞춘 AI 참고 분석을 실제 상호작용으로 보여준다.
+- 공개 화면과 별도로 상세한 shadcn 계열 관리자 화면을 만든다.
+- 허위 등록정보, 허위 거래 실적, 근거 없는 AI 정확도는 만들지 않는다.
+
+### 햄버거
+
+- 소비자 프로모션과 가맹 전환을 함께 다루는 프랜차이즈 사이트를 만든다.
+- 흔한 빨강·노랑 복고 버거 문법과 다른 고유한 시각 체계를 만든다.
+- 생성한 음식 사진을 핵심 자산으로 사용한다.
+- 메뉴 탐색, 매장 탐색, 버거 조합, 가맹 문의가 실제로 작동해야 한다.
+- 가격, 매장 수, 매출, 가맹비처럼 검증하지 않은 수치는 예시로 명시한다.
+
+## 우선순위
+
+1. 사용자 지시
+2. `apps/site/design.md`
+3. designpaca 0~6단계
+4. design-taste-frontend의 마케팅 화면 원칙
+5. high-end-visual-design의 타이포그래피와 여백 원칙
+
+보조 스킬이 모든 카드에 장식을 반복하도록 요구하거나 운영 화면의 판독성을 낮추면 적용하지 않는다.
+
+---
+
+## 방향 A — 한남자리 최종 정본
+
+- 공개 IA: `밝은 Hero와 다섯 조건 도크 → 예시 AI 브리핑 → 세 집 비교 데스크 → 다섯 탭 검토 서류철 → 사람 인계`.
+- 의사결정 SSOT: 거래 형태·예산·최소 전용면적·입주 희망일·필요 주차. 월세는 보증금과 월 납부액을 분리한다.
+- 공개 화면에서 지도·통근·일조·조망·임의 주소와 내부 게시 원장을 제거했다. 근거 없는 값은 계산하지 않고 중개사 확인 항목으로 남긴다.
+- 시각 언어: 석재색 종이 면, 서울 청회색, 제한된 브론즈. 검정은 마지막 사람 인계 장면만 소유한다.
+- 관리자는 밝고 밀도 높은 검수 대기열로 분리한다. 선택 전 표는 전체 폭, 선택 뒤에만 조사관 패널을 연다.
+- R1은 국내 주거·중개 정보 순서, R2는 국내 리테일의 한국어 밀도와 사진 절제, R3는 키보드 가능한 탭과 조건 동기화만 가져왔다.
+
+<details>
+<summary>폐기된 초기 한남자리 방향 기록</summary>
+
+아래 내용은 H04 인간 게이트 이전의 조사 이력이다. 최종 구현·게이트·배포의 요구사항으로 사용하지 않는다.
+
+### 방향 A — 한남자리 공인중개사사무소
+
+### 상태
+
+- 작업명: `한남자리 공인중개사사무소`
+- 영문 보조명: 사업자 정보 안에서만 `HANNAM JARI`
+- 한 문장: **조건부터 맞춰 보는 한남의 집.**
+- 성격 다이얼: 시각 7 / 움직임 4 / 정보 밀도 5
+- 관리자 다이얼: 시각 4 / 움직임 3 / 정보 밀도 7
+- 고지: 실제 업체가 아닌 쇼케이스용 가상 브랜드
+- 기본 조판: Pretendard 또는 SUIT 계열 산세리프 한 패밀리
+- 화면 면적 목표: 따뜻한 회백색 60% / 검정 35% / 금색 5%
+- 첫 화면: 거래 조건 DOM 40% / 서울 외관 이미지 60%의 분할
+
+### R1 · 같은 업종의 구조
+
+주 레퍼런스: https://www.homeside.co.kr/
+
+- 1280×720 기준 Pretendard, 본문 16px, 첫 제목 64/73.6px, 섹션 제목 38/51.3px를 확인했다.
+- `가치 제안 → 고객 고민 → 신뢰 근거 → 전담 상담·AI 분석·위험 점검 → 과정 → 비용 → FAQ → 상담` 흐름을 가져온다.
+- 국내 고객이 기대하는 `내 조건 이해 → 근거 분석 → 계약 위험 확인 → 입주까지 동행` 순서를 유지한다.
+- 원본의 후기, 수상, 가격, 실적 수치는 가져오지 않는다.
+
+국내 고급 주거와 매물 항목 보조:
+
+- https://www.acro.co.kr/
+- https://www.the-h.co.kr/Front/Main.aspx
+- https://www.luxurynhouse.com/
+- 아크로와 디에이치는 서울 고급 주거의 사진·한국어 카피·단지 정보 위계만 참고한다.
+- 럭셔리앤하우스에서는 지역, 매물 유형, 매매·전세·월세, 확인날짜, 가격대, 지점, 카카오 상담 항목만 가져온다.
+- 영문 Didot, 다단 메뉴, 노랑·검정 도구막대, 검증하지 않은 추천 수치는 버린다.
+
+### R2 · 다른 업종의 톤
+
+주 레퍼런스: https://www.tamburins.com/kr/
+
+- 풀블리드 상업 사진, Pretendard, 30px 좌우 인셋, 작은 한국어 제목의 절제를 참고한다.
+- 따뜻한 황토와 금빛은 UI 선과 테두리가 아니라 서울 주거 사진의 목재, 조명, 석재가 소유하게 한다.
+- 초현실 모델과 향수 캠페인 연출은 가져오지 않는다.
+
+지역과 무채색 조판 보조: https://www.leeumhoam.org/leeum
+
+- 한남동의 국내 문화기관이 사용하는 한국어 우선 내비게이션과 무채색 위계를 참고한다.
+- 현재 전시 그래픽과 미술관식 긴 여백은 복제하지 않는다.
+- 금색은 어두운 면에서 `#C6A15B`, 밝은 면의 글자와 선에서는 접근 가능한 갈금 `#6F5420`처럼 역할을 분리한다.
+
+### R3 · 구체 상호작용
+
+주 레퍼런스: https://www.disco.re/
+
+1. 국내 지도와 목록 교차 강조
+   - 지도 마커에는 가격과 면적을 함께 표시한다.
+   - 지도와 목록의 hover, focus, 선택 상태가 양방향으로 연결된다.
+   - 평과 제곱미터, 총액과 단가 전환 위치를 고정한다.
+   - 지도 없이도 같은 정보를 읽는 목록 보기를 제공한다.
+2. 국내 매물 상세 고정 앵커와 정보 아코디언
+   - 사진과 개요 / 가격 근거 / 권리와 위험 / 입지와 교통 / 시설과 관리 / 담당 중개사
+   - hash, `scroll-margin-top`, 키보드 포커스를 지원한다.
+   - 스크롤 가로채기는 쓰지 않는다.
+3. 조건 조정형 AI 참고 분석
+   - 예산, 통근, 일조, 주차 조건을 바꾸면 추천 이유와 주의점이 갱신된다.
+   - 결과는 실제 HTML에 있고 생성 이미지에 가짜 UI를 구워 넣지 않는다.
+
+### 공개 사이트 정보 구조
+
+1. 첫 화면 — 한국어 가치 제안, 거래 조건, 전화·방문 예약·조건 저장
+2. 맞춤 분석 — 긍정, 위험, 확인 불가, 조건 조정, 사람 검토
+3. 확인된 대표 매물 — 거래 형태, 평·제곱미터, 마지막 확인일
+4. 지도와 목록 탐색 — 평·제곱미터, 총액·단가 전환
+5. 한남 생활권 — 실거래, 교통, 생활, 건축 맥락
+6. 매물 상세 — 가격 근거, 권리와 위험, 시설과 관리
+7. 공인중개사와 사무소 — 등록정보와 비공개 상담
+8. 매도·임대 의뢰와 상담 과정
+9. 법정 고지와 소비자 보호 안내
+
+### AI 신뢰 구조
+
+- 제목은 `AI 참고 분석 — 공인중개사 검토 전`로 고정한다.
+- 분석 시각, 데이터 기준일, 범위, 제외 범위를 노출한다.
+- 사실, 추론, 확인 불가를 구분한다.
+- 긍정 요인과 위험 요인을 같은 위계로 제공한다.
+- 출처와 갱신 시점을 각 요인 가까이에 둔다.
+- 근거가 약하면 정밀 점수 대신 높음, 중간, 낮음과 이유를 쓴다.
+- 조건 수정, 정보 정정, 중개사 검토 요청을 결과와 함께 제공한다.
+- 자동 공개를 금지하고 사람의 승인 상태를 기록한다.
+
+참고:
+
+- https://www.microsoft.com/en-us/haxtoolkit/guideline/make-clear-why-the-system-did-what-it-did/
+- https://pair.withgoogle.com/guidebook-v2/chapter/explainability-trust/
+- https://airc.nist.gov/airmf-resources/airmf/5-sec-core/
+
+### 법정 정보와 게시 방어선
+
+근거:
+
+- https://www.law.go.kr/LSW/lsInfoP.do?lsId=001654
+- https://www.law.go.kr/admRulLsInfoP.do?admRulSeq=2100000250356
+
+구현 원칙:
+
+- 등록 상호, 주소, 전화번호, 등록번호, 책임 공인중개사 성명을 빈 예시값으로 꾸미지 않는다.
+- 소재지, 면적, 가격, 거래 형태, 용도와 유형, 층수, 입주일, 방과 욕실, 사용승인일, 주차, 관리비, 방향, 마지막 확인일을 게시 검수 항목으로 둔다.
+- 필수 항목 누락, 오래된 확인일, 계약과 만료 상태에서는 게시를 차단한다.
+- 사진, 설명, 가격, 상태 변경 이력을 보관하는 화면을 만든다.
+
+### shadcn 계열 관리자 구조
+
+참고:
+
+- https://ui.shadcn.com/blocks?category=dashboard
+- https://ui.shadcn.com/docs/components/base/sidebar
+- https://ui.shadcn.com/docs/components/base/data-table
+- https://ui.shadcn.com/docs/components/base/chart
+
+주 구조:
+
+- 일반적인 `KPI 카드 3개 + 차트 + 표`를 첫 화면으로 쓰지 않는다.
+- 첫 화면은 밀도 높은 `매물 검수 대기열 + 고정 우측 조사관 패널`로 시작한다.
+- 선택 행의 사진, 법정 표시, AI 근거, 게시 방어선, 변경 이력을 우측에서 같은 맥락으로 검토한다.
+- shadcn의 Sidebar, Data Table, Tabs, Sheet, Dialog, Command, Calendar 구조를 쓰되 운영 목적에 맞게 재조립한다.
+
+내비게이션:
+
+- 개요
+- 매물: 전체 / 초안 / 검수 필요 / 게시 중 / 보류 / 계약 / 만료
+- 문의와 고객
+- AI 분석
+- 일정
+- 지역 리포트와 콘텐츠
+- 사무소와 법정 정보
+- 팀과 권한
+- 감사 로그와 설정
+
+국내 업무 필드:
+
+- 광고 가능 여부
+- 확인설명서
+- 건축물대장
+- 등기 확인
+- 의뢰인 동의
+- 실거래 기준일
+- 공동중개
+- 게시 만료
+- 현재 매물·보류·계약·만료
+
+필수 작동:
+
+- 사이드바 보기 전환
+- 표 정렬, 필터, 검색, 선택
+- 빠른 검토 Sheet와 전체 상세 보기
+- 기본 / 법정 표시 / 사진과 영상 / AI 분석 / 문의와 일정 / 변경 이력 탭
+- 게시, 게시 중단, 계약 완료, 삭제 확인 대화상자
+- 누락 필드가 있는 게시 차단과 해당 필드 이동
+- 고객 조건과 비교 매물 집합을 보여주는 AI 검토
+- 모델과 데이터 버전, 재실행 차이, 검토자, 승인 시각, 실패 로그
+- 닫기, 바깥 클릭, Escape가 팝업과 활성 상태를 함께 해제
+- 모바일 공개 화면에는 `전화 상담 / 방문 예약 / 조건 저장`을 하단 고정 행동으로 제공
+
+시각 원칙:
+
+- 운영 화면은 밝고 중립적으로 유지한다.
+- 검정과 금색은 브랜드 식별과 선택된 핵심 항목에만 제한한다.
+- 상태는 색만으로 구분하지 않고 아이콘과 텍스트를 함께 쓴다.
+
+### 회색조 위계
+
+1. 현재 거래 조건과 서울 생활권 외관
+2. 맞춤 분석의 근거와 위험
+3. 확인된 매물 스펙과 상담 행동
+
+색을 제거해도 이 순서가 유지되어야 한다.
+
+### 생성 이미지 시안
+
+- 생성 작업: `exec-137f9913-b133-4583-8e6f-d73a6b6e8bd0`; 최종 파생본은 `public/work/hannam-jari/assets/`에 보관
+- 역할: 서울 생활권과 가상 고급 주택 외관을 보여주는 데스크톱 Hero 시안.
+- 특징: 경사지 골목, 중저층 주거지, 공동주택 군집, 회색 석재, 검정 알루미늄, 현관의 따뜻한 빛.
+- 제한: 실제 한남의 주소나 실매물 증빙으로 주장하지 않는다. 모바일은 별도 4:5 원본을 만든다.
+- 상세 기준: `showcase-duo-image-bible-2026-08-29.md`
+
+### 안 할 것
+
+- 모든 카드의 금색 테두리와 금색 그라디언트
+- 대리석, 금박 bevel, 먼지 입자, 장식용 3D 도시
+- 가격과 법정 정보를 숨긴 사진 전시장
+- 근거 없는 정확도, 거래 건수, 고객 수, 자산 규모
+- 출처와 정정 절차가 없는 안전, 범죄, 학군 점수
+- 자동 회전 캐러셀, 스크롤 가로채기, 데이터 화면 parallax
+- AI 결과 자동 게시
+- 관리자 전체를 검정과 금색으로 덮는 구성
+- 영문 세리프, 작은 대문자 눈썹 문구, 300 굵기의 시적인 대제목
+- 실제 공간보다 먼저 나오는 해외식 희소성 서사
+
+</details>
+
+---
+
+## 방향 B — 철판클럽
+
+### 상태
+
+- 작업명: `철판클럽`
+- 영문 보조명: 제품 정보 아래에서만 `GRIDDLE CLUB`
+- 한 문장: **눌러 굽고, 바로 건넨다.**
+- 확장 콘셉트: **퇴근길, 한 상자에 담아 가는 서울의 눌림 버거.**
+- 성격 다이얼: 시각 8 / 움직임 6 / 정보 밀도 4
+- 고지: 실제 업체가 아닌 쇼케이스용 가상 브랜드
+- 기본 표면: 따뜻한 회백색 `#F4F1E9`
+- 본문: 그릴에 가까운 흑갈색 `#211F1C`
+- 강조: 코발트 `#2147E7`, 화면 면적 약 8~10%
+- 스테인리스, 치즈색, 불빛은 사진이 소유하고 UI 그라디언트로 흉내내지 않는다.
+
+### R1 · 같은 업종의 구조
+
+주 레퍼런스: https://downtowner.co.kr/
+
+- 1280×720 기준 본문 폭 1235px, 설명문 폭 603px, 본문 16/32px, 식별색 `#172A88`을 확인했다.
+- `조리 장면 → 브랜드 한 문장 → 대표 메뉴 → 포장 → 협업 → 매장` 흐름을 가져온다.
+- 버거뿐 아니라 포장과 매장 경험도 제품처럼 다루는 국내 브랜드 문법을 참고한다.
+- 긴 영상 Hero와 7150px의 사진 교대는 복제하지 않고 6~8개 섹션으로 압축한다.
+
+소비자와 창업 경로 분리 보조:
+
+- https://www.momstouch.co.kr/
+- 음식과 매장 사진으로 방문 목적을 나누는 근거만 가져오고, 일반 고객에게 중간 선택 화면을 강요하지 않는다.
+- 공개 홈은 소비자 80 / 가맹 20 위계를 유지하고 가맹은 별도 경로로 보낸다.
+
+가맹 정보 구조 보조:
+
+- https://www.shinsegaefood.com/nobrandburger/franchise/nbbFranchise.sf
+- 브랜드 이유 / 개설 안내 / 투자비 / 인테리어 / 자주 묻는 질문 / 상담 / 대출 흐름을 참고한다.
+- 비용과 조건은 숨기고 연락처부터 받는 방식은 사용하지 않는다.
+
+### R2 · 다른 업종의 톤
+
+주 레퍼런스: https://www.29cm.co.kr/store/showcase
+
+- 1280px에서 1169px 컨테이너, 첫 2열 573px, 일반 3열 375px, 20px 거터를 확인했다.
+- 대표 제목 34/40px, 일반 제목 22/30px의 `사진 → 짧은 한국어 제목 → 설명 → 상태` 편집 리듬을 가져온다.
+- Pretendard Variable 한 패밀리에서 굵기만 조절한다.
+- `SHOWCASE` 같은 영문 배지는 버리고, 메뉴명은 한국어 12~18자를 우선한다.
+
+포장 사진 보조: https://granhand.com/
+
+- 크림 `#FDFBF5`, 짙은 갈색 `#322A24`, 열린 상자와 포장 재질을 함께 보여주는 방법만 참고한다.
+- 작은 10~14px 글자와 향수 브랜드의 감성 카피는 가져오지 않는다.
+
+### R3 · 구체 상호작용
+
+주 레퍼런스: https://www.shinsegaefood.com/nobrandburger/index.sf
+
+1. 국내 메뉴 분류 앵커
+   - 고정 분류 줄, 네이티브 앵커, `scroll-margin-top`, `IntersectionObserver`로 현재 분류를 갱신한다.
+   - `aria-current` 또는 `aria-selected`를 제공하고 모바일에서는 가로 스크롤 분류 줄을 쓴다.
+   - 감소 모션에서는 즉시 이동한다.
+2. 국내 매장 탐색
+   - 지역 칩과 매장명·도로명 검색, 주소, 영업시간, 마지막 주문, 포장·배달 여부를 함께 보여준다.
+   - 지도와 동일한 매장 목록을 키보드로 읽을 수 있게 한다.
+3. 버거 조합기
+   - 단품·세트, 패티, 치즈, 양파, 피클, 소스, 알레르기, 예시 총액이 실제로 갱신된다.
+   - 재료를 공중에 분해하지 않고 포장 라벨과 주문 요약에 선택이 누적된다.
+   - 생성 이미지에 가짜 조합기 UI를 구워 넣지 않는다.
+4. 가맹 적합도와 문의 준비
+   - 자본 수치나 예상 수익을 꾸며내지 않는다.
+   - 운영 경험, 희망 지역, 일정, 문의 준비 상태를 단계적으로 정리한다.
+
+### 공개 사이트 정보 구조
+
+1. 첫 화면 — 대표 버거와 열린 포장, 메뉴와 가까운 매장 행동
+2. 오늘 고를 메뉴 — 대표 2개를 크게, 일반 메뉴 3열, 단품·세트와 예시 가격
+3. 버거 조합기 — 포장 라벨과 주문 요약 갱신
+4. 철판에서 상자까지 — 굽기, 조립, 포장의 실제 순서
+5. 포장해서 가기 — 상자, 유산지, 소스 컵, 영수증
+6. 매장 찾기 — 지역·동네, 영업시간, 마지막 주문, 포장·배달 여부
+7. 가맹 예고 — 매장 사진과 `운영 조건 먼저 보기`
+8. 원산지, 알레르기, 영양, 예시 데이터 고지
+
+### 가맹 전용 경로 `/franchise/`
+
+1. 어떤 운영 방식인지
+2. 적합한 운영자와 상권
+3. 매장 크기와 형태
+4. 개설 절차
+5. 비용과 일정 표 — 검증 전에는 예시로 명시
+6. 교육, 물류, 품질 지원
+7. 자주 묻는 질문
+8. 희망 지역, 점포 보유, 예상 면적, 상담 시간, 제출 서류를 받는 문의 폼
+
+가맹 첫 화면은 버거 접사가 아니라 카운터, 주방 동선, 좌석, 포장대가 함께 보이는 운영 사진을 쓴다.
+
+### 회색조 위계
+
+1. 눌림면이 선명한 실제 버거
+2. 대표 메뉴명과 메뉴 또는 매장 행동
+3. 철판 방식과 재료 근거
+
+코발트 색을 제거해도 음식이 첫 번째로 읽혀야 한다.
+
+### 생성 이미지 시안
+
+- 생성 작업: `exec-7fae4537-c8f2-4e29-a848-8480b3606b7f`; 최종 파생본은 `public/work/griddle-club/assets/`에 보관
+- 역할: 직원이 포장된 버거를 건네는 국내 도심 매장의 데스크톱 Hero 시안.
+- 특징: 밝은 스테인리스 카운터, 실제 손, 코발트 트레이와 집게판, 흰 유산지, 좁은 도심 매장.
+- 제한: 메뉴 상세 제품 컷과 조합기 레이어로 재사용하지 않는다. 모바일은 별도 4:5 원본을 만든다.
+- 상세 기준: `showcase-duo-image-bible-2026-08-29.md`
+
+### 안 할 것
+
+- 빨강과 노랑의 자동 적용
+- 체커보드, 네온 간판, 1950년대 식당 장식의 무근거 혼합
+- 제품보다 큰 브랜드 장식
+- 같은 크기의 둥근 메뉴 카드 반복
+- 읽을 수 없는 손글씨와 기울어진 스티커 남용
+- 검증하지 않은 매장 수, 매출, 수익률, 가맹비, 후기
+- 일반 고객과 가맹 희망자 CTA를 한 화면에서 같은 위계로 경쟁시키는 구성
+- `1위`, `압도적`, `검증된`, `창업비 0원`을 출처 없이 반복하는 구성
+- 매장 수, 매출, 판매량, 연예인 얼굴을 브랜드보다 크게 만드는 구성
+- 떠 있는 전화, 카카오, 앱 설치, 창업 문의를 동시에 노출하는 구성
+- 비용과 조건은 숨기고 연락처부터 요구하는 구성
+
+---
+
+## 인간 검증 게이트 1.1 — 승인 완료
+
+2026-08-29 사용자가 모든 게이트의 자율 승인을 명시했다. 아래 다섯 항목을 국내형 구현 기준으로 잠근다.
+
+1. 작업명: `한남자리`, `철판클럽`
+2. 문장: `조건부터 맞춰 보는 한남의 집`, `눌러 굽고, 바로 건넨다`
+3. 부동산: 회백색 60 / 검정 35 / 금색 5, 서울 외관과 거래 조건 40:60 분할
+4. 햄버거: 따뜻한 회백색과 흑갈색, 코발트 8~10%, 밝은 도심 철판 주방과 포장 행동
+5. 부동산 검수 대기열 관리자, 햄버거 소비자 홈과 가맹 경로 분리
+
+승인으로 해제된 작업:
+
+- 배포 자산 복사
+- HTML, CSS, JavaScript 구현
+- 쇼케이스 목록 등록
+- 최종 디자인 토큰 확정
+
+후속 게이트는 자동 승인이더라도 합격 증거가 있어야 닫는다. 캡처, 실제 브라우저 동작, 접근성, 진실성, 성능, 회귀 중 하나라도 실패하면 다음 단계로 넘기지 않는다.
+
+## 다음 인간 검증 게이트의 합격 조건
+
+### 게이트 2 · 부동산
+
+- 1440px와 390px 실제 브라우저 캡처
+- 공개 화면과 관리자 핵심 보기
+- 다섯 조건 브리핑, 세 집 비교, 서류철 동기화, 관리자 게시 차단 증명
+- 키보드, Escape, 바깥 클릭, 감소 모션 확인
+- 허위 수치와 허위 등록정보 없음
+
+### 게이트 3 · 햄버거
+
+- 1440px와 390px 실제 브라우저 캡처
+- 프로모션 홈과 가맹 경로
+- 버거 조합기, 메뉴, 매장 목록, 가맹 문의 흐름 증명
+- 음식 이미지 일관성, 키보드, 감소 모션 확인
+- 가격과 사업 수치의 예시 고지 확인
+
+### 최종 자동 게이트
+
+- HTML 검증
+- 스타일 검사
+- JavaScript 문법 검사
+- 한자 제거 검사
+- 쇼케이스 전용 실제 브라우저 E2E
+- 가로 넘침, 명도 대비, 320 / 390 / 768 / 1440 반응형
+- 자산 MIME, 해시, 캐시 무효화
+- 빌드와 기존 회귀 검사
+- 캡처와 보고서 생성

apps/site/research/showcase-duo-image-bible-2026-08-29.md

@@ -0,0 +1,299 @@
+# 두 쇼케이스 이미지 성경
+
+> 상태: 인간 검증 게이트용 초안.
+> 현재 생성 원본은 배포 자산이 아니며, 역할·연속성·크롭·성능 기준이 승인된 뒤 변환한다.
+
+## 공통 원칙
+
+- 생성 이미지는 물성, 공간, 촬영 분위기를 담당한다.
+- 가격, 주소, 상태, 버튼, 차트, 지도, 분석 결과는 실제 HTML과 CSS가 담당한다.
+- 생성한 장소와 건물을 실제 주소나 실매물의 증빙으로 주장하지 않는다.
+- 모든 공개 이미지 가까이에 필요하면 `쇼케이스용 시연 이미지` 고지를 둔다.
+- 원본 PNG는 보관하지만 공개 경로에서 직접 내려주지 않는다.
+- 데스크톱과 모바일 Hero는 같은 가로 이미지를 강제 크롭하지 않고 별도 원본을 만든다.
+- 이미지 속 로고, 상호, 주소, 가격, 번호, 안내 문구는 생성하지 않는다. 글자는 DOM 또는 검증한 SVG가 소유한다.
+- 후속 이미지는 승인된 기준 이미지를 참조해 건물, 버거, 재료, 작업복, 조명, 카메라 연속성을 유지한다.
+
+---
+
+## 부동산 기준 이미지
+
+### 생성 기록
+
+- 생성 작업: `exec-137f9913-b133-4583-8e6f-d73a6b6e8bd0`
+- 배포 파생본: `public/work/hannam-jari/assets/hannam-evening-1600.webp` · SHA-256 `10a8f321ee9fb439c1bbc375e714d32317780bd67a672e2dae67250ee2f123cc`
+- 원본: 1672×941, 2,164,267 bytes, 약 1.78:1
+- 판정: 조건부 승인
+- 허용 역할: 공개 홈페이지의 데스크톱 외관 Hero
+- 금지 역할: 실제 매물 증빙, 실제 주소 사진, 모든 매물의 공통 대표 이미지
+
+### 생성 프롬프트
+
+```text
+Create a wide landscape 16:9 photorealistic commercial hero photograph for a fictional premium Korean real-estate brokerage website. The image must feel unmistakably like contemporary Seoul without using traditional motifs. Show a refined modern Korean high-end apartment or compact luxury villa exterior and its real urban living context on a Hannam-like hillside at early blue hour: dense but orderly Seoul mid-rise skyline in the distance, a believable sliver of river or city view, Korean curb and apartment entry proportions, dark stone and warm limestone, brushed bronze entrance detail, restrained native landscaping, one warm entry light. Compose the architecture and view mainly toward the right and center, with calmer darker breathing room toward the left for separate HTML copy, but do not put any text or interface inside the image. Natural architectural photography, 28mm lens, eye-level to slightly elevated, crisp but not HDR, believable materials and scale, quiet premium mood, black/charcoal and warm champagne light used by the scene rather than as graphic decoration. No interior living room, no Western mansion, no European villa, no American suburb, no hanok, no palace motifs, no marble-gold opulence, no fantasy skyline, no impossible landmarks, no logos, no signage, no readable text, no UI, no badges, no watermark, no oversaturated orange, no heavy bloom, no people posing.
+```
+
+### 국내성 단서
+
+- 경사지 골목과 옹벽
+- 고밀도 중저층 주거지와 멀리 보이는 공동주택 군집
+- 회색 석재 외벽, 검정 알루미늄, 좁은 진입부
+- 정리한 소나무와 낮은 상록수
+- 금박 장식 대신 현관의 따뜻한 빛으로 만든 고급감
+
+### 위험과 제한
+
+- 먼 도시와 강은 실제 한남의 특정 지형으로 주장할 수 없다.
+- 전경 도로의 차선, 배수, 보도 체계는 증빙 사진으로 쓰기에 부족하다.
+- 현관 문과 손잡이 일부가 생성 이미지처럼 매끈하다.
+- 상단 창과 검정 패널의 결합이 실제 시공 상세보다 지나치게 정돈됐다.
+- 공동주택보다 단독 고급 빌라에 가깝다. 다른 유형의 매물에 재사용하지 않는다.
+
+### 크롭 규칙
+
+데스크톱:
+
+- 이미지는 밝은 Hero의 독립 표면으로 사용하고 본문을 사진 위에 겹치지 않는다.
+- 넓은 크롭에서는 건물 입구, 경사지 골목, 서울의 중저층 밀도를 함께 남긴다.
+- 어두운 오버레이로 사진을 고급스럽게 보이게 만드는 방식은 쓰지 않는다.
+- 실제 캡처에서 건물의 진입 맥락과 주거 스케일이 모두 읽히는지 확인한다.
+
+모바일:
+
+- 원본 중앙 크롭은 불합격이다.
+- 4:5 전용 이미지에서 건물과 현관을 상단, 경사 골목과 도시를 하단에 둔다.
+- 제목과 다섯 거래 조건은 이미지 밖 문서 객체에 두며, 첫 844px 안에서 건물과 입구가 함께 보여야 한다.
+
+### 고정 재료
+
+- 무광 회색 석회석 또는 화강석 외벽
+- 무광 검정 알루미늄 프레임
+- 따뜻한 세로 오크 현관 슬랫
+- 투명 유리와 짙은 현무암 계열 옹벽
+- 전정한 소나무 2~3그루와 낮은 상록수
+- 금속 금장, 대리석 무늬, 샹들리에, 유광 황동 장식 금지
+
+### 고정 조명
+
+- 맑거나 옅게 흐린 서울 블루아워
+- 외부 약 4300~5000K, 현관 약 2700K
+- 따뜻함은 현관 내부에서만 나온다.
+- 사진의 황색 면적은 약 12% 이하로 제한한다.
+- 비, 안개, 렌즈 플레어, 과한 별빛, 전체 주황색 보정 금지
+
+### 고정 카메라
+
+- Hero: 풀프레임 환산 28~35mm, 눈높이 1.5~1.7m
+- 건축 수직선 교정, 2점 투시
+- 실내와 시설 상세: 50mm
+- 재료 접사: 85mm
+- 초광각, 과한 상향 촬영, 드론형 과장 원근 금지
+
+### 연속성 고정물
+
+- 같은 회색 석재 패턴
+- 검정 캐노피와 세로 오크 현관
+- 현관 오른쪽의 석재 벽
+- 입구 주변 소나무 수형
+- 경사지와 도시 방향
+
+### 필요한 추가 자산
+
+1. `estate-hero-exterior-mobile` — 같은 건물의 4:5 세로 Hero
+2. `estate-exterior-day` — 같은 외관의 흐린 낮, 3:2
+3. `estate-entry-detail` — 출입구와 공용부, 4:3
+4. `estate-view-city` — 테라스에서 본 생활권 조망, 3:2
+5. `estate-parking-proof` — 주차 진입과 폭, 4:3
+6. `estate-storage-detail` — 수납 또는 창고, 4:3
+7. `estate-neighborhood-walk` — 경사지 생활권과 상업시설, 3:2
+8. `estate-room-neutral` — 화려한 트래버틴이 없는 실제 거주형 거실, 4:3
+9. `estate-consultation` — 얼굴이 주인공이 아닌 국내 상담, 3:2
+10. 관리자 매물 썸네일 6종 — 외관, 거실, 주차 범주가 구분되어야 함
+
+AI 분석과 관리자 화면은 이미지로 만들지 않고 실제 DOM으로 구현한다.
+
+---
+
+## 햄버거 기준 이미지
+
+### 생성 기록
+
+- 생성 작업: `exec-7fae4537-c8f2-4e29-a848-8480b3606b7f`
+- 배포 파생본: `public/work/griddle-club/assets/hero-handoff.webp` · SHA-256 `a4375cf93f4e99b264d55d10d75d56661a07d6ca0a9e9600ce670e5202b3046f`
+- 원본: 1672×941, 2,040,309 bytes, 약 1.78:1
+- 판정: 조건부 승인
+- 허용 역할: 공개 홈페이지의 데스크톱 매장 현장 Hero
+- 금지 역할: 메뉴 상세 제품 컷, 조합기 재료 레이어, 모든 메뉴의 공통 대표 이미지
+
+### 생성 프롬프트
+
+```text
+Create a wide landscape 16:9 photorealistic commercial food hero photograph for a fictional contemporary Korean smashburger franchise called 철판클럽, but include absolutely no words or logos in the image. The visual world is a bright compact Seoul fast-casual takeaway kitchen, not an American diner. Show one appetizing double smashburger with a toasted sesame bun, two thin lace-edged beef patties, two melted cheese slices, griddled onion, pickles, and pale house sauce on a large electric-cobalt thin tray paper over brushed stainless steel. Include a real worker's clean hand in a plain dark apron naturally sliding or wrapping the burger, a small stainless condiment cup, a blank order slip held by a blue clip, and subtle narrow urban takeaway-counter depth. Use bright direct flash mixed with clean overhead fluorescent daylight, accurate food texture, cream paper, silver steel, charcoal ink-like shadows, and a large cobalt material plane. Keep the burger toward center-right and leave usable breathing room at left for separate HTML copy. Energetic, immediate, Korean city lunch-service realism. No red-yellow fast-food palette, no checkerboard, no neon sign, no 1950s diner, no rustic wood, no dark moody bar, no floating ingredients, no plastic-looking food, no excessive steam, no fake lettering, no Korean or English text, no logo, no UI, no watermark, no extra fingers, no distorted hand, no duplicate burger.
+```
+
+### 국내성 단서
+
+- 좁고 밝은 스테인리스 카운터와 도심 창가
+- 검정 반소매 작업복과 앞치마
+- 코발트 트레이, 집게판, 흰 포장지
+- 제품 진열보다 주문을 바로 건네는 매장 행동
+- 체커보드, 네온, 가죽 부스가 없는 밝은 국내 패스트캐주얼 환경
+
+### 위험과 제한
+
+- 엄지와 포장지 경계가 약간 매끄럽게 융합됐다.
+- 위쪽 양파, 소스, 치즈의 경계가 약하다.
+- 번의 반구와 깨 배열이 상품 렌더처럼 지나치게 균일하다.
+- 두 패티 질감이 복제처럼 비슷하다.
+- 창밖의 흐린 파란 표식을 실제 간판이나 주소로 해석하지 않는다.
+- 텍스트를 올릴 깨끗한 여백은 없다.
+
+### 크롭 규칙
+
+데스크톱:
+
+- `크림색 DOM 정보 38~42% + 이미지 58~62%` 분할을 사용한다.
+- 원본 `x 35~100%` 크롭으로 손과 버거를 함께 보존한다.
+- `object-position: 72% 50%`를 시작점으로 실제 캡처에서 조정한다.
+- 버거 핵심 구역은 약 `x 54~91%`, `y 36~78%`다.
+- 음식 위에는 가격, 버튼, 배지를 올리지 않는다.
+
+모바일:
+
+- 단순 `object-fit: cover`는 불합격이다.
+- 같은 직원, 트레이, 버거를 유지한 4:5 전용 장면을 만든다.
+- 버거 중심을 약 `x 52%`, `y 57%`에 두고 손 전체와 트레이 앞선을 포함한다.
+- 카피와 가격은 사진 아래 별도 DOM에 둔다.
+
+### 대표 버거 고정 구성
+
+- 깨가 듬성한 부드러운 브리오슈 번
+- 바삭한 가장자리의 소고기 패티 정확히 2장
+- 노란 체더 정확히 2장, 각 패티 사이에 한 장씩
+- 얇게 구운 양파
+- 골이 있는 피클 3조각
+- 연한 크림색 하우스 소스
+- 양상추, 토마토, 베이컨은 대표 버거에서 제외
+- 패티 지름, 번 높이, 포장지 접힘 방향 고정
+
+### 고정 재료와 작업복
+
+- 코발트 `#2147E7` 폴리프로필렌 트레이
+- 코발트 금속 집게
+- 무코팅 흰 유산지
+- 브러시드 304 스테인리스 카운터
+- 소형 스테인리스 소스 컵
+- 검정 면 반소매와 검정 앞치마
+- 장신구, 문신, 브랜드 로고 없음
+- 맨손은 포장지만 잡고 음식에 직접 닿지 않음
+
+### 고정 조명
+
+- 4800~5200K 상업 주방 천장등과 창문 주광
+- 밝고 중성적인 색온도
+- 번과 치즈에만 얇은 윤기
+- 주황색 텅스텐, 과한 증기, 불꽃, 검은 비네트, 플라스틱 광택 금지
+
+### 고정 카메라
+
+- Hero: 35mm, 카운터 높이 약 90cm, 손 건네기 시점
+- 메뉴 제품 컷: 50mm, 약 15도 낮은 측면
+- 재료와 패티 접사: 85mm
+- 매장 전경: 28mm, 수직선 교정
+- 배경만 얕은 심도를 쓰고 버거 앞뒤는 선명하게 유지
+
+### 필요한 추가 자산
+
+1. `burger-hero-handoff-mobile` — 동일 장면의 4:5
+2. `burger-signature-double` — 대표 더블 단독 제품 컷, 4:3
+3. `burger-single` — 패티 1장 변형, 4:3
+4. `burger-onion-detail` — 철판 양파 조리 접사, 3:2
+5. `burger-patty-press` — 눌러 굽는 조리 과정, 3:2
+6. `burger-wrap-handoff` — 포장 완료 장면, 3:2
+7. `burger-ingredient-flatlay` — 실제 재료 근거, 4:3
+8. `burger-store-interior` — 좁고 밝은 국내 도심 매장, 3:2
+9. `burger-store-exterior` — 빈 간판 면을 둔 저녁 외관, 3:2
+10. `burger-team-training` — 조리와 응대 교육, 얼굴 비중 낮게, 3:2
+11. `burger-franchise-counter` — 가맹 페이지용 운영 동선, 3:2
+12. 매장 카드용 외관 4종 — 서로 다른 입지, 같은 코발트 사인 체계
+13. 조합기용 버거 기본 컷과 토핑 상태 5~7종
+14. 공유 카드용 정면 버거 컷, 1:1
+
+조합기는 UI가 들어간 이미지 한 장을 쓰지 않는다. 같은 카메라와 버거 위치를 유지한 상태 이미지 5~7종을 실제 DOM 선택에 따라 교체한다. 투명 레이어 방식은 좌표가 완전히 고정된 경우에만 사용한다.
+
+---
+
+## 게이트 1.1 승인 뒤 생성한 자산
+
+### 부동산 거주형 실내
+
+- 생성 작업: `exec-001f3044-ca57-4f8a-9a12-da141f580833`
+- 배포 파생본: `public/work/hannam-jari/assets/hannam-interior-1200.webp` · SHA-256 `13e2d3b3cb85b42f91576e29958fd541c6aa288054efbaaf586ebb660867aba8`
+- 원본: 1536×1024, 2,216,184 bytes
+- 역할: 공개 매물 카드와 상세의 보조 연출 사진
+- 유지 단서: 검정 창호, 회백색 마감, 낮은 모듈 소파, 오크 수납, 서울형 고밀도 조망
+- 제한: 창밖의 건물과 지형은 실제 한남 조망이 아니며 채광, 소음, 조망의 증빙으로 쓰지 않는다.
+- 판정: 조건부 승인. 이미지 가까이에 `연출 이미지 · 실제 매물 사진 아님`을 둔다.
+
+### 부동산 모바일 외관
+
+- 생성 작업: `exec-f705b6de-e573-483a-9162-dad639ac4d5b`
+- 배포 파생본: `public/work/hannam-jari/assets/hannam-evening-mobile.webp` · SHA-256 `47246751f9d1d1036da68e5aa2efe5b4abf55c5eb585b8125a5624a745ca76ad`
+- 원본: 1122×1402, 2,142,301 bytes
+- 역할: 390px 첫 화면 전용 외관 사진
+- 유지 단서: 경사지 골목, 회색 석재, 검정 창호, 세로 현관, 정리한 소나무, 서울형 중저층과 공동주택
+- 제한: 가로 Hero와 동일 건물의 완전한 기록 사진이 아니라 같은 디자인 언어로 만든 연출 해석이다. 두 사진을 한 실매물의 시점 증빙처럼 묶지 않는다.
+- 판정: 조건부 승인. 모바일에서 별도 `source`로만 사용하고 실제 위치를 주장하지 않는다.
+
+### 철판클럽 대표 제품
+
+- 생성 작업: `exec-06854e2c-037b-4799-9699-1f2cf8a7e956`
+- 배포 파생본: `public/work/griddle-club/assets/signature-double.webp` · SHA-256 `8505dfd5da82a0a36dbfd6a2a3c9895ab0db3b09f9f7949fc71dbe325c95e172`
+- 원본: 1448×1086, 2,068,902 bytes
+- 역할: 대표 더블 메뉴와 조합기의 기본 제품 사진
+- 유지 단서: 코발트 트레이, 흰 유산지, 스테인리스 주방, 더블 패티와 치즈
+- 제한: 피클과 소스처럼 사진으로 정확히 셀 수 없는 구성은 조리 명세의 증거로 쓰지 않는다. 실제 구성과 알레르기 정보는 문서 객체가 소유한다.
+- 판정: 조건부 승인. 가격, 순위, 판매량과 알레르기 주장을 이미지에 연결하지 않는다.
+
+### 철판클럽 모바일 건네기
+
+- 생성 작업: `exec-c6f40a2f-422b-4f06-9d43-7ad1e2753fdd`
+- 배포 파생본: `public/work/griddle-club/assets/hero-handoff-mobile.webp` · SHA-256 `a7d98504cb156bffd00c8174fa1434b0da99ef7fbcb0af3618a382d02d32bfdf`
+- 원본: 1122×1402, 1,984,985 bytes
+- 역할: 390px 첫 화면 전용 건네기 사진
+- 유지 단서: 국내 도심 상가 창, 밝은 스테인리스 주방, 검정 작업복, 코발트 트레이, 흰 유산지
+- 제한: 직원은 가상 장면의 조연이며 실제 가맹점이나 실제 종사자로 표현하지 않는다. 얼굴이 제목보다 먼저 지배하지 않게 모바일 크롭을 검증한다.
+- 판정: 조건부 승인. 사진 밖 문서 객체에 브랜드, 메뉴와 행동을 둔다.
+
+네 자산 모두 생성 문자와 인터페이스는 보이지 않았지만, 압축 뒤 실제 캡처에서 작은 배경 표식과 손·재료 경계를 다시 육안 검사한다.
+
+## 해상도와 전송 예산
+
+| 역할 | 배포 크기 | 형식과 품질 | 목표 | 하드 상한 |
+|---|---:|---|---:|---:|
+| 데스크톱 Hero | 1600×900 | WebP q80~82 | 180~240KB | 320KB |
+| 모바일 Hero | 960×1200 또는 900×1600 | WebP q80 | 140~190KB | 240KB |
+| 본문 와이드 | 최대 1200×800 | WebP q78~82 | 120~180KB | 240KB |
+| 4:3 카드 | 최대 720×540 | WebP q76~80 | 65~100KB | 130KB |
+| 작은 썸네일 | 최대 480×360 | WebP q74~78 | 35~60KB | 80KB |
+| 투명 조합기 레이어 | 최대 720×720 | alpha WebP q82~86 | 70~130KB | 170KB |
+| OG 이미지 | 1200×630 | JPEG, WebP 또는 PNG | 200~350KB | 600KB |
+
+추가 규칙:
+
+- Hero만 `fetchpriority="high"`를 사용한다.
+- 나머지 이미지는 지연 로딩한다.
+- 모든 이미지에 실제 `width`, `height`, `srcset`, `sizes`를 둔다.
+- 첫 화면 이미지 전송량 목표는 데스크톱 350KB, 모바일 260KB 이하다.
+- 초기 이미지와 지연 이미지를 분리해 계측한다.
+- 자산 변환 뒤 MIME, 파일 크기, 픽셀 크기, 해시를 보고서에 기록한다.
+
+## 최종 이미지 게이트
+
+- 데스크톱과 모바일 전용 크롭이 각각 주인공을 보존하는가
+- 실제 장소나 실제 매물로 오인될 표현이 없는가
+- 생성 문자, 로고, 사람의 손, 재료 경계 오류가 없는가
+- 같은 건물과 대표 버거의 고정물이 모든 자산에서 유지되는가
+- DOM 텍스트가 이미지의 중요한 정보와 겹치지 않는가
+- 감소 모션과 이미지 실패에서도 핵심 정보와 행동이 남는가
+- 성능 목표와 하드 상한을 모두 통과하는가

apps/site/research/showcase-duo-implementation-blueprint-2026-08-29.md

@@ -0,0 +1,216 @@
+# 두 쇼케이스 구현 청사진
+
+> **최종 정본 (H04 반영, 2026-08-29):** 이 문서는 구현과 사용자 게이트를 모두 통과한 최종 정보 구조, 진실성 계약, 화면 상태, 토큰, 성능 예산과 자동 게이트를 기록한다. 초기 9장 구성과 지도·통근 중심 설계는 폐기됐다.
+
+## 1. 공통 계약
+
+- `한남자리`와 `철판클럽`은 디자인 검증용 가상 브랜드다.
+- 실제 사무소, 실제 매물, 실제 매장, 실제 가격, 실제 주문, 실제 가맹 문의로 오인될 표현을 만들지 않는다.
+- 고지는 푸터 한 곳에 숨기지 않는다. 같은 진실 범위의 가장 가까운 의미 부모가 한 번 소유하고, 제한이 달라지는 카드·가격·매장 상태·제출 행동에서만 새로 표시한다.
+- 생성 이미지는 물성, 공간, 음식과 현장 분위기만 소유한다. 가격, 상태, 주소, 분석, 버튼과 표지는 실제 문서 객체가 소유한다.
+- 정적 데모의 계산은 실시간 인공지능이나 서버 전송으로 표현하지 않는다.
+- 화면이 실패해도 입력값과 확인된 사실은 남기고, 성공 상태를 가장하지 않는다.
+- 공개 경로와 운영 경로는 같은 브랜드 토큰을 공유하되 표현, 움직임, 정보 밀도 다이얼은 따로 둔다.
+
+## 2. 경로와 소유권
+
+| 제품 | 경로 | 주 임무 | 표현 / 움직임 / 밀도 |
+|---|---|---|---|
+| 한남자리 공개 | `/work/hannam-jari/` | 다섯 조건 입력, 예시 브리핑, 세 집 비교, 서류철, 사람 인계 | 7 / 4 / 5 |
+| 한남자리 관리자 | `/work/hannam-jari/admin/` | 표시 검수, 게시 방어선, 사람 검토, 감사 | 4 / 3 / 8 |
+| 철판클럽 공개 | `/work/griddle-club/` | 메뉴, 조합, 매장, 포장 행동 | 8 / 6 / 4 |
+| 철판클럽 가맹 | `/work/griddle-club/franchise/` | 운영 조건, 비용 미정, 문의 준비 | 5 / 3 / 6 |
+
+공유 저장소 수정 지점:
+
+- `apps/site/src/data/work.ts`: 두 쇼케이스와 하위 경로 등록
+- `apps/site/gate.config.json`: 네 경로 디자인 게이트 등록
+- `apps/site/tools/showcase-duo-e2e.mjs`: 결정적 기능과 실패 상태 검증
+- `apps/site/tools/design-gate.mjs`: 네 경로의 정적 계약과 실제 렌더를 320, 375, 390, 768, 1440에서 감사
+- `apps/site/tools/capture-showcase-duo.mjs`: 본 화면과 핵심 보조 화면 캡처
+- `apps/site/tools/verify.mjs`: 재귀 정적 검사, 실렌더 감사와 전용 시나리오 포함
+
+## 3. 한남자리 공개 화면
+
+### 밝은 Hero와 조건 도크
+
+- 제목은 `한남에서, 내 기준에 맞는 집부터.`다.
+- 서울 생활권의 생성 외관 이미지를 밝은 지면 위에 두고, 검정은 마지막 사람 인계 장면에서만 사용한다.
+- 의사결정 SSOT는 거래 형태·예산·최소 전용면적·입주 희망일·필요 주차 다섯 필드뿐이다.
+- 월세는 보증금과 월 납부액을 분리한다. 화면에 없는 통근·일조·좌표·조망은 추천 근거로 쓰지 않는다.
+- 입력 전송은 없고, 명시적으로 저장할 때만 다섯 필드를 현재 브라우저에 보관한다.
+
+### 예시 AI 브리핑과 세 집 비교
+
+- 분석 전에는 중립 상태를 유지한다. 실행 뒤 `조건과 맞는 점 / 조정이 필요한 점 / 중개사와 확인할 점` 세 묶음을 만든다.
+- 세 후보의 가격·면적·입주·주차를 동일한 입력과 비교하며, 선택 후보를 비교표·서류철·상담 인계에 동기화한다.
+- 모든 후보와 생성 사진의 가상·연출 범위는 가장 가까운 공통 부모에서 표시한다.
+
+### 탭형 검토 서류철과 사람 인계
+
+- 서류철은 기본·가격·권리·입지 확인·시설과 관리 다섯 탭이며 클릭과 방향키·Home 키를 지원한다.
+- 권리, 실제 이동 시간, 현장 상태, 입주 가능일처럼 근거가 없는 항목은 확인 필요로 남긴다.
+- 마지막 장면은 `AI가 좁히고, 공인중개사가 확인합니다.`라는 역할 분리를 보여준다.
+- 상담 흐름은 외부 전송 없는 모의 대화상자이며 닫기·바깥 클릭·Escape 뒤 선택 상태와 초점을 함께 복구한다.
+
+## 4. 한남자리 관리자
+
+### 첫 화면 구조
+
+- 일반적인 지표 카드 세 장과 차트로 시작하지 않는다.
+- 검수 대기열이 화면의 중심이고 우측 조사관이 선택 행의 전체 맥락을 가진다.
+- 표 열은 상태, 매물, 거래, 가격, 마지막 확인, 표시 검수, 분석 검토, 담당이다.
+- 검색, 상태 필터, 정렬, 키보드 행 선택과 빈 결과 초기화를 제공한다.
+
+### 이중 게시 게이트
+
+`쇼케이스 미리보기`는 다음 조건을 모두 통과할 때만 가능하다.
+
+- 상시 데모 표지
+- 개별 매물 예시 표지
+- 생성 이미지 출처와 증빙 불가 표지
+- 실제 연락 기능 비활성
+- 실제 주소와 등록번호 없음
+- 결정적 예시 분석 표지
+
+`실제 광고`는 다음이 모두 실제 자료가 아니므로 모든 fixture에서 차단한다.
+
+- 실제 등록 사무소 정보
+- 실제 중개의뢰 관계
+- 광고 동의
+- 거래 가능 상태
+- 실제 서류와 미디어 권리
+- 공인중개사 최종 승인
+
+가상 데이터로 실제 광고 게이트를 통과시키는 성공 상태는 구현하지 않는다.
+
+### 조사관 탭
+
+1. 기본
+2. 표시·광고
+3. 서류
+4. AI 분석
+5. 문의·일정
+6. 변경 이력
+
+표시 검수는 `통과`, `누락`, `충돌`, `오래됨`, `해당 없음`을 구분하고 법령, 행정 기준, 내부 운영 기준을 한 범주로 섞지 않는다. 누락 항목은 해당 필드로 이동한다.
+
+### 운영 상태
+
+- 대기열 없음과 필터 결과 없음은 서로 다른 상태다.
+- 권한상 볼 수 없음, 선택 행 계약 완료, 분석 실패·취소·오래됨을 제공한다.
+- 저장 실패는 낙관적 성공을 되돌리고 입력을 보존한다.
+- 버전 충돌은 다른 담당자의 버전과 현재 편집본을 덮어쓰지 않고 비교한다.
+- 실제 게시 요청은 중복 클릭, 권한, 객체 버전, 규칙 묶음, 감사 로그 쓰기 중 하나라도 실패하면 닫힌 상태를 유지한다.
+- 조사관과 대화상자는 닫기, 바깥 클릭, Escape가 패널과 선택 행 강조를 함께 해제한다.
+
+## 5. 철판클럽 공개 화면
+
+### 첫 화면과 메뉴
+
+- 제목은 `눌러 굽고, 바로 건넨다.`이다.
+- 일반 고객 행동인 메뉴와 매장 찾기가 가맹보다 높은 위계를 가진다.
+- 대표 두 메뉴는 큰 사진과 한국어 이름으로, 나머지는 세 열 편집 리듬으로 보여준다.
+- 모든 가격에 `화면 계산용 예시`를 가까이 붙인다.
+- 검증하지 않은 인기, 판매량, 순위 배지를 쓰지 않고 `대표`만 쓴다.
+- 품절, 매장 미제공, 준비 중을 색만이 아니라 문구와 행동 제한으로 표시한다.
+
+### 조합기
+
+- 단품·세트, 패티, 치즈, 양파, 피클, 소스, 곁들임, 음료와 받을 예시 매장을 선택한다.
+- 세트의 곁들임이나 음료가 비면 완료 상태가 되지 않는다.
+- 매장별 품절 재료가 있으면 조합은 보존하고 다른 매장 행동을 제공한다.
+- 매장이 닫혀도 조합을 지우지 않는다.
+- 가격 자료가 없으면 합계를 만들지 않는다.
+- 성공 행동은 주문이 아니라 `선택 내용 저장`이다.
+- 저장 결과는 현재 기기의 화면 상태이며 서버 전송으로 말하지 않는다.
+
+### 알레르기와 매장
+
+- 재료를 빼면 예시 알레르기 표시는 다시 계산한다.
+- 같은 철판과 도구의 교차 접촉 경고는 어떤 선택에서도 남긴다.
+- 매장은 `예시 매장`으로 표시하고 동네 범위만 제공한다.
+- 실제 도로명 주소, 전화번호, 거리와 위치 권한을 만들지 않는다.
+- 영업 중, 마지막 주문 임박, 종료, 임시 휴무, 확인 필요를 각각 다른 행동으로 연결한다.
+
+## 6. 철판클럽 가맹 화면
+
+- 첫 사진은 버거 접사보다 조리, 포장, 응대 동선이 보이는 운영 장면이다.
+- 브랜드 이유, 운영 방식, 희망 상권, 점포 상태, 개설 순서, 비용 상태, 교육과 품질, 문의 준비 순서로 읽힌다.
+- 검증하지 않은 최소 면적, 가맹비, 평균 매출, 회수 기간과 예상 수익을 만들지 않는다.
+- 비용 항목은 금액이 아닌 `미정`과 미정 이유를 보여주고 합계를 만들지 않는다.
+- 면적 입력은 ㎡와 평을 함께 보여주지만 적합 판정으로 표현하지 않는다.
+- 문의는 실제 이름과 연락처를 받지 않는 체험이다.
+- 성공 상태는 `문의 준비가 끝났어요`이며 실제 접수나 담당자 연락을 주장하지 않는다.
+- 실패 상태는 입력을 보존하고 다시 시도 행동을 제공한다.
+
+## 7. 토큰과 조판
+
+### 한남자리 공개
+
+- 바탕 `#EEECE5`
+- 검정 `#0F0F0E`
+- 어두운 면 금색 `#C6A15B`
+- 밝은 면 갈금 `#6F5420`
+- 금색 점유율 5% 이하, 선택·검토·확인 표시에만 사용
+- Pretendard 또는 SUIT 계열 한 패밀리
+
+### 한남자리 관리자
+
+- 밝은 중립 바탕, 흰 패널, zinc 계열 경계
+- 브랜드 검정과 갈금은 선택 행, 현재 탭, 방어선 상태에만 사용
+- 표 본문 13~14px, 일반 본문 15~16px, 지나치게 작은 보조문 금지
+- radius는 작은 제어 6~8px, 패널 10~12px 이내
+
+### 철판클럽
+
+- 바탕 `#F4F1E9`
+- 글자 `#211F1C`
+- 코발트 `#2147E7`
+- 코발트 점유율 8~10%, 행동과 포장 재료에 집중
+- 스테인리스, 치즈와 불빛은 사진만 소유
+- Pretendard Variable 한 패밀리
+
+## 8. 반응형과 접근성
+
+- 320, 390, 768, 1440에서 가로 넘침이 없어야 한다.
+- 모바일 주 행동은 최소 높이 44px이다.
+- 첫 제목은 320px에서도 두 줄 이내를 목표로 하되 한국어 어절을 강제로 쪼개지 않는다.
+- 고정 머리글과 하단 행동은 안전 영역을 포함한다.
+- 가로 표는 명시적 스크롤 용기와 표 설명을 가진다.
+- 현재 선택, 품절, 차단, 경고는 색과 함께 텍스트·아이콘·속성으로 표현한다.
+- 상태 변경은 `aria-live`, 폼 전체 실패는 `role=alert`로 알린다.
+- 감소 모션에서는 자동 이동, 부드러운 스크롤과 장식 변환을 끈다.
+- 자바스크립트가 없어도 제목, 핵심 사실, 예시 고지와 경로 설명은 남는다.
+
+## 9. 이미지와 성능 예산
+
+- 데스크톱 Hero 목표 180~240KB, 하드 상한 320KB
+- 모바일 Hero 목표 140~190KB, 하드 상한 240KB
+- 카드 목표 65~100KB, 하드 상한 130KB
+- 첫 화면 동일 출처 자산은 데스크톱 350KB, 모바일 260KB 이하를 목표로 한다.
+- Hero만 높은 우선순위를 사용하고 나머지는 지연 로딩한다.
+- 모든 이미지에 고정 크기, 반응형 크기 힌트, 대체 문구를 둔다.
+- 생성 이미지 픽셀의 글자와 로고는 자동 한자 검사로 잡히지 않으므로 별도 육안 감사한다.
+
+## 10. 자동 게이트 계약
+
+정적 게이트:
+
+- 모든 하위 HTML 재귀 검증
+- 모든 하위 CSS 재귀 스타일 검사
+- 자바스크립트 문법 검사
+- 한자 금지 검사
+- 상대 경로, CSS 변수, 한글 조판 무결성 검사
+
+실제 브라우저 게이트:
+
+- 네 경로 × 네 폭의 구조와 오버플로 감사
+- 한남자리 조건 분석, 단위 전환, 지도·목록 동기화, 상담 데모
+- 한남자리 관리자 검색·정렬·필터·탭·게시 차단·대화상자 해제
+- 철판클럽 메뉴, 조합기, 품절·영업 종료, 알레르기, 저장 성공·실패
+- 철판클럽 가맹 면적 환산, 비용 미정, 검토 복귀, demo 성공·실패
+- 키보드 순서, 접근성 자동 검사, 감소 모션, 자바스크립트 없음
+- 깨진 이미지, 콘솔 오류, 네트워크 실패, 누적 배치 이동과 최초 주요 표시 시간
+
+게이트의 자동 승인은 무조건 통과가 아니다. 검사 결과가 녹색일 때만 승인 기록을 남기고, 실패 시 관련 단계로 되돌아가 수정한다.

apps/site/research/showcase-duo-learning-ledger-2026-08-29.md

@@ -0,0 +1,150 @@
+# 두 쇼케이스 학습 원장
+
+> 목적: 두 디자인을 만들며 얻은 교훈을 증거와 함께 누적하고, 구현과 검증을 마친 뒤 10개 이상을 designpaca 규칙으로 승격한다.
+> 현재 항목은 연구 단계의 가설이다. 구현이나 실제 브라우저 증거가 없는 항목은 최종 교훈으로 세지 않는다.
+
+## 승격 기준
+
+각 교훈은 다음을 모두 가져야 한다.
+
+1. 이번 두 쇼케이스 중 어디에서 발견했는가
+2. 어떤 화면, 코드, 사용자 동작, 검사 결과가 증거인가
+3. 기존 designpaca 규칙과 충돌하는가
+4. 충돌한다면 근본 규칙을 보존할지, 새 교훈에 맞게 근본 규칙을 고칠지
+5. 규칙을 바꾼 뒤 어떤 검사로 회귀를 막을 것인가
+
+## 연구 단계 가설
+
+| 번호 | 관찰 | 후보 규칙 | 기존 규칙과 긴장 | 상태 |
+|---:|---|---|---|---|
+| 1 | 고급 마케팅 화면의 어두운 브랜드 톤을 운영 관리자까지 복제하면 상태와 경고가 약해진다. | 같은 제품이어도 마케팅 화면과 운영 화면의 시각 밀도 다이얼을 따로 정한다. | 하나의 토큰 체계와 화면별 판독성 사이의 긴장 | 구현 증거 대기 |
+| 2 | 검정과 금색은 면적보다 역할을 제한할 때 더 고급스럽다. | 고급 팔레트는 강조색 점유율과 허용 역할을 함께 기록한다. | 팔레트 자유와 절제 사이의 긴장 | 구현 증거 대기 |
+| 3 | AI 설명만 추가하면 신뢰가 생기지 않고 수정과 사람 검토가 함께 있어야 한다. | AI 결과 컴포넌트는 이유, 불확실성, 수정, 사람 검토를 하나의 게이트로 묶는다. | 디자인 범위와 제품 안전 범위 사이의 긴장 | 구현 증거 대기 |
+| 4 | 같은 업종 구조, 다른 업종 톤, 구체 상호작용을 분리해 조사하면 복제 위험이 줄어든다. | R1, R2, R3마다 가져올 축과 버릴 축을 의무적으로 기록한다. | 기존 3슬롯 규칙의 구체화 | 조사 증거 있음, 구현 검증 대기 |
+| 5 | 고객과 가맹 희망자는 같은 브랜드라도 성공 행동이 다르다. | 서로 다른 주 행동을 가진 사용자군은 한 화면의 동등 CTA가 아니라 경로 분리를 먼저 검토한다. | 단일 랜딩 압축과 정보 구조 분리 사이의 긴장 | 구현 증거 대기 |
+| 6 | 생성 이미지 안에 가짜 UI를 넣으면 상호작용과 접근성을 증명할 수 없다. | 생성 이미지는 물성과 분위기를 소유하고 데이터와 제어는 HTML이 소유한다. | 강한 비주얼과 실제 제품성 사이의 긴장 | 국내 방향 시안 2장에 UI를 배제한 증거 있음, 구현 검증 대기 |
+| 7 | 법정 공개 항목은 푸터 문구보다 관리자 게시 상태에 연결할 때 실효성이 생긴다. | 규제 필드는 고지 목록과 함께 게시 차단 상태 머신으로 모델링한다. | 시각 디자인 스킬의 범위를 운영 구조로 넓히는 문제 | 구현 증거 대기 |
+| 8 | 생성 음식 사진은 한 장의 품질보다 여러 장의 재료와 포장 일관성이 더 어렵다. | 이미지 생성 전에 자산 역할, 재료 고정값, 조명, 카메라, 금지 목록을 이미지 성경으로 만든다. | 생성 속도와 일관성 관리 사이의 긴장 | 기준 이미지 오류와 크롭 감사 완료, 추가 자산 검증 대기 |
+| 9 | 표현 강도는 사이트 전체에서 하나가 아니라 화면 임무별로 달라져야 한다. | 표현, 움직임, 정보 밀도 다이얼을 주요 화면군마다 기록한다. | 하나의 방향 보드와 화면별 변주 사이의 긴장 | 구현 증거 대기 |
+| 10 | 인간 검증 게이트가 추상적인 감상 질문이면 다음 구현을 잠그지 못한다. | 게이트마다 승인할 이름, 문장, 색, 이미지, 정보 구조를 열거하고 승인 전 금지 행동을 기록한다. | 자율 구현 속도와 사용자 통제 사이의 긴장 | 게이트 응답 대기 |
+| 11 | 프리미엄 화면에서 모든 카드를 장식하면 위계가 사라진다. | 장식이 필요한 단 하나의 지배 표면을 지정하고 나머지는 선, 여백, 타입으로 구분한다. | high-end 보조 규칙과 designpaca의 반복 억제 사이의 충돌 | 구현 증거 대기 |
+| 12 | 지도나 시각화만 제공하면 동일 데이터를 키보드와 보조기술로 탐색하기 어렵다. | 지도와 시각화에는 동일 데이터의 목록 또는 표 보기를 필수 짝으로 둔다. | 몰입형 시각과 접근성 사이의 긴장 | 구현 증거 대기 |
+| 13 | 국내 서비스를 만들면서 해외 사례를 시각 주축으로 두면 한국어를 얹어도 번역된 해외 템플릿처럼 읽힌다. | 지역 적합성은 장식이 아니라 단위, 용어, 정보 순서, 상담과 주문 행동, 상업 사진으로 검사한다. R1과 R2의 주 레퍼런스를 목표 지역 사례로 우선한다. | 세계적 레퍼런스 품질과 지역 사용자 맥락 사이의 긴장 | 사용자 피드백 증거 있음, 구현 검증 대기 |
+
+## 실제 사용자 피드백 1
+
+- 피드백: `주 레퍼런스가 너무 서양스럽다. 국내의 디자인 감각에 맞아야 한다.`
+- 확인된 원인: 부동산은 Sotheby's와 Hennessy, 햄버거는 Teenage Engineering이 시각 중심축이었다.
+- 저장소 충돌: 검정과 앰버, 한남 고급 거실, 에디토리얼 아카이브, 검정과 코발트 기술 화면이 기존 쇼케이스에 이미 존재한다.
+- 수정 행동: 국내 부동산, 프롭테크, 주거 브랜드, 햄버거, 프랜차이즈, 국내 이종 업종을 병렬 재조사한다.
+- 이미지 행동: 실내 중심 부동산과 어두운 해외 푸드 사진을 폐기하고 서울 공동주택 외관과 밝은 도심 철판 주방 시안을 재생성한다.
+- 최종 판정 조건: 전통 장식을 모두 지워도 국내 단위, 용어, 흐름, 행동만으로 한국 서비스임을 식별할 수 있어야 한다.
+
+## 구현 중 기록 형식
+
+각 후보 아래에 다음 증거를 추가한다.
+
+- 화면과 상태:
+- 관련 파일:
+- 실제 브라우저 동작:
+- 실패 또는 수정 전 상태:
+- 수정 후 검사:
+- 기존 규칙과의 조정:
+- 최종 승격 여부:
+
+## 구현 증거 누적
+
+### 증거 A — 정적 검사의 재귀 범위
+
+- 화면과 상태: 공개 홈뿐 아니라 `admin/`, `franchise/` 하위 페이지가 추가된 직후
+- 관련 파일: `apps/site/tools/verify.mjs`, 신규 HTML 네 경로
+- 수정 전 상태: 깊이가 고정된 HTML glob은 앞으로 더 깊어진 하위 페이지를 놓칠 수 있었다.
+- 실제 검사: 재귀 glob으로 바꾸자 미완성 신규 화면의 ARIA 오용, label 다중 연결, figure 자식 순서 오류 8건을 바로 검출했다.
+- 수정 후 검사: 기존 추적 HTML은 그대로 PASS, 신규 오류만 RED로 분리됐다.
+- 후보 교훈: 페이지 수가 아니라 경로 깊이가 변하는 제품에서는 정적 게이트 입력 자체를 재귀·명시 목록으로 검증한다.
+
+### 증거 B — 철판클럽 첫 실렌더
+
+- 화면과 상태: 홈과 가맹, 320 / 390 / 768 / 1440 실제 Chrome 렌더
+- 관련 파일: `public/work/griddle-club/styles/site.css`, `styles/franchise.css`
+- 실패 또는 수정 전 상태: PASS 0 / FAIL 8. 모바일 지도 장식이 문서 폭을 421px와 497px로 밀었고, 768px 제품 사진은 934px까지 넘쳤다. 작은 코발트·보조 글자는 최저 2.09:1, 두 Hero 제목은 3줄이었다.
+- 수정: 지도 장식의 확대·회전을 제거하고 같은 경계 안에서 자르기, 중간폭 이미지에 `min-width: 0`과 절대 채움, 보조색 역할 토큰 상향, 제목 최대 크기와 폭 조정.
+- 수정 후 검사: 한 번 더 남은 10px 푸터 문구 3.89:1을 교정한 뒤 PASS 8 / FAIL 0.
+- 후보 교훈: 장식의 transform도 실제 경계 밖 픽셀을 만들 수 있으며, 강조색 토큰은 큰 CTA뿐 아니라 가장 작은 실제 사용 크기에서 검증해야 한다.
+
+### 증거 C — 모바일 전용 생성 이미지
+
+- 화면과 상태: 두 공개 Hero의 390px 전용 사진
+- 관련 파일: `showcase-duo-image-bible-2026-08-29.md`, 두 사이트의 모바일 WebP
+- 실패 또는 수정 전 상태: 가로 원본의 중앙 강제 크롭은 부동산 현관·경사 골목과 버거의 손·트레이를 동시에 보존하지 못했다.
+- 수정: 같은 물성과 카메라 세계관으로 1122×1402 세로 원본을 별도 생성하고 `<picture>`의 좁은 폭 source로 연결했다.
+- 후보 교훈: 모바일 Hero가 별도 시선 경로를 요구하면 CSS 크롭을 미세 조정하는 대신 생성·촬영 원본 단계에서 구도를 분기한다.
+
+### 증거 D — 자율 승인과 게이트
+
+- 화면과 상태: 사용자가 모든 중간 게이트를 자율 승인한다고 명시한 뒤
+- 관련 파일: 방향 보드, 구현 청사진, 자동 검사 리포트
+- 실제 동작: 게이트 질문을 반복하지 않고 구현은 진행했지만, 철판클럽과 한남자리의 첫 실렌더가 RED일 때 다음 단계로 승인 처리하지 않고 즉시 수정 루프로 돌아갔다.
+- 후보 교훈: 자율 승인은 검사 면제가 아니라 의사결정 대기만 제거한다. 합격 증거와 실패 시 복귀 조건은 그대로 유지한다.
+
+### 증거 E — 구조 게이트 뒤의 시각 RED
+
+- 화면과 상태: 철판클럽 홈 390×844, 구조 감사 PASS 8 / FAIL 0 직후의 실제 상태 캡처
+- 관련 파일: `public/work/griddle-club/styles/site.css`, `tools/.gen/showcase-duo/burger-home-mobile-hero.png`, `burger-home-mobile-stores.png`
+- 실패 또는 수정 전 상태: 모바일 `.store-map { position: static }` 때문에 절대 배치된 격자·강·핀의 기준이 BODY로 바뀌었다. 지도 장식이 Hero 전체를 덮고 실제 매장 구간에는 빈 회색판만 남았다. 데스크톱 사진 크롭은 첫 844px에서 직원 얼굴만 보여 버거를 폴드 아래로 밀었다.
+- 수정: 지도 부모의 containing block을 `position: relative`로 복원하고 목록을 지도보다 먼저 배치했다. 모바일 전용 4:5 이미지를 절대 채움·하단 중심으로 배치해 첫 화면에 손과 버거가 함께 보이게 했다.
+- 수정 후 검사: 390 실측에서 Hero 사진 y=511.7~873.2, 첫 화면에 제품 노출. 새 상태 캡처를 직접 열어 오버레이 누수와 빈 지도판이 사라졌음을 확인.
+- 후보 교훈: 기하·오버플로 PASS는 시각 PASS가 아니다. absolute/fixed 자식은 containing block을 단언하고, 기본 화면과 핵심 상태의 실제 캡처를 열어 봐야 한다.
+
+### 증거 F — 90/350/12 하드락 E2E의 첫 RED
+
+- 화면과 상태: 공개·관리·가맹 네 URL, Chromium 16폭, WebKit 8폭, axe, JS 없음, 감소 모션, 사용자 여정
+- 관련 파일: `tools/showcase-duo-e2e.mjs`, `tools/showcase-duo-e2e-report.md`
+- 계약: 90/90 시나리오, 350/350 단언, 12/12 캡처의 개수·규격·10KB 이상·SHA-256·상호작용 전후 해시 차이를 잠갔다.
+- 실제 RED: 한남자리 대비·SVG 중첩 인터랙션, 관리자 새 초안이 같은 클릭의 outside-click으로 즉시 닫힘, 철판클럽 비용표의 키보드 초점 누락, 빈 메뉴 복구가 0개에 머무는 결함을 분리했다.
+- 후보 교훈: 대규모 E2E는 시나리오·단언·캡처 수를 모두 hard-lock해야 검사 삭제가 GREEN으로 위장되지 않는다. 화면 존재가 아니라 행동 뒤 기대 상태와 부작용 없음을 단언한다.
+
+### 증거 G — 인간 게이트가 잡은 세 가지 계측 공백
+
+- H01: 철판클럽 가맹 Hero의 채운 버튼과 텍스트 링크가 `align-items:center` 행 안에서도 시각 중심이 달랐다. 공용 버튼의 `margin-top:34px`와 한 줄 링크 hitbox가 원인. 둘을 48px hitbox로 통일한 뒤 1440/390 centerY 차이 0px.
+- H02: 한남자리 상세 04·05·06이 전부 `왼쪽 큰 제목 + 오른쪽 선형 목록/표` 5:7 골격이었다. 카피가 달라도 같은 섹션을 세 번 복제한 인상. 장소=생활권 도식, 비용=원장, 검토=분기 흐름으로 역할별 토폴로지를 분리한다.
+- H03: 관리자 인스펙터를 닫아도 2열 grid track가 남아 큰 빈 회색 면이 생겼다. 닫힘 상태에서 표가 작업대 전체 폭을 회수하고, 재선택 때 분할을 복원하도록 상태 레이아웃 계약을 바꾼다.
+- 기존 규칙과의 조정: 일관성을 버리고 모든 섹션을 다르게 만드는 규칙으로 굽히지 않는다. **의미 역할이 다르면 읽는 동작도 달라야 한다**는 조건부 규칙으로 조화시킨다. `align-items`나 `display:none` 선언을 보는 대신 실제 hitbox 중심과 surface edge를 측정한다.
+- 회귀 게이트: H01 hitbox ≥44px·centerY 차이 ≤2px. H03 닫힘 queue/workbench right edge 차이 ≤2px, 재선택 split 복원. H02는 전후 상태 캡처를 사람이 다시 판정한다.
+
+### 증거 H — 진실성 문구가 제품 가치를 덮은 공개 화면
+
+- 화면과 상태: 사용자가 한남자리 공개 페이지 전체를 보고 `중복되는 내용도 많고 이상하다`며 전면 재설계를 요청한 상태
+- 관련 파일: `public/work/hannam-jari/index.html`, `scripts/landing.js`
+- 수정 전 계수: 공개 HTML 한 파일에 `예시` 49회, `조건` 31회, `실제` 28회, `확인` 27회, `쇼케이스` 15회, `검토` 12회, `데모` 11회. 7개 상위 섹션 안에 상세 6장이 다시 들어가 사실상 13개 장을 읽게 했다.
+- 구조 원인: 공개 고객의 결정에 필요한 조건·후보·현장 확인과, 관리자의 게시 채널·법정 검수·내부 출처 원장이 한 IA에 겹쳤다. 진실성 장치가 주장 가까이에 놓인 것이 아니라 모든 장의 주제가 됐다.
+- 로직 원인: 화면에 없는 면적·엘리베이터 조건을 적합 수에 포함하고, 입력하지 않은 입주 충돌을 강제했으며, 분석 실행 전에도 완료 결과가 보였다. 월세는 보증금만으로 예산 적합을 판정했다. 카피 중복과 계산 SSOT 불일치가 함께 있었다.
+- 수정 계약: 공개 페이지를 `Hero+조건 도크 / AI 브리핑 / 세 집 비교 / 선택 집 검토 서류철 / 사람 확인` 5개로 압축한다. 내부 게시 게이트와 개발자 용어는 관리자에만 둔다. 전역·분석·후보 부모·이미지·폼·대화상자·푸터마다 오해가 실제 생기는 경계 한 번만 남긴다.
+- 기존 규칙과의 조정: `오해 지점 가까이에 진실 라벨`이라는 근본 규칙을 약화하지 않는다. 같은 경계를 자식 값마다 반복하지 않고, 가장 가까운 공통 부모가 의미 범위를 정확히 소유하면 한 번으로 묶는다. 정직함은 경고문 수가 아니라 입력·계산·출처·행동의 일치로 측정한다.
+- 회귀 게이트 후보: 공개/관리자 콘텐츠 소유권 표, 반복 핵심어 계수, 분석 전 빈 상태, 보이는 입력 목록과 계산 조건 목록의 동일성, 월세 복합 비용의 미확정 처리, 실제 게시 상수의 공개 DOM 부재를 단언한다.
+
+### 증거 I — 다른 고위험 업종으로 돌린 스킬 전향 테스트
+
+- 화면과 상태: 새 규칙을 한국형 AI 피부 상담 쇼케이스와 임상의 관리자 브리프에 그대로 재적용
+- 관련 파일: `packages/skill/SKILL.md`, `references/trustworthy-showcases.md`, `references/preflight.md`, `references/audit-gate.md`
+- 첫 RED: 규제 행동을 일반화한 문장과 달리 코드 예제는 모든 행동을 같은 세 불리언으로 열었다. 사용자 자기보고 값을 도메인 사실로 읽을 여지가 있었고, 가장 가까운 공통 부모 라벨과 공개/관리 콘텐츠 소유권이 정본에 없었다.
+- 근본 수정: 행동별 `requiredByAction`, 미등록 행동 기본 거절, 합성 자료의 실제 행동 차단을 코드 예제에 반영했다. 사실을 주장 문장 단위로 정의하고, 모델 출력 내용은 추론·버전과 시각만 시스템 상태로 분리했다. 공통 부모/예외 자식/보조기술 연결과 공개 해석/관리 내부 증거의 소유권을 단계·감사·통과 조건에 함께 넣었다.
+- 조정 원칙: `오해 지점 가까이에 라벨`을 약화하지 않았다. 의미 경계가 명확한 가장 가까운 부모가 같은 범위를 한 번 소유하게 해 정확도를 높였고, 사용자 행동에 영향을 주는 제한은 공개에서 숨기지 않았다.
+- 재검 결과: 독립 전향 테스트 전 항목 PASS, 새 P1·P2 없음. 저장소 공식 skill lint도 경고 0건으로 통과했다.
+
+## 최종 산출물
+
+- [x] 확정 교훈 **21개** — `packages/skill/references/trustworthy-showcases.md` §12
+- [x] 교훈별 코드, 캡처, 검사 증거 — 이 원장의 증거 A~I와 `tools/showcase-duo-e2e-report.md`
+- [x] `packages/skill`의 근본 규칙과 단계별 참고 문서 수정 — SKILL, preflight, audit-gate, layout, images, reference-method
+- [x] 기존 규칙과의 조화 기록 — 사실성·접근성 우선, R2 다른 업종 유지, 예외는 페이지 계약으로 좁게 선언
+- [x] skill 테스트, CLI 패키지 검증, 타입 검사 — 경고 0, core 22/22, CLI 9/9, 배포 점검 통과
+- [x] 실제 설치본 동기화 — Codex·Claude·Cursor 등 사용자 대상 10곳 모두 v0.10.0 doctor 정상
+
+## 최종 게이트 판정
+
+- 사이트 전체 L0~L6: 17계층 전부 PASS, 배포 금지 항목 0개
+- 새 듀오 실제 브라우저 E2E: 90/90 시나리오 · 350/350 단언 · 12/12 캡처
+- 메인 디자인 게이트: 178개 PASS
+- WebKit: 8개 PASS · 시각 회귀: 30개 PASS · 탐색/키보드: 14개 PASS
+- 쇼케이스 갤러리: 21개 카드와 메타 수치 일치, 한남자리·철판클럽 카드/하위 경로 연결 완료