지난달, 한 클라이언트의 웹사이트 속도가 너무 느리다는 상담을 받았습니다. 이미지를 다 압축했는데도 모바일 점수가 50점대였죠. 원인을 파헤쳐 보니 범인은 ‘무거운 폰트 파일’이었습니다. 3MB가 넘는 폰트 파일을 통째로 내려받느라 브라우저가 흰 화면(White Screen)을 띄우고 멈춰 있었던 겁니다.
한국 웹의 새로운 표준이 된 ‘프리텐다드(Pretendard)’. 가독성 좋고 깔끔하지만, 최적화 없이 그냥 쓰면 ‘데이터 덩어리’일 뿐입니다. 오늘 이 글을 통해 폰트 용량을 90% 이상 줄이고, 로딩 속도를 비약적으로 높이는 기술적인 해결책을 적용해 보겠습니다.
1. 무조건 ‘다이나믹 서브셋(Dynamic Subset)’을 써야 하는 이유
한글은 조합형 문자라 이론상 11,172자의 글자가 필요합니다. 하지만 우리가 웹에서 실제로 쓰는 글자는 2,350자 내외죠. 쓰지도 않을 ‘믜, 쀍’ 같은 글자까지 모두 로딩하는 것은 엄청난 낭비입니다.
이때 필요한 것이 ‘서브셋(Subset)’입니다. 자주 쓰는 글자만 추려서 파일 크기를 획기적으로 줄인 버전이죠. 프리텐다드 제작자가 공식적으로 배포하는 CDN 링크 중에서도 반드시 subset이 포함된 링크를 사용해야 합니다. 이것만 바꿔도 폰트 용량이 메가바이트(MB) 단위에서 킬로바이트(KB) 단위로 줄어듭니다.
“cdn.jsdelivr.net… 주소를 자세히 보세요. 주소 중간에 /subset/이라는 단어가 없다면, 당신은 지금 방문자의 데이터를 낭비하고 있는 겁니다.”
2. WOFF2 포맷과 가변 폰트(Variable Font)
폰트 파일 확장자에도 계급이 있습니다. TTF는 구시대의 유물이고, WOFF는 표준이지만, 2024년 이후의 웹에서는 WOFF2가 왕입니다. 압축률이 압도적으로 좋아 파일 크기가 가장 작기 때문입니다.
또한, 굵기(Weight) 별로 파일을 따로 로딩하지 마세요. (예: Regular, Medium, Bold 파일 3개 로딩 금지). ‘가변 폰트(Variable Font)’ 하나만 로딩하면 CSS에서 font-weight: 100부터 900까지 자유자재로 조절할 수 있습니다. HTTP 요청 횟수를 3번에서 1번으로 줄이는 셈이죠.
3. CSS 한 줄의 마법: font-display: swap
폰트가 로딩되기 전까지 글자가 아예 안 보이는 현상(FOIT)은 사용자 경험 최악의 적입니다. 이를 방지하기 위해 CSS @font-face 설정에 반드시 아래 코드를 추가하세요.
@font-face {
font-family: ‘Pretendard Variable’;
…
font-display: swap;
}
font-display: swap;은 “폰트가 로딩될 때까지 일단 기본 폰트로 글자를 보여주고, 로딩이 끝나면 샥- 바꿔줘”라는 명령어입니다. 찰나의 순간이지만 체감 속도는 훨씬 빨라집니다.
💡 코드캠의 실전 TIP: CDN vs 셀프 호스팅
많은 분이 편하게 CDN 링크를 쓰지만, 속도에 목숨을 건다면 ‘셀프 호스팅(내 서버에 파일 올리기)’이 정답입니다. 외부 서버(CDN)를 갔다 오는 DNS 조회 시간을 아낄 수 있고, 브라우저 캐싱 정책을 내 마음대로 설정할 수 있기 때문입니다. 티스토리나 워드프레스 사용자라면 파일 업로드 기능을 적극 활용하세요.
로컬 폰트 우선 로딩 전략 (local)
혹시 방문자의 컴퓨터에 이미 프리텐다드가 설치되어 있을 수도 있지 않을까요? 그렇다면 굳이 다운로드할 필요가 없겠죠. CSS를 작성할 때 src: local('Pretendard'), url(...) 형식을 사용하면, 시스템에 설치된 폰트를 먼저 찾고 없을 때만 웹에서 다운로드합니다.
이 작은 설정 하나하나가 모여 0.1초, 0.5초의 차이를 만듭니다. 구글은 이 0.1초의 차이를 ‘SEO 점수’로 보상해 줍니다. 지금 바로 여러분의 CSS 파일을 열어 @font-face 부분을 점검해 보세요.
