yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions
designpaca/apps/site/public/work/muwol-coffee/design.md
Yun Chan 8e3cdb0d3b
Some checks are pending
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 — 무월 (muwol-coffee)

진행 상태

  • 0단계 완료(2026-10-06) — 전체(리디자인) 경로. 현행 감사 끝, 인터뷰 슬롯은 기존 파일에서 확인(사용자 위임).
  • 1단계 완료 — R1·R2·R3 실측(Playwright DOM 측정 + 텍스트 페처).
  • 2단계 완료 — 카드 3장 제시, A 선택(위임).
  • 3단계 완료 — styles/tokens.css 한 곳.
  • 4단계 완료 — 레이아웃 → (재질 없음) → 모션.
  • 5단계 완료 — 아래 "검증".
  • 6단계 완료 — 이 문서.

브리프

  • 무엇을: 가상 싱글오리진 로스터리 무월의 한 장짜리 쇼케이스 재디자인. 로트 3개의 산미·바디 차트, 생두 매입 기록, 레시피, 격주 구독, 매장 연락처.
  • 누구에게: 원두를 "과일 향" 같은 말 대신 수치로 고르고 싶은 손님. 바라는 행동은 이번 로스팅 원두를 읽고 탭에서 차트·가격·구독을 확인하는 것.
  • 제약: 정적 HTML/CSS/JS(의존성 없음), 기존 사실·수치·이미지 2장·앵커 id 유지, 기본 언어 ko-KR(기존 로컬라이제이션), Google Fonts OFL 서체만, 한자 금지, 가운뎃점 메타 문자열 금지, 토큰은 tokens.css 한 곳, plan.md 배정값(타이포 단독 히어로 / 탭 / 연락처 카드 푸터 / Gothic A1 900 + Gowun Dodum / #1f1713 / 330° / 2px / 스태거 + 마퀴 / 재질 없음 / 원형 크롭).
  • 화면: index.html 하나. 2차 페이지 없음.

미확정

  • 로스팅 날짜(우라가 10월 3일, 엘 파라이소 10월 3일, 엘 소코로 9월 30일, 다음 로스팅 10월 10일) — 배정표가 요구한 새 사실이라 예시 픽스처로 넣었다. 히어로 날짜 줄, 마퀴, 표 "로스팅" 열, 구독 상자 "발송". 푸터 고지에 "로스팅 날짜는 예시"를 넣었다.
  • 매장 주소 · 영업시간 · 전화 · 이메일 — 예시 값(사용자 결정 2026-10-06, 푸터 고지에 명시). 푸터 h2도 영업시간 문장으로 바꿨다. 값이 오면 푸터 dl.contact-card 네 칸과 h2 한 곳만 바꾼다.
  • 방향 선택(카드 A)은 위임으로 정했다 — 사용자 확인 전까지 미확정.

레퍼런스

슬롯 출처 가져온 원리
R1 구조 https://coffeecollective.dk/ (2026-10-06 실측: h1 "Full-bodied, clean, and sweet" 54px, 원두 하나가 첫 화면, 헤더 static) 첫 화면의 주인은 "지금 파는 원두 하나". 무월은 사진 대신 원두 이름·로스팅 날짜 글자로 같은 일을 한다
R1 푸터 https://www.sey.coffee/ ("VISIT US 18 Grattan St… Weekdays 7-5 • Weekends 8-5 / CONTACT US hello@sey.coffee"), https://momos.co.kr/ (고객센터 전화 / 운영시간 / 점심시간 / 주소) 로스터리 푸터는 주소 → 시간 → 연락처 카드. 항목 순서를 가져왔다
R2 톤 https://37signals.com/ (이미지 0장, 단색 rgb(0,170,194) 바탕, Lab Grotesque 700 글자 목록만) 타이포 단독 첫 화면은 한 가지 무거운 웨이트와 단색 바탕으로 선다 → Gothic A1 900 + #1f1713
R3 디테일 https://www.heartroasters.com/ (role="tablist" "New / Best Sellers" 24px·41px 높이, aria-selected·aria-controls), https://coffeelibre.kr/ ("생두 / 원두" 보기 전환) 커피 사이트에서 탭은 같은 상품의 보기 전환으로 쓰인다. APG대로 roving tabindex + 화살표 키
미검증 Tim Wendelboe·Onyx·Koppi·April·Tandem(히어로가 전부 사진·격자), dak.coffee(DNS 실패) 커피 업종의 타이포 단독 히어로 사례는 못 찾았다. R2를 다른 업종에서 가져왔다

방향

지문: 타이포 단독 히어로(h1 한 줄 큰 낱말 "에티오피아 구지 우라가" 100px, 라벨 없음, 아래 로스팅 날짜 68px 자두, 리드 대신 사실 4개 dl, 행동 없음) · Gothic A1 900 / Gowun Dodum 400 · 바탕 #1f1713(어두운 갈색) · 강조 #d390ca(CIELAB LCh 330°) · radius 2px · 흐름 헤더(워드마크 + 한 문장) → 히어로 → 로스팅 날짜 마퀴 → 탭(원두: 차트 + 생두 기록 표 / 구독: 가격·구성 + 원형 사진 / 매장: 원형 사진 + 레시피) → 연락처·영업시간 카드 푸터 · 내비 탭·세그먼트 3개(고정 아님, 흐림 없음) · 푸터 연락처·영업시간 카드(placeholder) + 고지 한 줄 · 이미지 원형 크롭 2장(지름 11~19rem, 캡션 아래) · 모션 로드 1회 스태거 등장(h1·날짜·사실·마퀴, 90ms 간격, 620ms) + 마퀴 26s 루프(정지 버튼, 감소 모션은 정지 목록).

  • 한 문장 컨셉: 손님이 이번 로스팅 원두의 이름과 볶은 날을 첫 화면에서 읽고, 탭에서 산미·바디와 가격을 확인한다.
  • 프리셋: quiet-commerce 지배(사양이 설득한다) — 서체·바탕·강조는 plan.md 배정값. 리믹스 없음.
  • 표현 리스크: 첫 화면에 사진이 없다. 과업 적합 이유 — 손님이 찾는 것은 원두 이름·날짜·가격이고 R1 Coffee Collective도 원두 하나를 첫 화면에 둔다. 검증 — 390·1440 첫 화면 캡처에서 3초 문장이 성립하는지(R1), 회색조에서 h1이 첫 시선인지(R2).
  • 카드(배정 제약 안에서 구조가 다른 3장): A. 이름이 벽(h1 원두 이름 + 날짜 + 사실 4개) · B. 원장 두 줄(로트 3행이 첫 화면) · C. 날짜가 먼저(날짜 숫자가 가장 크고 이름이 둘째). A 선택(위임) — 브리프 "산미와 바디로 고르는 원두"는 원두 하나를 집어 기준값을 보이는 구조이고, R1이 같은 구조다. B는 h1이 행 하나로 줄어 "한 줄 큰 낱말"을 못 지키고, C는 손님이 검색하는 말(원두 이름)을 둘째로 민다. 기각: B(표제 꼴 위반), C(이름보다 날짜).
  • 반사실 점검: 고유 요소 — h1 로트 이름, "10월 3일 로스팅", 사실 행(워시드 2,150m 88.75 8,500원), 마퀴의 로트 3개 날짜. 같은 업종 치환 → 이름·날짜·수치 전부 바뀜(통과). 다른 업종(세무사무소) → 날짜 마퀴·원두/구독/매장 탭·커핑 점수 무용(통과).
  • 수렴 점검 B-1(히어로, vs font-foundry — 같은 세션의 다른 타이포 단독): 구도 같음(배정), 표제 서체 다름(Gothic A1 900 vs Noto Serif KR 900), eyebrow 둘 다 없음, CTA 둘 다 없음, 캡션 다름. "없음"을 같음으로 세면 3축 → 배정표(plan.md)가 타이포 단독 2종·탭 3종을 의도한 분포다. 그 밖의 쌍(materia·hyang·cask 등)은 구도부터 다르다. B-2(페이지 6축) vs font-foundry: 내비(탭)만 같음, 섹션 흐름·글 묶음·푸터·이미지·모션 다름 → 통과. 토큰 4축: similarity.mjs 최대 유사도 0.376(cask-archive, 어두운 바탕·2px) — 임계 0.78 아래.
  • 보존 자산: 상호, 로트·생산자·가격·점수·레시피·구독 조건, 차트 좌표, 이미지 2장, 앵커 id scale·ledger·recipe·plan(탭 패널 안으로 옮기고 해시 진입 시 해당 탭을 연다), 진실 고지 2곳.

토큰과 예산

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

  • 타입: --step-4(h1 52100px)는 1440에서 11자 한 줄, 390에서 두 줄. --step-3(날짜) · --step-2(패널 표제 2432px) · --step-0 17px(Gowun Dodum이 같은 px에서 작게 보여 1px 올림) · --step--1 13px 하한. 행간 h1 1.1(2배 확대 캡처로 받침·초성 충돌 없음 확인), 본문 1.7, measure 36em.
  • 서체: Gothic A1 900 하나(표제·날짜·탭·숫자·워드마크), Gowun Dodum 400 하나(본문·라벨). font-synthesis: none으로 합성 볼드·사체 차단. 모노 없음 — 숫자는 Gothic A1 + tabular-nums.
  • 색: 바탕 #1f1713, 올린 면 #2a211c, 내린 면(푸터) #180f0c, 글자 #f3ebe4, muted #b3a399, faint #a89a90, 강조 #d390ca(날짜·탭 표시·마퀴 점·링크·범례), 강조 hover #e4a0db. 강조 hue는 similarity.mjs 기준(CIELAB LCh) 330°.
  • radius 2px, 컨테이너 1120px, 원형 사진 지름 --photo 11~19rem.
  • 모션 토큰: --dur-rise 620ms · --stagger 90ms · --marquee-dur 26s. 감소 모션에서 전부 0.
  • 예산(tokens §5 기본선)과 실측(2026-10-06, Chrome, 로컬 HTTP): 히어로까지 JS 인라인 약 2KB(예산 150KB) · LCP 384~400ms, 요소 h1(예산 2.5s) · CLS 0.000(320)·0.002(390)·0.073(1440, 폰트 교체 — 0.1 안) · 첫 화면 전송 약 480KB(예산 1MB) · 폰트 전송 333KB, 파일 26개(한글 슬라이스), 2패밀리 — 기본 100KB·데모 200KB 초과. 초과 이유: Gothic A1 900 + Gowun Dodum 400 두 패밀리의 한글 슬라이스. 줄이려면 표제 서체를 본문과 합치거나 Gowun Dodum을 시스템 고딕으로 바꿔야 한다 — 배정 서체라 유지하고 결정을 요청한다.

이펙트와 폴백

  • 스태거 등장: .rise 요소 4개(h1·날짜·사실·마퀴)가 로드 시 animation으로 0.6em 아래에서 올라온다. JS 없음. prefers-reduced-motion이면 애니메이션 없음(즉시 표시).
  • 마퀴: 목록 사본 4개를 translateX(-25%)로 26초 루프. 정지 버튼(aria-pressed, 44px)이 흐름 앞에 있고, 흐름 영역은 overflow-x: auto 스크롤 상자(role="region", tabindex 0)라 손·키보드로 넘길 수 있다. 포커스가 안에 있으면 멈춘다. 감소 모션이면 줄바꿈되는 정지 목록이고 버튼·사본은 숨긴다.
  • 탭: JS가 있으면 비활성 패널 hidden, 화살표·Home·End 이동, 해시(#plan·#recipe 같은 옛 id 포함)로 진입하면 해당 탭을 연다. JS가 없으면 세 패널이 순서대로 다 보이고 탭은 앵커 링크다(실측: JS 끄고 세 패널 display block).
  • 재질·3D·필터·backdrop-filter 없음. 이펙트 전부 끄기(M-A) 캡처에서 레이아웃이 그대로다.

하지 않기로 한 것

  • 상단 바 내비·sticky 헤더·backdrop-filter — 화면 서너 개 길이에 바탕이 단색이라 고정할 이유가 없다(layout §2-c).
  • IntersectionObserver 스크롤 리빌 — 배정에 없다. 등장은 첫 화면 한 번뿐.
  • 히어로 사진·리드 문단·버튼 — 타이포 단독 히어로. 사진은 탭 패널 두 곳의 원형 크롭으로 옮겼다.
  • 구독 "신청" 버튼 — 가상 로스터리라 실패 폐쇄형 폼 대신 고지 한 줄로 둔다(기존과 같음). 옛 자기 링크 버튼("구독 구성 다시 보기")은 지웠다.
  • JetBrains Mono·MaruBuri·Pretendard·로컬 woff2·LICENSE.html·fonts.css — 하우스 룩 탈출. 죽은 자산 900KB 삭제.
  • main.css의 @media screen { :root {…} } 토큰 재정의 — 삭제. 토큰은 tokens.css 한 곳.
  • 가운뎃점 메타 문자열 8곳 — 쉼표 문장이나 dl로 바꿨다.
  • 매장 탭에 주소·영업시간 중복 — 푸터 카드 한 곳이 소유하고 매장 탭은 링크로 가리킨다.

검증

하드 게이트: 충족 7 / 미검증 1 / 차단 0 · 방향: 열린 Direction 0건 · 시각 루브릭: 합계 18/20, 최약 축 R8(1)·R9(1) 프로젝트 계약: 충족 9 / 미검증 0 / 위반 0 (토큰 한 곳·theme-color #1f1713 일치·브랜드 표면·ko-KR·실제 수치 유지·viewport 320~2560·예산은 폰트 1건 초과 명시)

자동 검사(2026-10-06, apps/site):

  • npx html-validate public/work/muwol-coffee/index.html — 0 errors
  • npx stylelint "public/work/muwol-coffee/styles/*.css" — 0 errors
  • node tools/no-hanja.mjs --root public/work/muwol-coffee — PASS 3파일
  • SHOWCASE_AUDIT_REPORT=<scratch>/audit.json node tools/showcase-audit.mjs muwol-coffee — PASS 6 / FAIL 0 (320·390·768·1440·1920·2560). 첫 실행 FAIL(마퀴 요소 오버플로 6폭) → 흐름을 overflow-x: auto 영역으로 옮겨 통과
  • node tools/design-gate.mjs --config <scratch>/gate.json --out-dir <scratch>/gate (views beans·plan·shop, widths 320~1920) — 충족 29 / 미검증 0 / 실패 0 (꺼짐 3: static·visual·webkit). 첫 실행 FAIL 1(beans 왼쪽 인셋 5px — 마퀴 글자가 왼쪽 가장자리를 지나는 순간) → 정지 버튼을 흐름 앞으로 옮겨 통과. axe AA 위반 0, 대비 검사 요소 85·57·57개 전부 통과, 터치 타깃 통과
  • node tools/similarity.mjs --json (리포트 파일은 실행 전 사본으로 되돌림) — 215 PASS, 경고 0. muwol 지문: Gowun Dodum / Gothic A1 / #1f1713 어두움(L9 C5) / #d390ca 330° / 2px / 모노 없음. 최대 유사 쌍 cask-archive 0.376

대비 실측(어두운 바탕, 320·390·1440 동일): h1 14.97:1 · 날짜(자두) 7.24:1 · 사실 dt 7.24 · dd 14.97 · 태그라인 7.24 · 마퀴 13.37(올린 면 위) · 멈춤 버튼 14.97 · 탭 활성 14.97 · 비활성 7.24 · 본문 14.97 · muted 7.24 · 범례 7.24 · 차트 노트 6.46 · 캡션 5.77(올린 면 위) · 표 머리 7.24 · 표 본문 14.97 · 표 숫자 14.97 · 푸터 h2 16.01 · placeholder 7.74 · 연락처 dt 6.46 · 푸터 고지 7.74. 전부 4.5:1 이상.

한글 조판 실측: h1 1440 한 줄(마지막 줄 3어절), 390·320 두 줄(마지막 줄 2어절), h2 전부 마지막 줄 2어절 이상(320~1920 × 3탭). 2배 확대 캡처에서 글리프 충돌 없음. 합성 볼드·사체 없음(로드된 face: Gothic A1 900, Gowun Dodum 400뿐). 폰트 차단 캡처에서 Malgun Gothic 폴백으로 읽힌다.

키보드·상태 실측: Tab 순서 스킵 링크 → 마퀴 멈춤 → 마퀴 영역 → 활성 탭 → 패널 → 표 영역. ArrowRight로 구독 탭 활성(aria-selected·hidden 전환), End로 매장 탭, 해시 #plan·#recipe 진입 시 해당 탭 열림, 정지 버튼 누르면 aria-pressed=true·"재생"·animation-play-state paused.

시각 루브릭(약한 축부터, 캡처 scratchpad/muwol/shots/final-*):

축 점수 근거 다음 행동
R8 구분성 1 고유 요소 4개(로트 이름·날짜·사실 행·마퀴 날짜) 통과. 그러나 font-foundry와 히어로 5축 중 구도 + eyebrow 없음 + CTA 없음 = "없음" 값까지 세면 3축 같음(배정표가 의도한 분포) 사용자가 plan.md 분포를 수용하면 닫힘
R9 디테일 1 final-1440-first: 마퀴 첫 항목이 정지 버튼 오른쪽에서 잘린 채 보인다("0월 3일 로스팅") — 흐름의 본질이지만 200% 확대에서 잘린 글자로 읽힌다. 숫자 열 정렬·radius 통일·캡션 여백은 통과 버튼과 흐름 사이에 페이드 마스크를 둘 수 있으나 마스크가 대비 측정을 흐리므로 보류
R1 첫인상 2 3초 문장(1440·390 캡처만 보고): "무월이라는 로스터리가 10월 3일에 볶은 에티오피아 우라가 원두를 100g 8,500원에 판다". 컨셉의 명사(원두 이름·볶은 날)와 일치. 반례: "왜 좋은가"는 13px 태그라인 한 줄에만 있다 —
R2 위계 2 final-*-gray-first: 시선 1 h1 → 2 자두 날짜 → 3 사실 행/마퀴. 의도와 같다. 크기·굵기·색 세 축으로 구분. 반례: 390에서 사실 행과 마퀴가 3위를 다툰다 —
R3 묶음·정렬 2 1440 시작선 3개: 160px(헤더·h1·사실·탭·패널·푸터), 48px(마퀴 버튼 — 전폭 띠의 역할), 683px(차트 상자·구독 상자 — 둘째 열). 묶음 간격(96px) > 묶음 안(16~24px). 반례 찾지 못함 —
R4 타이포 2 900/400 두 웨이트·두 패밀리로 대비, 마지막 줄 1어절 없음, 충돌 없음, 합성 없음, measure 36em. 반례: 날짜 줄 자간 -0.02em은 숫자 "10"에서 약간 좁아 보인다 —
R5 여백·긴장 2 히어로 위 여백 128px vs 마퀴·탭 띠 56~64px의 밀도 대비, h1 100px vs 본문 17px(5.9배)의 스케일 극단. 반례: 패널 위·아래 96px이 같다(선으로 구분) —
R6 이미지 2 구독 패널 원두 그릇(받는 것), 매장 패널 드리퍼(내리는 법) — 역할이 다르고 1440·390 원형 크롭에서 피사체가 남는다. 같은 조도(리넨·콘크리트). 반례: 드리퍼 원형이 주전자 주둥이를 자른다 —
R7 카피 2 합니다체 하나, 은유 0, §13-c 지문 0(grep: 통해·당신·여정·결·온도 없음). 헤드라인은 이 로트의 고유명사·수치. 반례: h2 "생두 매입가와 커핑 점수를 한 줄에 적었습니다"는 투명성을 내세우는 다른 로스터리에도 성립한다 —
R10 모바일 2 final-390-first: 브랜드·제목·컨셉 증거(날짜·사실)·다음 행동(탭 3개)이 첫 화면 안(탭 상단 637px). 390은 데스크톱 축소가 아니라 사실 행이 두 줄로 재편 —

미검증(사람·실기기 필요): 실기기 INP·field CWV, WebKit/Safari 렌더(gate webkit 꺼짐), 스크린리더 실청취(탭·마퀴 region 읽기), Windows 고대비(forced-colors)에서 탭 선택 밑줄, 실제 OS 200% 확대(gate 1.3× 행렬만 통과).

피드백 기록 · 보존 목록

  • 2026-10-06 재작업 — 사용자 피드백 없음(위임). 보존: 상호·사실·수치·이미지·앵커 id·고지 2곳.

변경 기록

  • 2026-10-06 — 05 계측 수렴(분할 히어로·상단 바·고지 푸터·MaruBuri/Pretendard/JetBrains Mono·웜 오프화이트·갈색 강조, materia와 0.958) 탈출. plan.md 배정값으로 전체 재작업. 토큰 재정의 블록 삭제, IO 리빌 삭제, 로컬 폰트 삭제, 가운뎃점 8곳 제거, 로스팅 날짜(예시) 추가, 매장 연락처 placeholder 추가.
  • 2026-10-02(옛 기록) — 레드팀 06: 가시 텍스트 "예시" 16회 → 1회, 히어로 메타 서술·면책 삭제, h1 자간 -0.045em → -0.02em. 카피 기준: h1 "취향을 고르는 향미의 좌표" → "산미와 바디로 고르는 원두", "좌표" → "향미 차트", 번역체 문장 교체, 오타("24딸"·"고핫물") 수정, 내비 "척도·원장" → "향미 차트·생두 기록".
  • 2026-08-30(옛 기록) — quiet-commerce 프리셋으로 첫 작성. R1 coffeecollective.dk, R2 fitzcarraldoeditions.com. 히어로 두 로트 가격·커핑 같은 행, 향미 플롯, 생두 원장, 반전 구독면.