개요
한글날 기념으로 한글 글꼴 프로젝트를 시작해 글꼴을 만들어본 후기.
동기
한글날에 뭔가 프로덕트를 내고 싶었다. 그리고 마인크래프트의 기본 한글 글꼴이 못생겨서 그걸 대체할만한 도트 그래픽 글꼴을 찾아 쓰는데, 둥근모는 디자인 철학이 나랑 안 맞고 갈무리체나 Silver 서체 등은 예쁘지만 현대 한글 전체를 지원하지 않아서 직접 만들어보게 되었다.
목표
일단 한글날 전까지 만들어야 했다. 그리고 각 문자가 (문맥의 도움을 받더라도) 충분히 구분 가능하게 읽혀야 했다.
기술 스택 선정
한 달이라는 시간 제한이 있는 이상 익숙하고 빠르게 개발 가능한 스택을 선택해야 했다. 일단 언어를 TypeScript로 골랐으며 처음 만들어보는 것이기 때문에 만들고 부수기를 반복하며 더 좋은 구조를 찾아가는 쪽으로 결정했다.
9월 6일. 첫 문자
일단 빠른 프로토타이핑을 위해서 받침이 없는 문자들만 제작해보기로 했다. 증분 빌드나 변경점만 다시 빌드 같은 걸 적용할 수도 있겠지만 현대 한글은 고작 11172자이기 때문에 모든 경우의 수를 브루트포스하는 것으로도 빌드 속도는 충분했다. 또, 문자를 빠르게 열람해볼 수 있어야 했기에 파일별 svg 파일을 만드는 것으로 만족했다.
9월 7일. 변형 글자체
8×8이라는 작은 해상도에서 글자를 그리기 때문에 쌍비읍과 같은 문자를 그릴 땐 공간이 부족해진다. 이런 경우를 처리하기 위해서 변형 글자체를 공간에 따라 선택하는 로직을 짰다.
9월 7일. 받침
받침을 위해 렌더링 패스를 짜줬다. 그리고 슬슬 구조를 엎을 때가 됐음을 느꼈다...
9월 8일. 구조 엎기
이 날은 매우 뜻깊은 날이다. 5중 for문을 썼기 때문이다. 그리고 새 구조로 엎고 파일 이름 바꿔재끼느라 아무 글자도 못 디자인했다 (...)
9월 9일. 미리보기 사이트
미리보기용 사이트를 만들었다. 9월 8일에 한 구조 엎기가 버그를 만들어냈음을 깨달았다.
그리고 이 날 단일 svg 파일들을 뭉쳐서 ttf 파일로 뽑을 필요성을 느꼈다. 근데 그러려면 또 코드를 엎어야 한다.
9월 10일. ttf 뽑기에 고통받다
ttf 파일로 뽑는 라이브러리인 svg2ttf를 가져다가 썼다. easylogic님이 webfont를 추천해주셨지만 안타깝게도 타이핑이 없어서... Intersecting Contours라는 문제가 계속 나오길래 paperjs를 통해 패스를 최적화했다. 그랬는데도 버그가 안 고쳐졌다..
그리고. 진짜 문제를 알아냈다. 이 미개한 것들은 폰트 높이가 64보다 작으면 폰트로 취급도 안해주는 것이었다. 그리고 내가 만드는 글꼴은 8×8이라서 폰트 높이를 8로 해뒀었다. 어이없어...
그리고 마참내!!
하지만 img 태그랑 span 태그를 놓고 CSS질을 열심히 해야 했다. 정렬하기 너무 어렵...
그리고 열심히 글자를 디자인했다.
9월 11일. 다른 문자들
한자 글리프를 디자인해보았다. 16×16에서도 그리기 힘들길래 이건 미루기로 했다. 한글날 기념이니까 한글이 더 중요하다.
하지만 그래도 Basic Latin 블록(ASCII 영역) 지원은 필요하다고 생각했기에 디자인을 하기 시작했다. 그러면서 윈도우의 똥을 밟았는데, 윈도우에서 파일 이름은 대소문자를 구분하지 않는다. 그래서 U+006A.txt같은 방식으로 쓰게 됐다.
디자인을 다 하고 나서 새로운 문제에 봉착하게 되었다. 글리프 위치가 삐뚤빼뚤했다. FontForge로 ttf 파일을 열어보니 그리드에 완벽하게 맞지 않는다. 시간이 늦어서 일단은 자러갔다.
9월 12일. 드디어 알파벳
9월 11일의 문제는 글리프를 가운데 정렬해서였다. 한글과 달리 높이가 들쑥날쑥한 알파벳이라 발견할 수 있었다. 이걸 고치면서 겸사겸사 프로그레스 바를 달았다. 별로 중요한 건 아니고 예뻐서 달았다.
그리고 웹사이트에 써보기 칸을 만들었다.
