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.
126 lines
13 KiB
Markdown
126 lines
13 KiB
Markdown
# design.md — 캐스크 아카이브
|
||
|
||
## 진행 상태
|
||
|
||
- 2026-10-06 · 0 현행 감사 → 1 레퍼런스 실측 → 2 방향(카드 3장, 위임으로 A 선택) → 3 토큰 → 4 구현(index + docent 공통 셸) → 5 감사(정적·게이트·실렌더·E2E·루브릭) → 6 기록. 완료.
|
||
- 재개 지점: 없음. 바꾸려면 "방향" 절의 지문 블록부터 읽는다.
|
||
|
||
## 브리프
|
||
|
||
```
|
||
무엇을: 독립병입 위스키 바 "캐스크 아카이브"의 안내 사이트 2면(캐스크 목록 / 도슨트 테이스팅) 리디자인
|
||
누구에게: 독립병입 싱글 캐스크를 찾는 손님. 캐스크 번호·숙성·도수를 비교하고 도슨트 세션을 고른다
|
||
제약: 정적 HTML+CSS, 이미지 6장 재사용(새 이미지 없음), E2E가 보는 id 유지, 기본 언어 ko-KR(대화 언어), 한자 금지
|
||
```
|
||
|
||
- 화면: `/work/cask-archive/`(대표), `/work/cask-archive/docent/`(2차, 같은 셸).
|
||
- 확정 슬롯(기존 파일·plan.md 배정): 업종 위스키 바, 목표 행동 1순위 캐스크 비교 → 2순위 도슨트 세션 선택, 톤 아카이브 문서(차분·사실), 자산 이미지 6장·상호.
|
||
- 배정값(plan.md cask-archive 행): 격자·목록 히어로 · 표제 작게 · 측면 색인 · 다열 색인 푸터 · Nanum Myeongjo / IBM Plex Sans KR · 어두운 웜 · 25° 구리 · radius 2px · hover·focus만 · 재질 없음 · 원본 비율, 캡션 옆.
|
||
|
||
## 미확정
|
||
|
||
- 캐스크 5통·통관 번호·가격·일정·장소(한남 27길)는 기존 쇼케이스의 예시 값이다. 푸터와 폼 옆 고지로 가상 브랜드임을 밝힌다.
|
||
- 방향 선택은 위임(재작업 지시)으로 작업자가 골랐다. 카드 B·C는 아래 "방향"에 남긴다.
|
||
- og:image는 기존 사진(`assets/whisky-hero.webp`, docent는 `masterclass-lineup.webp`)을 가리킨다. 전용 1200×630 이미지는 만들지 않았다.
|
||
|
||
## 레퍼런스 (2026-10-06 실측)
|
||
|
||
| 슬롯 | URL | 원리 한 줄 |
|
||
|---|---|---|
|
||
| R1 구조 | https://smws.com/whisky | h1 없이 좌측 필터 레일(x=20, w=356)과 상품 격자(x=376, w=1012)가 y=225에서 시작 — 목록이 첫 화면. 푸터 17링크 다열 |
|
||
| R2 톤 | https://www.cadenhead.scot/ | "Scotland's Oldest Independent Bottler, Established 1842" 사실형 문장. 5열 푸터(주소/행사/글/알림/법적) |
|
||
| R3 디테일 | https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns | sticky 측면 색인 w=297(20%), 앵커 8개, 현재 위치 표시 |
|
||
| 미검증 | whiskybase.com·thewhiskyexchange.com(Cloudflare 대기), whiskyauctioneer.com(406), gordonandmacphail.com/whisky(404) | 대체 출처로 갔다 |
|
||
|
||
## 방향
|
||
|
||
지문: 격자·목록(캐스크 번호 5행이 첫 화면, h1 18px) · Nanum Myeongjo 700 / IBM Plex Sans KR 400·600 · 바탕 #1a1512 어두운 웜 · 강조 #d18147(hue 25°) · radius 2px · 흐름 목록 → 병입자(사진+캡션 옆) → 도슨트 코스+폼 → 시음회 일정+입고 알림 → 다열 색인 푸터 · 내비 왼쪽 sticky 측면 색인(≤1023 접는 차례) · 푸터 4열 색인(차례/캐스크 번호/도슨트/찾아오기) · 이미지 원본 비율, 캡션 옆 · 모션 hover·focus 색 전환만
|
||
|
||
- 한 문장 컨셉: 독립병입 위스키를 찾는 손님이 보유 캐스크 5통의 번호·숙성·도수를 첫 화면 목록에서 비교하고, 병입 정보를 확인한 뒤 도슨트 세션을 고른다.
|
||
- 프리셋: editorial(아카이브 문서) 지배. 어두운 바탕은 배정값이며 dark-instrument의 계기판 밀도는 가져오지 않는다(표는 1행 1통, 행간 넉넉).
|
||
- 표현 리스크: 첫 화면에 사진이 없다. 캐스크 번호(32~48px 명조)가 사진 자리를 맡는다. 검증: 390·1440 첫 화면 3초 문장(아래 검증 절).
|
||
- 표면 다이얼: 두 면 모두 안내 표면. 표현성 1 / 밀도 2 / 모션 0 / 증거 노출 2.
|
||
|
||
### 카드 (위임으로 A 선택)
|
||
|
||
| 카드 | 첫 화면 | 흐름 | 포기하는 것 |
|
||
|---|---|---|---|
|
||
| **A. 열람실 — 색인 왼쪽, 목록 오른쪽** | 15rem sticky 색인 + 8열 캐스크 표(번호 명조 48px) | 목록 → 병입자 → 도슨트 → 일정 → 푸터 | 큰 사진·큰 표제 |
|
||
| B. 번호판 격자 | 3열 카드 격자(카드마다 번호 크게), 우측 얇은 색인 | 격자 → 상세표 → 도슨트 → 일정 | 열 단위 비교(도수·병 수를 한눈에 못 본다), E2E의 `tr` 계약 |
|
||
| C. 한 단 긴 문서 | 측면 색인 + 36em 한 단, 캐스크마다 번호 + 향미 문단 | 목록(문단형) → 도슨트 → 일정 | 밀도·비교 속도, 페이지 길이 2배 |
|
||
|
||
고른 이유: 기존 design.md·메타가 "캐스크 번호·숙성 연수·도수·병 번호를 비교"를 1순위 과업으로 적었고, R1(SMWS)이 목록을 첫 화면에 두고 좌측 레일로 거르는 구조였다. 표 행 비교가 B·C보다 빠르고 E2E 계약(`#caskTableBody tr`)을 그대로 지킨다.
|
||
|
||
### 반사실·수렴 점검
|
||
|
||
- 고유 요소(첫 화면): 캐스크 번호 5개(#6512, #29.281, #93/41, #PX-88, #98/12), 분류 버튼(셰리/피트/버번/캐스크 스트렝스), 병입자 이름 열, h1의 "5통·도슨트 1:1". 같은 업종 치환: 번호·병입자가 바뀌면 목록 내용이 전부 바뀐다. 다른 업종(세무사무소) 치환: 번호 열·도수 열·분류 버튼이 성립하지 않는다 → 통과(고유 요소 4).
|
||
- B-1(히어로 5축) vs 직전 cask-archive 구버전: 구도 다름(분할→목록), 표제 서체 다름(MaruBuri→Nanum Myeongjo), eyebrow 없음(있었음), CTA 다름(단색+외곽선 2개 → 없음), 캡션 다름 → 같음 0.
|
||
- B-2(페이지 6축) vs 배정표의 같은 패밀리 hannam-jari(격자·상단 바·다음 행동 푸터·VT·1:1 캡션 위): 섹션 흐름 다름, 글 묶음 비슷(표제 작게), 내비 다름, 푸터 다름, 이미지 다름, 모션 다름 → 같음 ≤1.
|
||
- 토큰 4축: 본문 IBM Plex Sans KR은 hannam-jari와 같다(배정표가 본문 ≤5종을 허용). 표제·배경·hue·radius는 다르다.
|
||
|
||
### 보존 자산
|
||
|
||
상호, 캐스크 5통 데이터(번호·증류소·병입자·배럴·연수·도수·병 수·향미·통관 번호), 병입자 4곳 문장, 코스 A/B 가격·시간·라인업, 시음회 2건, 장소·인원·글라스, 이미지 6장, 두 주소, E2E가 보는 id(`#caskSearch`, `#caskTableBody`, `.filter-btn[data-filter]`, `#courseSelect`(courseA/B), `#resDate`, `#resTime`, `#userName`, `#userPhone`, submit alert 문구).
|
||
|
||
## 토큰과 예산
|
||
|
||
값은 `styles/tokens.css`에만 있다.
|
||
|
||
- 타입: 본문 16px/1.7, 캡션 14px(한글 13px 하한 위), h1 18px(표제는 작게), 섹션 h2 22~28px, 캐스크 번호 32~48px. measure 36em. 모노 없음 — 숫자는 `tabular-nums`.
|
||
- 색: 바탕 #1a1512 / 글 #efe6da / 보조 #b3a595 / 희미 #8f8071(차례 번호) / 강조 #d18147. 실측 대비는 "검증" 절.
|
||
- 간격: 4·8·16·24·40·64·96px. 측면 색인 15rem, 본문 최대 68rem.
|
||
- radius 2px 하나. 그림자 없음.
|
||
- 모션: 160ms 색·테두리 전환만. 감소 모션에서 1ms.
|
||
- 예산: JS 인라인 4.6KB(gzip 전, 150KB 예산 안), 웹폰트 2종(Google Fonts, 한글 서브셋 unicode-range, swap), LCP 후보는 index의 첫 화면 텍스트(사진은 2번째 섹션). 실측치: 로컬 서버 networkidle 캡처 기준 콘솔 오류 0, 깨진 이미지 0.
|
||
|
||
## 이펙트와 폴백
|
||
|
||
- 이펙트 없음. 측면 색인의 현재 위치 표시는 IntersectionObserver로 `aria-current`만 바꾼다(없으면 표시가 없을 뿐 링크는 동작).
|
||
- 좁은 화면 차례는 `<details open>`이고 JS가 ≤1023에서 닫는다. JS 없이면 펼친 채로 보인다.
|
||
- 표는 ≥1400에서 8열 표, 그 아래에서 같은 `tr`을 flex 줄바꿈 목록으로 바꾼다(1280 실측 1051px > 960px, 1366 실측 1056px > 1042px).
|
||
|
||
## 하지 않기로 한 것
|
||
|
||
- 상단 바·sticky 헤더·backdrop-filter: 긴 문서라 측면 색인이 현재 위치를 보여 준다. 바탕이 단색이라 흐림이 필요 없다.
|
||
- 등장 모션·스크롤 리빌·스태거: 배정값 밖이며 아카이브 문서에 이유가 없다.
|
||
- 히어로 사진: 목록이 주인. 사진은 병입자 절에서 원본 비율로 캡션 옆에 둔다.
|
||
- 모노 서체: 한글 라벨에 라틴 모노를 섞지 않는다. 숫자 정렬은 tabular-nums.
|
||
- 가운뎃점 메타 문자열(`A · B`), 영문 장식 라벨, eyebrow, "RECOMMENDED" 리본, 이모지, 카드 glow.
|
||
- "원장·장부" 낱말: 가시 텍스트에서 0회(코드 id `#ledger`·`.ledger-table`만 남긴다).
|
||
- MaruBuri 로컬 폰트 파일(`assets/fonts/`)과 `styles/fonts.css`: 더 쓰지 않으므로 지웠다.
|
||
- 2열 폼 행(날짜/시간, 이름/연락처): 게이트의 같은 클래스 폭·간격 불변식을 깨서 한 열로 둔다.
|
||
|
||
## 검증
|
||
|
||
검증 줄: html-validate 2/2 통과 · stylelint 통과 · no-hanja 4파일 통과 · showcase-audit 12/12(320~2560 × 2면) · design-gate 충족 26 / 미검증 0 / 실패 0(정적·시각 회귀·WebKit은 꺼짐) · archive-showcases-e2e cask 블록 26/26 · 키보드(순서·포커스 링 3px·dialog Esc 후 포커스 복귀) 통과 · 200% 글자 확대 320/390/1440 문서 가로 넘침 0 · WCAG 1.4.12 글자 간격 재정의 넘침 0.
|
||
|
||
대비 실측(WCAG 2.x 상대 휘도): 글/바탕 14.7 · 보조/바탕 7.5 · 보조/폼 패널 7.1 · 보조/모달 6.7 · 보조/푸터 7.9 · 강조/바탕 6.0 · 버튼 글/강조 6.0 · 버튼 글/강조 hover 7.1 · 차례 번호/바탕 4.7.
|
||
|
||
시각 루브릭(캡처: 세션 스크래치 `cask/shots/index-{1440,390,1280}-{fold,full,blur}.png`, `docent-*`, `index-1440-dialog.png`; 약한 축부터):
|
||
|
||
| 축 | 점수 | 근거 | 다음 행동 |
|
||
|---|---|---|---|
|
||
| R2 위계 | 1 | index-1440-blur: 1 캐스크 번호 → 2 "병입 정보" 외곽선 버튼 → 3 필터·표제. 의도는 번호 → 증류소·도수 → 버튼이었다 | 버튼을 텍스트 링크 꼴로 낮추면 2순위가 증류소로 간다 |
|
||
| R5 여백 리듬 | 1 | 섹션 패딩이 64px로 같고 전환은 1px 선이 맡는다. 극단은 번호 48px vs 표제 18px(스케일) 하나 | 입고 알림 블록을 96px로 띄워 마지막 행동을 분리 |
|
||
| R9 디테일 | 1 | 2x 확대 캡처(index-1440-row-2x)에서 번호 윗선이 증류소 이름 대문자 윗선보다 8px 높았고 `.cask-no` padding-top으로 맞췄다(재측정 211 vs 212). 모달·첫 행만 2x로 훑었고 나머지 영역은 1x 캡처만 봤다 | 390·1440 전체를 200%로 훑어 radius·간격 반복 확인 |
|
||
| R1 첫인상 | 2 | 1440·390 fold 3초 문장: "독립병입 위스키 바. 캐스크 5통을 번호로 고르고 도슨트와 1:1로 마신다" — 컨셉 문장의 명사·동사와 같다. 브랜드·h1 모두 보임. 반례: '위스키'라는 낱말은 h1과 부제에만 있어 번호만 보면 업종이 늦게 읽힌다 |
|
||
| R3 묶음·정렬 | 2 | 1440 fold 시작선 x=44(색인), x=284(표제·필터·표·h2 전부). 두 선. 묶음 사이(섹션 64px) > 묶음 안(행 24px). 반례: 1280 flex 목록의 둘째 줄 시작(≈480)이 1440 표의 증류소 열(496)과 폭마다 다르다 |
|
||
| R4 타이포 | 2 | 합성 굵기 없음(`font-synthesis-weight: none`, 700·600 실제 로드), 320/390/1440 h1·h2 마지막 줄 한 어절 0건(푸터 한 낱말 제목 제외), 모노 한글 없음, 본문 16px/1.7. 반례: Nanum Myeongjo의 "#PX-88" 하이픈이 길어 보인다 |
|
||
| R6 이미지 | 2 | 4장 전부 역할·캡션 있음(병 896×1200, 라인업·아로마 휠·페어링·룸 1376×768), 원본 비율이라 크롭 손실 0, 모두 어두운 웜 조도. 390 첫 화면에 사진이 없는 것은 "목록이 주인" 컨셉. 반례: 아로마 휠 이미지 안의 영문 제목(기존 자산) |
|
||
| R7 카피 | 2 | 합니다체 통일, 은유 0, 섹션 제목이 사실 문장(5통·1:1·9월 12일과 26일·하몽/초콜릿/흑무화과). 경쟁사 치환 시 '5통'·'9월 12일'이 깨진다. 반례: '도슨트'는 업종 일반어 |
|
||
| R8 구분성 | 2 | 고유 요소 4(번호 5개, 분류 버튼, 병입자 열, h1 수치), 히어로 5축 같음 0, 페이지 6축 같음 ≤1. 반례: hannam-jari와 본문 서체·격자 패밀리 공유 |
|
||
| R10 모바일 | 2 | index-390-fold: 브랜드·h1·차례 버튼·필터·첫 캐스크(#6512 전체 필드)·"병입 정보" 버튼이 844px 안에 보인다. 색인 요약·버튼을 숨기고 표를 목록으로 다시 짰다. 반례: 첫 항목 버튼이 y≈760으로 하단 가장자리 |
|
||
|
||
합계 17/20, 0점 없음, R1·R8 2점 → 통과.
|
||
|
||
미검증: 실기기(iOS Safari) 렌더, 웹폰트 로드 전 폴백 메트릭 CLS 실측, LCP 수치(랩 환경 없음). 미검증은 충족으로 세지 않는다.
|
||
|
||
## 피드백 기록 · 보존 목록
|
||
|
||
- (없음 — 납품 후 피드백 대기)
|
||
|
||
## 변경 기록
|
||
|
||
- 2026-10-06 · 리디자인(이 문서 전체). 분할 히어로·상단 바·고지 띠·MaruBuri/Pretendard/JetBrains Mono·앰버 #d99b38·무채 검정을 배정표대로 교체. `#curator` 죽은 앵커 제거. 폼 필드를 한 열로, 시간→날짜 순서.
|
||
- 2026-10-02 · 카피 교정(구버전): 과장·영문 장식 라벨 제거, 합니다체 통일.
|
||
- 2026-09 · 구버전: 병 사진 베젤 제거, 캡션 정렬선 맞춤, 로컬 MaruBuri 400·600 적재, 좁은 화면 내비 둘째 줄.
|