웹사이트의 분위기를 가장 손쉽게 바꾸는 방법은 폰트를 바꾸는 것입니다. 그래서 많은 사이트가 Pretendard, 노토 산스 KR, SUIT 같은 한글 웹폰트를 한 줄로 임포트해 사용합니다. 그런데 이상하게도 페이지가 무거워집니다. 첫 화면이 잠깐 깜빡이고, Lighthouse 점수가 쑥 떨어집니다. 같은 사이트의 영문 버전은 멀쩡한데 한글 버전만 그렇습니다. 이유는 단순합니다. 한글 폰트는 영문 폰트보다 평균 50배 이상 무겁기 때문입니다.
한글 웹폰트가 무거운 이유
로마자 알파벳은 대소문자, 숫자, 기본 기호를 합쳐도 200자 이내입니다. 반면 한글은 가능한 음절 조합이 11,172자에 이르고, 그중 KS X 1001 표준에 들어가는 2,350자만 해도 영문 폰트의 10배가 넘습니다. 한자, 일본어 가나, 다양한 굵기까지 포함된 노토 산스 KR Regular 한 종은 압축되지 않은 상태에서 약 4MB, 압축한 WOFF2조차 1MB를 넘기는 경우가 많습니다. 첫 화면을 그리는 데 필요한 자원이 그만큼 늦게 도착한다는 뜻이고, 모바일 LTE 환경에서는 그 격차가 곧바로 이탈로 이어집니다.
페이지 속도를 지키는 다섯 가지 원칙
1. 서브셋(subset)으로 무게를 절반 이하로 줄인다
대부분의 한국 웹사이트는 한자나 옛 한글을 쓰지 않습니다. 그렇다면 폰트 파일에서 그 글리프를 제거해야 합니다. 서브셋팅으로 한글 2,350자에 영문, 숫자, 자주 쓰는 기호만 남기면 폰트 용량이 70~80%까지 줄어듭니다. Pretendard는 공식적으로 Subset 버전을 제공하고, 노토 산스 KR도 구글 폰트의 &text= 파라미터나 fonttools의 pyftsubset으로 직접 잘라낼 수 있습니다. 서브셋만 적용해도 첫 화면 로딩이 0.5~1초 단축되는 사이트가 적지 않습니다.
2. WOFF2 포맷을 기본으로 한다
WOFF2는 Brotli 기반 압축으로 WOFF보다 평균 30% 더 작습니다. 모든 모던 브라우저가 지원하니 TTF나 OTF, EOT 같은 구형 포맷은 사용할 이유가 없습니다. @font-face 선언에 WOFF2 한 줄만 두는 것이 가장 가볍고 가장 빠릅니다. 인터넷 익스플로러 호환을 위해 WOFF를 함께 두던 시대는 끝났습니다. 폴백 포맷 한 줄을 지우는 것만으로도 HTTP 요청 절반이 사라집니다.
3. font-display: swap으로 빈 화면을 막는다
웹폰트가 도착할 때까지 텍스트를 숨기는 기본 동작은 사용자에게 '잠깐 깜빡이는 빈 화면(FOIT)'으로 보입니다. CSS의 font-display: swap을 지정하면 시스템 폰트로 먼저 그리고 웹폰트가 도착하면 자연스럽게 교체합니다. 약간의 레이아웃 시프트는 발생하지만, 아무것도 보이지 않는 시간보다 임시 폰트라도 보이는 시간이 사용자에겐 훨씬 빠르게 느껴집니다. Core Web Vitals의 LCP 점수도 함께 좋아집니다.
4. 핵심 폰트는 preload로 우선순위를 올린다
본문에서 가장 먼저 보이는 굵기 한두 종은 link rel="preload" 태그로 미리 가져오게 합니다. 브라우저는 CSS를 다 파싱한 뒤에야 폰트를 요청하기 때문에, preload 한 줄이 폰트 도착 시점을 200~400ms 앞당깁니다. 다만 모든 굵기를 preload하지는 않습니다. 페이지 첫 화면에 실제로 쓰이는 종만 골라야 효과가 있고, 무분별하게 preload를 남발하면 오히려 다른 핵심 자원을 밀어내 LCP가 나빠집니다.
5. 시스템 폰트와 가변(variable) 폰트를 적극 활용한다
최근 macOS와 윈도우 11은 한글 시스템 폰트의 품질이 크게 좋아졌습니다. 관리자 페이지나 대시보드처럼 디자인보다 속도가 중요한 곳은 시스템 폰트 스택만으로도 충분합니다. 브랜드 일관성이 필요한 곳에는 가변 폰트(Variable Font)를 활용하면 굵기마다 별도 파일을 받지 않고 한 파일로 100~900까지 표현할 수 있어 네트워크 요청이 줄어듭니다. Pretendard Variable, 산돌 어바웃 Variable 같은 한글 가변 폰트가 이미 실서비스에 충분히 쓸 만큼 안정적입니다.
지금 바로 해볼 수 있는 점검
크롬 개발자 도구의 Network 탭에서 폰트 파일만 필터링해 보세요. 폰트 파일이 5개 이상 잡히거나 한 파일이 500KB를 넘는다면 최적화의 여지가 큽니다. Lighthouse를 돌려 'Ensure text remains visible during webfont load' 경고가 뜨는지도 함께 확인합니다. 이 두 항목만 정리해도 모바일 LCP가 1초 가까이 줄어드는 경우가 흔합니다.
CYAN은 웹사이트를 만들 때 폰트를 디자인 요소이자 성능 자산으로 함께 다룹니다. 어떤 굵기를 정말 쓸 것인지부터 정하고, 필요한 글리프만 잘라낸 서브셋을 만들어, 첫 화면에서 가장 먼저 보이는 한 종은 preload로 끌어옵니다. 폰트는 분위기를 만들지만, 잘못 다루면 그 분위기에 도달하기 전에 사용자가 떠납니다. 좋은 한글 웹사이트는 보기 좋은 폰트가 빠르게 도착하는 사이트입니다.