한글 웹폰트가 무거워 사이트가 느릴 때, 쓰는 글자만 남기기

한글 폰트 하나가 12메가바이트를 넘는다면, 그중 몇 글자나 실제로 화면에 나올까요. 홈페이지 메뉴와 본문에 쓰이는 글자는 많아야 수천 자입니다.

한글 폰트가 무거운 이유는 담고 있는 글자 수에 있습니다. 그러면 반대로, 쓰지 않는 글자를 덜어 내면 어디까지 가벼워질까요. 맑은 고딕을 놓고 남길 범위를 단계별로 줄여 가며 재 봤습니다.

한글 웹폰트 서브셋 실측 표. 맑은 고딕 원본은 글리프 28,215개에 TTF 13,459,196바이트, WOFF2로 바꾸면 5,400,680바이트다. 완성형 2,350자만 남기면 글리프 2,351개에 TTF 921,044바이트, WOFF2 362,744바이트로 97.3퍼센트 줄고, 페이지에 실제로 쓴 154자만 남기면 글리프 155개에 TTF 40,428바이트, WOFF2 22,028바이트로 99.8퍼센트 줄어든다. 측정 환경은 윈도우 11, 파이썬 3.14.6, fontTools 4.63.0

글자 수를 줄이면 곧바로 용량이 빠집니다

맑은 고딕 원본은 글자 모양을 28,215개 담고 있습니다. 파일로는 13,459,196바이트, 약 12.8메가바이트입니다.

남긴 범위	글리프 수	TTF	WOFF2	원본 TTF 대비
원본 그대로	28,215	13,459,196 B	5,400,680 B	기준
완성형 2,350자	2,351	921,044 B	362,744 B	97.3 % 감소
페이지에 쓴 154자	155	40,428 B	22,028 B	99.8 % 감소

중간 줄이 실무에서 가장 많이 쓰는 선택입니다. 완성형 2,350자는 국내 문서 표준이 정한 한글 음절 집합으로, 일반적인 한국어 문장은 이 안에서 거의 다 표현됩니다. 여기까지만 남겨도 웹에서 실제로 내려받는 크기가 5.4메가바이트에서 362킬로바이트로 떨어집니다.

맨 아랫줄은 메뉴나 제목처럼 나올 글자가 정해진 자리에 쓰는 방식입니다. 이 글의 본문에 나온 글자만 남겼더니 154자, 22킬로바이트가 됐습니다. 다만 여기 없는 글자는 다른 폰트로 대신 그려지니, 내용이 바뀌는 자리에는 쓸 수 없습니다.

---

WOFF2로 한 번 더 줄어듭니다

표의 TTF와 WOFF2 칸을 나란히 보면 같은 글자를 담고도 크기가 다릅니다. WOFF2는 웹 전용 포장 방식이라 압축이 한 겹 더 들어갑니다. 완성형 2,350자에서 921,044바이트가 362,744바이트가 됐으니 60퍼센트가 더 빠진 셈입니다. 같은 폰트를 WOFF와 WOFF2로 각각 바꿔 재 본 결과도 따로 정리해 두었습니다.

글자 수를 줄이는 것과 포장을 바꾸는 것은 서로 다른 축이라 같이 적용됩니다. 웹에 올릴 폰트라면 둘 다 하는 것이 기본입니다.

직접 줄이는 방법

fontTools를 설치하면 명령 한 줄로 됩니다. 남길 글자를 파일에 적어 두고 넘기는 방식입니다.

pip install fonttools brotli

pyftsubset MyFont.ttf --text-file=chars.txt \
  --flavor=woff2 --layout-features="*" \
  --output-file=MyFont.subset.woff2

chars.txt에는 남길 글자를 그냥 이어 적으면 됩니다. 사이트 본문을 통째로 붙여 넣어도 되고, 완성형 2,350자 목록을 넣어도 됩니다. --layout-features="*"는 자간이나 합자 같은 조판 정보를 남기라는 뜻이라, 이 옵션을 빼면 글자 간격이 어긋날 수 있습니다.

CSS에서는 이렇게 부릅니다. font-display: swap을 같이 두면 폰트가 도착하기 전에도 글이 먼저 보입니다.

@font-face {
  font-family: "MyFont";
  src: url("/fonts/MyFont.subset.woff2") format("woff2");
  font-display: swap;
}

---

줄이기 전에 확인할 것

가장 중요한 것은 라이선스입니다. 폰트를 잘라 웹에 올리는 것은 재배포와 변형에 해당합니다. 윈도우나 오피스에 딸려 온 폰트는 대체로 이것이 허용되지 않습니다. 위 측정은 크기를 재기 위해 만든 파일을 곧바로 지운 것이고, 결과물을 서버에 올린 것이 아닙니다.

실제로 쓰실 때는 웹 사용이 허용된 폰트를 고르시고, 배포 조건에 서브셋 제작이 허용돼 있는지 확인하시면 됩니다. 국내 공공기관과 기업이 무료로 배포하는 한글 폰트 중에 웹 사용이 명시된 것이 여럿 있습니다.

기술적으로 확인할 것도 하나 있습니다. 잘라 낸 폰트로 페이지를 열어 깨진 네모가 나오는 글자가 없는지 훑어보는 일입니다. 사용자가 입력하는 이름이나 검색어처럼 예측할 수 없는 자리가 있다면 완성형 2,350자 쪽을 쓰는 편이 안전합니다. 굵기가 여러 개 필요할 때 파일을 여러 개 두는 대신 하나로 해결하는 방법은 가변 폰트의 원리에 정리해 두었습니다.

 

사이트에 한글 폰트를 올리기 전에 완성형 2,350자로 한 번 잘라 보세요. 눈에 보이는 글자는 그대로인데 내려받는 양이 열다섯 분의 일로 줄어듭니다.

 

위 바이트는 윈도우 11에서 파이썬 3.14.6과 fontTools 4.63.0으로 맑은 고딕을 단계별로 잘라 저장해 얻은 값입니다. 폰트마다 담긴 글자 수와 조판 정보가 달라 줄어드는 비율은 달라집니다.