디자인 아틀라스
EN
Aa 타이포그래피

폰트 서브셋팅

Font subsetting

폰트 파일에서 실제로 쓰이는 글자의 글리프만 남기고 나머지는 잘라내 파일 크기를 줄이는 작업. 한글처럼 글자 수가 많은 문자 체계에서 특히 효과가 큽니다.

다른 이름: 글리프 서브셋Font subsetting
···
html
<div class="stage">
  <p class="sample" id="sample">타이포그래피는 읽기의 목소리를 디자인하는 일이다</p>
  <div class="readout" id="readout">계산 중…</div>
</div>
css
.stage{display:grid;justify-items:center;gap:14px;width:min(94%,420px)}
.sample{font-size:15px;line-height:1.6;color:var(--fg);margin:0;text-align:center;font-family:-apple-system,system-ui,"Apple SD Gothic Neo",sans-serif}
.readout{font:11px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center;line-height:1.7}
.bar{width:220px;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.bar-fill{height:100%;background:var(--accent);width:0;transition:width 1.2s ease}
js
const sample = document.getElementById('sample');
const readout = document.getElementById('readout');
const FULL_HANGUL_COUNT = 11172;
const text = sample.textContent;
const unique = new Set([...text].filter(function(ch){ return ch.trim().length > 0; }));
const pct = (unique.size / FULL_HANGUL_COUNT * 100);
const bar = document.createElement('div');
bar.className = 'bar';
const fill = document.createElement('div');
fill.className = 'bar-fill';
bar.appendChild(fill);
readout.textContent = '';
readout.appendChild(document.createTextNode('이 문장의 고유 글자 ' + unique.size + '개 / 한글 완성형 11,172자 = 약 ' + pct.toFixed(3) + '%'));
readout.appendChild(document.createElement('br'));
readout.appendChild(bar);
requestAnimationFrame(function(){ fill.style.width = Math.max(pct * 18, 2) + '%'; });

한글 완성형은 11,172자, 한자는 수만 자에 달합니다. 폰트 파일이 이 글자들의 윤곽 데이터를 전부 담으면 라틴 알파벳 전용 폰트보다 수십 배 무거워집니다 — 한글 폰트 하나가 수 MB에 이르는 경우가 흔한 이유입니다. 하지만 실제 웹사이트 한 페이지가 쓰는 글자 종류는 보통 수백 자를 넘지 않습니다.

서브셋팅은 폰트 파일을 실제로 쓰는 글자 집합만 남기고 나머지 글리프·힌팅 데이터를 제거해서 용량을 크게 줄입니다. 로고나 고정된 제목처럼 등장할 글자가 정해져 있으면 그 글자만 담은 초소형 서브셋을 만들 수 있고, 본문처럼 어떤 글자가 나올지 예측하기 어려우면 자주 쓰는 글자(예: 한글 2,350자 완성형 중 실사용 빈도가 높은 것들)만 담는 절충도 가능합니다.

동적 서브셋팅(브라우저가 실제로 필요로 하는 유니코드 범위만 요청하는 `unicode-range`)을 쓰면, 서버가 미리 여러 조각으로 잘라둔 폰트 중 그 페이지에 필요한 조각만 내려받게 할 수 있습니다. 이 사이트는 외부 폰트 파일을 아예 로드하지 않으므로 실제 서브셋 파일을 만들 수는 없고, 데모는 "이 문장에 쓰인 글자만 추리면 전체 글자 집합의 몇 %인가"를 실제 계산으로 보여주는 데 그칩니다.

언제 쓰나

한글 웹폰트를 쓸 때는 거의 항상 서브셋팅을 고려하세요 — 전체 완성형을 그대로 서빙하면 로딩이 눈에 띄게 느려집니다. 로고·고정 문구는 전용 초소형 서브셋으로 따로 만드는 게 효율적입니다.