폰트 시안 제작

시안의 목적은 감상이 아니라 의사결정이다. 사용자가 구체적으로 답할 수 있게 설계한다.

파일 규약

• 산출물: _workspace/specimens/round-{NN}.html (round-01, round-02, …)
• Artifact 도구로 배포한다 (배포 전 artifact-design 스킬 로드). 같은 라운드의 수정은 같은 파일을 갱신해 같은 URL을 유지한다
• 페이지는 자기완결이어야 한다: 외부 리소스 금지, SVG는 전부 인라인

번들 조립기

라운드 1에서 검증된 조립기를 재사용하라 (레이아웃 연속성 원칙의 구현체):

• scripts/buildspecimen.py — 콘셉트 카피 JSON + 템플릿 + workspace/concepts/*의 SVG를 읽어 시안 HTML 생성. 새 라운드에서는 카피 JSON(_workspace/specimens/round-{N}-copy.json)과 출력 경로, 라운드 텍스트를 수정해 사용
• assets/specimen_template.html — 라운드 1 기준 레이아웃(팔레트: 한지/먹/쪽빛, 토큰 기반 다크/라이트). 라운드 간 레이아웃을 유지하려면 이 템플릿에서 출발할 것

TTF 임베드 시안 (빌드된 폰트가 있을 때 — 권장)

TTF가 존재하면 SVG 인라인 대신 서브셋 폰트를 data URI로 임베드해 실제 폰트로 렌더링하라. 이유: 사용자가 설치하면 얻는 것과 동일한 렌더링(자간·베이스라인 포함)을 보여주며, 텍스트를 평문으로 쓰므로 페이지가 훨씬 가볍고 수정이 쉽다.

# 시안에 등장하는 글자만 서브셋 (11,172자 2.4MB → 백여 자 ~18KB)
python3 -m fontTools.subset {폰트}.ttf --text-file=시안글자.txt --output-file=subset.ttf
base64 -i subset.ttf   # → @font-face src: url(data:font/ttf;base64,...) format('truetype')

라운드 4 구현 예: _workspace/specimens/round-04.html. SVG 인라인 방식(아래)은 폰트 빌드 전 초기 라운드에 사용.

시안 구성 (순서대로)

1. 헤더: 프로젝트명, 라운드 번호, 날짜, 이번 라운드에서 결정할 것 한 줄
2. 콘셉트 섹션 (콘셉트별 반복):

- 콘셉트명 + 형태 철학 1~2문장 - 대표어 대형 조판 (예: "한글" 을 화면 폭 크게) - 음절 그리드 (샘플 세트 전체, 블록 유형 라벨 표기) - 문장 조판 (작은 크기 — 판독성 확인용) - 디자인 언어 핵심 규칙 3개 이내 요약

1. 비교 표 (콘셉트가 2개 이상일 때): 같은 글자를 나란히
2. 누락·미해결 명시: 이번 시안에 없는 블록 유형, 미해결 자모 — 몰래 빼지 않는다
3. 피드백 질문 블록: 3~5개

피드백 질문 설계 원칙

열린 질문("어때요?")은 분석 불가능한 답을 낳는다. 답이 다음 작업으로 바로 변환되는 질문을 만든다:

• 선택형: "세 콘셉트 중 발전시킬 방향은? (복수 선택 가능, 섞기 제안도 환영)"
• 축 지정형: "굵기는 지금 기준 더 굵게/유지/가늘게 중 어느 쪽이 콘셉트에 맞나요?"
• 경계 확인형: "독창성을 위해 가독성을 어디까지 양보할 수 있나요 — 제목용이면 충분한가요, 본문까지 필요한가요?"

조판 규칙

• 콘셉트 비교 라운드에서는 모든 콘셉트에 동일 텍스트·동일 레이아웃을 적용한다. 이유: 조판이 다르면 사용자는 폰트가 아니라 레이아웃에 반응한다.
• 글리프 SVG는 fill="currentColor" 상태로 인라인 삽입, 크기는 CSS로 제어:

<span class="glyph" style="width:4rem"><svg viewBox="0 0 1000 1000">…</svg></span>

.glyph { display:inline-block; }
.glyph svg { width:100%; height:auto; display:block; }
.word { display:flex; gap:0; }  /* 음절 나열 = 단어. 자간은 gap으로 실험 */

• 크기 워터폴: 같은 단어를 96/48/24/16px 급으로 반복 — 어느 크기까지 판독되는지 확인
• 다크/라이트 모두 지원: @media (prefers-color-scheme: dark) + :root[data-theme] 오버라이드. currentColor 덕에 글리프는 자동 대응
• 누락 글리프는 회색 점선 박스 □로 표시

라운드 간 연속성

• 이전 라운드 시안이 있으면 레이아웃을 유지한 채 글리프만 갱신한다 — 라운드 간 비교 가능성이 피드백 품질을 좌우한다
• "이전 라운드 대비 달라진 점" 섹션을 추가하고, 반영한 피드백 항목을 인용한다 (사용자가 자기 피드백이 반영됐는지 즉시 확인 가능)