같은 폰트를 WOFF와 WOFF2로 각각 바꿔봤더니, 압축 방식 차이가 이만큼 났습니다

웹사이트에 폰트를 올릴 때 확장자로 .woff와 .woff2가 나란히 보이는 경우가 있습니다. 둘 다 "웹폰트"라고만 알고 아무거나 골라 쓰기 쉬운데, 실은 안에서 쓰는 압축 알고리즘부터가 다릅니다.

얼마나 차이가 나는지 직접 셋으로 나눠 재 봤습니다. 하나는 예전 글에서 13MB로 다룬 적 있는 그 맑은 고딕, 나머지 둘은 라틴 문자 위주인 Arial과 오픈소스 폰트인 Pretendard입니다.

 

TTF/OTF 원본을 웹폰트로 변환한 원본 대비 용량 비율. 맑은 고딕은 WOFF 55.2%, WOFF2 40.1%. Arial은 WOFF 53.3%, WOFF2 41.5%. Pretendard Bold는 WOFF 67.7%, WOFF2 51.9%로 모두 WOFF2가 더 작음

 

실측 결과

fontTools 4.63.0으로 세 폰트를 각각 .woff와 .woff2로 변환하고 크기를 쟀습니다. 서브셋(글자 추출)은 하지 않고 원본 글리프를 그대로 담은 상태로 비교했습니다.

폰트	원본(TTF/OTF)	WOFF	WOFF2
맑은 고딕	13,459,196 B	7,435,272 B (55.2%)	5,400,788 B (40.1%)
Arial	1,045,720 B	557,648 B (53.3%)	434,280 B (41.5%)
Pretendard Bold	1,576,660 B	1,067,724 B (67.7%)	818,332 B (51.9%)

세 폰트 모두 WOFF2가 WOFF보다 10~15%p씩 더 작습니다. 글자 구성이 완전히 다른 세 폰트에서 같은 방향으로 나왔다는 건, 이게 특정 폰트의 우연이 아니라 압축 방식 자체의 차이라는 뜻입니다.

---

왜 WOFF2가 더 작을까

두 형식 다 원본 폰트 데이터를 압축해서 담는다는 큰 틀은 같습니다. 차이는 압축 알고리즘입니다.

형식	압축 알고리즘	비고
WOFF (2012년)	zlib(gzip과 같은 계열)	ZIP 파일 압축과 원리가 비슷함
WOFF2 (2018년 W3C 표준화)	Brotli	구글이 만든 압축 알고리즘, 폰트처럼 반복 패턴이 많은 데이터에 특히 강함

Brotli는 사전에 자주 쓰이는 패턴을 미리 담아 둔 내장 사전을 활용해서, 같은 데이터라도 zlib보다 더 짜낼 여지를 찾아냅니다. 폰트 파일 안의 글자 윤곽 데이터는 반복되는 구조가 많아 이 방식이 유독 잘 맞습니다.

브라우저는 둘 다 지원할까

WOFF2를 지원하지 않는 아주 오래된 브라우저를 신경 써야 하는 상황이 아니라면, 최신 웹 환경에서는 WOFF2 하나만 올려도 대부분 충분합니다. 다만 오래된 브라우저까지 지원해야 하는 사이트라면 WOFF를 대체용으로 함께 준비해 두는 방식이 안전합니다. 정확한 지원 범위는 브라우저 버전에 따라 달라질 수 있어, 실제 방문자 환경을 고려해 결정하시길 권합니다.

---

직접 변환하려면

fontTools 하나면 명령줄에서 바로 변환됩니다. Brotli 압축을 쓰려면 brotli 패키지가 추가로 필요합니다.

pip install fonttools brotli

fonttools varLib.instancer 없이 그냥 변환만 할 경우:
python -c "from fontTools.ttLib import TTFont; f=TTFont('원본.ttf'); f.flavor='woff2'; f.save('결과.woff2')"

실제로 웹에 올릴 용량을 더 줄이고 싶다면 이 변환에서 멈추지 말고, 쓰지 않는 글자를 먼저 덜어내는 서브셋 작업을 함께 하는 편이 효과가 훨씬 큽니다. 맑은 고딕에서 라틴 문자만 남기고 서브셋한 뒤 용량이 얼마나 줄어드는지는 예전에 다룬 글에서 확인하실 수 있는데, 이번 WOFF2 변환과 겹쳐 쓰면 원본 대비 훨씬 더 작아집니다.

---

서브셋과 WOFF2를 같이 쓰면 정말 얼마나 줄어들까

말로만 "겹쳐 쓰면 더 작아진다"고 하면 감이 잘 안 오니, 맑은 고딕에서 라틴 215자만 남기는 서브셋을 만든 뒤 그 결과물을 다시 woff2로 변환하는 것까지 실제로 이어서 해 봤습니다.

단계	용량	원본 대비
원본 TTF	13,459,196 B	100%
라틴 서브셋만 적용	32,240 B	0.24%
서브셋 + WOFF2까지 적용	17,448 B	0.13%

13.4MB짜리 원본이 두 기법을 같이 쓰자 17KB까지 줄었습니다. 약 771분의 1입니다. 서브셋만으로도 이미 원본의 0.24%까지 줄어드는데, WOFF2를 한 번 더 거치면 그 서브셋 결과에서도 절반 가까이 더 줄어듭니다. 두 기법은 서로 겹치는 절약이 아니라, "담는 글자 수를 줄이는 것"과 "담긴 데이터를 압축하는 것"이라는 완전히 다른 층에서 작동하기 때문에 곱해지는 효과가 납니다.

물론 이건 라틴 문자만 쓰는 영어 웹사이트를 가정한 극단적인 예시입니다. 한글을 써야 하는 사이트라면 이만큼 줄이기는 어렵지만, 그래도 "실제로 쓰는 글자만 추리고 WOFF2로 압축한다"는 순서 자체는 그대로 적용됩니다.

자주 묻는 질문

Q. ttf를 그냥 웹에 올리면 안 되나요?
올려서 작동은 하지만, 브라우저가 원본 그대로를 내려받아야 해서 로딩이 느려집니다. 웹용이라면 woff2로 바꿔 올리는 편이 낫습니다.

Q. otf도 woff2로 변환되나요?
됩니다. 이번 측정에 쓴 Pretendard Bold도 원래 otf 파일입니다.

Q. woff2로 바꾸면 화질이나 글자 모양이 달라지나요?
아닙니다. 압축 방식만 바뀔 뿐 글자 윤곽 데이터 자체는 그대로 보존됩니다.

 

같은 원본이라도 어떤 압축을 쓰느냐에 따라 최종 용량이 갈립니다. 웹에 올릴 폰트를 고를 일이 있다면, 확장자만 보고 아무거나 고르지 말고 woff2를 먼저 챙기시길 권합니다.

 

위 용량은 실제 폰트 파일을 fontTools로 직접 woff, woff2로 변환해 얻은 값입니다.

 

 

 

사진 옮겼더니 찍은 날짜가 전부 오늘, 촬영일이 진짜 사라지는 지점은 따로 있습니다

 

용량 제한에 걸린 큰 파일, 조각으로 나눠 보내고 받은 쪽에서 합치는 법

 

행은 3천 개뿐인데 엑셀 파일이 3.4MB, 용량을 먹는 범인을 파일 안에서 찾아내기