서브셋팅으로 웹 폰트 최적화

이전 글 볼드 이즈 더 뉴 블랙: 웹 폰트에서 디자인을 위해 웹 폰트를 사용할 수밖에 없는 점과 네트웍 지연으로 발생하는 물리적 문제들이 있다는 것을 언급하였다. 이 글에서는 이러한 문제들을 최소화하기 위해 이 사이트에 적용한 방법에 대하여 설명한다.

서브셋 폰트

하나의 폰트에서 일부 글리프^glyph나 영역만을 추출하여 새로운 폰트로 구성하는 것을 서브셋팅^subsetting이라 한다. 한글, 한자 언어권에서는 폰트의 용량이 매우 크기 때문에 웹 폰트에서는 종종 사용되는 방법이다.

한국 산업 규격인 KS X 1001¹의 한글 영역이 2,350자인데, 많이 사용되는 글자들만 추려낸 것이지만 일상에서 사용하지 않는 글자들이 여전히 많이 있다.

KS X 1001처럼 미리 정의된 서브셋^subset 대신 실제로 사용하는 글리프만을 담는 서브셋 폰트를 만들기로 했다. 먼저, 내가 사용하는 글리프 목록을 파일로 유지하고, 필요할 때 글리프나 파일 단위로 추가할 수 있는 스크립트를 루비로 작성했다.

이 사이트의 글을 모두 입력하여 900자가 조금 넘는 유니크한 글리프 목록을 얻었다. 앞으로 새 글을 쓰면서 누락된 글자가 발견되면 추가해야 하지만, 굉장히 드문 경우가 될 것 같다.

fontTools로 폰트 변환

OTF 폰트 파일로부터 서브셋 폰트를 생성하기 위해 파이썬 패키지인 fontTools²를 활용한다. 폰트 변환에는 fontTools에 포함된 오픈타입^OpenType 폰트의 서브셋을 생성하거나 최적화하는 pyftsubset을 사용하였다. 이 프로그램의 사용법은 nacyot님의 글³에서 잘 설명하고 있어 자세한 설명은 생략한다.

결과

이전 글에서 해당 페이지를 로드할 때 구글 폰트에서 다운로드되는 Noto Sans KR의 총 용량은 269KB였다. (지금은 명조체지만 당시에는 고딕체를 사용했다) 내가 사용하는 글리프만 모은 목록을 입력해 pyftsubset으로 생성된 본 고딕^{Source Han Sans}의 서브셋 폰트는 레귤러와 볼드 폰트가 각각 92KB와 94KB이다. 구글 폰트에서 25개의 파일 조각으로 나뉘어 다운로드받던 것도 두 개의 파일로 줄었으니 매우 효율적이다.

개인이 글을 쓰기 위해 사용하는 글리프의 수에는 어느 정도 임계값이 있을 것이다. 글리프 목록이 안정되면 폰트 파일에 긴 캐시 시간을 설정해 웹 브라우저의 캐시 효율을 높일 계획이다.