콘텐츠로 건너뛰기
+

사용 방법

텍스트 윤곽선, SVG 글꼴 빌드, 원본 글꼴 편집, 서브셋 생성, 변환 및 웹 패키징을 위한 실용적인 작업 흐름입니다.

1. 글꼴 가져오기

  • 글꼴 파일을 기본 창에 드래그 앤 드롭하세요.
  • 또는 File -> Import Font File(파일 → 글꼴 파일 가져오기)을 사용하세요.
  • 글리프 탐색용 가져오기 지원 형식: ttf / woff / woff2.
  • 새로 가져올 때마다 현재 세션 데이터를 대체합니다(한 세션에서 여러 글꼴을 병합하지 않음).

2. 글리프 탐색과 필터링

  • 왼쪽 사이드바에서 Unicode 블록별로 필터링하세요(기본 라틴 문자, CJK, 이모지 등).
  • 검색으로 글리프 이름이나 Unicode 텍스트를 필터링하세요.
  • 선택 단축키:
    • Command + Click: 떨어진 항목 다중 선택
    • Shift + Click: 범위 선택
    • Command + A: 전체 선택
    • Delete: 현재 데이터 집합에서 선택한 글리프 제거
    • Space: 선택한 글리프 미리보기

3. 메타데이터 확인

오른쪽 검사기에는 세 개의 탭이 있습니다.

  • Font: 글꼴 메타데이터, OpenType 레이아웃/문자 체계/기능 요약, 가변 글꼴 감지.
  • Selection: Unicode, HTML 엔티티, CSS/Swift 표기법, UTF 인코딩, 메트릭 등 글리프별 데이터.
  • Export: 글리프 에셋 내보내기, 텍스트를 SVG로 변환, 서브셋 생성 및 웹 패키지 작업.

4. 텍스트를 SVG 윤곽선으로 변환

글꼴을 불러온 뒤 Export 탭에서 Text to SVG를 여세요.

  • 단어, 구절 또는 여러 줄의 텍스트를 입력하세요.
  • 글꼴 크기, 사용 가능한 경우 가변 굵기, 자간, 줄 높이, 줄바꿈 너비, 정렬, 안쪽 여백 및 채우기 색상을 조절하세요.
  • 불러온 글꼴을 충실히 유지하려면 대체 글꼴을 비활성화하세요.
  • SVG를 클립보드에 복사하거나 독립된 .svg 파일로 저장하세요.
  • 내보낸 SVG에는 윤곽선이 포함되므로 SVG를 사용하는 곳에 글꼴을 설치할 필요가 없습니다.

5. SVG 그래픽으로 글꼴 만들기

앱 메뉴에서 Font Builder를 여세요.

  • 윤곽선 SVG 파일을 놓아 새 글꼴을 만드세요.
  • 글리프 이름과 Unicode 값을 지정하세요.
  • 글리프를 추가하거나 기존 Unicode 글리프를 교체하려면 정적 TrueType 기반 원본 글꼴을 가져오세요.
  • Browse Glyphs로 원본 글꼴에서 교체 대상을 선택하세요.
  • 그래픽을 그리기 전에 기준선과 경계 안내선이 있는 SVG 템플릿을 다운로드하세요.
  • 내보내기 전에 Preflight Check를 실행하세요.
  • TTF, WOFF, WOFF2, CSS, 데모 HTML, 메타데이터 또는 전체 웹 패키지를 내보내세요.

Font Builder는 윤곽선으로 변환된 정적 SVG 그래픽을 요구합니다. 가져오기 전에 텍스트를 윤곽선으로 변환하세요. 편집 가능한 SVG 텍스트, 래스터 이미지, 마스크, 필터, 클리핑, 스크립트, 애니메이션 및 외부 리소스는 임의로 변경하지 않고 거부합니다.

6. 글꼴 빌더 프로젝트 저장과 다시 열기

Font Builder 작업을 나중에 계속하려면 .webfontproject를 사용하세요.

  • 프로젝트 파일은 SVG 글리프, 빌드 설정, 출력 옵션, 교체 대상을 저장하며 원본 글꼴을 사용하면 해당 데이터도 포함합니다.
  • 프로젝트를 열면 패키지에서 글리프 집합과 원본 글꼴 데이터를 복원합니다.
  • 교체 대상이 설정되어 있었다면 저장된 원본 글꼴 데이터에서 복원합니다.

7. 글리프 에셋 내보내기(SVG / PNG / PDF)

  • 단일 글리프 및 다중 선택 일괄 내보내기를 지원합니다.
  • 내보내기 대화상자에 크기와 색상 조절 항목이 있습니다.
  • 출력 파일 이름은 글리프 이름과 크기 접미사를 기준으로 정해집니다.

8. 글꼴 서브셋 생성

원본 모드

  • Current Selection: 선택한 글리프를 직접 사용합니다.
  • Text Input: 텍스트를 붙여 넣거나 .txt를 가져온 뒤 불러온 글꼴에서 사용 가능한 문자를 찾습니다.

출력 형식

  • WOFF2, WOFF, TTF를 원하는 조합으로 선택하세요.

OpenType 제어

  • 레이아웃 정책:
    • 모든 레이아웃 기능 유지
    • 필수 위치 정보만 유지
    • 모든 레이아웃 테이블 제거
  • 기능 태그 필터:
    • 선택한 태그만 유지
    • 선택한 태그 제거
    • 또는 필터링을 비활성화하고 모든 사용 가능한 태그 유지

검증과 미리보기

  • Subset Preview는 글리프 수, 예상 파일 크기, 누락 문자 수를 표시합니다.
  • 파일을 쓰기 전에 검증합니다(디코딩 검사, 필수 테이블, cmap 범위 및 관련 경고/오류).

9. 웹 패키지 생성

Generate Web Package는 다음을 만듭니다.

  • WOFF2 + WOFF가 포함된 fonts/
  • @font-face와 unicode-range가 포함된 CSS 파일
  • 미리보기 및 문자 매핑 참조용 demo.html

Font Builder에도 아이콘 글꼴 형태의 패키지를 위한 웹 패키지 내보내기가 있으며 CSS, 데모 HTML, 메타데이터, 글리프 미리보기 및 HTML 코드 조각을 포함합니다.

10. 글꼴 형식 변환

  • Single Font Conversion...: 파일 하나를 변환합니다.
  • Batch Font Conversion...: 대기열 기반으로 변환합니다.
  • 변환 입력 지원: ttf / otf / woff / woff2.
  • 변환 대상 지원: WOFF / WOFF2 / TTF/OTF (Auto).

11. 현재 제한 사항

  • 한 번에 원본 글꼴 하나의 서브셋만 생성합니다.
  • 서브셋 출력은 현재 TrueType 윤곽선 글꼴만 지원합니다.
  • Font Builder의 원본 글꼴 편집은 정적 TrueType 기반 글꼴을 지원합니다.
  • Font Builder의 SVG 입력은 윤곽선으로 변환된 정적 그래픽이어야 합니다.
  • 불러온 글꼴이 가변 굵기 축을 제공하면 텍스트를 SVG로 변환할 때 SVG 윤곽선 내보내기에 사용할 수 있습니다.