글리프 디자인 규약

모든 글리프는 이 규약을 따라야 폰트로 컴파일된다. 규약 위반은 빌드 단계에서 조용히 사라지는 버그가 된다.

자모 조합 시스템이 구축된 콘셉트(천지인)에서는 개별 음절 SVG를 직접 그리거나 고치지 말 것. 자모 정의(JSON)를 수정하고 재생성하라 — hangul-composition 스킬의 "자모 조합 시스템" 섹션 참조. 이 문서의 SVG 규약은 신규 콘셉트 탐색·시스템이 없는 글리프(라틴 등)에 적용된다. 시스템 엔진의 출력도 이 규약을 따른다.

좌표계

한 파일 = 한 글리프. <svg viewBox="0 0 1000 1000">, y축은 아래로 증가 (SVG 표준)
베이스라인 y=880. 한글 몸통은 대략 x 60–940, y 60–880 안에 그린다
라틴: 캡하이트 y≈180, x-하이트 y≈420, 디센더 y≈880–1000 (g, p 등만 880 아래로)
컴파일 시 y' = 880 − y로 폰트 좌표(y-up)로 변환된다 — 디자이너는 신경 쓸 필요 없음

경로 규약 (위반 시 빌드에서 소실)

filled path만 사용한다. stroke 속성 금지. 이유: 폰트 글리프는 채워진 아웃라인만 존재한다. stroke로 그린 획은 컴파일 시 완전히 사라진다. 획은 반드시 두께를 가진 닫힌 도형으로 그린다.
최상위 <path> 요소만 사용한다. <rect> <circle> <g> transform 속성 <defs> <use> 금지 — 컴파일러가 path의 d 속성만 읽는다.
path 명령은 M L H V Q C A Z를 사용할 수 있다. 신뢰성을 위해 M L Q C Z를 권장한다.
겹치는 도형은 nonzero 규칙으로 합쳐진다. 속을 파려면(ㅇ·ㅁ의 카운터) 바깥 윤곽과 반대 방향으로 안쪽 윤곽을 그린다 (바깥 시계방향 → 안쪽 반시계방향).
fill="currentColor"를 지정한다 — 시안 페이지의 다크/라이트 테마 대응.

획 구성법

프리핸드 곡선을 즉흥으로 그리지 말고, 스켈레톤 → 아웃라인 순서로 작업한다:

획의 중심선(스켈레톤)을 좌표로 정의한다: 시작점, 끝점, 경유점
스펙의 획 굵기(예: 90)의 절반씩 양쪽으로 확장해 닫힌 도형을 만든다
수직획: 중심 x=c, 굵기 w → M {c-w/2} y1 L {c+w/2} y1 L {c+w/2} y2 L {c-w/2} y2 Z
곡선획은 Q/C로 바깥쪽·안쪽 윤곽을 각각 그려 닫는다

명시적 좌표 계산이 어림짐작보다 항상 낫다. 각 획의 좌표를 주석이 아닌 숫자로 확정하고 그려라.

시각 보정 원리 (수치보다 눈이 우선)

현상	보정
곡선·사선은 같은 크기여도 작아 보임	오버슈트: 기준선을 1.5~2.5% 넘겨 그림 (ㅇ·ㅅ 등)
수평획은 수직획과 같은 굵기여도 굵어 보임	수평획을 6~10% 가늘게
획이 많은 글자(ㅃ·겹받침)는 검게 뭉침	해당 글리프만 굵기 5~15% 축소 (밀도 보정)
획 교차부가 뭉쳐 보임	교차부에서 한쪽 획을 살짝 가늘게 (잉크트랩적 처리)

적용한 보정값은 manifest.json에 기록해 다른 디자이너가 같은 논리를 재사용하게 한다.

디자인 언어 스펙 포맷

콘셉트마다 concept.md에 아래 JSON을 포함한다. 모든 디자이너는 이 값을 공유 상수로 사용한다:

{
  "concept": "콘셉트명",
  "unitsPerEm": 1000,
  "strokeMain": 90,
  "strokeHorizontalRatio": 0.92,
  "contrast": 1.0,
  "terminals": "round | flat | cut | ...",
  "joins": "miter | round | 콘셉트 고유 규칙",
  "counters": "open | closed",
  "primitives": ["콘셉트를 구성하는 기본 도형/획 단위"],
  "rules": ["형태 규칙을 문장으로 — 예: 모든 획의 시작은 원호로 연다"],
  "unresolved": ["아직 규칙이 성립하지 않는 블록 유형/자모"]
}

시각 검증 (제출 전 권장)

좌표 검산만으로는 오독을 못 잡는다 (예: 브리지 위치가 다른 자모의 곁줄기로 읽히는 경우). 번들 스크립트로 렌더링해 눈으로 확인하라:

python3 .claude/skills/glyph-design/scripts/render_contactsheet.py _workspace/concepts/{콘셉트}/glyphs --out sheet.png

생성된 PNG를 Read 도구로 열어 각 글자가 의도한 음절로 읽히는지 확인한다.

자가 검증 체크리스트 (제출 전 필수)

viewBox="0 0 1000 1000"이고 최상위 path만 있는가
stroke 속성이 어디에도 없는가 (grep stroke *.svg로 확인)
모든 path가 Z로 닫혔는가
카운터(속공간)가 있는 글리프는 안팎 윤곽 방향이 반대인가
획 굵기가 스펙 ±5% 이내인가 (보정 적용분은 manifest에 기록했는가)
글리프가 슬롯 박스(slots.json 또는 기본값) 안에 있는가 (의도적 돌출은 manifest에 기록)

glyph-design

Installation

Summary

Stronger alternatives

Similar popular skills

Also in this package

Agent compatibility

Repository health

Skill metadata

Package contents

History

SKILL.md