1.75MB 한글 폰트를 26KB로: 쓰는 글자만 남기기

hbc studio · 작업한 때 2026년 10월 5일 · 기록 2026년 10월 16일

honeybeecook.com의 큰 한글 문구(“모자란 한 명이, 모자라지 않은 것을.” 같은)는 레페리 포인트 스페셜이라는 디스플레이 폰트로 써요. 그런데 이 폰트 파일이 1.75MB였어요. 한글 폰트는 쓸 수 있는 음절이 1만 1천여 자라서 파일이 커요. 휴대폰에서는 이 폰트를 받는 데만 6초쯤 걸렸고, 그동안 제목이 늦게 보였어요.

쓰는 글자만 남기기

사이트에서 이 폰트로 쓰는 글자는 몇백 자뿐이에요. 그래서 빌드할 때마다 스크립트(scripts/subset-font.mjs)가 사이트의 소스 코드와 정적 페이지를 훑어 실제로 등장하는 글자를 모으고, 원본 폰트에서 그 글자만 남긴 WOFF2 파일을 만들어요. 결과는 1.75MB에서 26KB가 됐어요. 폰트가 준비되는 시간도 6초에서 0.6초로 줄었어요.

원본 폰트 파일은 배포 폴더 밖(fonts-src/)으로 옮겨서 더 이상 올라가지 않게 했어요. 서브셋을 만드는 데 실패하면 빌드를 깨뜨리는 대신, 마지막으로 커밋된 폰트를 그대로 써요.

장점이 하나 더 있어요. 새 서비스 카드를 추가하면서 그 이름에 처음 쓰는 글자가 생겨도, 빌드할 때 자동으로 폰트에 들어가요. 사람이 기억할 필요가 없어요.

주석 하나가 폰트를 바꾸다

그런데 이 스크립트는 글자를 모을 때 화면에 보이는 문구와 주석을 구분하지 않아요. 파일에 있는 모든 글자를 모아요. 어느 날 코드 주석에 “13°”라고 쓴 적이 있는데, 그 하나 때문에 폰트 파일이 다시 만들어졌어요. 화면에 보이는 글자는 하나도 바뀌지 않았는데요.

폰트 파일은 주소에 버전이 없고, Cloudflare는 이 파일을 브라우저에 4시간 동안 보관하게 해요. 화면이 바뀐 게 없는데 폰트가 바뀌면, 쓸데없이 캐시만 흔드는 셈이에요. 그때는 주석을 “13 degrees”로 바꿔 원래와 똑같은 폰트로 되돌렸어요. 그 뒤로는 주석은 ASCII 문자로만 쓰고, 빌드 뒤에 화면 문구를 바꾸지 않았는데 폰트가 바뀌었으면 새로 들어온 글자를 찾아봐요.

이 제작기 페이지는 왜 다른 폰트일까

이 글이 있는 제작기와 서비스 소개 페이지는 일부러 시스템 한글 폰트를 써요. 글이 길어서, 레페리 폰트로 쓰면 그 글자들이 모두 첫 화면 폰트에 들어가거든요. 첫 화면을 보는 모든 사람이 이 긴 글의 글자까지 받게 되는 거죠. 그래서 이 페이지들은 서브셋 스크립트가 훑지 않는 폴더에 두었어요.

정리하면

• 한글 웹폰트는 쓰는 글자만 남기면 수십 분의 일로 줄어요. 빌드에 붙여 두면 관리할 것도 없어요.
• “파일에 있는 모든 글자”를 모으는 방식이라면 주석도 폰트에 영향을 줘요.
• 버전 없는 주소의 파일은, 내용이 바뀔 이유가 없을 때 바뀌지 않게 지키는 것도 일이에요.