release: v0.10.0

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 텍스트가 이미지의 중요한 정보와 겹치지 않는가
+- 감소 모션과 이미지 실패에서도 핵심 정보와 행동이 남는가
+- 성능 목표와 하드 상한을 모두 통과하는가