사용 해보기 / 소스 코드

만들게 된 계기

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

프로그램 특징

• 템플릿 기능으로 빠른 한글 폰트 제작 한글 음절은 총 19 21 28 = 11172 개로 하나하나 찍으면 엄청난 시간이 소요됩니다. 하지만 템플릿에 맞게 컴포넌트(초성, 중성, 종성)을 만들고 합쳐서 비교적 적은 노력으로 모든 한글 음절을 만들 수 있습니다. 컴포넌트를 수정하면 바로 반영되어 오른쪽 뷰어에서 확인 할 수 있습니다.

• 웹 브라우저에서 동작 개발 편의성, 사용 편의성을 고려하여 웹 브라우저에서 동작하도록 만들었습니다. 별도의 다운로드 없이 들어가면 바로 사용할 수 있습니다. 다만 이렇게 하니 프로젝트 파일 저장이 조금 귀찮아졌는데 기회가 되면 Electron.js 같은 것을 사용하여 데스크탑 애플리케이션으로도 만들어 볼 생각입니다.

만들어진 폰트

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

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

기술적 이야기

Bitmap to SVG Path

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

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

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)

조합형 한글

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