ci / build (push) Waiting to run

Details

feat(site): rework 19 marketing showcases for composition diversity

Measured convergence before: split hero 13/19, top-bar nav 19/19,
one-line notice footer 14/19, body Pretendard 17/21, 10 similarity
pairs above 0.78. Each showcase got a pre-assigned hero family, nav
form, footer form, type pair, background, accent hue, radius, motion
grammar and material from outputs/rework-2026-10-06/plan.md; direction
cards and the chosen reason are recorded in every design.md.

After: 0 similarity warnings, 19 distinct display faces, 7 hero
families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases
with SVG filter materials. Example contact values replace bracket
placeholders under the existing fictional-brand notices. Thumbnails,
OG images, card copy and three e2e assertions updated; dead CSS in
dure-enrollment and hannam-jari removed; similarity.mjs learns the new
font families.

2026-10-06 16:55:50 +09:00

18 KiB

Raw Blame History

design.md — 철판클럽 (griddle-club)

진행 상태

0단계 현행 감사 2026-10-06 완료 — 분할 히어로·Pretendard·웜 페이퍼·고지 푸터·eyebrow 16개가 수렴 지문(05 계측)과 일치. 남길 자산: 상호·메뉴 6종과 가격·매장 3곳 상태·조합기 폼과 가격식·가맹 3단계 폼·생성 이미지 6장·진실 고지 범위.
1단계 레퍼런스 완료 — R1 파이브가이즈 코리아(실측), R2 Gumroad(실측), R3 Gumroad 태그 캐러셀(실측). 버거킹 코리아는 내비만 읽혀 미검증.
2단계 방향 완료(위임) — 카드 3장 중 A "쟁반 위의 콜라주" 선택. 이유는 "방향" 절.
3단계 토큰 완료 — styles/tokens.css 한 곳. 색·radius 리터럴은 site.css·franchise.css에 0건.
4단계 구현 완료 — 레이아웃 → (재질 없음) → 모션(스태거 등장·마퀴). 2차 페이지 franchise/는 공통 셸(상단 바·하단 행동 바·다열 푸터)만 맞췄다.
5단계 감사 완료 — html-validate 0건, stylelint 0건, no-hanja 통과, design-gate 28/28, showcase-audit 12/12(320~2560), 철판클럽 E2E 42 시나리오 166 단언 통과, audit.mjs 2560px 3단언 통과(스크래치 복제). 루브릭 18/20.
6단계 이 문서.

브리프

가상 스매시 버거 브랜드 철판클럽의 소비자 홈과 가맹 안내 2차 페이지. 방문자는 메뉴와 가격을 보고 재료를 조합해 가격·알레르기 정보를 확인한 뒤 가상 매장의 영업 상태를 본다. 실제 주문·결제·가맹 상담은 없다.

목표 행동: 메뉴 보기 → 내 버거 조합하기(#builder) → 매장 상태 확인. 2차 페이지는 가맹 조건 정리 폼.
기본 언어 한국어, 합니다체. 한자 금지.
확정 슬롯(기존 파일에서): 메뉴 6종·가격, 세트 추가 4,100원, 매장 3곳(성수 영업 중·연남 영업 종료·문래 휴무), 알레르기 규칙, 가맹 비용 11항목 전부 미정.
배정(plan.md): 비대칭 콜라주 히어로 · 두 줄 문장 표제 · 상단 바 + 모바일 하단 행동 바 · 다열 색인 푸터 · Jua/Gothic A1 · 유채 크림 #fbe9c8 · 코발트 유지 · pill·16px · 스태거 등장 + 마퀴 · 재질 없음 · 누끼 겹침(원본이 사진이면 CSS 크롭).
화면 목록: index.html(홈), franchise/index.html(가맹).

미확정

사진은 전부 생성 이미지다(히어로 조각·메뉴·주방). 화면에 "생성 이미지, 실제 매장이 아닙니다" 라벨을 같은 시각 그룹 안에 둔다.
누끼 원본이 없다. 콜라주 조각은 원형·둥근 사각 border-radius 크롭 + 크림 테두리로 "오려 낸" 모양을 만들었다. 원 안에 주방 배경이 남는다(아래 "하지 않기로 한 것").
코발트 hue: plan.md는 299°로 적었지만 기존 값 #2147e7은 sRGB HSL 228°다. "유지" 배정이므로 값을 바꾸지 않았다.
방향 선택은 위임(사용자가 재작업과 방향 선택을 맡김).

레퍼런스

슬롯	URL	관찰	가져온 것
R1 구조	https://www.fiveguys.co.kr/ (텍스트 페처, 2026-10-06)	고정 헤더 + 오른쪽 "Order Now" 버튼, 히어로 바로 뒤 7항목 음식 격자, 매장 찾기 지도 섹션, 다열 푸터(고객센터·법적 고지·SNS)	상단 바 오른쪽 행동 버튼, 히어로 → 메뉴 격자 순서, 다열 색인 푸터
R2 톤	https://gumroad.com/ (텍스트 페처)	히어로에 크기가 다른 동전 일러스트 5개가 흩어진 비대칭 콜라주, 알약 버튼, 둥근 디스플레이 서체	조각 5개(사진 3 + 가격 알약 + 스티커)를 크기 차 극단으로 겹치는 구도, 알약 radius, Jua
R3 디테일	https://gumroad.com/ 제품 발견 섹션의 반복 카테고리 태그 캐러셀	짧은 항목이 가로로 흐르는 띠	히어로 아래 메뉴·가격 마퀴(정지 버튼·가로 스크롤 폴백)
미검증	https://www.burgerking.co.kr/	페처가 내비만 읽음(MENU·STORY·NEWS·STORE·CUSTOMER). 히어로·푸터 미확인	—

https://www.shakeshack.com/ 은 403으로 열지 못했다(두 번 시도하지 않고 다른 출처로 감).

방향

지문: 비대칭 콜라주(사진 조각 3 + 가격 알약 + 스티커, 원형·둥근 사각 크롭, 크기 차 4배) · Jua / Gothic A1 · 유채 크림 #fbe9c8(섹션 교대는 #fff7e8·#f4d9a3, 코발트 전면 띠 1, 먹 띠 1) · 코발트 #2147e7(228°) · pill 999px·16px · 히어로 → 마퀴 → 메뉴 격자 → 조합기(코발트 띠) → 공정 → 매장 → 가맹 띠 → 푸터 · 상단 바(브랜드+항목+행동, ≥821 sticky) + 모바일 하단 고정 행동 바 4항목 · 다열 색인 푸터 4열 · 원형·둥근 사각 크롭 + 크림 테두리, 캡션은 알약으로 사진 위 · 스태거 등장(조각 6개, 90ms 간격, 이동·확대만) + 마퀴(32s, 정지 버튼, 감소 모션은 정지 목록).

한 문장 컨셉: 처음 온 손님이 쟁반 위 버거 사진 조각과 가격 알약을 보고, 메뉴 격자에서 조합하기를 눌러 내 버거의 가격과 알레르기를 확인한다.

프리셋: quiet-commerce 지배(메뉴·가격·조합기가 설득) + anti-grid 보조(히어로 구도만). 축 소유권: 구도·모션 = anti-grid, 타입·색·간격·컴포넌트 = quiet-commerce.

제시한 카드(위임)

	A. 쟁반 위의 콜라주 (선택)	B. 메뉴판이 먼저	C. 스티커 창구
컨셉	손님이 버거 사진 조각과 가격을 보고 조합기로 간다	손님이 메뉴 카드 6장이 겹친 콜라주에서 바로 하나를 눌러 조합기로 간다	손님이 매장 영업 상태 스티커를 먼저 보고 메뉴로 간다
첫 화면	왼쪽 두 줄 표제·리드·버튼 둘 / 오른쪽 사진 조각 3 + 가격 알약 + 스티커 겹침	표제는 작게 위, 메뉴 카드(사진+가격) 6장이 서로 다른 크기로 겹침	가운데 표제, 둘레에 두꺼운 크림 테두리의 사진 스티커와 영업 상태 스티커가 기울어져 겹침
흐름	히어로 → 마퀴 → 메뉴 → 조합기 → 공정 → 매장 → 가맹	히어로(메뉴) → 조합기 → 매장 → 공정 → 가맹	히어로 → 매장 상태 → 메뉴 → 조합기 → 공정 → 가맹
타입	Jua / Gothic A1, 표제가 본문의 5배	Jua / Gothic A1, 표제가 본문의 2배(카드가 주인)	Jua / Gothic A1, 표제가 본문의 6배
색	크림 바탕 / 갈색 먹 / 코발트는 버튼·알약·조합기 띠	크림 / 먹 / 코발트는 카드 번호와 가격만	크림 / 먹 / 코발트 + 치즈색 스티커를 많이
모션	조각 스태거 등장 + 메뉴 마퀴	카드 스태거 등장 + 마퀴	스티커 스태거 등장 + 마퀴
히어로 첫 문장	주문 뒤 눌러 굽고, 바로 건넵니다.	오늘 메뉴 여섯 가지, 단품 6,900원부터.	성수점 영업 중, 연남점은 오늘 종료.
포기하는 것	메뉴 전체를 첫 화면에서 비교하기	두 줄 표제의 무게(배정 "두 줄 문장"과 충돌)	매장이 가상이라 상태가 늘 같다 — 첫 화면이 거짓 생동감이 된다

A를 고른 이유: 첫째 목표 행동이 "메뉴 보기 → 조합하기"이고 R1(파이브가이즈)이 히어로 바로 뒤에 음식 격자를 둔다. 가진 사진 네 장이 전부 버거·조리 장면이라 조각으로 쓸 재료가 있고, 배정된 "두 줄 문장 표제"를 B는 지키지 못하며 C는 가상 매장 상태를 첫 화면의 주인으로 세워 진실 계약과 부딪친다.

구도·타입·색 결정표

축	관찰 → 결정
구도	`hero-handoff.webp`는 버거와 손이 오른쪽 2/3에 있다 → 원형 크롭의 `object-position: 68% 56%`로 버거를 원 중심에 두고 1440에서 조각 폭 552px(단 폭의 104%), 작은 원 138px(26%)로 4배 차를 만든다. 390에서는 조각을 뷰포트 안(84%·50%·30%)에 두고 글 아래로 내린다(감사 도구가 넘친 조각을 가로 오버플로로 셈, 실측)
타입	"주문 뒤 눌러 굽고," 7.8em이 390(354px)에서 두 줄 계약을 지키려면 h1 ≤45px → ≤620px에서 `clamp(34px, 10.5vw, 46px)`. 1440에서는 0.55fr 단(649px)에 `clamp(44px, 5vw, 84px)`=72px → 561px. 섹션 h2 "메뉴는 여섯 가지, 단품은 6,900원부터입니다."는 320·390·1440 전부 마지막 줄이 한 어절("6,900원부터입니다.")로 남아 "단품 6,900원부터, 메뉴는 여섯 가지."로 바꿨다(실측 스크립트)
색	코발트 `#2147e7`는 사진 속 쟁반·클립 색과 같다 → 조합기 띠 전체를 코발트로 해 "주문대"로 읽히게 한다. 비활성 세트 상자에 `opacity: .55`를 쓰자 "세트 구성" 라벨이 3.08:1로 떨어져(게이트 실측) 투명도 대신 속 빈 테두리·`--on-blue-soft`(5.27:1)로 바꿨다

반사실·수렴 점검

A. 고유 요소(1440·390 첫 화면): ① 코발트 쟁반 위 더블 버거 사진(hero-handoff.webp, 브랜드 색과 같은 쟁반) ② "철판 더블 8,900원" 가격 알약(브리프 수치) ③ "주문 뒤 조리" 스티커(스매시 버거의 조리 순서) ④ 메뉴·가격 마퀴(메뉴 6종 수치). 같은 업종 치환: 사진·가격이 바뀌면 알약·마퀴 내용이 바뀐다 — 구도는 남지만 헤드라인·시각물 둘이 깨지므로 통과. 다른 업종 치환(세무사무소): 가격 알약·메뉴 마퀴·조합기 띠가 성립하지 않는다 — 통과. 고유 요소 4개 ≥ 2.

B-1 히어로 5축(직전 산출물 = 이 쇼케이스의 이전 판): 구도 다름(분할→콜라주) · 표제 서체 다름(Pretendard 900→Jua) · eyebrow 다름(있음→없음) · CTA 다름(단색 1 + 밑줄 링크 1 → 알약 단색 1 + 알약 외곽선 1) · 캡션 다름(사진 위 띠→알약). 같음 0. B-2 페이지 6축: 섹션 흐름 다름(마퀴 추가, 가맹 띠가 사진 없는 띠) · 글 묶음 다름(라벨 제거) · 내비 다름(상단 바 + 하단 행동 바) · 푸터 같음(다열, 배정 "유지") · 이미지 다름(원형 크롭·알약 캡션) · 모션 다름(없음→스태거+마퀴). 같음 1. 토큰 4축(저장소 분배표 기준): Jua는 19종 중 유일, Gothic A1 본문은 4종(≤5), 크림 배경 유채 5종 중 하나, radius pill·16은 유일.

토큰과 예산

값은 styles/tokens.css. 역할만 적는다.

바탕 3단: --bg 크림(히어로·메뉴·푸터) / --surface 밝은 크림(마퀴·매장·카드) / --bg-deep 진한 크림(공정 띠·포스터 카드). 강한 띠는 --blue(조합기) 하나와 --ink(가맹 띠) 하나.
먹 3단 + 먹 위 3단, 코발트 위 2단. 대비 실측: 코발트/크림 5.64, 흰/코발트 6.73, --on-blue-soft/코발트 5.27, 먹/크림 14.32, --ink-soft 7.05, --ink-faint 5.73, --danger 5.20, --success 5.71, --pause 5.33, 크림/먹 14.32, --on-ink-soft 11.60, --on-ink-faint 8.74, 먹/치즈 10.92.
서체: Jua(표제, 400 한 굵기) / Gothic A1 500·700·800(본문). Google Fonts display=swap, 한글은 unicode-range 슬라이스 서브셋. Pretendard·IBM Plex Mono 링크를 제거해 폰트 요청을 두 패밀리로 줄였다. 숫자는 Gothic A1 tabular-nums.
radius: --radius 16px, --radius-pill 999px. 원형 조각은 50%.
모션: --dur 520ms, --stagger 90ms, --shift 28px, --marquee-dur 32s. 감소 모션에서 전부 0.
예산(tokens §5 기본선): 히어로까지 JS 150KB gzip — 실측 site.js 11KB(원본), 외부 JS 0. LCP 2.5s — LCP 요소는 hero-handoff.webp 99KB(모바일 86KB) fetchpriority="high", lazy 아님. INP — 입력 핸들러는 change·click뿐, 스크롤 로직 없음. transform·opacity 밖 애니메이션 없음(등장은 transform만, 마퀴는 transform).

이펙트와 폴백

스태거 등장: .hero-media .piece에 piece-in(translateY·scale·rotate) 키프레임, --i로 지연. 투명도는 쓰지 않는다 — 페이드 중 axe가 알약 글자를 2.82:1로 쟀다(E2E 실측). 감소 모션: animation: none, 즉시 표시. JS 없이도 CSS만으로 돈다.
마퀴: .marquee-track translateX(-50%) 32s 루프, 목록을 두 번 넣고 둘째는 aria-hidden. 정지 수단: #marquee-toggle(aria-pressed), hover·focus-within에서 일시정지, 감소 모션에서는 애니메이션 제거·둘째 목록 숨김·목록을 줄바꿈해 정지 목록으로. 트랙은 overflow-x: auto 스크롤 영역(role="region" tabindex="0") 안에 있어 기다리지 않고 넘길 수 있다.
재질 없음(배정). 그림자는 조각·카드에만.
이미지 깨짐: 기존 .image-shell.is-broken 폴백 유지.

하지 않기로 한 것

누끼 생성·새 이미지 생성(브리프). 원형 크롭 안에 주방 배경이 남는 것을 감수한다.
스크롤 리빌(IntersectionObserver)·패럴랙스 — 배정표에 없다.
상단 바 backdrop-filter — 바탕이 단색 크림이라 불투명 면으로 충분하다. 모바일에서는 sticky도 풀었다(하단 바가 이동 수단).
슬로건 "눌러 굽고, 바로 건넨다."의 h1 사용 — 표제는 사실 문장으로, 은유 0개.
eyebrow(.section-kicker) 16개 전부 제거. 카드 안의 상태 라벨(대표 메뉴·곁들임·음료)은 섹션 라벨이 아니라 항목 분류라 남겼다.
가운뎃점 메타 문자열 제거(고지 띠·캡션·옵션·푸터·JS 문자열·㎡ 환산).
조합기 요약의 사진(signature-double.webp 반복) 제거 — 영수증 카드로.

검증

검증 줄: html-validate 2파일 0건 · stylelint 3파일 0건 · no-hanja 7파일 통과 · design-gate 28 충족 / 0 미검증 / 0 실패(꺼짐 3: static·visual·webkit) · showcase-audit 12/12 (320·390·768·1440·1920·2560 × 홈·가맹) · 철판클럽 E2E 42 시나리오 166 단언 통과(스크래치 복제본, WebKit 포함) · audit.mjs 2560px 3단언 통과(스크래치 복제) · 미검증 0.

캡처: outputs/가 아닌 세션 스크래치 griddle-shots/(home·franchise × 1440·390 첫 화면·전체·회색조·흐림·감소 모션, 2560 첫 화면, 포커스).

시각 루브릭(홈, 약한 축부터):

축	점수	근거
R7 카피	1	합니다체 통일, 은유 0, §13-c 지문 grep 0. 그러나 "주문 뒤 눌러 굽고, 바로 건넵니다."는 다른 스매시 버거 가게로 바꿔도 성립한다(공정 주장). 브리프만의 고유 재료(동네·가격)는 리드와 알약에 있고 h1에는 없다
R9 마감	1	200% 확대: 마퀴 항목이 정지 버튼 뒤로 지나가며 글자가 잘려 보인다(1440 회색조 캡처 y≈860). 조각 테두리·알약 radius·숫자 정렬은 어긋남 없음
R1 첫인상	2	3초 문장 "주문 뒤 눌러 굽는 스매시 버거 가게, 메뉴 보고 조합한다" — 1440·390 모두 브랜드·표제·사진·행동이 첫 화면에 있다. 반례: 상호 '철판클럽'만으로는 버거집임을 알 수 없고 사진이 말한다
R2 위계	2	흐림 캡처(1440): 표제 덩어리 → 버거 원 → 코발트 버튼 순. 크기·색·굵기 세 축 차이. 반례: 표제와 버거 원이 거의 같은 무게로 1위를 다툰다
R3 묶음	2	시작선 x=130(표제·리드·버튼·섹션 제목), x=156(카드 안쪽), 조각은 자유 배치(의도). 묶음 사이 간격(섹션 72~128px) > 안 간격(≤24px). 반례: 가격 알약은 정렬선 밖
R4 타이포	2	합성 이탤릭·볼드 없음(Jua 400, Gothic A1 실제 굵기), 자간 -0.01em, 320·390·1440에서 h1·h2 마지막 줄 한 어절 0건(스크립트 실측), 본문 measure 30em. 반례: Jua가 한 굵기라 카드 h3와 섹션 h2의 위계가 크기에만 기댄다
R5 여백	2	마퀴 띠(얇음) ↔ 조합기 띠(1100px)로 간격 변주가 정보 전환과 일치. 극단: 조각 552px vs 138px, 코발트 전면 띠. 반례: 1440 히어로 왼쪽 위 빈 면(y 110~280)이 대기인지 남은 것인지 애매하다
R6 이미지	2	슬롯 역할: 히어로 3조각(건네기·누르기·싱글), 메뉴 1(더블), 공정 1(주방). 390 첫 화면에 사진 있음. 같은 사진 반복 없음(모바일 원형은 `<picture>`로 세로 원본 교체). 반례: 누끼가 아니라 원형 크롭이라 원 안에 스테인리스 배경이 남는다
R8 구분성	2	고유 요소 4개(위 반사실 점검), B-1 같음 0, B-2 같음 1(푸터, 배정 유지). 반례: 다열 푸터는 cask·orbit·rfs·twentyoz와 같은 형태
R10 모바일	2	390 첫 화면: 브랜드·표제·행동 2·사진 조각, 하단 고정 바 4항목. 조각은 뷰포트 안으로 재배치. 반례: 리드가 4줄이라 사진이 첫 화면 하단 1/3에서 시작한다

합계 18/20, 0점 없음, R1·R8 2점. 통과.

가맹 페이지: 같은 셸·토큰. 1440·390 첫 화면 캡처에서 표제·행동 2·사진·하단 바 확인. E2E 8시나리오(폼 단계·오류·환산·성공·실패) 통과.

하드 게이트: 키보드 — 탭 순서 스킵 링크 → 브랜드 → 내비 4 → 행동 → 히어로 버튼 2 → 마퀴 정지 → 마퀴 영역 → 필터…(실측), 포커스 링 3px 코발트(코발트 띠 위는 크림). 대비 — 위 수치, axe 0건. 감소 모션 — E2E "반복 애니메이션 제거 ≤0.01s" 통과, 조각 즉시 표시(캡처). 가로 스크롤 — 320~2560 0건. 터치 타깃 — 게이트 통과(컨트롤 ≥44, 링크 ≥24).

피드백 기록 · 보존 목록

보존: 상호·메뉴·가격·매장 상태·알레르기 규칙·조합기 id·data 속성·가맹 폼 id·E2E 문구("가상 매장 안내 보기", "주문과 결제는 진행되지 않습니다", "약 30평").
사용자 피드백: 없음(위임).

변경 기록

2026-09-12 화면 보정 — 파란 상품 카드를 사진 아래 shelf로, 메뉴 이미지 중앙 cover 크롭 통일, 가맹 절차·비용을 원장으로 정렬. --blue·--paper-*·--ink·--line·--font-mono만 사용.
2026-10-02 레드팀 06 — h1 자간 -0.085em → -0.015em(쉼표·받침 충돌), "예시" 13회 → 1회, 공정 표제를 정보 문장으로.
2026-10-02 카피 기준 — 슬로건 한 곳만 남기고 표제를 합니다체 정보 문장으로. 가맹 h1 2줄 계약.
2026-10-06 재작업(이 문서) — 분할 히어로 → 비대칭 콜라주, Pretendard → Jua/Gothic A1, 웜 페이퍼 → 유채 크림, 4·10·18px → pill·16px, 상단 바에 모바일 하단 행동 바 추가, 고지 푸터 → 4열 색인, eyebrow 16개 제거, 가운뎃점 제거, 스태거 등장 + 마퀴 추가, 조합기 사진 제거, 가맹 페이지 셸·표제 재작성. 옛 결정 중 유지한 것: 메뉴 격자 열 배분(6/3/3 + 4/4/4), 조합기 가격식, 매장 지도 그림, 가맹 폼 3단계.

18 KiB Raw Blame History Unescape Escape