웹 폰트 용량 때문에 사이트가 느리다면? 한글 웹 폰트를 2MB에서 300KB로 줄이는 서브셋(Subset) 폰트 제작 가이드를 확인하세요. 불필요한 글자를 제거하고 font-display:swap;으로 체감 로딩 속도까지 개선하는 실전 팁을 담았습니다.
🏃♂️ 당신의 웹사이트가 무거워진 이유, 혹시 '한글 폰트' 때문인가요?
멋진 디자인을 위해 웹 폰트를 사용하지만, 혹시 그 웹 폰트가 당신의 웹사이트를 느림보로 만들고 있진 않나요?
특히 한글 웹 폰트는 그 용량이 어마무시합니다. 영문 폰트가 몇십 KB 수준이라면, 한글 폰트는 기본 2MB를 훌쩍 넘기기도 하죠. 방문자가 당신의 글을 보기도 전에 로딩 속도에 지쳐 떠나간다면 정말 슬픈 일입니다. 구글과 네이버 같은 검색 엔진 역시 로딩 속도를 주요 순위 요소로 고려하기 때문에, 폰트 용량 다이어트는 더 이상 선택이 아닌 필수입니다. 오늘은 이 무거운 한글 폰트를 300KB 이하로 줄이는 마법 같은 기술, '서브셋(Subset) 폰트' 제작 방법에 대해 알아보겠습니다.
💡 서브셋(Subset) 폰트란 무엇인가? 2MB를 300KB로 줄이는 마법!
서브셋(Subset) 폰트는 말 그대로 전체 폰트 파일에서 '실제로 사용하는 글자(Subset)만 골라내어 만든 폰트 파일'을 의미합니다.
영문은 대소문자와 숫자, 기호 몇 개면 충분하지만, 한글은 자음과 모음의 조합으로 수천, 수만 개의 글자를 표현할 수 있어 전체 파일의 크기가 클 수밖에 없습니다.
불필요한 글자 제거의 필요성 (한글 2,350자 외)
우리가 평소에 쓰는 한글은 생각보다 많지 않습니다. 하지만 대부분의 폰트 파일은 거의 사용되지 않는 고어(古語)나 매우 희귀한 글자까지 모두 포함하고 있습니다. 이 불필요한 글자들을 제거하는 것이 바로 폰트 다이어트의 핵심입니다.
- 용량 차이: 한글 전체 글자 수(11,172자)를 모두 포함하면 2MB 내외지만, 실제 자주 쓰이는 '한글 2,350자'(KS 완성형 표준)만 남기면 용량을 90% 이상 줄일 수 있습니다.
- 성능 향상: 폰트 용량이 줄어들면 다운로드 시간이 단축되고, 웹사이트 로딩 속도가 획기적으로 개선됩니다.
🛠️ 한글 서브셋 폰트 제작 도구 종류와 활용 가이드
한글 서브셋 폰트를 만드는 것은 어렵지 않습니다. 친절한 무료 도구들이 많이 있으니까요. 크게 웹 기반 도구와 CLI(명령어 기반) 도구로 나눌 수 있습니다.
추천 도구 및 사용법
웹 기반 도구는 설치 없이 간편하게 사용할 수 있어 초보자에게 추천하며, CLI 도구는 강력한 기능과 자동화를 원하는 개발자에게 적합합니다.
| 구분 | 도구 이름 | 특징 | 추천 대상 |
| 웹 기반 | wOFF Subsetter 등 | 웹사이트에서 파일을 업로드하고 텍스트를 입력하여 변환 | 초보자, 간편한 작업 |
| CLI 기반 | fonttools (pyftsubset) | 파이썬(Python) 환경에서 명령어로 실행, 상세 옵션 제공 | 개발자, 대량 작업, 자동화 |
🚀 한글 서브셋 폰트 제작 실습: '한글 2,350자'만 남기기
이제 실제 서브셋 폰트를 만들어보겠습니다. 가장 보편적인 '한글 2,350자' 서브셋을 만드는 단계를 설명합니다.
단계별 제작 방법 및 팁
- 원본 폰트 준비: 원하는 한글 폰트의 TTF 또는 OTF 파일을 준비합니다. (상업적 이용 가능한 폰트인지 반드시 확인하세요!)
- 한글 2,350자 텍스트 준비: 인터넷에서 '한글 2,350자' 리스트를 찾아 텍스트 파일로 저장합니다.
- 도구 실행: 선택한 도구를 사용하여 원본 폰트 파일과 2,350자 텍스트 파일을 입력합니다.
- 변환 및 저장: 대부분의 도구는 자동으로 서브셋 폰트를 생성합니다. 이때 woff2 형식으로 변환하는 것이 용량 면에서 가장 유리합니다.
- 적용: 생성된 서브셋 폰트 파일을 웹사이트 서버에 업로드하고, CSS에 등록합니다.
💡 팁: 2,350자 외에 추가로 필요한 특수문자나 숫자, 영문도 텍스트 파일에 포함하여 함께 서브셋으로 만들면 좋습니다.
⏱️ font-display:swap; 으로 체감 로딩 속도 2배 높이기
font-display:swap;은 웹 폰트가 완전히 다운로드되기 전까지는 시스템 기본 폰트(예: 맑은 고딕, 산세리프 등)로 글자를 먼저 보여주고, 다운로드가 완료되면 웹 폰트로 교체하는 기능입니다.
- 원리: 폰트 로딩 타임아웃을 없애고 즉시 대체 폰트를 사용하게 합니다.
- 효과: 방문자는 글자가 바로 보여 답답함을 느끼지 않으며, 서브셋 폰트와 결합하면 최상의 웹 성능을 경험할 수 있습니다.
@font-face {
font-family: 'MySubsetFont';
src: url('/fonts/my-subset-font.woff2') format('woff2');
font-display: swap; /* 핵심 속성! */
}💡 팁: 이 속성을 사용하면 폰트가 교체될 때 글자 크기나 줄 간격이 미세하게 변할 수 있으므로, 시스템 폰트와 유사한 비율을 가지도록 스타일을 조정하는 것이 좋습니다.
🎁 이제 웹사이트도 가볍게! 서브셋 폰트로 방문자를 맞이하세요.
지금까지 한글 웹 폰트의 용량을 획기적으로 줄이는 서브셋(Subset) 폰트 제작 방법과 체감 속도를 높여주는 font-display:swap; 활용법을 알아봤습니다. 무거운 폰트는 웹사이트의 적입니다.
조금의 노력으로 2MB의 무거운 폰트를 300KB로 다이어트시키고, 방문자에게 훨씬 더 쾌적한 환경을 제공할 수 있습니다. 로딩 속도가 빨라지면 방문자의 체류 시간이 늘어나고, 검색 엔진의 평가도 좋아질 것입니다. 지금 바로 당신의 웹사이트에 서브셋 폰트를 적용하여 가볍고 빠른 웹사이트를 만들어보세요!
오늘 소개해 드린 한글 서브셋 폰트 제작 가이드가 도움이 되셨나요? 웹 성능 최적화의 첫걸음인 폰트 다이어트로 여러분의 블로그를 더욱 빠르고 쾌적하게 만들어 보세요! 작은 노력이지만 방문자에게 큰 만족감을 줄 수 있습니다.
'Web > CSS' 카테고리의 다른 글
| 웹 퍼블리셔를 위한 가변 폰트(Variable Fonts) 실무 활용법 및 최적화 가이드 (0) | 2026.04.10 |
|---|---|
| CSS 변수(Custom Properties)를 JavaScript로 가져오는 완벽 가이드: 초보자도 바로 적용 가능! (1) | 2025.12.16 |
| 폰트 파일 하나로 굵기 조절? 가변 폰트의 모든 것 (feat. 구글 폰트) (1) | 2025.12.15 |
| SCSS vs CSS 차이점 총정리: 왜 이제는 무조건 SCSS인가? (0) | 2025.12.15 |
| CSS만을 활용한 텍스트 롤링 효과 구현하기 (2) | 2025.01.21 |