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% 확대와 `aria-hidden` 표본을 관찰했다. Round 4 현재 결과는 최종 proof를 참조한다.

방향

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

토큰과 구현

폰트: 마루 부리는 공식 로컬 WOFF2 Regular 400·SemiBold 600으로 제목·조판 시험대·표본의 제목 상태를 맡고, Pretendard CDN은 본문·기본 표본 상태를 맡는다. font-synthesis-weight: none으로 합성 굵기를 막는다.
색: --surface #f5f1e8, --ink #26221d, --accent #a63d2f. 버밀리언은 표본과 행동에만 쓴다.
크기: h1 clamp(40px, 1.6rem + 3vw, 60px), 표본 clamp(96px, 11vw, 180px), 본문 폭 최대 42rem.
레이아웃: 데스크톱 첫 화면은 5:7 두 칼럼으로, 종이색 소개면과 적갈색 표본면을 맞물린다. 900px 미만에서는 소개면 다음에 표본면을 한 칼럼으로 둔다.
상호작용: native 버튼 두 개의 aria-pressed가 표본 폰트와 상태 문구를 바꾼다. 조판 시험대는 실제 마루 부리·Pretendard 선택과 크기·자간·행간 range를 제공하고, 리셋은 네 값을 함께 복원한다.
성능: 새 JavaScript 라이브러리·이미지·애니메이션 없음. 초기 체험은 인라인 DOM 코드만 사용한다. 활자 케이스의 두 장면은 생성 이미지임을 캡션으로 밝힌다.

의도적으로 하지 않은 것

마루 부리·Pretendard를 가상의 한성 서체로 속여 판매하지 않는다. 가상 기획과 실제 구현 폰트를 표본 바로 위와 푸터에 밝힌다.
인장·붓글씨·세로쓰기·종이결처럼 한국 활자를 이국화하는 장식을 사용하지 않는다. 활자의 형태와 조판만으로 분위기를 만든다.
움직임으로 활자의 차이를 설명하지 않는다. reduced motion에서도 같은 표본과 모든 조작이 남는다.

이전 판 검증 기록 · 2026-09-12

아래는 이전 판에서 남긴 역사적 관찰이며 Round 4의 현재 통과 결과가 아니다. Round 4 결과는 최종 proof를 참조한다.

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 폴더에 있다.

Round 4 판단표 · 2026-09-12

축	참고 범위와 현재 질문	채택과 기각 조건	구현
구도	Arnheim·Hofmann의 균형·대비·구도 관점을 참고해 소개와 표본의 관계, 5:7 대안, 작은 폭에서의 순서 유지를 살핀다.	소개와 표본의 관계가 읽히고 작은 폭에서 순서가 유지되면 채택한다. CTA가 밀리면 기각한다.	`--container-wide`, `--pad-wide`
타입	Ruder의 구조·리듬·비례와 Wallace의 개인·성능·선호 분리 범위를 참고해 같은 문장·22px·1.8·동일 폭 두 칼럼과 가족 선택을 살핀다.	조절과 reset이 깨지지 않을 때만 채택한다. 읽기 성능의 보편 효과는 주장하지 않는다.	`--font-display`, `--font-body`
색	Albers의 색 맥락 관점을 참고해 작은 accent와 큰 stage의 관계를 비교한다.	역할 경계와 대비가 유지되고 상태가 묻히지 않을 때 채택한다.	`--stage-ink`, `--accent`

Round 4 실증 기록 · 2026-09-12

방향과 원리: 한성활자연구소의 종이색·적갈색·금속 활자 이미지는 유지하고, 첫 화면을 5:7 종이 소개면과 적갈색 표본면으로 재배치했다. 표본면의 큰 흰 글자, 기준선, 선택 상태는 같은 시선 안에서 글꼴 전환을 읽게 한다.
비교 조건: Ruder의 구조·리듬·비례를 현재 화면의 검증 질문으로만 번역했다. 비교 두 칼럼은 같은 원문, 동일 폭, 기본 22px(1.375rem)와 1.8 행간을 공유하며 글꼴 가족만 다르다. 서체마다 글자가 보이는 크기는 다를 수 있다는 안내를 함께 둔다.
채택과 측정 한계: 조판 시험대는 실제 웹폰트 선택을 문장에 적용하고 네 제어값을 리셋한다. 화면 비교는 형태·폭·줄바꿈의 관찰을 돕지만, 읽기 속도·이해도 향상은 사용자 과업 측정 전까지 주장하지 않는다. 역사처럼 보일 수 있는 견본 문단은 견본글임을 명시했다.
동일 브리프 보존: 가상 기획·예시 가격·라이선스 안내, 네 개의 내비와 앵커, 기존 CTA, 금속 이미지와 생성 이미지 표기, 버튼의 aria-pressed·상태 문구, 기존 조판 range와 reset 기능을 보존한다.

Round 4 최종 판정

2026-09-12 원본 담당자 판정: 수용. 소개와 표본의 면 구분, 표본과 제어의 군집, 같은 조건의 문장 비교를 실제 데스크톱·모바일 캡처에서 확인했다. 작은 폭의 확대에서 발견한 내비·가격·제목의 넘침과 앵커 가림을 수정했다.

outputs/design-expertise-20260912/round4/browser-proof/root-final-v3/feature-check-results.json: 수정본 320·390·1440·1920px 4개 행 통과, 실패 0. 글꼴 실제 로딩, 키보드 선택·range·초기화, 앵커, 감소 모션, 이미지 decode, 문서 가로 넘침을 검사했다. 확대 검사는 루트 글자 크기 200% 및 자간 0.12em·행간 2의 조합이며, 브라우저 확대나 WCAG 전체 적합성 인증을 대신하지 않는다. 표본면의 설명·상태·선택/비선택 버튼 텍스트 대비는 6.07:1이었다. 사용자 읽기 속도·이해도·전환은 미측정이다.

2026-09-12 전체 쇼케이스 점검

기존 글꼴 선택·range·reset, 22px·1.8·동일 폭 비교 계약과 캡션·앵커 구도를 유지했다. 로컬 MaruBuri 경로는 fonts.css?v=20260912all로 명시했다.
verify-final 18개 묶음은 16개가 즉시 통과했다. 전체 묶음의 invariant·visual 검사는 Gaon·Dure를 대상으로 하며, 나머지 2개는 수정 뒤 release 독립 재실행에서 ALL PASS·ALL MATCH였다.
root는 28개 모바일, 21개 데스크톱, 7개 하위 경로와 30개 앱 상태를 직접 검토해 수용했다. stress 112건은 hard failure 0이며, 가로 넘침 4건은 targeted fix 뒤 390px 재측정에서 0이다.
이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.

9.6 KiB Raw Blame History