release: v0.10.0
This commit is contained in:
parent
2b7fa32b5b
commit
6930906583
61 changed files with 15165 additions and 82 deletions
447
apps/site/research/showcase-duo-direction-2026-08-29.md
Normal file
447
apps/site/research/showcase-duo-direction-2026-08-29.md
Normal file
|
|
@ -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, 해시, 캐시 무효화
|
||||
- 빌드와 기존 회귀 검사
|
||||
- 캡처와 보고서 생성
|
||||
Loading…
Add table
Add a link
Reference in a new issue