8e3cdb0d3b
Some checks are pending
ci / build (push) Waiting to run
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.
145 lines
18 KiB
Markdown
145 lines
18 KiB
Markdown
# 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단계.
|