Draw Your Font 사용법: 손글씨 사진으로 폰트 만들기

Draw Your Font는 종이에 쓴 글자를 사진으로 찍어 설치 가능한 손글씨 폰트로 만드는 무료 오픈소스 도구입니다. 공식 웹 데모에서는 사진과 글자 순서를 입력해 TTF 파일을 만들어 볼 수 있습니다. 더 많은 종류의 폰트 파일과 조정 기능이 필요하면 컴퓨터에 명령을 입력해 쓰는 도구(CLI)를 사용할 수 있습니다. AI 코딩 도우미용 작업 지침은 사진 속 글자를 찾고 이름을 붙이는 일을 돕습니다. 공식 FAQ에 따르면 자신의 손글씨로 만든 폰트는 본인 소유이며 상업적으로도 사용할 수 있습니다.

처음 써 본다면: 설치 없이 공식 웹 데모에서 몇 글자를 시험해 볼 수 있습니다. 원하는 결과가 나오지 않거나 웹사이트용 WOFF·WOFF2 파일까지 만들려면 전체 CLI의 기능과 제약을 확인해 보세요. 이 도구는 사진 속 모든 글자를 알아서 완벽하게 복원하는 서비스가 아닙니다.

손글씨를 폰트로 만들면 무엇이 편할까요?

행사 안내문이나 개인 브랜드의 이미지를 여러 크기로 만들 때 같은 손글씨 제목을 반복해서 쓰고 싶을 수 있습니다. 글씨 사진을 매번 붙여 넣는 대신 글자별 모양을 키보드 입력에 연결한 폰트를 만들면, 문구가 바뀌어도 같은 글씨체로 다시 입력할 수 있습니다.

Draw Your Font는 손글씨 사진에서 글자 모양을 찾아 폰트 파일로 묶는 일을 돕습니다. 안내문·카드·웹 이미지에 일관된 글씨를 쓰려는 경우를 떠올리면 용도가 분명해집니다. 다만 사진 속 글자의 윤곽과 간격, 빠진 글자는 사람이 확인하고 다듬어야 합니다.

내 글씨가 ‘폰트’가 된다는 뜻

사진 속 손글씨는 그대로는 이미지입니다. 문서에서 글자를 입력할 때 쓰려면 각 글자 모양을 구분하고 글자마다 입력 문자에 연결한 뒤, 같은 기준선과 크기로 정렬해야 합니다. 이렇게 만든 글자 모양의 모음이 폰트 파일입니다. TTF는 컴퓨터에 설치해 쓰는 대표적인 형식이고 WOFF·WOFF2는 웹페이지에 글꼴을 넣을 때 주로 쓰는 형식입니다.

프로젝트는 Danilo Znamerovszkij의 GitHub 저장소에서 공개되어 있습니다. 저장소의 MIT 라이선스 파일에도 Danilo Znamerovszkij가 권리자로 표시됩니다. 도구 코드의 라이선스와 사용자가 촬영·제작한 글씨나 제3자의 글씨에 대한 권리는 구분해야 합니다.

사진을 어떻게 글꼴 파일로 바꿀까요?

Draw Your Font는 사진의 명암을 분석해 잉크가 있는 영역을 찾고 떨어져 있는 글자 덩어리를 잘라냅니다. 그다음 각 덩어리가 어떤 글자인지 지정합니다. 미리 정해진 인쇄 템플릿을 썼다면 칸의 순서를 이용할 수 있고 자유롭게 쓴 사진이라면 사용자가 --chars로 순서를 알려 주거나 AI 스킬이 사진을 보고 이름을 붙일 수 있습니다.

손글씨 사진에서 글자 영역을 분리하고 각각의 문자를 지정한 뒤 윤곽과 글자 높이를 맞춰 TTF 또는 웹 글꼴 파일을 만드는 순서
사진 → 글자 분리 → 문자 이름 지정 → 윤곽·크기 정리 → 폰트 파일의 개념적 흐름. 실제 프로그램 화면이 아닌 상 스튜디오 제작 도식입니다.

이후 도구는 글자의 윤곽을 벡터 곡선으로 바꾸고 대문자 높이·소문자 높이·아래로 내려오는 획의 위치 등을 맞춰 폰트를 조립합니다. 공식 설명에 따르면 AI가 글자 모양을 새로 그리는 방식은 아닙니다. CLI가 기하 처리와 파일 생성을 맡고 Claude Code 스킬을 사용할 때 AI는 주로 글자 판별과 결과 검토를 돕습니다. 따라서 원본 필기가 흐리거나 글자가 서로 붙어 있으면 결과를 수정하거나 다시 촬영해야 할 수 있습니다.

설치 없이 시작: 공식 웹 데모

  1. 종이에 검은색 등 진한 펜으로 서로 닿지 않게 몇 글자를 씁니다. 처음에는 ABCabc처럼 짧은 샘플로 시험해도 됩니다.
  2. 위에서 사진을 찍고 공식 Draw Your Font 웹사이트의 데모에 사진을 선택합니다.
  3. 사진에 적은 문자를 읽는 순서대로 입력하고 폰트 이름과 잉크 감도 설정을 확인합니다.
  4. 미리보기를 살펴본 뒤 Download TTF로 결과 파일을 받습니다. 글자가 빠졌거나 다른 문자로 연결되었다면 사진·입력 순서를 고쳐 다시 시도합니다.

저도 공식 웹사이트에서 몇 차례 폰트를 만들어 보려 했지만 원하는 결과를 얻지 못했습니다. 그래서 아래의 Windows CMD 방법을 사용했습니다. CMD로 만든 폰트는 확인할 수 있었지만 웹에서 왜 잘되지 않았는지는 확인하지 못했습니다.

공식 웹사이트는 이 데모가 브라우저 탭 안에서 처리되며 사진을 업로드하지 않는다고 안내합니다. 이 설명은 웹 데모에 관한 공식 주장입니다. 이 글에서는 웹 데모의 네트워크 전송을 직접 계측하지 않았습니다. 웹 데모에서 안내하는 결과 형식은 TTF이며 전체 CLI의 WOFF2·조정 기능과 동일한 화면이라고 생각하지 마세요.

공식 웹 데모가 새 탭에서 열립니다. 버튼은 설치 파일을 직접 내려받지 않습니다.

Windows CMD에서 직접 폰트 만드는 방법

웹 데모에서 원하는 결과가 나오지 않거나 더 많은 글자를 만들고 싶다면 명령 프롬프트(CMD)에서 도구를 실행할 수 있습니다. CMD는 Windows에 명령을 입력하는 창이고 CLI는 그 창에서 실행하는 프로그램입니다. 공식 저장소는 Node.js 18 이상이 있는 Windows·macOS·Linux를 안내합니다. 아래는 제가 직접 사용한 방법을 Windows 10/11에서 따라 할 수 있도록 C:\DrawYourFont를 예시 저장 위치로 정리한 절차입니다. 다른 폴더를 쓰고 싶다면 명령의 경로도 자신의 위치로 바꾸세요.

1. Node.js를 설치하고 작동 확인하기

Node.js 공식 다운로드 페이지에서 Windows용 LTS 설치 파일을 받아 기본 안내에 따라 설치합니다. LTS는 오래 유지·관리되는 버전 계열입니다. 설치가 끝나면 Win + R → cmd 입력 → Enter로 새 명령 프롬프트를 열고 다음 명령을 한 줄씩 입력하세요.

node -v
npm -v

node -v는 Node.js 버전을, npm -v는 패키지 설치 도구인 npm의 버전을 보여 줍니다. 두 명령 모두 숫자가 표시되면 다음 단계로 진행할 수 있습니다. ‘명령을 찾을 수 없습니다’라는 메시지가 나오면 설치를 마친 뒤 CMD를 새로 열어 다시 확인하세요.

2. 작업할 폴더 만들기

폰트 파일을 모아 둘 폴더를 원하는 위치에 만드세요. 여기서는 C:\DrawYourFont를 예로 듭니다. C:는 드라이브, DrawYourFont는 새 폴더 이름입니다. CMD에서 다음 두 줄을 차례로 실행합니다.

mkdir C:\DrawYourFont
cd /d C:\DrawYourFont

mkdir는 폴더를 만들고, cd /d는 드라이브가 달라도 그 폴더로 이동합니다. 이미 폴더를 만들었다면 첫 줄은 건너뛰어도 됩니다. 입력 줄 앞부분이 C:\DrawYourFont>처럼 바뀌면 현재 작업 위치를 확인할 수 있습니다.

3. Draw Your Font 설치하기

CMD가 작업 폴더를 가리키는 상태에서 다음 명령을 실행합니다.

npm install draw-your-font
npx draw-your-font --help

첫 줄은 현재 폴더에 Draw Your Font 패키지를 설치합니다. 두 번째 줄의 npx는 설치한 명령줄 프로그램을 실행하며, --help는 사용 가능한 명령을 보여 줍니다. 도움말이 나타나면 준비가 된 것입니다. 공식 README는 npx로 바로 실행하는 예시를 보여 주지만, 여기서는 제가 따라가기 쉬웠던 작업 폴더에 먼저 설치한 뒤 실행하는 방식을 설명합니다. 컴퓨터 전체에 설치하는 명령과는 다릅니다.

4. 원본 이미지 준비하기

종이에 진한 펜으로 글자를 쓰고 사진을 찍거나, 이 글의 실제 사례처럼 그림판에서 흰 바탕에 마우스로 글자를 써 PNG로 저장해도 됩니다. 글자가 서로 닿지 않도록 간격을 두고 왼쪽에서 오른쪽, 위에서 아래 순서가 분명하게 배치하세요. 파일 이름을 예를 들어 myfont1.png로 정한 뒤 Windows 파일 탐색기에서 C:\DrawYourFont 폴더로 복사합니다. 다른 이름으로 저장했다면 다음 명령의 파일명도 똑같이 바꿔야 합니다.

5. 실제로 쓴 글자를 모두 지정해 만들기

공식 README의 --chars "ABCabc"는 여섯 글자만 쓴 짧은 예시입니다. 이 글의 원본처럼 대문자 A~Z, 소문자 a~z, 숫자 0~9를 Aa, Bb, Cc … Zz 순서로 모두 썼다면, 다음처럼 62개 문자를 빠짐없이 같은 순서로 적어야 합니다.

npx draw-your-font make myfont1.png --chars "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789" --name "My Hand"

make는 이미지에서 글자를 분리해 폰트 파일까지 만드는 명령, myfont1.png는 앞 단계에서 복사한 원본 파일입니다. --chars는 프로그램이 분리한 글자 모양에 대응시킬 문자와 순서를 알려 줍니다. 글자 모양을 AI가 읽고 자동으로 이름을 붙이는 옵션은 아닙니다. --name "My Hand"는 폰트 이름입니다. 직접 쓴 글자 종류나 순서가 다르면 따옴표 안도 그에 맞게 바꾸세요.

6. 결과 확인하고 Windows에 설치하기

기본 설정으로 만들면 작업 폴더 안의 work 폴더에 MyHand.ttf, preview.png, glyphs.png 등이 생성됩니다. .ttf는 Windows에서 설치해 쓸 수 있는 폰트 파일입니다. 먼저 미리보기와 글자 목록을 살펴보고 괜찮다면 MyHand.ttf를 더블클릭해 Windows의 설치 버튼을 누르세요. 파일이 보이지 않으면 CMD에 표시된 실제 출력 경로를 확인합니다.

인쇄한 칸에 글씨를 쓰는 편이 좋다면 npx draw-your-font template -o template.pdf --charset minimal로 공식 템플릿을 만들 수도 있습니다. 이 방법은 자유롭게 그린 이미지에 --chars를 붙이는 방식과 다릅니다. 공식 README는 CLI의 --formats ttf,woff,woff2,css 옵션도 안내합니다. 추가 형식이나 명령 변경은 공식 README와 --help에서 확인하세요.

그림판으로 직접 시험해 본 결과

저는 테스트를 위해 그림판에서 마우스로 영문 대소문자와 숫자를 적고 PNG 파일을 CMD에서 폰트로 만들어 봤습니다. 아래 첫 번째 이미지는 입력한 원본이고 두 번째 이미지는 만든 글꼴을 확인한 화면입니다. 종이에 펜으로 쓴 결과나 도구의 공식 시연 화면이 아니라 제가 직접 해 본 한 번의 테스트입니다.

그림판의 흰 바탕에 마우스로 A부터 Z까지 대문자와 소문자를 짝지어 쓰고 맨 아래에 0부터 9까지 적은 원본 이미지
직접 그린 원본 myfont1.png. 글자를 한 칸씩 분리하기 쉽도록 간격을 두고 배치했습니다. 출처: 작성자 직접 제작.
직접 만든 손글씨 폰트 미리보기 화면. 예시 문장과 글리프 목록이 보이며 T에 해당하는 글자 모양이 U처럼 출력된 사례
직접 만든 폰트를 WebTech360 폰트 뷰어에서 확인한 화면입니다. T에 해당하는 글자가 U처럼 보이는 문제도 확인했습니다. 캡처: 작성자.

이 결과는 글자를 폰트로 만들 수 있다는 점과 동시에 결과를 한 글자씩 검토해야 한다는 점을 보여 줍니다. 공식 CLI 코드는 분리된 글자 모양과 --chars의 문자를 순서대로 연결합니다. 따라서 T가 U처럼 보인 원인을 이 화면만으로 특정할 수는 없습니다. 글자 획이 잘못 분리됐거나, 중간 글자가 빠지거나 추가되어 대응 순서가 밀렸을 가능성을 확인해야 합니다. 결과가 어긋나면 work\contact-1.png의 번호 붙은 글자 영역과 work\glyphs.png를 원본과 비교하세요. 글자 개수가 명령에 적은 62개와 다르다는 경고가 나오면 원본의 간격을 조정해 다시 만들거나 공식 템플릿을 사용하는 편이 좋습니다. 미리보기의 한글과 다른 문자까지 이 테스트에서 만든 것은 아닙니다. 입력 이미지와 --chars에는 영문 대소문자와 숫자만 넣었습니다.

Claude Code 스킬은 무엇이 다를까요?

저장소에는 Claude Code용 스킬도 있습니다. 공식 안내의 설치 명령은 npx skills add danilo-znamerovszkij/draw-your-font이며, 스킬은 사진에서 글자를 찾아 라벨을 붙이고 생성된 폰트를 미리 보며 문제 있는 글자를 고치는 흐름을 돕습니다. AI 스킬은 선택 사항입니다. 입력한 글자 순서를 알고 있다면 위의 CLI만으로도 시작할 수 있습니다.

사진의 처리 위치는 사용 방식에 따라 구분해야 합니다. 공식 웹 데모는 브라우저 내 처리를 안내하고 CLI의 이미지 처리 단계는 사용자의 컴퓨터에서 실행됩니다. 반면 Claude Code 스킬에서 사진을 AI가 분석하게 할 때의 데이터 처리는 사용 중인 AI 서비스와 설정을 확인해야 합니다. 민감한 필기나 타인의 자료라면 이 차이를 먼저 검토하세요.

만들기 전에 알아둘 한계

  • 글자 분리: 글자가 서로 닿거나 그림자·공책 줄이 진하면 잘못 분리될 수 있습니다. 진한 펜과 충분한 간격, 위에서 찍은 사진이 도움이 됩니다.
  • 한글 범위: 공식 기본 템플릿은 라틴 알파벳·숫자·기호의 minimal과 스페인어 확장을 안내합니다. 한글 완성형 글꼴을 쉽게 만드는 절차나 지원 범위는 공식 문서에서 확인하지 못했습니다.
  • 조판 기능: 공식 README는 커닝(글자쌍 간격), 합자, 글자 변형을 향후 계획으로 구분합니다. 현재 결과는 한 글자당 한 가지 모양의 기본 폰트로 보는 편이 맞습니다.
  • 읽기 쉬움: 제목·초대장 같은 짧은 문구와 긴 본문은 요구되는 가독성이 다릅니다. 만든 뒤 숫자와 비슷한 글자, 작은 크기, 여러 줄 문장을 직접 시험해 보세요.
  • 권리: 자신의 손글씨로 만든 폰트의 상업적 이용은 공식 FAQ에서 허용합니다. 타인의 글씨·상표·기존 서체를 본뜨는 경우에는 그 원본의 권리를 별도로 확인하세요.

Draw Your Font의 강점은 복잡한 서체 편집을 시작하기 전에 내 필기를 실제 폰트 파일로 시험해 볼 수 있다는 점입니다. 설치 없이 간단히 시험하고 싶다면 웹 데모를, 웹에서 원하는 결과를 얻지 못했거나 더 많은 문자와 웹 글꼴 형식이 필요하다면 CLI를 살펴보세요. 어느 쪽이든 결과를 한 글자씩 확인하는 과정이 중요합니다.

라이선스 및 상업적 이용 안내

자신의 손글씨로 만든 폰트는 사용자 소유이며 상업적으로 사용할 수 있습니다. 제작자는 공식 README의 FAQ에서 폰트가 사용자에게 100% 귀속되고 상업적 이용도 포함된다고 명시합니다. 만든 TTF를 자신의 디자인·웹사이트·유료 작업에 쓰는 경우에도 해당 안내가 적용됩니다. 다만 타인의 필체·기존 서체·상표를 무단으로 본뜬 자료에는 이 허용 안내를 그대로 적용할 수 없습니다. 도구 코드는 아래 MIT 라이선스에 따라 별도로 배포됩니다. 공식 FAQ·라이선스 확인일: 2026년 10월 28일.

Draw Your Font 도구 코드는 MIT 라이선스입니다. 조건을 지키면 회사의 폰트 시안 제작에 도구를 사용·수정할 수 있고 소프트웨어를 재배포할 때에는 원래 저작권 표시와 라이선스 문구를 포함해야 합니다.

확인 자료: 공식 저장소·README FAQ, 공식 웹 데모, 공식 Claude Code 스킬 문서, MIT 라이선스 (FAQ·라이선스 2026년 10월 28일 재확인).

본 게시글은 AI의 도움을 받아 작성하고 공식 자료와 대조했습니다. 그림판 원본과 폰트 미리보기, 직접 제작 과정의 경험은 작성자가 제공했습니다. 대표 이미지는 AI 생성 개념 일러스트이며 글자 처리 흐름 도식은 별도로 제작했습니다.

함께 보면 좋은 글

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다