🔤 웹 폰트 다이어트 (Subset 생성기)
용량이 큰 한글 폰트 파일(보통 2~5MB)을 다이어트시키기 위한 툴입니다. 깨짐 없는 서브셋 제작을 위한 최적의 완성형 한글 코드를 제공합니다.
1. 추출 옵션 선택
2. 생성된 서브셋 프리셋 글자 리스트
3. 웹폰트 CSS 적용용 Unicode-Range
@font-face 스크립트 작성 시 브라우저 지연 로딩을 유도하는 css 속성입니다.
💡 모바일 로딩 속도를 올리는 경량화 기술, 한글 웹폰트 서브셋과 유니코드 범위 최적화
웹 디자인의 완성도를 높이기 위해 커스텀 폰트를 적용하다 보면, 유독 영문 사이트에 비해 한글 사이트의 초기 로딩 속도가 비정상적으로 느려지거나 화면이 미세하게 버벅이는 현상을 자주 마주하게 됩니다. 영문 폰트는 알파벳 대소문자와 기호를 합쳐도 글자 수가 몇백 자에 불과해 용량이 킬로바이트(KB) 단위로 매우 가볍지만, 한글 폰트는 자음과 모음의 조합으로 만들어질 수 있는 모든 글자를 포함해야 하므로 파일 크기가 수 메가바이트(MB)에 달하기 때문인데요. 저사양 모바일 통신 환경에서 사이트의 이탈률을 유발하는 무거운 웹폰트의 거품을 빼고, 필요한 핵심 글자만 정밀하게 다이어트시킬 수 있도록 이 서브셋 생성기 유틸리티를 제작하게 되었습니다.
이 연산 도구는 국가 표준 현대 한글 핵심 범위와 초경량 빈출자 규격을 상속하여 폰트 경량화 프로그램에 즉시 주입할 수 있는 글자 리스트를 추출하며, 브라우저의 효율적인 서체 다운로드를 제어하는 CSS unicode-range 소스코드를 실시간으로 빌드해 줍니다.
📊 한글 서브셋 추출 범위별 용량 절감 요율 및 추천 규격 비교 표
내가 타겟으로 하는 웹사이트의 성격과 콘텐츠 범위를 고려하여 가장 이상적인 폰트 다이어트 옵션을 선택해 보세요. 서브셋을 적용하는 순간 웹 성능 최적화 점수가 비약적으로 상승합니다.
| 서브셋 프리셋 유형 | 포함 글자수 및 범위 | 평균 파일 용량 변동 | 추천 웹사이트 성격 및 유의사항 |
|---|---|---|---|
| KS X 1001 표준 핵심 (추천) | 현대 한글 핵심 2,350자 + 영문/기호 | 약 4.5MB ➔ 400KB 내외 (90% 감소) | 일반적인 블로그, 기업 홍보 사이트, 커뮤니티 등 대다수 웹 서비스에 완벽 대응 |
| 상위 빈출 초경량 버전 | 가장 많이 쓰는 300자 + 영문/숫자/기호 | 약 4.5MB ➔ 80KB 내외 (98% 감소) | 이벤트 팝업 페이지, 메인 대형 배너 타이틀 등 텍스트 변경이 제한적인 UI 컴포넌트 |
| 레거시 전체 완성형 (비추천) | 고어 및 특수조합 포함 11,172자 전체 | 약 4.5MB ~ 7MB 유지 (절감 없음) | 웹 성능 지표를 심각하게 저하시키므로 특수한 목적이 아닌 이상 실무 사용 금지 |
📌 11,172자에서 2,350자로, 한글 서브셋(Subset) 폰트의 압축 매커니즘
한글 서체 파일의 용량이 이토록 무거운 이유는 초성, 중성, 종성이 결합하여 만들어낼 수 있는 이론상 모든 글자의 가짓수가 총 11,172자에 달하기 때문입니다. 하지만 실무적으로 우리가 일상생활에서 사용하는 글자는 이 중 20%도 채 되지 않으며, 나머지는 '뮨', '쮥', '펲'과 같이 평생 한 번 쓸까 말까 한 유령 글자들이 공간을 낭비하고 있는데요. 이를 해결하기 위해 실무 개발 현장에서는 폰트 파일에서 사용 빈도가 압도적으로 높은 국가 표준 2,350자만 골라내어 알맹이 파일로 재생성하는 '서브셋(Subset)' 공정을 거치게 됩니다.
본 생성기가 출력하는 글자 리스트 텍스트 파일 데이터는 이 표준 규격을 완벽하게 충족하므로, 서체 소스코드를 재컴파일할 때 누락으로 인한 글자 깨짐(뱁새가 '웹새'로 표현되는 현상 등) 오류를 사전에 완전 차단해 줍니다.
⚙️ 브라우저의 똑똑한 지연 다운로드를 유도하는 unicode-range의 함수
웹폰트 다이어트의 마지막 정점은 @font-face 스크립트 내부에 유니코드 범위 명세인 unicode-range 속성을 결합하는 것입니다. 이 속성은 브라우저에게 "이 폰트 파일은 해당 유니코드 영역에 속하는 글자가 실제 HTML 본문에 등장할 때만 다운로드하라"고 명령하는 일종의 조건부 로딩 치트키인데요. 만약 한 사이트에서 한글과 영문 서체를 따로 쓰고 싶다면, 영문 서체 쪽에 영문 유니코드 범위를 지정하고 한글 서체 쪽에 한글 범위를 지정해 두면 됩니다.
그렇게 하면 브라우저가 화면을 그릴 때 필요한 영역의 파일만 골라서 지연 다운로드(Lazy Loading)를 실행하므로, 첫 페이지가 뜨는 속도를 극한으로 끌어올릴 수 있습니다. 본 가이드 기기는 복사 버튼 한 번으로 CSS 표준 포맷 규격의 유니코드 범위를 완벽히 조립해 주므로 프론트엔드 최적화 빌드업에 엄청난 가치를 더해줍니다.
⚠️ 웹 폰트 다이어트 서브셋 생성기 이용 시 주의사항
본 웹 폰트 다이어트(Subset 생성기) 프로그램이 제공하는 텍스트 리스트와 유니코드 명세는 W3C 표준 웹 아키텍처 명세를 철저히 준수합니다. 다만, 현대 한글 핵심 2,350자 규격을 적용하여 서브셋 폰트를 제작할 경우, 아주 간혹 사용자가 본문에 '훵', '똠' 같은 표준 범위를 벗어난 특이한 신조어나 의성어, 의태어를 입력했을 때 해당 글자만 웹폰트가 먹히지 않고 투박한 시스템 기본 서체로 대체되어 시각적 이질감이 생기는 '폴백(Fallback)' 현상이 발생할 수 있습니다. 따라서 본 가이드를 상속하여 폰트를 배포한 후에는 사이트 내의 주요 텍스트 입출력 컴포넌트를 테스트해 보시고, 특수한 텍스트 레이아웃을 다루는 페이지라면 해당 글자만 유니코드 범위에 수동으로 한두 자 추가하여 타이포그래피의 무결성을 최종 유지하시기 바랍니다.