한글 웹폰트(Pretendard, Noto Sans KR)는 원본 파일 용량이 1MB~2MB에 달해 영문 폰트와 달리 페이지가 로드되는 순간 레이아웃을 흔드는 CLS(누적 레이아웃 이동) 문제를 일으킵니다.
이 문제는 단순한 시각적 불편함이 아니라 구글 Core Web Vitals 점수를 깎아 검색 순위와 사용자 이탈률에 직접 영향을 줍니다.
해결책은 세 가지입니다. 폰트 서브셋팅으로 용량을 줄이고, CSS Metric Overrides로 시스템 폰트와 웹폰트의 '부피 차이'를 메우고, preload로 로딩 순서를 제어하는 것입니다.
이 글에서는 홈페이지 제작을 기획 중인 마케팅 담당자나 경영자도 바로 이해하고 개발팀에 전달할 수 있는 수준으로 설명합니다.
웹사이트를 열었을 때 텍스트가 먼저 뜨고, 0.5초쯤 지나면 폰트가 바뀌면서 아래 버튼이나 이미지가 갑자기 밑으로 밀려나는 경험, 해보신 적 있으시죠?
이 현상을 CLS(Cumulative Layout Shift, 누적 레이아웃 이동)라고 합니다. 구글은 이 수치를 0.1 이하면 '좋음', 0.25 이상이면 '나쁨'으로 분류하며 검색 순위 산정에 반영합니다.
영문 알파벳은 대소문자와 기호를 합쳐도 약 100여 자입니다. 그래서 영문 폰트 파일은 수십 KB에 불과합니다.
반면 한글은 자음·모음 조합으로 만들어지는 글자 수가 무려 11,172자입니다. 전체 글리프를 담은 Pretendard나 Noto Sans KR 원본 파일은 1MB~2MB 이상이 됩니다.
브라우저는 이 무거운 파일이 다 내려오기 전까지 기기 기본 폰트(Windows: 맑은 고딕, macOS: Apple SD Gothic Neo)를 임시로 보여줍니다. 파일이 완전히 로드되면 웹폰트로 교체(Swap)하는데, 두 폰트의 글자 너비·행간·기준선이 미세하게 달라서 레이아웃이 '덜컹' 밀려납니다.
이것이 CLS의 발생 메커니즘입니다.
서브셋팅(Font Subsetting)이란 폰트 파일에서 실제로 사용하지 않는 글자를 제거해 용량을 줄이는 작업입니다.
한글 11,172자 전부를 담을 필요는 없습니다. 실제 웹사이트에서 쓰이는 글자는 KS X 1001 표준 완성형 한글 2,350자 수준이면 충분합니다.
실제 서비스 적용 사례를 보면, 600KB에 달하던 폰트 파일을 완성형 서브셋으로 가공하고 WOFF2 포맷으로 전환했더니 214KB 수준으로 60% 이상 줄어들었습니다.
포맷 선택 기준:
WOFF2: 웹 표준에서 압축률이 가장 높습니다. TTF·WOFF 대비 30~50% 더 가볍습니다. 최우선 선택지입니다.TTF/OTF: 구형 브라우저 대응용. 2026년 기준 대부분의 서비스에서 생략 가능합니다.직접 서브셋 제작이 어렵다면:
Pretendard 공식 CDN이 제공하는 pretendard-dynamic-subset.css를 호출하면 됩니다. 사용자가 현재 보고 있는 화면에 필요한 유니코드 범위의 조각 파일만 자동으로 내려받는 다이나믹 서브셋 방식이라 별도 작업 없이 최적화 효과를 얻을 수 있습니다.
서브셋팅으로 용량을 줄여도 폰트가 교체되는 순간 레이아웃이 흔들릴 수 있습니다. 이를 막는 것이 CSS Font Metrics Overrides입니다.
쉽게 말하면, 시스템 기본 폰트(맑은 고딕 등)가 임시로 화면에 그려질 때 웹폰트인 Pretendard와 '거의 같은 부피'를 갖도록 CSS로 미세 조정하는 기법입니다.
2026년 현재 Chrome, Edge, Safari(v17 이상), Firefox 모두 이 속성을 완벽하게 지원합니다.
실무 추천 Pretendard 폴백 CSS 예시:
@font-face {
font-family: 'Pretendard-Fallback';
src: local('Apple SD Gothic Neo'), local('Malgun Gothic'), local('sans-serif');
size-adjust: 102%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}
body {
font-family: 'Pretendard', 'Pretendard-Fallback', sans-serif;
}size-adjust: 시스템 폰트의 전체 크기 비율을 조정합니다.ascent-override: 글자 기준선 윗공간 높이를 맞춥니다.descent-override: 글자 기준선 아랫공간 높이를 맞춥니다.line-gap-override: 줄 간격 격차를 통일합니다.Nuxt.js 기반 환경에서 이 방식을 적용한 결과 CLS 수치가 0.34(나쁨)에서 0.013(매우 우수)으로 개선된 사례가 있습니다. 데스크톱 환경에서도 0.3568에서 0.1194로 대폭 완화된 실측 데이터가 보고되었습니다.
용량도 줄이고 폰트 부피도 맞췄다면, 마지막은 브라우저에 '이 파일을 먼저 받아라'고 지시하는 것입니다.
<head> 태그 안에 아래 코드를 추가하면 됩니다.
<link rel="preload" href="/fonts/Pretendard-Regular.subset.woff2" as="font" type="font/woff2" crossorigin />이렇게 하면 브라우저가 HTML을 파싱하는 시점부터 폰트 파일을 가장 높은 우선순위로 내려받기 시작합니다.
font-display: swap;과 함께 쓰면 폰트가 로드되기 전에는 시스템 폰트를 보여주고, 준비가 되면 자연스럽게 교체합니다. 앞서 2단계에서 부피를 맞춰뒀기 때문에 교체 시점에 레이아웃이 흔들리지 않습니다.
프레임워크 사용자라면:
next/font 모듈이 이 과정을 빌드 타임에 자동 처리합니다.@nuxtjs/fontaine이 시스템 폰트와 웹폰트 간 간격을 분석해 CSS를 자동 생성합니다.[ ] 원본 폰트 파일을 그대로 쓰지 않고 서브셋(2,350자 이상)으로 가공했는가?[ ] 폰트 포맷을 WOFF2로 최우선 선언했는가?[ ] @font-face에 local() 선언을 먼저 배치해 이미 설치된 폰트는 재다운로드를 막았는가?[ ] 폴백 폰트에 size-adjust, ascent-override, descent-override, line-gap-override를 설정했는가?[ ] 본문에 사용되는 Regular 굵기 폰트를 <head>에서 preload 처리했는가?[ ] 영문과 한글 폰트를 분리해 unicode-range로 처리 범위를 명시했는가?[ ] Google PageSpeed Insights 또는 Lighthouse에서 CLS 수치가 0.1 이하인지 확인했는가?Q1. 다이나믹 서브셋 CDN을 쓰면 직접 서브셋 파일을 만들지 않아도 되나요?
네, Pretendard 공식 CDN의 pretendard-dynamic-subset.css를 호출하면 현재 화면에 필요한 유니코드 범위만 자동으로 요청합니다. 다만 CDN 서버 응답 속도에 의존하게 되므로, 성능이 중요한 서비스라면 자체 서버에 서브셋 파일을 올려두는 방식이 더 안정적입니다.
Q2. Noto Sans KR도 같은 방법으로 최적화할 수 있나요?
네, 동일한 원리가 적용됩니다. 구글 폰트의 Noto Sans KR은 구글 폰트 서버가 다이나믹 서브셋을 자동 적용하지만, 직접 호스팅할 경우 서브셋 가공과 CSS Overrides 설정이 필요합니다.
Q3. 가변 폰트(Variable Font)를 쓰면 무조건 더 빠른가요?
반드시 그렇지는 않습니다. 가변 폰트 1개 파일로 400·500·700 굵기를 모두 커버할 수 있어 HTTP 요청 횟수는 줄어듭니다. 하지만 파일 자체 용량이 일반 폰트보다 클 수 있어, 굵기를 2종 이하로만 쓰는 경우에는 개별 파일이 더 유리할 수 있습니다.
Q4. CLS 수치가 높으면 SEO에 얼마나 영향을 미치나요?
구글은 CLS를 Core Web Vitals의 핵심 지표로 검색 순위 알고리즘에 반영합니다. CLS 0.25 이상은 '나쁨' 등급으로 분류되며, 경쟁 사이트 대비 순위가 밀릴 수 있습니다. 홈페이지 제작 단계에서 처음부터 설계하는 것이 리뉴얼 후 수정하는 것보다 비용 효율적입니다.
Q5. 워드프레스나 카페24로 만든 홈페이지도 이 방법을 쓸 수 있나요?
워드프레스는 functions.php나 플러그인을 통해 <head>에 preload 태그를 추가하고 CSS를 삽입할 수 있습니다. 카페24 등 호스팅 기반 솔루션은 HTML 직접 편집이 제한되는 경우가 있어 적용 범위가 좁을 수 있습니다. 이 경우 에이전시와 상의해 가능한 범위를 먼저 확인하는 것이 좋습니다.
한글 폰트로 인한 CLS 문제는 홈페이지가 완성된 뒤 발견하면 수정 비용이 커집니다. 서브셋팅 전략, CSS Overrides 설계, preload 우선순위 기획은 모두 개발 착수 전 기술 기획 단계에서 결정되어야 합니다.
핵심 요점을 정리하면 다음과 같습니다.
size-adjust 등 CSS Overrides로 시스템 폰트와 웹폰트의 부피를 맞추면 스왑 시 레이아웃이 흔들리지 않습니다.preload로 폰트 로딩 순서를 제어하면 체감 속도가 빨라집니다.홈페이지 제작을 준비 중이라면, 폰트 하나의 설계 방식이 검색 순위와 사용자 경험을 동시에 좌우한다는 점을 기억하세요.
에이달(ADALL)은 홈페이지 제작 기획 단계부터 폰트 서브셋팅, Core Web Vitals 최적화, CSS 로딩 설계를 함께 검토합니다. 기술적인 부분이 막막하게 느껴지신다면 부담 없이 문의해 주세요.
📞 02-2664-8631 | 📧 master@adall.co.kr
무료 컨설팅 받아보고 싶다면?
무료 컨설팅 신청하기