만들게 된 계기

게임 제작에 필요한 한글 폰트를 찾고 있었지만 원하는 폰트가 없어서 직접 만들어 버릴까? 라는 생각을 했다. 2000년대 초반엔 다양한 스타일의 한글 픽셀 폰트가 많았던거 같은데 지금은 게임에 쓰이는 한글 픽셀 폰트는 매우 한정적인 것 같다. 제작하는 툴이 없나? 궁금해서 찾아본 결과 픽셀 폰트를 제작하는 프로그램들이 있었지만 대부분 “한글” 픽셀 폰트를 만들기에는 힘들어보였다. 그런 와중에 Neo둥근모와 달무리 폰트를 알게되었는데 코드로 생성된 한글 폰트였다. 위 프로젝트들을 보고 더 나아가 다른 사람들도 쉽게 제작할 수 있는 프로그램으로 만들면 어떨까 라는 생각으로 프로젝트를 시작했다.

프로그램 특징

템플릿 기능으로 빠른 한글 폰트 제작 한글 음절은 총 19 21 28 = 11172 개로 하나하나 찍으면 엄청난 시간이 소요된다. 하지만 템플릿에 맞게 컴포넌트(초성, 중성, 종성)을 만들고 합쳐서 비교적 적은 노력으로 모든 한글 음절을 만들 수 있다. 컴포넌트를 수정하면 바로 반영되어 오른쪽 뷰어에서 확인 할 수 있다.
웹 브라우저에서 동작 개발 편의성, 사용 편의성을 고려하여 웹 브라우저에서 동작하도록 만들었다. 별도의 다운로드 없이 들어가면 바로 사용할 수 있다. 다만 이렇게 하니 프로젝트 파일 저장이 조금 귀찮아졌는데 기회가 되면 Electron.js 같은 것을 사용하여 데스크탑 애플리케이션으로도 만들어 볼 생각이다.

만들어진 폰트

엑큐 - 프로그램을 제작하면서 만든 샘플 폰트 이다.

램체 - 이키나게임즈에서 더 램지 게임에 사용하기 위해 제작된 폰트이다.

기술적 이야기

Bitmap to SVG Path

현대의 폰트 파일들(TTF, OTF)은 외각선(Path or Contour)으로 글자를 표현한다. 이렇게 하는 이유는 확대해도 깨지지 않고, 다양한 크기로 출력할 수 있기 때문이다. 하지만 픽셀 폰트는 비트맵으로 저장되어 있다. 따라서 비트맵을 외각선으로 바꾸는 과정이 필요하다.

우선 한 개의 픽셀 (정사각형) 은 4개의 2차원 벡터로 표현할 수 있다. 이렇게만 해도 글자를 표현하는데는 충분하지만 최적화를 할 여지가 보인다.
만약 2개의 픽셀이 변을 공유하는 상황이라면 서로 벡터의 방향이 반대임을 알 수가 있고 둘 다 제거 해줄 수 있다.
추가로 같은 방향의 벡터가 연속해 붙어있다면 이를 하나의 긴 벡터로 합칠 수 있다.

Reactivity (Mobx)

여기서 Reactivity란 상태(State)가 변할 때마다 자동으로 Derive된 값이 업데이트 되는 거나 해당 상태를 사용하는 컴포넌트가 렌더링 되는 것을 말한다.

당시 React를 좀 더 배워보고 싶었기 때문에 React를 사용했는데 React에선 이를 구현하기 위해선 상태 라이브러리가 필요하다. Redux, Mobx, Recoil 등이 있다. Mobx는 관리할 상태와 컴포넌트를 Wrapper로 감싸주기만 하면 복잡한 문법없이 일반 변수를 사용하는 것처럼 사용할 수 있었다.

사용법

프로젝트 만들고 설정하기

New Project를 누르면 한글 템플릿을 선택하는 창이 뜬다.

ZIK님이 고안하신 템플릿은 (419 + 221 + 227) = 172개의 자모를 찍어야 한다. 심플한 반면에 형태가 한정되어 있어 주의가 필요하다. 예를 들어 공와 광에 사용되는 초성ㄱ은 같은 종류를 사용한다. 도깨비(DKB) 템플릿은 (819 + 421 + 427) = 344자개의 자모를 찍어야 한다. 조금 양이 많지만 다양한 형태에 대응할 수 있다.

프로젝트를 생성했으면 상단에 있는 SETTING 버튼을 눌러 폰트의 이름(Name)과 제작자 이름(Author)을 넣는다. 그 다음 원하는 폰트 모양에 따라 Descent Ascent WidthType를 설정해주자.

Descent : baseline 기준으로 가장 아래쪽까지의 길이
Ascent : baseline 기준으로 가장 위쪽까지의 길이
WidthType : 글자의 너비를 어떤 규칙에 따라 정할지를 결정한다.
- Monospace : 모든 글자가 너비가 Fixed-Width의 배수가 되도록 설정된다.
- Proportional : 글자의 너비가 (가장 오른쪽에 있는 픽셀까지의 X거리) + (Letter Spacing) 가 되도록 설정된다. (Space
Width: 공백(ASCII 32번) 의 너비)

레퍼런스 폰트

파일 선택을 클릭 후 ttf파일이나 otf파일을 선택하면 보드 뒤에 해당 폰트로 참고할 수 있는 글자가 표시 된다. X, Y축으로 이동할 수 있고 Scale로 크기를 줄이거나 키울 수 있다. 기본 폰트로 구글의 NotoSans-KR을 사용한다.

보드

마우스 좌클릭, 우클릭 - 칠하기, 지우기
키보드 상하좌우 - 글자 이동
ctrl + z,x,c,v - 되돌리기, 자르기, 복사, 붙여넣기
1,2,3 - 브러시 크기 조절

아래에서 첫번째 빨간줄은 baseline이고 두번째 빨간줄은 ascent 밑에 파란줄은 글자의 총 너비를 나타낸다.

툴

지우개 - 현재 보드를 지운다. 좌우, 상하 반전 - 현재 글자를 반전시킨다. 기준점을 정할 수 없어서 반전 후 키보드 상하좌우로 이동시킨다. 돋보기 - 보드의 크기를 변경한다. 3단계가 있다. (12 x 12, 18 x18, 24 x 24)

조합형 한글

오른쪽 뷰어에서 Korean Syllable (모든 11172자) 또는 KS X 1001 Korean Syllable (자주 쓰는 2350자) 글리프셋을 선택한다.
그리고자 하는 글자를 선택후 하단에 COMPONENTS의 컴포넌트를 선택하고 그린다.
한글 컴포넌트들은 뷰어에서 Private Use에서 선택해서 볼 수 있다.
저장 및 내보내기 상단에 SAVE버튼을 누르거나 ctrl+s 를 누르면 프로젝트를 저장할 수 있다. (확장자는 pfp이다.) 내용물은 JSON 형태로 되어있다. EXPORT 버튼을 누르면 TTF 파일로 내보낸다. 브라우저에서 돌아가는거라 탭을 닫으면 날아가니 수시로 저장한다.

Pixel Font Maker 소개