revfactory 폰트 시안 제작
시안의 목적은 감상이 아니라 의사결정이다. 사용자가 구체적으로 답할 수 있게 설계한다.
파일 규약
- 산출물:
_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로 임베드해 실제 폰트로 렌더링하라. 이유: 사용자가 설치하면 얻는 것과 동일한 렌더링(자간·베이스라인 포함)을 보여주며, 텍스트를 평문으로 쓰므로 페이지가 훨씬 가볍고 수정이 쉽다.
# 시안에 등장하는 글자만 서브셋 (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문장
- 대표어 대형 조판 (예: "한글" 을 화면 폭 크게)
- 음절 그리드 (샘플 세트 전체, 블록 유형 라벨 표기)
- 문장 조판 (작은 크기 — 판독성 확인용)
- 디자인 언어 핵심 규칙 3개 이내 요약
- 비교 표 (콘셉트가 2개 이상일 때): 같은 글자를 나란히
- 누락·미해결 명시: 이번 시안에 없는 블록 유형, 미해결 자모 — 몰래 빼지 않는다
- 피드백 질문 블록: 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 덕에 글리프는 자동 대응 - 누락 글리프는 회색 점선 박스
□로 표시
라운드 간 연속성
- 이전 라운드 시안이 있으면 레이아웃을 유지한 채 글리프만 갱신한다 — 라운드 간 비교 가능성이 피드백 품질을 좌우한다
- "이전 라운드 대비 달라진 점" 섹션을 추가하고, 반영한 피드백 항목을 인용한다 (사용자가 자기 피드백이 반영됐는지 즉시 확인 가능)