Data URI는 파일 내용을 data:[유형];base64,[데이터] 형태로 HTML이나 CSS에 직접 삽입해 별도의 HTTP 요청을 없앤다. 한글 웹폰트는 이 기법과 특히 상성이 안 좋은데, 한글은 조합 가능한 음절이 11,172자에 달해 완성형 폰트 파일 자체가 라틴 문자 폰트보다 훨씬 크기 때문이다.
한글 웹폰트를 통째로 Data URI에 넣기 어려운 이유
영문 웹폰트는 알파벳과 기호를 합쳐도 수백 개 글리프면 충분하지만, 한글은 초성·중성·종성의 조합만으로 11,172개의 음절이 만들어질 수 있어 폰트 파일이 수 메가바이트에 이르기도 한다. 이런 폰트를 Base64로 통째로 CSS에 박아 넣으면 페이지 첫 로딩 자체가 크게 느려지므로, 실무에서는 실제 사용하는 글자만 추출하는 서브셋팅을 먼저 하고, 그 결과물만 작다면 Data URI로 인라인하는 방식이 일반적이다.
장점
- HTTP 요청 감소 — 작은 아이콘이나 배경 이미지, 서브셋된 작은 폰트 조각에 유용합니다.
- 파일이 문서에 "붙어" 있어 CDN 경로가 바뀌어도 깨지지 않습니다.
- 실제 이미지가 로드되기 전 즉시 표시되어야 하는 플레이스홀더에 적합합니다.
한계
- Base64는 바이너리 파일에 비해 데이터 크기를 약 3분의 1 늘립니다.
- 큰 Data URI는 HTML/CSS 파일 자체를 부풀리고 페이지와 별도로 캐싱할 수 없습니다.
- 크거나 자주 재사용되는 파일의 경우, 재방문 시에는 캐싱 가능한 별도 파일이 거의 항상 더 효율적입니다.
Base64가 아닌 텍스트로서의 SVG
래스터 형식과 달리 SVG는 텍스트(XML)이므로 반드시 Base64로 인코딩할 필요는 없습니다 — percent-encoding으로 특수 문자만 올바르게 이스케이프하면 충분합니다(data:image/svg+xml,%3Csvg...). 이 방식은 결과 크기가 다소 작고 CSS 파일 안에서 그대로 텍스트로 검토하고 수정할 수 있습니다.