웹 폰트 최적화, 개발자처럼 해보기 (feat. Pretendard)

폰트 용량이 2MB?

 

한창 진행중인 사이드 프로젝트를 만드는 중 오늘도 lighthouse을 돌렸는데
Performance 점수가 유독 낮게 나와서 자세히 살펴보니

웹페이지에 쓰고있는 웹폰트의 용량이 2MB나 되는 것을 발견하였다.

이거이거 그냥 넘어갈수가 없잖아...?

 

 

문제 : 왜 폰트파일이 이렇게 큰걸까?

우리가 사용하는 폰트파일에는 사실 엄청나게 많은 글자가 들어있다.
가,나,다는 당연하고, 뷁, 뀰(...?) 처럼 잘 쓰지않는 글자까지 포함해 약 11,172자 한글이 포함되어있다.
여기에 영문, 숫자, 특수문자까지 더하면 용량이 더더욱 커질수밖에 없겠지?

 

 

Pretendard를 다이어트 시켜보자

그래서 폰트파일에서 실제 사용하는 글자만 남기고 나머지는 모두 삭제하는
폰트 하위 집합(Subsetting)을 만들어 다이어트를 시켜주기로 했다.

나도 여기서부턴 구글링이 힘들다고 판단해, gemini CLI의 도움을 받아 진행했다.

1. fonttools 설치
파이썬 기반의 라이브러리로 터미널에 간단한 명령어로 설치할 수 있다.
(이 과정에서 Brotii라는 친구도 필요해 같이 설치함)

pip3 install fonttools Brotli

2. 웹사이트에서 어떤 글자를 쓰는지 찾아내기

이제 내 프로젝트 코드를 샅샅이 뒤져 사용된 모든 글자를 수집한다. 
'가', '나', '다', 'a', 'b', 'c', '1', '2', '3', '!', '@', '#' 등등...하나도 빠짐없이...
모든 파일의 텍스트를 긁어와 중복된 글자를 제거하는 방식으로 진행된다.

find /[내 프로젝트 경로] -type f -print0 | 
xargs -0 cat | 
grep -o . | 
sort -u | 
tr -d '\n' 
> /tmp/charset.txt

• `find ... -print0`
  내 프로젝트 폴더와 그 안의 모든 하위 폴더를 뒤져서 모든 파일을 찾아냄
• `xargs -0 cat`
  앞에서 찾은 모든 파일들의 내용(텍스트)을 전부 읽어서 터미널에 쭉 출력
• `grep -o .`
  출력된 전체 텍스트를 한 글자, 한 글자 모두 낱개로 분리
•  `sort -u`
  낱개로 분리된 글자들을 가나다순으로 정렬한 뒤, 중복된 글자는 하나만 남기고 모두 제거
• `tr -d '\n'`
  글자들 사이에 있는 줄바꿈을 모두 없애서 하나의 긴 텍스트 줄로 만들기
• `> /tmp/charset.txt`
  그렇게 만들어진 최종 글자 목록을 /tmp/charset.txt 라는 파일 안에 저장
  
  

3. 나만의 맞춤 Pretendrd 만들기
수집한 글자목록을 pyftsubset에게 (1번과정을 도와준 도구) 전달해
원본 폰트파일(PretendardVariable.woff2)를 다이어트 시켜달라고 요청한다.

 

/[내 컴퓨터 경로]/pyftsubset
/[원본 폰트 경로]/PretendardVariable.woff2
--output-file=/[다이어트 시킬 폰트 경로]/PretendardVariable.subset.woff2 
--text-file=/tmp/charset.txt 
--flavor=woff2

• `/[내 컴퓨터 경로]/pyftsubset`
  pyftsubset이라는 프로그램을 실행하라는 명령
• `/[원본 폰트가 있던 경로]/PretendardVariable.woff2`
  다이어트 시킬 원본 폰트 파일의 위치
• `--output-file=.../PretendardVariable.subset.woff2`
  다이어트 결과물인 '하위 집합' 폰트 파일을 어디에 어떤 이름으로 저장할지 정하기
• `--text-file=/tmp/charset.txt`
  폰트에 남겨둘 글자 목록이 들어있는 텍스트 파일의 위치
  나는 아까 코드에서 사용된 모든 글자를 추출해서 이 파일 안에 저장했었다.
• `--flavor=woff2`
  결과물 파일의 포맷을 woff2로 지정하는 옵션

 

😲 그러면 2MB에 달하던 용량이 107KB로 줄어드는 놀라운 결과가...! 👏🏻👏🏻

 

 

'preload'로 로딩속도를 더 빠르게!

여기서 최적화를 조금 더 신경써본다면..?
index.html에 <link rel="preload">를 사용해주면,
브라우저는 "이 폰트파일은 아주 중요하니 다른거보다 우선으로 가져와야겠군" 하고 알아듣는다고 한다.

<link rel="preload" href="/src/assets/fonts/pretendard/PretendardVariable.subset.woff2" as="font" type="font/woff2" crossorigin />

 

마무리

처음엔 그냥 속편하게 CDN을 사용해보는것도 고려해봤지만, 실제로 테스트결과 Lighthouse점수는 더 낮게 나왔다.
(서버와 물리적인 거리가 멀어서 그런듯)

그리고 얼마전처럼 AWS가 터지는 사건처럼 외부로 불러오는 방법은 대처가 힘들다는것을
회사 다닐때도 한번 겪어본적이 있기에,,,이제는 CDN 방식을 선호하지 않는다.

해결과정은 초큼 복잡해보였지만, 우리에겐 AI 친구들이 있으니, 겁먹지말고 한번 도전해보자!
(gemini CLI 만세)

참고문서
https://www.44bits.io/ko/post/optimization_webfont_with_pyftsubnet

웹폰트 경량화 폰트툴즈의 pyftsubset을 사용한 폰트 서브셋 만들기