라틴 알파벳 폰트 하나는 보통 수십 KB입니다. 같은 품질의 한글 폰트는 그것과 비교가 되지 않습니다. 이유는 단순하고 계산으로 확인됩니다.
한글 폰트가 무거운 이유
현대 한글의 음절 블록은 초성 19 × 중성 21 × 종성 28(없는 경우 포함) = 11,172자입니다. 유니코드의 한글 음절 영역(U+AC00–U+D7A3)이 정확히 이 범위입니다. 여기에 자모 · 라틴 알파벳 · 숫자 · 문장부호가 더해지고, 한자까지 포함하는 폰트라면 수천 자가 또 붙습니다.
라틴 폰트가 글자 수백 개를 담는 동안 한글 폰트는 글자 만 개 이상을 담습니다. 그런데 실제 한 페이지에 등장하는 글자는 그중 아주 일부입니다 — 한국어 실용 문서에서 자주 쓰이는 음절은 전체의 극히 일부에 몰려 있습니다.
unicode-range가 하는 일
@font-face의 unicode-range는 “이 파일은 이 문자 범위를 담당한다” 는 선언입니다. 브라우저는 페이지에 실제로 등장한 문자를 확인한 뒤, 그 문자를 담당하는 파일만 요청합니다. 나머지 선언은 파싱만 되고 요청은 나가지 않습니다.
핵심은 같은 font-family 이름으로 여러 @font-face를 선언한다는 점입니다. CSS에서는 폰트가 하나로 보이고, 네트워크에서는 여러 조각으로 나뉩니다.
/* 라틴 · 숫자 · 문장부호 */
@font-face {
font-family: 'Pretendard';
src: url('/fonts/pretendard-latin.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
unicode-range: U+0000-00FF, U+2000-206F;
}
/* 한글 음절 조각 하나 — 실제로는 이런 선언이 수십 개 이어진다 */
@font-face {
font-family: 'Pretendard';
src: url('/fonts/pretendard-korean-12.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
unicode-range: U+AC00-AF33;
}⚠ 범위 없는 선언이 하나라도 섞이면 분할이 무의미해집니다. unicode-range를 생략한 @font-face는 모든 문자를 담당한다고 선언하는 것과 같아서, 그 파일 하나가 통째로 내려받아집니다. 분할이 안 먹는 것처럼 보일 때 가장 먼저 볼 곳입니다.
정적 서브셋과 동적 분할
나누는 방식은 크게 둘입니다.
정적 서브셋은 사이트에서 실제로 쓰는 글자만 골라 파일 하나로 만드는 방식입니다. 가장 가볍지만 내용이 바뀌면 깨집니다 — 새 글을 쓰거나 상품명이 추가돼서 서브셋에 없는 글자가 등장하면, 그 글자만 폴백 폰트로 렌더링되어 한 문장 안에서 글꼴이 섞입니다. 문구가 고정된 랜딩 페이지에는 맞지만, 계속 글을 쓰는 사이트에는 위험합니다.
동적 분할은 한글 영역을 여러 조각으로 잘라 두고 브라우저가 필요한 조각을 가져가게 하는 방식입니다. 조각이 수십 개가 되지만 각각은 작고, 어떤 글자가 나와도 대응됩니다. 콘텐츠가 늘어나는 사이트는 이쪽이 정답입니다.
프리로드는 첫 화면 조각만
분할을 해 두면 브라우저는 CSS를 해석하고 텍스트를 만난 뒤에야 폰트를 요청합니다. 그래서 첫 화면의 큰 제목처럼 중요한 글자는 preload로 앞당길 가치가 있습니다.
<link rel='preload' as='font' type='font/woff2'
href='/fonts/pretendard-korean-12.woff2' crossorigin>여기에 함정이 둘 있습니다. 첫째, crossorigin 속성이 없으면 프리로드가 헛돕니다. 폰트는 같은 도메인의 파일이라도 CORS 모드로 요청되기 때문에, 속성이 빠지면 브라우저가 같은 파일을 두 번 받습니다. 콘솔에 “프리로드했지만 쓰이지 않았다” 는 경고로 나타납니다.
둘째, 조각을 전부 프리로드하면 분할한 의미가 사라집니다. 프리로드는 “이건 무조건 받는다” 는 선언이므로, 첫 화면 문구가 실제로 건드리는 조각 몇 개로 한정해야 합니다. 카피를 바꾸면 그 목록도 낡습니다 — 히어로 문구를 고친 날에는 프리로드 목록을 다시 확인하세요.
자산 크기와 첫 화면 렌더링의 관계는 성능 최적화 아카이브에서 더 다루고, 사이트가 실제로 무엇을 얼마나 내려받고 있는지는 무료 도구의 진단으로 확인해 볼 수 있습니다.
다음 회차
조각을 잘게 나눠도 폰트가 도착하기까지는 시간이 걸립니다. 그 사이 글자를 안 보이게 둘지, 다른 폰트로 보여 줄지를 정하는 속성이 font-display입니다. 다음 회차의 주제입니다.