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.
129 lines
14 KiB
Markdown
129 lines
14 KiB
Markdown
# design.md — 비색, 1,280°C (고려청자 특별전)
|
||
|
||
## 진행 상태
|
||
|
||
- 0단계 완료 — 전체(리디자인) 경로. 현행 감사와 보존 자산은 `outputs/rework-2026-10-06/baekje-celadon.md` 0단계 절.
|
||
- 1단계 완료 — R1 호림박물관 실측, R2 아모레퍼시픽미술관 실측, R3 motion-parallax §9.
|
||
- 2단계 완료 — 카드 3장 중 A "세 개의 벽"(위임으로 선택).
|
||
- 3단계 완료 — `styles/tokens.css`.
|
||
- 4단계 완료 — 레이아웃 → 듀오톤·유약 결 → scroll-driven.
|
||
- 5단계 완료 — html-validate·stylelint·no-hanja·showcase-audit·design-gate 통과, 루브릭 17/20.
|
||
- 6단계 완료 — 이 문서.
|
||
|
||
## 브리프
|
||
|
||
- 무엇을: 고려청자 특별전 "비색, 1,280°C" 안내 페이지 한 장. 전시실 두 곳(빙렬·상감)과 관람 안내.
|
||
- 누구에게: 전시를 보러 갈지 정하려는 관람객. 유약 접사를 보고 전시실 구성을 읽은 뒤 기간·시간을 확인한다.
|
||
- 제약: 정적 HTML/CSS, JS 없음. 기존 이미지 3장만 쓴다(새 이미지 생성 금지). 가상 전시라 장소·연락처·관람료가 없다. 기본 언어 ko-KR(대화 언어·기존 로컬라이제이션). 배정값(plan.md): 전면 이미지 히어로 · 한 줄 큰 낱말 · 표제부 차례 · 연락처·시간 카드 푸터 · Song Myung / Noto Sans KR · #0f1a18 · 167° · 4px · scroll-driven · feTurbulence · 듀오톤·풀블리드.
|
||
- 화면: `index.html` 하나. 2차 페이지 없음.
|
||
|
||
## 미확정
|
||
|
||
- `[관람료]` — 푸터 카드. 가상 전시라 값이 없다.
|
||
- `[전시 장소와 주소]` — 푸터 카드.
|
||
- `[문의 전화]` — 푸터 카드.
|
||
- 표식은 `--placeholder-line`(점선 밑줄) 하나로 통일했다. 실제 값이 오면 `index.html` 푸터 `dl` 세 자리만 바꾼다.
|
||
- 방향 선택은 위임이었다(아래 "방향").
|
||
|
||
## 레퍼런스
|
||
|
||
| 슬롯 | 출처 | 실측(2026-10-06, Playwright 1440×900) | 가져온 원리 |
|
||
|---|---|---|---|
|
||
| R1 구조 | 호림박물관 https://www.horimmuseum.org/ | 헤더 72px 아래 전시 포스터 1440×668 풀블리드. 푸터(높이 160)가 분관 2곳의 주소·개관 요일·시간·전화 카드 열, 14px | 전면 이미지 한 장 + 연락처·시간 카드 푸터가 실제 박물관 사이트의 조합이다. 카드 항목 순서(장소 → 시간 → 전화)를 따랐다 |
|
||
| R2 톤 | 아모레퍼시픽미술관 https://apma.amorepacific.com/ | body rgb(39,38,43) 위 1440×900 전면 이미지 한 장이 첫 화면 전부 | 어두운 바탕 + 전면 이미지. 예약 모달이 떠 표제 위치는 미검증 |
|
||
| R3 디테일 | `references/motion-parallax.md` §9, `motion.md` §3 [WEB-BASELINE] | 최상단 요소는 `scroll(root block)`, `@supports` 가드 안에 초기 상태, `transform`만 | 히어로 접사의 확대·이동 구현 계약 |
|
||
|
||
못 연 곳: 리움(게이트 페이지), 국립중앙박물관(리다이렉트 루프), The Met(429). "표제가 사진 하단에 있는 전시 페이지"의 실제 사례는 미검증이고 layout.md §2-b("글은 사진 위 띠나 사진 아래로")를 근거로 썼다. 장르 필수 블록은 genre-conventions §9.
|
||
|
||
## 방향
|
||
|
||
**지문**: 전면 이미지(유약 접사 풀블리드 100svh, 표제 하단) · Song Myung / Noto Sans KR · 청록빛 먹 #0f1a18 · 강조 #84c3a9(OKLCH 167°) · radius 4px · 흐름 전면 접사(차례) → 제1실(글 + 주자 세로 사진) → 제2실(상감 접사 풀블리드 띠 → 글) → 관람(동선·해설·예약) → 푸터 카드 · 내비 표제부에 녹인 차례(번호 + 이름 + 한 줄) · 푸터 연락처·시간 카드 · 이미지 듀오톤 3장, 풀블리드 2곳, 캡션 아래 · 모션 scroll-driven 확대·이동 2곳, 그 밖에 없음.
|
||
|
||
- 한 문장 컨셉: 관람객이 유약 접사를 화면 가득 보고, 전시실 두 곳의 차례를 그 자리에서 읽은 뒤 기간·시간을 확인한다. 섹션 하나가 암실의 벽 하나다.
|
||
- 프리셋: editorial(콘텐츠가 주인공)을 지배로 두되 서체·배경·강조는 배정값. 보조 축 없음.
|
||
- 표현 리스크: 히어로 접사의 scroll-driven 확대(1 → 1.14)와 상감 띠의 세로 이동(±4%). 과업 적합 이유 — 유약 표면에 다가가는 동작이 "접사로 본다"는 컨셉 그 자체다. 검증 — 스크롤 50% 지점에서 computed transform `matrix(1.07, …)`, 상감 띠 `translateY -11px` 실측. 감소 모션·미지원 브라우저는 정지.
|
||
- 히어로 글 묶음: 라벨 없음 / 한 줄 큰 낱말(전시명) / 한 문장 리드 / 행동 없음(차례가 다음 정보로 이어진다).
|
||
|
||
제시한 카드(위임): A 세 개의 벽 · B 접사 한 장, 아래는 도록(전시실 2열 격자) · C 가로 띠 차례(사진 아래 단색 띠에 전시명+차례, 분할 2회). **A를 골랐다** — 브리프의 "전시실마다 조명 하나와 청자 한 점"이 섹션 = 벽 구조와 맞고, R1 호림이 포스터를 풀블리드로 두고 글을 아래 둔 구조였으며, 배정 "듀오톤·풀블리드"가 A에서만 두 곳에 쓰인다. 기각 — B는 접사가 작아져 결이 안 보이고, C는 분할 반복으로 05 계측 수렴 군에 다시 붙는다. 카드 전문은 `outputs/rework-2026-10-06/baekje-celadon.md`.
|
||
|
||
반사실 점검(5단계 렌더): 고유 요소 — 빙렬 접사 전면 사진, h1의 "1,280°C", 차례 "1 빙렬 / 2 상감"(이 전시의 전시실 구성). 같은 업종 치환(다른 도자 전시)에서 셋 다 바뀌어야 한다. 다른 업종(세무사무소)에서 전면 접사·차례·카드 푸터가 모두 쓸모없다 → 통과. B-1 5축(이전 baekje·다른 쇼케이스 대비): 구도 다름·표제 서체 다름·eyebrow 없음(다름)·CTA 없음(다름)·캡션 문장형 마침표(다름) → 0/5. B-2 6축: 섹션 흐름·글 묶음·내비·푸터·이미지 처리·모션 전부 다름 → 0/6. `tools/similarity.mjs`(읽기 전용 실행) 상위 30쌍에 baekje 없음.
|
||
|
||
보존 자산: 전시명, 모든 사실 문구·수치(1,280°C, 철분, 백토·자토, 기간·시간·해설), 이미지 3장, 앵커 id `room-1`·`room-2`·`visit`·`main`, 파비콘 주자 실루엣, 가상 전시 고지 1회.
|
||
|
||
## 토큰과 예산
|
||
|
||
값은 `styles/tokens.css`. 역할과 이유:
|
||
|
||
- 타입: 본문 16/1.7(Noto Sans KR 400 하나), 리드 19, 섹션 제목 24→36, h1 44→120(한 줄 큰 낱말, 1440에서 본문의 7.5배), 전시실 번호 64→144. 캡션 13px이 한글 하한.
|
||
- 색: `--surface` #0f1a18(배정), `--ink` #e8ece9, `--ink-muted` #aab6b0(8.9:1), `--ink-faint` #8a9892(5.6:1, 캡션), `--accent` #84c3a9 — similarity.mjs의 OKLCH 기준으로 167°에 맞췄다(sRGB HSL 기준 165°). 강조는 차례 번호·전시실 번호·포커스·hover 밑줄에만.
|
||
- 듀오톤 램프: 그림자 #0f1a18 → 중간 #589a8a → 하이라이트 #cfe3da. `index.html`의 `#duotone` 필터 값과 같다.
|
||
- 간격: 8px 리듬, 벽 사이 `--space-8` 5→11rem이 의도된 극단.
|
||
- radius 4px(배정) — 주자 사진과 푸터 카드에만.
|
||
- `--measure` 34em.
|
||
|
||
예산(tokens §5)과 실측(로컬 file://, Playwright Chromium, 2026-10-06):
|
||
|
||
| 항목 | 예산 | 실측 | 판정 |
|
||
|---|---|---|---|
|
||
| 히어로까지 JS | 150KB | 0KB(스크립트 없음) | 통과 |
|
||
| 첫 화면 전송량 | 1MB | 이미지 115KB + 폰트 438KB + 폰트 CSS(압축 전 151KB) ≈ 0.7MB | 통과 |
|
||
| LCP(lab proxy) | 2.5s | 1440: 308ms(h1) · 390: 260ms(.lead). 크롬은 필터 걸린 히어로 이미지를 LCP 후보로 잡지 않았다 | 통과(lab) |
|
||
| CLS(lab proxy) | 0.1 | 1440: 0.0002 · 390: 0.024 | 통과 |
|
||
| 폰트 패밀리 | 2 | Song Myung 400 + Noto Sans KR 400 | 통과 |
|
||
| **폰트 전송량** | 100KB(기본) → **200KB(데모 등급으로 올림)** | **438KB** — Noto Sans KR 17슬라이스 176KB + Song Myung 12슬라이스 263KB | **초과** |
|
||
|
||
폰트 초과를 숨기지 않는다. Google Fonts 한글 슬라이스는 Noto Sans KR 하나만으로도 176KB라 100KB 기본선은 이 서체 배정 자체로 닿을 수 없다. 줄이는 선택지: 섹션 제목(h2) 세 줄을 Noto Sans KR로 바꾸면 Song Myung이 4슬라이스 80KB로 줄어 총 255KB(실측). 표제 서체가 전시실 제목까지 이어져야 한 전시로 읽힌다고 판단해 유지했고, 결정은 호출자에게 넘긴다. Noto Sans KR 500은 지워 144KB를 줄였다(강조는 색으로).
|
||
|
||
## 이펙트와 폴백
|
||
|
||
- 듀오톤(`#duotone`, feColorMatrix + feComponentTransfer, `color-interpolation-filters="sRGB"`): 사진 3장. 필터를 끄면 원본 사진 그대로 보인다(`final-1440-nofx-first.png`로 확인).
|
||
- 유약 결(`#glaze`, feTurbulence 2옥타브, 필터 영역 100%): `.hero-glaze` 정적 오버레이 한 장, soft-light 0.7. 움직이는 래퍼와 분리했다. 렌더 확인 — 오버레이만 찍어 G 채널 26~108 변동.
|
||
- scroll-driven: `@media (prefers-reduced-motion: no-preference)` 안의 `@supports (animation-timeline: scroll())`에만 있다. 초기 상태(transform 없음)가 가드 밖이므로 Firefox·감소 모션에서는 정지 화면이 완성본이다. 상감 띠는 scale 대신 높이 112%로 두고 세로로만 밀어 가로 오버플로를 만들지 않는다(감사가 clip 전 rect를 잰다 — 실측 실패 후 수정).
|
||
- `transform`·`opacity` 외 애니메이션 없음. `backdrop-filter` 없음(고정 바가 없다).
|
||
|
||
## 하지 않기로 한 것
|
||
|
||
- 상단 바·sticky 헤더·backdrop-filter: 섹션이 셋이고 차례가 곧 내용이라 표제부에 녹였다(layout §2-c).
|
||
- 스크롤 리빌(`.reveal` 19곳): 배정표에 없다. 전부 지웠다.
|
||
- 라벨(eyebrow)·버튼: 표제만으로 무엇의 페이지인지 알 수 있고 목표 행동이 "읽고 확인"이라 없다. 전시실 번호 옆 "제1실" 낱말은 라벨이 아니라 차례의 반복이다.
|
||
- 가운뎃점 메타 문자열: 가시 텍스트에서 0곳.
|
||
- 은유 표제 "환원 불에서만 남는 색": h1은 전시명으로 바꾸고 환원 불·철분은 리드의 사실 문장으로 옮겼다. 페이지에 은유 0곳.
|
||
- 장소·관람료·문의 값: 지어내지 않고 placeholder.
|
||
- MaruBuri 로컬 폰트(900KB)와 `fonts.css`: 배정 서체로 바뀌어 죽은 자산이라 지웠다.
|
||
- 새 이미지·og.png 생성: 금지. og:image는 빙렬 접사 webp 절대 URL.
|
||
|
||
## 검증
|
||
|
||
검증 줄: html-validate 0건 · stylelint 0건 · no-hanja PASS(3파일) · showcase-audit PASS 6/6(320·390·768·1440·1920·2560, 대비·오버플로·h1 1줄·깨진 이미지 0) · design-gate 충족 13 / 미검증 0 / 실패 0(죽은 선택자 0, 색 리터럴 0/0, radius 리터럴 0, 메타, 오버플로 5폭, h1 1줄(375·390 ×1·1.3), 수축 없음, 리듬, 대비 AA 46요소, 터치 타깃 4개, axe 0, 왼쪽 인셋 20px, 런타임 0) · 설정·리포트는 프로젝트 밖 스크래치.
|
||
|
||
실측(자동 검사 밖): 히어로 글자 뒤 실제 픽셀 대비(글자를 투명하게 하고 상자 안 최대 휘도) — 1440: h1 9.6:1, 리드 8.2:1, 차례 11.6:1 / 390: h1 9.4:1, 리드 7.7:1(수정 전 3.98:1 → 스크림 강화), 차례 14.4:1 / 1920: h1 12.4:1 · 표제 마지막 줄 어절 ≥2(h1·h2 전부, 390·1440) · 키보드: 스킵 → 차례 3 → 끝, 포커스 outline solid · 768·1920·2560 레이아웃 확인(2560에서 상감 띠 폭이 줄던 결함 수정) · 200% 확대 근사(720×450) 가로 스크롤 없음, h1 1줄.
|
||
|
||
시각 루브릭(critique §2-1, 약한 축부터, 캡처 `scratchpad/baekje/shots/final-*`):
|
||
|
||
| 축 | 점수 | 근거 | 다음 행동 |
|
||
|---|---|---|---|
|
||
| R3 묶음·정렬 | 1 | 1440 시작선이 넷(표제 열 80px, 번호 열, 본문 열, 차례 열 1099px). 묶음 사이 간격 > 안 간격은 성립 | 차례를 표제 열에 붙이면 셋이 되지만 표제부 차례의 뜻이 약해진다. 유지 |
|
||
| R9 디테일 | 1 | 200% 크롭에서 닿는 글리프·여백 0 없음. 2560에서 1600px 원본이 업스케일돼 접사가 무르다 | 원본 교체 전까지 유지 |
|
||
| R2 위계 | 1 | 1440 회색조: 사진 → h1 → 차례(의도와 같음). 390 회색조에서는 h1과 리드 3줄이 무게를 다툰다 | 390 리드를 2줄로 줄이는 안 검토 |
|
||
| R1 첫인상 | 2 | 3초 문장: "고려청자 특별전 '비색, 1,280°C', 유약 접사를 보고 빙렬·상감 두 전시실로 간다" — 컨셉 명사·동사와 일치, 1440·390 모두. 반례: "왜 좋은가"는 사실(1,280°C)로만 답한다 |
|
||
| R4 타이포 | 2 | 합성 굵기·사체 없음(400 하나씩), 마지막 줄 어절 ≥2, measure 34em, 제목은 서체+크기+색으로 대비. 반례 못 찾음 |
|
||
| R5 여백 리듬 | 2 | 100svh 히어로 → 벽 사이 11rem → 카드 안 2.5rem로 전환이 정보 단위와 일치. 극단은 h1 120px/본문 16px와 전면 사진/먹. 반례: 제3실 오른쪽 열이 빈다 |
|
||
| R6 이미지 | 2 | 슬롯 역할 셋(접사=히어로, 주자=제1실, 상감=제2실 띠), 크롭에서 주자·꽃이 남음, 듀오톤으로 한 세계. 반례: 320×568 첫 화면은 사진이 거의 안 보인다 |
|
||
| R7 카피 | 2 | 합니다체 하나, 표제·제목이 사실 문장, 은유 0, 경쟁 전시로 바꾸면 h1·차례·리드가 깨진다. 반례: "비색"은 청자 일반 용어 |
|
||
| R8 구분성 | 2 | 고유 요소 셋, B-1 0/5, B-2 0/6, similarity 상위 쌍 없음. 반례 못 찾음 |
|
||
| R10 모바일 | 2 | 390 첫 화면에 사진·제목·차례(이동 수단·다음 정보) 모두, h1 top 392px. 스크림·차례 목록을 좁은 화면용으로 다시 짰다. 반례: 320×568 |
|
||
|
||
합계 17/20, 0점 없음, R1·R8 2점 — 통과선 충족.
|
||
|
||
미검증: 실기기 INP·field CWV(RUM 없음) · WebKit 렌더(gate webkit=false) · 스크린리더 실청취(읽기 순서는 소스가 시각 순서와 같음) · Windows 고대비(forced-colors) · 실제 200% OS 확대(720×450 근사만).
|
||
|
||
## 피드백 기록 · 보존 목록
|
||
|
||
- 2026-10-06 재작업 전 피드백 없음. 보존: 전시명, 사실 문구, 이미지 3장, 앵커 id.
|
||
|
||
## 변경 기록
|
||
|
||
- 2026-10-06 · 05 계측 수렴 축 재작업(plan.md 배정) · 분할 히어로 → 전면 접사, 상단 바 → 표제부 차례, 고지 푸터 → 연락처·시간 카드, MaruBuri/Pretendard → Song Myung/Noto Sans KR, `.reveal` 19곳 삭제, 가운뎃점 5곳 삭제, h1 "환원 불에서만 남는 색" → 전시명, 섹션 제목을 사실 문장으로.
|
||
- 2026-10-02 · 카피 교정 · 번역체·잠언형 문장을 사실 문장으로("유약이 남긴 지도", "빛으로 읽습니다" 등 제거).
|
||
- 2026-10-02 · 레드팀 06 · 전시명 "비색의 침묵" → "비색, 1,280°C", 900px 미만에서 사진을 표제 앞으로, "예시" 표기 6회 → 1회.
|
||
- 2026-08 · 최초 제작 · editorial-archival, 암실 사진 주연.
|