# design.md — 한성활자연구소

## 진행 상태

- 2026-10-06 재작업(전체·리디자인 경로, 방향 위임): 0 감사 → 1 레퍼런스 → 2 카드 A 선택 → 3 토큰 → 4 구현 → 5 검증 통과 → 6 이 문서. 작업 노트 `outputs/rework-2026-10-06/font-foundry.md`.

## 브리프

- **무엇을**: 한글 본문 서체 두 종(마루 부리·Pretendard)을 글자 하나의 굵기 축에서 보고, 같은 문장을 크기·자간·행간을 바꿔 조판해 보는 가상 서체 연구소 한 장.
- **누구에게**: 본문 서체와 조판 값을 정해야 하는 편집자·디자이너·개발자. 목표 행동은 굵기 슬라이더와 조판 시험대를 직접 움직이는 것(문의·구매 없음).
- **제약**: ko-KR. 정적 HTML/CSS/인라인 JS. 가상 기획이라 실제 주문으로 이어지지 않으며 가격은 예시. 마루 부리는 공식 배포본 그대로(서브셋 금지). 320px부터 가로 넘침 없음. 화면: `index.html` 한 장.
- 확정 슬롯: 업종 서체 연구소 / 톤 "글자 자체가 이미지, 설명은 작게" / 자산 마루 부리 WOFF2 2종·견본 문장·예시 가격 / 좁은 화면 내비 탭 2개 그대로.

## 미확정

- 가격 140,000·220,000원 — 예시(order 섹션에 "예시" 명시).
- 글리프 기본 글자 `활` — 브랜드 연상으로 정했고 사용자가 바꿀 수 있다.
- 방향 카드 선택 — 위임으로 A를 골랐다(아래).

## 레퍼런스

| 슬롯 | 출처 | 가져온 원리 |
|---|---|---|
| R1 구조 | https://abcdinamo.com/typefaces/favorit (2026-10-06 텍스트 페처) | 첫 화면이 타입 테스터, 변종·보기를 탭으로 바꾼다 |
| R2 톤 | https://rsms.me/inter/ (2026-10-06 텍스트 페처) | 글자 표본이 곧 첫 화면, 설명은 아래 작게 |
| R3 디테일 | https://typelab.sandoll.co.kr/experience (이전 판 기록 재사용, 미재검증) | 조작이 즉시 표본을 바꾼다 |
| 푸터 | https://pangrampangram.com/ 확인 — 워드마크 한 줄 푸터 아님. 배정값으로 감(미검증) | — |

## 방향

**지문**: 히어로 타이포 단독(글자 하나 거대 + 굵기 슬라이더) · 표제 Noto Serif KR 900 / 본문 Noto Sans KR 400 · 바탕 밝은 쿨 중립 #f1f2f4 · 강조 240° 남색 잉크 #22235a · radius 0 · 흐름 글리프 → 같은 문장 비교 → 조판 시험대 → 옆면 여백과 자간 → 가격(예시) → 워드마크 · 내비 탭·세그먼트(서체별 보기, 상단 바 없음, sticky 없음) · 푸터 큰 워드마크 한 줄 · 이미지 없음(글자가 이미지) · 모션 탭 전환 View Transitions + 글리프 크기 scroll-driven.

- **컨셉**: 본문 서체를 고르는 편집자가 한 글자를 굵기 축으로 밀어 보며 마루 부리(정적 2굵기)와 Pretendard(가변 45~920)의 성격을 판단하고, 같은 문장 조판으로 확인한다.
- **프리셋**: swiss-minimal 지배(격자·침묵·쿨 중립), 보조 없음. 서체·명도·hue·radius는 plan.md 배정값.
- **표현 리스크**: 글자 하나가 첫 화면 56svh를 차지해 "무엇을 하는 곳"이 h1·리드에만 있다. 검증: 1440·390 첫 화면에 h1·리드·슬라이더가 함께 들어오는지(둘 다 들어옴, 390 하단 821px).
- **카드**: A 글자 하나의 굵기(선택) / B 문장 폭포(문장 다섯 크기, 자간 슬라이더) / C 자모 분해(초·중·종성 세 칸). A를 고른 이유 — 브리프의 사실(정적 2굵기 vs 가변 축)이 굵기 축에서 가장 분명하고, R1·R2 둘 다 글자 표본이 첫 화면이었다. B는 비교 섹션과 역할이 겹치고 C는 글자 교체가 어렵다.
- **반사실**: 고유 요소 — 마루 부리 거대 글리프 + 서체별로 바뀌는 굵기 축(400↔600 / 100~900), 서체 이름 탭, 네이버·OFL·굵기 수 사실. 세무사무소로 치환하면 슬라이더·탭이 성립하지 않는다. 수렴(muwol-coffee 대비 6축): 히어로 패밀리·탭 내비 같음, 나머지 4축 다름.
- **보존 자산**: 상호, 견본 문장, 시험대 기본값 17px/0em/1.8과 `display/body` 값, 마루 부리 파일, 예시 가격, 가상 고지.

## 토큰과 예산

값은 `styles/tokens.css`. 역할: `--font-display` 표제·h3·워드마크, `--font-body` 본문·UI, `--face-buri`·`--face-godic` 표본·시험대 전용(UI에 쓰지 않는다). `--accent`는 거대 글리프·활성 탭·슬라이더·버튼에만. `--line-strong`은 컨트롤 테두리(3.98:1). Noto Sans KR은 400 한 굵기만 싣고 강조는 서체·색으로 낸다.

예산(tokens §5 데모): JS 150KB — 실측 인라인 4KB. LCP 2.5s — 로컬 308ms(`#glyph`), CLS 0.000. 폰트 전송 200KB — **실측 ≈939KB 초과**(마루 부리 424KB + Pretendard 동적 서브셋 229KB + Noto 286KB). 표본 서체가 제품이고 마루 부리는 공식 배포본 그대로라 이번 작업에서 줄이지 않았다. 별도 작업 제안: OFL 범위의 한글 서브셋.

## 이펙트와 폴백

- 탭 전환: `document.startViewTransition` 래퍼. 미지원·감소 모션은 즉시 교체. `::view-transition-*(glyph|face-status)`만 저자 키프레임.
- 글리프 축소: `animation-timeline: scroll(root block)` 0~80vh, scale 1→0.55. `@media (prefers-reduced-motion: no-preference)`와 `@supports` 안에 둬 Firefox·감소 모션은 고정 크기.
- 재질 없음. 이펙트 전부 끄고 JS를 꺼도 글리프·비교·시험대가 그대로 남는다(검증 참조).

## 하지 않기로 한 것

- 사진 2장(`metaltype.webp`·`inkstone.webp`)을 화면에서 뺐다 — 같은 생성 이미지를 두 번 싣던 자리였고 배정이 "글자가 이미지"다. 파일은 디스크에 남긴다.
- 상단 바·앵커 내비·sticky·backdrop-filter를 두지 않았다 — 한 장짜리 4화면 길이, 내비는 서체 탭 하나로 충분하다.
- 마루 부리·Pretendard를 UI 서체로 쓰지 않았다(6-6 하우스 룩). 표본으로만 남긴다.
- 가운뎃점 메타 문자열(`A · B`)을 가시 텍스트에서 없앴다. 시험대 캡션은 쉼표.
- 스크롤 리빌 없음. 눈썹 라벨 없음.

## 검증

- 자동(2026-10-06, apps/site): html-validate 0오류 · stylelint 통과 · no-hanja PASS · showcase-audit PASS 6/FAIL 0 · design-gate 충족 13/미검증 0/실패 0(static·visual·webkit 꺼짐) · 상호작용 스크립트 34/34(탭 키보드 패턴, 슬라이더·지연 로드, 기존 E2E 3단언, 200%+1.4.12 간격 재정의 가로 넘침 0, 감소 모션, 이펙트·JS 끔, 표제 마지막 줄 어절 ≥2) · 기존 `archive-showcases-e2e.mjs` font-foundry 14/14.
- 시각 루브릭(약한 축부터): R7 1(h1이 범용) · R9 1(390 글자 입력이 한 줄 독점) · R1 2 · R2 2 · R3 2 · R4 2 · R5 2 · R8 2 · R10 2 · R6 N/A — 16/18, 통과. 근거와 캡처 경로는 작업 노트.
- 대비: 본문 15.96:1, 보조 6.21:1(띠 위 5.62:1), 남색 면 위 글자 12.88:1.
- 미검증: WebKit 실렌더(게이트 webkit=false), 실기기 INP, Firefox 폴백은 코드 가드만 확인.

## 피드백 기록 · 보존 목록

- 보존: 같은 문장 22px/1.8 동일 폭 비교, 시험대 네 컨트롤과 리셋, 가상 고지 위치(가격 섹션 + 푸터).

## 변경 기록

- 2026-09-12 Round 4: 5:7 종이 소개면 + 적갈색 표본면, 마루 부리·Pretendard 비교 계약, 320·200% 확대 검사(옛 기록).
- 2026-10-02 레드팀 06: 헤더 정렬·가격 "예시" 표기 정리.
- 2026-10-06 재작업: 타이포 단독 히어로(거대 글리프 + 굵기 축), 서체 탭 내비, 큰 워드마크 푸터, Noto Serif KR 900/Noto Sans KR, #f1f2f4·#22235a·radius 0, View Transitions·scroll-driven, 사진 제거, og.png 추가. 이유: 19종 구성 수렴 해소(plan.md 배정).