웹사이트 글꼴을 정할 때 사장님들이 가장 자주 겪는 장면이 있습니다. 시안에서는 제목이 묵직하고 본문이 담백했는데, 막상 올리고 보니 제목이 본문과 비슷하게 밍밍해진 겁니다. 원인을 열어보면 대개 같습니다. 제작할 때 글꼴 파일 용량이 부담스러워 굵은 벌을 빼고 얇은 벌 하나만 실었던 것이죠.
굵기 하나 늘릴 때마다 파일이 하나씩 늘어난다
전통적인 웹폰트는 굵기마다 별개의 파일입니다. 본문용 400, 강조용 500, 소제목용 600, 제목용 700을 쓰겠다고 하면 파일 네 개를 따로 내려받아야 합니다. 한글 글꼴은 담아야 할 글자 수가 영문과 비교가 안 되게 많아서 한 벌 자체가 무겁습니다. 그래서 실무에서는 늘 이런 타협이 벌어집니다.
- 굵기를 두 벌로 줄이고 나머지는 비슷한 걸로 때운다
- 브라우저가 임의로 굵게 그려주는 가짜 굵기(faux bold)에 맡긴다
- 다 싣고 첫 화면이 늦게 뜨는 쪽을 감수한다
어느 쪽을 골라도 잃는 게 있습니다. 앞의 두 개는 글자 모양이 무너지고, 마지막 하나는 손님이 기다립니다.
가변 폰트는 굵기를 '파일'이 아니라 '값'으로 다룬다
가변 폰트(Variable Font)는 한 파일 안에 굵기의 양 끝을 넣어두고, 그 사이를 브라우저가 계산해서 그려내는 방식입니다. 100부터 900까지 어느 값이든 쓸 수 있고, 파일은 여전히 하나입니다. 437 같은 어중간한 값도 정상적으로 나옵니다. 디자이너가 "본문보다 아주 살짝만 굵게"라고 했을 때 실제로 구현할 수 있다는 뜻입니다.
선언도 크게 다르지 않습니다. @font-face에 굵기를 범위로 적어주면 그 뒤로는 평소 쓰던 font-weight 숫자를 그대로 쓰면 됩니다. 이미 만들어둔 스타일을 갈아엎을 필요가 없다는 것이 현실적으로 가장 큰 장점입니다.
한글 사이트에서 이득이 특히 큰 이유
글자 수가 많은 문자일수록 '파일 여러 벌'의 비용이 커집니다. 영문은 한 벌 더 싣는 부담이 가볍지만 한글은 그렇지 않습니다. 그래서 굵기를 세 벌 이상 쓰는 한글 사이트라면 가변 폰트로 바꾸는 것만으로 내려받는 양이 줄어드는 경우가 많습니다. 반대로 굵기를 한두 벌만 쓰는 단순한 사이트라면 굳이 바꿀 이유가 없습니다. 많이 쓸수록 유리해지는 구조라고 이해하시면 정확합니다.
다행히 프리텐다드, 노토 산스 KR처럼 국내에서 많이 쓰이는 한글 글꼴들이 가변 버전을 함께 내놓고 있어서, 이제는 "쓰고 싶어도 쓸 글꼴이 없다"는 단계는 지났습니다.
굵기 말고도 열리는 것들
글꼴에 따라 굵기 외의 축(axis)을 제공하기도 합니다. 글자 폭을 좁히고 넓히는 축이 있으면, 메뉴 글자가 한 줄에 안 들어갈 때 글씨를 줄이는 대신 폭만 살짝 좁혀 해결할 수 있습니다. 작은 글자와 큰 글자에서 자간과 획 대비를 다르게 그려주는 축을 가진 글꼴도 있습니다. 화면 크기에 따라 글자 크기만 바꾸던 반응형이, 글자의 생김새까지 조정하는 단계로 넘어가는 셈입니다.
도입 전에 확인할 세 가지
- 실제로 쓰는 굵기가 몇 벌인가 — 두 벌 이하면 기존 방식이 더 가벼울 수 있습니다.
- 정적 버전과 용량을 직접 비교했는가 — 글꼴마다 편차가 큽니다. "가변이니까 무조건 가볍다"는 말은 사실이 아닙니다.
- 서브셋과 함께 적용했는가 — 한글은 실제로 쓰는 글자만 추리는 작업을 병행할 때 효과가 제대로 납니다.
결국은 '의도한 대로 보이게 하는 일'
가변 폰트는 화려한 기술이 아닙니다. 제목은 제목답게, 강조는 강조답게 보이도록 만드는, 원래 당연했어야 할 일을 용량 부담 없이 하게 해주는 도구에 가깝습니다. 웹사이트에서 손님이 가장 오래 보는 것은 이미지도 애니메이션도 아닌 글자입니다. 그 글자가 시안과 다르게 보이고 있다면 한 번쯤 점검해볼 만합니다.
CYAN 에이전시는 사이트를 만들 때 글꼴을 '디자인 취향'이 아니라 '읽히는 성능'의 문제로 봅니다. 지금 쓰고 계신 사이트의 글꼴 구성이 적절한지 궁금하시다면, 어떤 굵기를 몇 벌이나 부르고 있는지부터 함께 확인해드리겠습니다.
