VXD Font와 스케치 에셋을 만든 이유

프로그래밍 강의 자료를 만들면서 정한 기준이 있다. 화면의 글자를 최대한 줄이고, 그림으로 설명할 수 있는 부분은 그림에 맡기는 것이다. 코드와 문장이 꼭 필요한 순간에는 글자를 쓰되, 대본 전체가 슬라이드 위로 올라오지는 않았으면 했다.

그 기준을 다음 강의에서도 유지하고 싶었다. 그래서 손글씨 느낌의 전용 폰트와 다시 꺼내 쓸 수 있는 아이콘을 함께 만들었다. VXD Font와 스케치 에셋은 강의를 만들 때 반복해서 사용할 시각적 기준을 마련하려는 작업에서 시작했다.

VXD Font Regular / Bold 견본. JIKJI SOFT의 Gaegu를 수정한 파생 서체이며, 원본과 파생 폰트의 라이선스는 SIL OFL 1.1이다.

책에서 가져온 출발점

직접적인 레퍼런스는 읽고 있던 Austin Kleon의 **《Show Your Work!》**였다. 어두운 바탕에 밝은 손글씨가 놓이고, 조금씩 흔들리는 선과 간단한 도형이 생각의 관계를 보여주는 페이지들을 촬영해 두었다. 책의 정보는 저자 공식 소개에서 볼 수 있다.

그 페이지에서 내 눈에 들어온 것은 설명하는 방식이었다. 선 하나는 흐름을 만들고, 상자는 개념을 묶고, 짧은 이름은 그림을 읽을 방향을 정해 준다. 이 정도의 표현으로도 이야기를 따라갈 수 있다는 점이 좋았다. 프로그래밍 강의에도 이런 여백을 두고 싶었다.

그 느낌을 내 대본에 적용해 달라고 AI에 요청했다. 배경은 짙은 회색 #41433F, 글자는 밝은 아이보리 #F5F2E8로 정했다. 길게 설명할 내용은 발표자 노트에 두고, 화면에는 지금 보고 있어야 할 관계와 필요한 코드만 남기는 방향으로 작업했다.

책에서 받은 영향과 내가 만든 결과물의 경계도 분명히 하고 싶다. 스케치식 시각 표현은 책에서 영감을 받았다. 강의 내용은 내 프로그래밍 대본에서 가져왔다. 책의 글자를 추출해 폰트로 만들거나, 책에 실린 도해를 강의용 아이콘으로 잘라 쓰지는 않았다.

자료형 강의의 예시. 이 API 예제에서 값의 세 가지 의미를 짧은 글자와 화살표로 보여준다. 자세한 조건과 설명은 발표자 노트에 둔다. 강의 구성은 VXD, 제작에는 OpenAI Codex를 사용했다.

손글씨를 다음에도 같은 모습으로 쓰기 위해

손글씨의 분위기를 가져가더라도 강의마다 글자의 모양이 달라지는 것은 원하지 않았다. 문장을 고쳐야 할 때 다시 그림을 만드는 대신, 같은 폰트를 선택하고 텍스트를 수정할 수 있으면 좋겠다고 생각했다. 전용 TTF를 요청한 이유다.

이렇게 만든 VXD Font는 Gaegu를 기반으로 한 파생 서체다. Gaegu의 디자이너는 JIKJI SOFT이며, 이 정보는 Google Fonts의 원본 메타데이터에 명시되어 있다.

제작에는 FontTools를 사용했다. 원래 글자의 골격을 바탕으로 윤곽의 폭과 높이, 글자별 기울기와 작은 흔들림을 조정했다. 같은 글자에는 같은 변형이 적용되므로 다시 입력해도 같은 형태가 나온다. 일반체와 굵은체를 TTF로 보관하고, 웹 미리보기를 위한 WOFF2도 함께 만들었다.

이름을 붙이는 것만큼 출발점을 밝히는 것도 필요했다. VXD Font라는 이름은 내 작업에서 사용할 이름이다. 글자 전체를 처음부터 직접 설계했다는 뜻은 아니다. Gaegu의 제작자 표기와 SIL Open Font License 1.1을 함께 보관했다.

현재 버전은 한글 완성형 2,350자와 영문·숫자·기본 문장부호를 지원한다. 모든 한글 음절이나 모든 코드 기호를 지원하는 범용 서체는 아니다. 긴 코드에는 가독성이 좋은 고정폭 서체를 별도로 쓰고, VXD Font는 제목과 짧은 설명에 쓰는 것이 이 작업에 더 잘 맞는다.

아이콘도 다음 강의를 생각하며 만들었다

한 장의 슬라이드 안에 그림이 들어 있는 것만으로는 재사용이 편하지 않다. 다음 대본에서 다시 필요한 그림을 쉽게 찾을 수 있어야 했다. 처음부터 아이콘과 도형을 별도 폴더로 모아 달라고 요청한 이유다.

컴퓨터, 가격표, 쿠폰, 시계처럼 강의에서 쓸 수 있는 아이콘 16종과 밑줄·화살표·프레임 같은 장식 도형 12종을 만들었다. 아이콘과 장식 도형의 그림은 OpenAI 이미지 생성 도구로 생성했다. 같은 분위기의 그림을 한 장에 모은 뒤 개별 PNG로 나누고, 이름과 경로를 목록에 남겼다.

VXD 강의용으로 AI 생성한 아이콘 원본 모음. OpenAI 이미지 생성 도구로 제작했으며, 책에서 추출한 그림이 아니다. 배경은 불투명한 짙은 회색이다.

작은 시행착오도 있었다. 처음에는 투명 배경을 요청했지만, 생성 이미지에 체크무늬가 배경으로 들어갔다. 최종 버전은 강의의 회색 바탕에 맞춘 불투명 PNG로 정리했다. 그래서 이 에셋은 같은 배경에서 사용할 때 가장 자연스럽다. 어떤 배경에도 그대로 얹을 수 있는 범용 아이콘 세트라고 소개하지는 않으려 한다.

설명의 흐름을 연결하는 선과 화살표는 PPT 안에서 편집할 수 있는 객체로 만들었다. 그림의 분위기는 유지하면서, 새로운 대본에 맞게 연결 관계와 글자를 바꿀 수 있게 한 것이다.

꾸준히 이어지는 기준

강의 ppt와 인스타그램 피드에도 같은 스타일을 적용했다. 구성과 내용은 서로 조금씩 다르지만 그래도 같은 글꼴과 색, 선의 분위기를 사용하면 한 시리즈, 한 브랜드라는 느낌을 이어갈 수 있다.

같은 폰트와 선의 표현을 다른 개념에 적용한 예시. 성공에는 transactionId, 실패에는 errorCode와 errorMessage를 연결했다. 강의 구성은 VXD, 제작에는 OpenAI Codex를 사용했다.

내가 원한 것은 다음 강의를 시작할 때도 사용할 수 있는 작업 환경이었다. 폰트와 그림을 다시 고르는 일에 쓰던 선택을 줄이고, 이번 개념을 어떤 장면으로 설명할지에 더 집중하고 싶었다. 그래서 결과물 옆에 폰트 파일과 에셋, 제작 소스도 함께 남겼다.

이 작업으로 학습 효과가 얼마나 좋아졌는지 측정한 것은 아니다. 지금 말할 수 있는 변화는 구체적이다. 같은 글씨를 다시 입력할 수 있고, 같은 그림을 다시 찾을 수 있으며, 다음 대본에도 같은 디자인 기준을 적용할 수 있게 되었다.

이 작업의 출처

Austin Kleon은 「Credit is always due.」에서 출처를 남기는 일이 다른 사람이 원작을 찾아갈 수 있도록 돕는 일이라고 설명한다. 이 글에도 그 길을 남기고 싶다.

• 시각적 영감: Austin Kleon, Show Your Work!: 10 Ways to Share Your Creativity and Get Discovered, Workman Publishing, 2014. 저자 공식 페이지
• 원본 서체: Gaegu, JIKJI SOFT. Copyright 2018 The Gaegu Project Authors. 원본 파일과 라이선스
• 파생 서체: VXD Font. Gaegu를 수정했으며 SIL OFL 1.1을 유지한다.
• 제작 방식: 강의 방향과 대본은 VXD에서 정하고, OpenAI Codex와 함께 서체 가공·슬라이드 구성·에셋 정리를 진행했다. 아이콘과 장식 도형은 OpenAI 이미지 생성 도구로 생성했다. 서체 파일 가공에는 FontTools를 사용했다.

책의 시각적 표현에서 받은 영감, 다른 사람이 만든 서체의 기반, 그리고 그 위에서 내가 정한 강의의 방향이 함께 들어 있다. VXD Font와 스케치 에셋이 왜 이런 모습이 되었는지 설명할 때, 그 연결도 같이 보여주고 싶다.