손글씨 폰트 제작기

 (kokorobot.ca)
3P by GN⁺ | ★ favorite | 댓글 1개
  • 만화 hakum의 손글씨 텍스트가 페이지마다 크기와 가독성이 흔들리자, 기존 폰트 대신 자신의 필체를 TTF 폰트로 만들기로 함
  • 펜 태블릿으로 쓴 디지털 필체보다 종이에 쓴 글씨를 스캔한 두 번째 시도가 더 자연스럽고 유기적으로 보였음
  • 제작 범위는 A-Z, a-z, 숫자 0-9, 기본 문장부호로 제한됐으며 굵게·이탤릭·합자 같은 확장 기능은 목표에서 제외됨
  • Gimp로 스캔 이미지를 정리하고 PNG로 나눈 뒤, FontForge에서 글리프 윤곽, 좌우 여백, 커닝을 조정하는 흐름으로 진행됨
  • Autotrace와 내보내기 과정에서는 missing points at extrema, self intersecting 같은 검증 문제가 생길 수 있어 손글씨 폰트는 후처리가 많이 필요함

손글씨를 폰트로 바꾼 이유

  • 만화 hakum의 텍스트를 이전에는 펜 태블릿으로 직접 디지털 작성했음
  • 결과물은 괜찮았지만 한 페이지 안에서도 글자 크기가 자주 커지거나 작아져 가독성이 흔들릴 때가 있었음
  • 기존 폰트를 쓰고 싶지 않았기 때문에 자신의 손글씨를 기반으로 폰트를 만들기로 함
  • 목표는 웹 게시용 TTF 폰트였고, 제한된 문자 집합만 포함함
    • 굵게와 이탤릭은 만들지 않음
    • 폰트 제작과 FontForge 사용은 처음이라 더 나은 방법이 있을 수 있음

두 번의 시도와 글꼴 기본 용어

  • 첫 번째 폰트는 펜 태블릿으로 쓴 디지털 손글씨를 기반으로 만들었음
  • 두 번째 폰트는 종이에 쓴 글씨를 스캔한 이미지로 만들었고, 종이 위 글씨가 덜 정밀해 더 유기적이고 자연스럽게 보였음
  • 폰트를 만들며 글꼴 구조 용어를 익혔고, 각 요소의 기능을 알면 더 나은 디자인 선택과 기능적인 폰트 제작에 도움이 됨
    • Ascender: 소문자에서 x-height 위로 올라가는 부분
    • Baseline: 대부분의 글자가 놓이고 descender가 아래로 내려가는 기준선
    • Cap Height: 대부분의 대문자 높이를 나타내는 선
    • Descender: p, q처럼 baseline 아래로 내려가는 부분
    • X-Height: 소문자의 baseline과 mean line 사이 거리

스캔 이미지와 Gimp 정리

  • 제작 대상은 대문자 A-Z, 소문자 a-z, 숫자 0-9, 쉼표·느낌표·물음표 같은 기본 문장부호였음
  • 처음에는 스케치북에 baseline, cap height, x-height, descender 기준선을 연필로 긋고 글자를 그렸음
  • 기준선 사이에 글자를 그리면 너무 뻣뻣해져, 이후에는 "The quick brown dog jumps over the lazy fox" 문장을 대문자와 소문자로 여러 번 씀
    • 이 문장은 a-z에 필요한 모든 문자를 포함함
    • 문장으로 쓸 때 글자를 지나치게 의식하지 않아 더 나은 형태가 나왔음
    • 격자 위에 그릴 때는 제약만 신경 쓰게 됨
  • 가장 잘 쓴 문장을 골라 폰트 제작에 사용했고, 일부는 격자에 그린 글자도 활용함
  • 이 방식 때문에 이후 각 문자의 cap-height, x-height, descender를 디지털로 맞춰야 했음
  • 스캔한 글자 이미지는 Gimp에서 Color > Threshold를 적용해 회색을 제거함
  • 연필과 종이의 특성, 격자를 쓰지 않은 점 때문에 Gimp의 연필 도구로 글자 결함을 수정함
    • Tool Options에서 dynamics를 모두 끄고 깨끗한 선을 얻음
  • 정리한 글자는 새 Gimp 문서에 복사해 모았고, 문서 크기는 가장 크고 넓은 글자인 대문자 M을 수용할 수 있게 잡음
  • 이 단계에서 선 굵기가 너무 많이 달라지지 않는지 확인함
  • 모든 글자를 각각 PNG로 프로젝트 폴더에 내보냄

FontForge에서 글리프 만들기

  • FontForge는 Linux에서 동작하고 주변 사람들이 추천했기 때문에 선택했으며, 사용 경험은 좋았음
  • 새 프로젝트를 만들면 Font View Window가 열리고, 폰트의 모든 글리프 슬롯이 표 형태로 표시됨
  • Element > Font Info에서 폰트 정보를 입력하고, PS Names 아래에 폰트 이름을 추가함
  • TTF로 내보내려면 같은 창의 General에서 Em size를 1024로 바꿈
    • TrueType 폰트의 UPM은 관례적으로 1024 또는 2048 같은 2의 거듭제곱을 사용함
    • OTF 폰트는 요구사항이 다름
    • 과거 금속 활자에서 각 글자는 일정한 높이를 맞추기 위해 자체 공간 컨테이너에 들어갔고, 이 활자 조각의 높이가 ‘em’으로 불림
  • Font View에서 글리프를 더블클릭하면 Character View가 열림
    • 여기에서 글리프를 그리거나 편집함
    • 탭 인터페이스로 하나씩 보거나, 준비한 텍스트 파일을 통해 단어를 나란히 확인할 수 있음
  • 왼쪽 아래 레이어 목록에서 Back 레이어를 선택한 뒤 File > Import로 해당 글자의 PNG를 불러옴
  • 이후 두 가지 방식 중 하나로 글리프 윤곽을 만듦
    • 직접 윤곽을 그림
    • Fore 레이어를 선택하고 Select > Autotrace로 자동 윤곽을 생성함
  • Autotrace는 배경 이미지를 참조해 제어점과 베지어 곡선이 포함된 윤곽을 만들지만, 점이 너무 많거나 extrema 누락 문제가 생길 수 있음
  • 닫힌 형태가 만들어지면 해당 글리프가 다른 창에도 표시됨

좌우 여백과 미리보기

  • 글리프마다 왼쪽과 오른쪽 side bearing을 조정해 최종 글리프 폭을 정함
  • 모든 글리프를 자동으로 가운데 맞추려면 Metrics > Auto Width를 사용함
  • 모든 글리프를 폭 안에서 가운데에 두려면 Metrics > Center In Width를 사용함
  • 윤곽을 고칠 때는 참조 레이어를 꺼두면 도움이 됨
  • 글리프를 다시 시작하려면 Font Window에서 원하는 글리프를 선택한 뒤 Edit > Clear를 사용함
  • 참조 레이어만 지우려면 Edit > Clear Background를 사용함
  • Character View의 작업 캔버스 위 텍스트 필드에서 현재 글자 뒤에 단어나 임의 문자를 입력하면 글자들이 서로 옆에 있을 때의 모습을 미리 볼 수 있음
  • 이 과정을 모든 글리프에 반복해야 하며, 특히 Space 글리프의 좌우 side bearing을 조정하지 않으면 단어 사이 공간이 너무 커짐

커닝 설정

  • 커닝은 글자가 읽기 좋게 보이도록 문자 사이 간격을 조정하는 과정임
  • Font Window에서 Element > Font Info로 이동한 뒤 Lookups의 GPOS 탭에서 Add Lookup을 누름
  • Type 드롭다운에서 Pair Position (Kerning)을 선택함
  • Feature 열에서 New 옆 화살표를 눌러 Kern Horizontal Kerning을 선택하고 확인함
  • 새로 만든 GPOS 항목을 선택한 뒤 Add Subtable을 누르고 기본 이름을 그대로 둔 채 확인함
  • 커닝할 글자는 양쪽 표에서 모두 드래그해 선택함
    • 대문자와 소문자를 모두 선택해야 함
    • 한 표에서 두 집합을 모두 선택하려면 Shift를 사용함
  • pairings를 클릭하면 글리프 쌍의 확대 버전이 창 아래쪽에 표시됨
  • 두 번째 글리프를 드래그해 첫 번째 글리프에 더 가깝게 또는 멀게 배치하면서 모든 글리프 조합이 잘 보이도록 조정함

테스트와 내보내기 검증

  • FontForge 안에서 폰트와 커닝을 테스트하려면 File > Print를 사용함
  • 기본 텍스트는 가능한 모든 조합을 보여주지 않으므로 직접 텍스트를 추가할 수 있음
  • kern_pairings.txt는 모든 커닝 조합을 포함하며, 테스트 화면에 붙여 넣어 사용할 수 있음

  • 내보내기 중 만날 수 있는 문제

    • File > Generate Fonts로 내보낼 때 FontForge가 일부 문자를 검토 대상으로 표시할 수 있음
    • Non-integral coordinates는 글리프 윤곽의 한 점 또는 여러 점 위치가 2.25처럼 소수 성분을 가진 경우임
    • 문제 글리프를 선택하고 Element > Validation > Find Problems에서 "non-integral coordinates"를 체크한 뒤 fix를 반복함
    • 정밀도에 크게 의존하지 않는 손글씨 폰트에서는 아주 가까운 정수 좌표로 이동해도 큰 변화가 없을 수 있음
    • Missing points at extrema는 곡선의 제어점이 곡선을 경계 바깥으로 밀어내는 상황임
    • 곡선의 가장 높은 지점이나 극단 지점이 노란 점이 되도록 제어점을 조정해야 함
    • Element > Add Extrema가 도움이 될 수 있지만 글리프를 왜곡하거나 non-integral coordinates 문제를 더 만들 수 있음
    • 이 오류가 로그에 있어도 폰트 생성은 가능했지만, 폰트에 미묘하고 성가신 왜곡이 생길 수 있음
    • 손글씨 폰트가 지저분하거나 Autotrace를 사용한 경우 extrema 문제가 생길 수 있음
    • Self intersecting은 글리프 윤곽이 스스로 겹치는 상황임
    • 모든 선을 확인해 겹침을 제거해야 함

TTF 선택과 설치

  • 사용 목적에는 TTF(TrueType Font) 로 충분했음
  • OTF는 많은 글리프를 저장할 계획이 없고, 굵게·이탤릭을 별도 스타일로 넣고 싶지 않으며, 합자가 필요하지 않아 불필요했음
  • 폰트가 쓰일 콘텐츠는 웹에 게시되며, TTF는 이 목적에 적합함
  • Font View의 모든 글리프로 폰트를 생성하려면 File > Generate Fonts를 사용함
  • 폰트 이름 아래 드롭다운에서 출력 형식으로 TTF를 선택하고 확인하면 프로젝트 폴더에 폰트가 저장됨
  • 생성한 폰트는 시스템의 폰트 저장 위치로 옮기면 됨
  • 참고 자료와 사용 예시

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • FontForge 개요가 좋았고, 예전에 나도 조금 만져본 적 있음
    좀 투박하긴 하지만 상용 경쟁 제품들이 훨씬 나을지도 잘 모르겠음. 이름조차 아는 게 없긴 함
    그리고 웹사이트가 아주 멋짐. 독특하고 개성이 뚜렷함

    • FontForge는 오픈소스, 크로스플랫폼이고 기능도 꽤 풍부해서 고마운 존재지만, 직접 써본 바로는 상용 경쟁 제품들이 실제로 훨씬 좋긴 함
      macOS가 있다면 체험판 기간이 충분한 Glyphs(/Mini) 나 RoboFont를 직접 확인해볼 수 있음. 그래도 가장 기대되는 건 fontra.xyz 같은 웹 기반 도구를 포함한 다음 세대 도구들임
    • MFEK도 더 완성된 상태가 되는지 계속 지켜볼 만함
      지금까지 본 MFEK 관련 작업은 전부 꽤 멋져 보였음
      https://mfek.org/
    • FontForge 얘기가 나온 김에, 글꼴을 만드는 중에 몇 문단짜리 텍스트로 미리보기 하는 방법을 아는 사람이 있는지 궁금함
      “quick brown fox” 한 문장만으로는 부족할 때가 많음

  • 100r.co도 꼭 봐볼 만함
    Devine과 Rekka가 돛단배 Pino에서 스튜디오를 운영하면서 삶, 여행, 프로젝트를 기록하고 있음

  • FontForge 요약이 좋음
    글에서 암시하듯 손글씨로 글꼴 만들기에는 더 쉽고 자동화된 선택지도 있음. 그런 다음 결과 글꼴을 다시 손볼 수도 있음
    https://www.calligraphr.com/en/ 예전 이름은 MyScriptFont였음

  • 만든 글꼴이 내가 만든 것과 꽤 비슷해 보임
    https://imgur.com/a/g8bIoUY
    커닝 같은 최적화를 깊게 파고들진 않았지만, 써본 소프트웨어 3~4개는 전부 엄청 답답하거나 망가져 있거나 다루기 어려웠음. 내 사용법 문제일 수도 있고, 유료 소프트웨어는 훨씬 나을 것 같음. 끝까지 해낸 게 대단함

  • 여러 글꼴을 하나의 글꼴로 합치는 가장 간단한 방법이 궁금함
    VS Code는 언어나 토큰별 글꼴 설정을 지원하지 않음. 예를 들어 주석에는 Comic Sans를 쓰고 나머지는 다른 글꼴을 쓰는 식은 안 되지만, 기울임/굵게 같은 설정은 가능함

  • 80년대에 Desktop Publishing이 유행하면서 글꼴이 널리 쓰이기 시작했을 때부터 글꼴을 좋아했음
    한동안 과하게 쓰였다고도 할 수 있지만, 디자인이 중요하다는 걸 처음으로 느끼게 해준 것 중 하나였음. 아무튼 멋진 글꼴이고 개요도 훌륭함

  • MetaFont/MetaPost로 글꼴을 만드는 사람이 실제로 있는지 궁금함
    FontForge에 스크립팅 기능이 있는지도 모르겠음. 직접 써본 적은 없고 읽어보기만 했지만, Knuth의 “Computers and Typesetting” 5권은 전부 읽었음

  • 글꼴 제작을 해주는 AI 래퍼 스타트업이 이미 있는지 궁금함
    프롬프트가 흥미로울 것 같음. 예를 들어 “발칸의 영향을 강하게 받았지만 소비에트 브루탈리즘도 섞이고, 어린이에게 친근한 크리스마스 글꼴을 디자인해줘” 같은 식임
    상업적으로도 이국적인 글꼴을 쓰는 게 문화적으로 자연스러워져야 함. Helvetica, Roboto, Noto Sans와 더 현대적인 글꼴들이 왜 쓰이는지는 이해하지만, 세상이 솔직히 조금 밋밋해짐

  • 블로그 글 자체에 자기 글꼴을 쓰지 않은 건 아쉬운 기회였음

  • “개가 여우를 뛰어넘는” 게 아니라 여우가 개를 뛰어넘는 문장이어야 함 ;-)
    개는 게으르고 여우는 빠르기 때문임

답변달기
GeekNews BeeBS 게시판 오픈! 자유로운 이야기와 소소한 일상을 함께 나눠보세요.