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

두 쇼케이스 구현 청사진

최종 정본 (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 계열 경계
• 브랜드 검정과 갈금은 선택 행, 현재 탭, 방어선 상태에만 사용
• 표 본문 1314px, 일반 본문 1516px, 지나치게 작은 보조문 금지
• radius는 작은 제어 68px, 패널 1012px 이내

철판클럽

• 바탕 #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 성공·실패
• 키보드 순서, 접근성 자동 검사, 감소 모션, 자바스크립트 없음
• 깨진 이미지, 콘솔 오류, 네트워크 실패, 누적 배치 이동과 최초 주요 표시 시간

게이트의 자동 승인은 무조건 통과가 아니다. 검사 결과가 녹색일 때만 승인 기록을 남기고, 실패 시 관련 단계로 되돌아가 수정한다.