designpaca/apps/site/public/work/baekje-celadon/design.md

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, 암실 사진 주연.