design.md — 한성활자연구소

브리프

무엇을: 가상 서체 기획을 정직하게 밝히면서, 실제 마루 부리와 Pretendard로 문장 조판의 차이를 즉시 체험하는 한국어 타입 스튜디오.
누구에게: 활자를 고르거나 본문 조판 값을 결정해야 하는 편집자·디자이너·개발자.
제약: ko-KR 한국어, 밝은 아이보리·검정 본문·버밀리언 정체성 유지. 가상 서체를 판매하거나 가짜 스펙을 제시하지 않으며, 본문은 최대 42rem. 320px부터 가로 넘침이 없어야 한다.

이전 판은 한 글자 표본과 실제 렌더 서체의 관계가 멀고, 11,172자·1000 UPM 같은 가상 수치가 체험보다 앞섰다. 실제 사용자가 판단할 수 있는 것은 문장 안의 폭·획·간격이므로 그 역할을 첫 화면으로 올렸다.

출처 ID · 슬롯	출처	관찰	채택한 원리와 검증
`KLIM-FONTS` · R1 구조	https://klim.co.nz/fonts/	Display, Text, Narrow, Condensed처럼 같은 계열의 역할과 폭을 나란히 제시한다.	글꼴을 사양 표가 아니라 읽는 역할로 비교한다. 같은 문장을 두 역할로 렌더해 비교한다.
`CHIPPERFIELD-PROJECTS` · R2 톤	https://davidchipperfield.com/projects	프로젝트명·연도·필터가 정렬선과 짧은 메타 안에서 읽힌다.	큰 표본 아래에 기준선, 짧은 메타, 한 가지 행동을 정렬한다. 1440px 첫 화면에서 표본·상태·CTA의 순서를 확인한다.
`SANDOLL-TYPELAB` · R3 디테일	https://typelab.sandoll.co.kr/experience	권장규격과 맞춤규격, 한글 범위를 선택하며 표본을 실제 작업으로 연결한다.	버튼과 조판 슬라이더가 즉시 보이는 결과를 바꾸게 한다. 키보드·range·리셋으로 값을 바꾸어 검증한다.
`WCAG-READ` · 접근성	200% 텍스트 확대와 320 CSS px reflow를 핵심 화면에서 별도로 시험한다.	큰 활자 장면은 접근성 제목을 대신하지 않는다.	320px 200% 텍스트에서 문서 폭 320px, h1 80px을 기록하고 장식 표본은 `aria-hidden`으로 둔다.

컨셉: 문장이 보여 주는 활자의 차이.
프리셋: editorial — 읽는 시간이 주제이므로 따뜻한 바탕, 제한된 색, 좁은 본문 폭, 세리프 표제를 쓴다.
감수한 리스크: 이미지를 히어로에서 빼고 버밀리언 세 글자 표본 하나를 가장 큰 장면으로 사용한다. 제목과 설명은 별도 DOM으로 남겨 접근성 판단을 표본에 기대지 않는다.

폰트: 마루 부리는 제목·조판 시험대·표본의 제목 상태, Pretendard는 본문·기본 표본 상태. 두 폰트 모두 CDN 웹폰트이며 font-synthesis-weight: none으로 합성 굵기를 막는다.
색: --surface #f5f1e8, --ink #26221d, --accent #a63d2f. 버밀리언은 표본과 행동에만 쓴다.
크기: h1 clamp(40px, 1.3rem + 4.2vw, 80px), 표본 clamp(96px, 17.5vw, 260px), 본문 폭 최대 42rem.
레이아웃: 데스크톱 표본 레일 최대 1700px, 일반 콘텐츠 1216px. 모바일은 최소 20px 인셋을 지키고 표본은 한 줄에 남는다.
상호작용: native 버튼 두 개의 aria-pressed가 표본 폰트와 상태 문구를 바꾼다. 기존의 크기·자간·행간 range와 리셋은 유지한다.
성능: 새 JavaScript 라이브러리·이미지·애니메이션 없음. 초기 체험은 인라인 DOM 코드만 사용한다. 활자 케이스의 두 장면은 생성 이미지임을 캡션으로 밝힌다.

outputs/design-expertise-20260912/font/font-redesign-e2e.mjs가 독립 정적 서버에서 320·390·768·1440·1920·2560px를 열었다. 각 폭의 문서 scrollWidth는 뷰포트 폭과 같고, 내비는 한 줄, 버튼은 최소 44px이었다.
320px에서 200% 텍스트 확대 후 문서 폭은 320px, 서술형 h1은 80px으로 실제 확대됐다. 장식 표본은 aria-hidden="true"로 남았다.
prefers-reduced-motion: reduce에서 scroll-behavior는 auto였다. 키보드 Space로 제목 버튼을 선택하면 aria-pressed와 상태 문구가 마루 부리로 바뀌었다.
세 range는 24px·0.05em·2.2를 표본과 캡션에 적용했고, 리셋은 17px·0em·1.8을 둘 다 복원했다.
지연 이미지 두 장은 scrollIntoView 뒤 decode()를 통과했고, metaltype.webp 응답은 HTTP 200·naturalWidth 900이었다. font-foundry-1440-first.png, font-foundry-390-first.png, 전체 캡처와 JSON 보고서는 같은 outputs 폴더에 있다.