# Font Specimen > 폰트 시안(스펙시멘) 페이지 제작 스킬. 글리프 SVG를 모아 피드백용 HTML 시안을 만들고 Artifact로 배포 — 콘셉트 소개, 대형 조판, 문장 조판, 크기 워터폴, 피드백 질문 설계. 시안/샘플/스펙시멘 제작, 시안 갱신, 피드백 페이지 요청 시 반드시 이 스킬을 사용할 것. - Skill: `revfactory/font-specimen` (Agent Skill, multi-file: 3 files) - Install (CLI): `npx skillmds@latest add revfactory/font-specimen` - Raw SKILL.md: https://api.skillmd.com/api/skills/revfactory/font-specimen/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: revfactory (https://skillmd.com/u/revfactory) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/revfactory/font-specimen --- # 폰트 시안 제작 시안의 목적은 감상이 아니라 **의사결정**이다. 사용자가 구체적으로 답할 수 있게 설계한다. ## 파일 규약 - 산출물: `_workspace/specimens/round-{NN}.html` (round-01, round-02, …) - Artifact 도구로 배포한다 (배포 전 artifact-design 스킬 로드). 같은 라운드의 수정은 같은 파일을 갱신해 같은 URL을 유지한다 - 페이지는 자기완결이어야 한다: 외부 리소스 금지, SVG는 전부 인라인 ## 번들 조립기 라운드 1에서 검증된 조립기를 재사용하라 (레이아웃 연속성 원칙의 구현체): - `scripts/build_specimen.py` — 콘셉트 카피 JSON + 템플릿 + `_workspace/concepts/*`의 SVG를 읽어 시안 HTML 생성. 새 라운드에서는 카피 JSON(`_workspace/specimens/round-{N}-copy.json`)과 출력 경로, 라운드 텍스트를 수정해 사용 - `assets/specimen_template.html` — 라운드 1 기준 레이아웃(팔레트: 한지/먹/쪽빛, 토큰 기반 다크/라이트). 라운드 간 레이아웃을 유지하려면 이 템플릿에서 출발할 것 ## TTF 임베드 시안 (빌드된 폰트가 있을 때 — 권장) TTF가 존재하면 SVG 인라인 대신 **서브셋 폰트를 data URI로 임베드**해 실제 폰트로 렌더링하라. 이유: 사용자가 설치하면 얻는 것과 동일한 렌더링(자간·베이스라인 포함)을 보여주며, 텍스트를 평문으로 쓰므로 페이지가 훨씬 가볍고 수정이 쉽다. ```bash # 시안에 등장하는 글자만 서브셋 (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개 이내 요약 3. **비교 표** (콘셉트가 2개 이상일 때): 같은 글자를 나란히 4. **누락·미해결 명시**: 이번 시안에 없는 블록 유형, 미해결 자모 — 몰래 빼지 않는다 5. **피드백 질문 블록**: 3~5개 ## 피드백 질문 설계 원칙 열린 질문("어때요?")은 분석 불가능한 답을 낳는다. 답이 다음 작업으로 바로 변환되는 질문을 만든다: - 선택형: "세 콘셉트 중 발전시킬 방향은? (복수 선택 가능, 섞기 제안도 환영)" - 축 지정형: "굵기는 지금 기준 더 굵게/유지/가늘게 중 어느 쪽이 콘셉트에 맞나요?" - 경계 확인형: "독창성을 위해 가독성을 어디까지 양보할 수 있나요 — 제목용이면 충분한가요, 본문까지 필요한가요?" ## 조판 규칙 - **콘셉트 비교 라운드에서는 모든 콘셉트에 동일 텍스트·동일 레이아웃을 적용한다.** 이유: 조판이 다르면 사용자는 폰트가 아니라 레이아웃에 반응한다. - 글리프 SVG는 `fill="currentColor"` 상태로 인라인 삽입, 크기는 CSS로 제어: ```html … ``` ```css .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 덕에 글리프는 자동 대응 - 누락 글리프는 회색 점선 박스 `□`로 표시 ## 라운드 간 연속성 - 이전 라운드 시안이 있으면 레이아웃을 유지한 채 글리프만 갱신한다 — 라운드 간 비교 가능성이 피드백 품질을 좌우한다 - "이전 라운드 대비 달라진 점" 섹션을 추가하고, 반영한 피드백 항목을 인용한다 (사용자가 자기 피드백이 반영됐는지 즉시 확인 가능)