웹사이트에 예쁜 글꼴을 입히면 분위기가 단숨에 바뀝니다. 그런데 막상 적용하고 나면 첫 화면에서 글자가 한 박자 늦게 나타나거나, 잠깐 빈 줄만 보이다 글이 툭 떠오르곤 합니다. 손님은 그 짧은 공백에서 '느린 사이트'라는 인상을 받습니다. 한글 글꼴 최적화의 핵심 다섯 가지를 정리했습니다.
왜 한글 글꼴은 유독 무거울까
영문 글꼴은 알파벳과 기호 수백 자면 충분하지만, 한글은 조합 가능한 글자가 1만 1천 자가 넘습니다. 그래서 같은 디자인이라도 한글 글꼴은 굵기 하나가 수 메가바이트에 이르곤 합니다. 무거운 글꼴을 그대로 불러오면 본문이 뜨기 전에 데이터부터 한참 내려받게 됩니다.
원칙 1 — 꼭 쓰는 굵기만 골라 담는다
한 글꼴 안에는 가는체부터 굵은체까지 여러 굵기가 들어 있고, 굵기 하나하나가 별도의 파일입니다. 실제로 쓰는 굵기는 보통 두세 가지뿐이니, 본문용과 제목용만 남기고 나머지는 과감히 뺍니다. 다섯 개를 두 개로 줄이면 내려받는 용량도 그만큼 줄어듭니다.
원칙 2 — 서브셋으로 안 쓰는 글자를 덜어낸다
1만 자가 넘는 글자를 모두 담을 필요는 없습니다. 서브셋(subset)은 실제로 쓰이는 글자만 추려 담는 방식입니다. 동적 서브셋을 지원하는 서비스를 쓰거나, 자체 호스팅이라면 서브셋 도구로 상용 글자만 남긴 파일을 만들어 둡니다. 파일이 가벼워지면 첫 화면이 눈에 띄게 빨라집니다.
원칙 3 — woff2 포맷으로, 그리고 미리 불러온다
같은 글꼴이라도 woff2 포맷은 예전 ttf나 otf보다 훨씬 압축이 잘 됩니다. 요즘 브라우저는 거의 모두 woff2를 읽으니 이 포맷을 우선 씁니다. 여기에 첫 화면에 바로 보이는 글꼴은 preload로 미리 불러오도록 표시해 두면, 글자가 뒤늦게 바뀌는 현상을 줄일 수 있습니다.
원칙 4 — font-display: swap으로 빈 줄 대신 글을 먼저 보여준다
글꼴을 내려받는 동안 화면을 비워 두는 대신, 기본 글꼴로 글을 먼저 보여주고 준비되면 바꿔 끼우는 편이 낫습니다. CSS에서 font-display: swap을 지정하면 됩니다. 글자가 잠깐 다른 모양으로 보였다 바뀌는 것이, 아무것도 안 보이는 공백보다 훨씬 낫습니다.
원칙 5 — 글꼴 수를 줄이고 시스템 글꼴을 곁들인다
여러 글꼴을 섞어 쓸수록 내려받을 파일이 늘어납니다. 화면 전체의 글꼴은 한두 종류로 줄이는 편이 보기에도 정돈되고 속도에도 이롭습니다. 본문은 기기에 내장된 시스템 글꼴로 두고, 제목이나 로고처럼 인상이 중요한 곳에만 웹폰트를 쓰면 본문은 처음부터 또렷하게 보입니다.
글꼴은 멋과 속도 사이의 균형입니다
예쁜 글꼴은 분명 가치가 있지만, 첫인상을 망치는 공백과 맞바꿀 만큼은 아닙니다. 굵기를 추리고, 글자를 덜어내고, 가벼운 포맷으로 미리 불러오고, 빈 줄 대신 글을 먼저 보여주는 것 — 이 작은 조정들이 모여 '빠르면서도 멋스러운' 화면을 만듭니다. CYAN 에이전시는 작은 회사 웹사이트를 만들 때 글꼴 하나까지 용량과 표시 방식을 함께 살펴, 보기 좋으면서도 손님을 기다리게 하지 않는 화면을 설계합니다.
