정적 마케팅 사이트에서 Cumulative Layout Shift(CLS) 점수를 깎아먹는 대표 원인은 디스플레이 웹폰트가 시스템 스택으로 교체되는 순간입니다. 히어로 헤드라인이 4–12px 위아래로 움직이고 가격 행이 흔들리며 Lighthouse CLS 타일이 빨간색으로 바뀌는 패턴은 2026년에도 흔합니다. CSS는 @font-face 안에서 size-adjust와 ascent-override, descent-override, line-gap-override로 최종 면이 도착하기 전에도 목표 메트릭으로 줄 상자를 계산하도록 브라우저에 알릴 수 있습니다. 이 글은 정적 HTML을 배포하는 MPA·생성기 팀을 위해 측정 절차, @supports 점진 강화, font-display 결정표, Safari/WebKit 실기 주의사항을 정리합니다. 반응형 이미지와 LCP, 제목의 text-wrap: balance / pretty와 함께 읽으면 이미지 축과 타이포그래피 축의 Core Web Vitals 예산을 동시에 닫을 수 있습니다.
마지막에는 DevTools에서 기록해야 할 세 가지 기준값, size-adjust를 90–110% 범위로 스윕하는 방법, 필드 CLS P75 알림 임계값 0.1, 그리고 MacHTML 공개 가격의 클라우드 Mac mini(하루 약 16.9달러)로 Safari 재현 환경을 여는 절차가 남습니다.
웹폰트가 CLS를 악화시키는 이유
시스템 폴백과 브랜드 면은 어센트, 디센트, 행 간격 테이블이 거의 일치하지 않습니다. font-display: swap으로 웹폰트가 그려지면 히어로·내비·가격표의 모든 줄 박스가 재계산됩니다. 크리티컬 CSS는 인라인인데 WOFF2는 CDN에서 120–400ms 늦게 도착하는 구성에서는 사용자가 스크롤을 시작한 뒤에 스왑이 일어나기 쉬워 필드 CLS가 랩보다 나빠집니다.
font-display: block으로 텍스트를 숨기면 FCP가 떨어지고, 네거티브 마진으로 억지 정렬하면 유지보수가 불가능해집니다. 메트릭 오버라이드는 기하 불일치를 표준 속성으로 해결하며 200% 확대에서도 안정적인 튜닝을 허용합니다.
메트릭 오버라이드가 바꾸는 것
오버라이드는 글리프 외곽을 바꾸지 않고 레이아웃에 참여하는 사용 폰트 메트릭을 바꿉니다. 잘못된 퍼센트는 flex 자식과 아이콘 폰트가 섞인 내비게이션 전체로 전파됩니다.
CSS를 수정하기 전 DevTools에서 폴백 대문자 높이, 웹폰트 대문자 높이, line-height: normal 차이를 기록하세요. 디자인 토큰 저장소에 한 번 쓰면 모든 로케일이 같은 오프셋을 재사용합니다.
size-adjust와 수동 오버라이드
size-adjust는 전체를 균일하게 스케일하는 도구로, -apple-system보다 웹폰트가 2–6% 더 큰 경우에 효과적입니다. 폴란드어나 체코어에서 디센더가 잘리면 size-adjust를 96% 근처로 유지한 채 descent-override만 낮춥니다. 한 번에 한 축만 움직이고 커밋마다 시각적 diff를 남기세요.
블록 전체를 @supports (size-adjust: 90%)로 감싸면 알 수 없는 선언 때문에 @font-face 전체가 무효가 되는 구형 엔진을 피할 수 있습니다. WOFF2 preload와도 공존합니다.
font-display 페어링
약관·문서 본문은 font-display: optional을 우선해 CLS를 거의 0에 가깝게 만듭니다. 히어로에서 브랜드 곡선이 필수면 swap과 메트릭 오버라이드를 묶고 WebPageTest 필름스트립에서 스왑이 스크롤 시작 40ms 이내인지 확인합니다. 600자를 넘는 본문에 block을 쓰면 모바일 Safari에서 텍스트가 보이기 전에 사용자가 스크롤해 이탈이 늘 수 있습니다.
접근성 측면에서 VoiceOver로 줄 경계 읽기가 바뀌지 않는지 매 스모크합니다. 다국어 제목과 숫자가 섞인 스택에는 20분 정도의 확인 시간을 배정하세요.
최종 퍼센트 값은 프리뷰와 프로덕션이 동일한 @font-face를 생성하는 파이프라인에 넣어 환경 차로 인한 롤백을 줄입니다.
Safari / WebKit 주의점
WebKit은 원격 WOFF2 디코딩이 끝나기 전에도 첫 사용 가능 단계에서 오버라이드 메트릭을 적용합니다. CLS에는 유리하지만 contenteditable 영역의 캐럿이 약간 흔들릴 수 있습니다. 마케팅 폰트와 CMS 편집 UI를 함께 쓰면 별도 이슈로 검증하세요. 안정판 Safari와 Safari Technology Preview는 마이너 버전 차이로 동작이 갈릴 수 있어 폰트 메이저 업데이트 주에는 둘 다 돌립니다.
가변 폰트에서 기본 opsz가 높으면 먼저 size-adjust를 내린 뒤 축별 미세 조정으로 넘어갑니다.
복사용 @font-face 레시피
@supports (size-adjust: 90%) {
@font-face {
font-family: "Brand Display";
src: url("/fonts/brand-display.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
size-adjust: 96%;
ascent-override: 92%;
descent-override: 24%;
line-gap-override: 0%;
}
}단일 웨이트 WOFF2는 80KB 이하를 목표로 하고, Apple Silicon에서는 디코딩이 대략 30ms, 구형 Intel Air에서는 55ms까지 늘어날 수 있음을 성능 대시보드에 적어 둡니다.
결정 매트릭스
| 시나리오 | font-display | 오버라이드 | 이유 |
|---|---|---|---|
| 마케팅 히어로 | swap | size-adjust + ascent/descent | 브랜드 우선, CLS 상한 관리 |
| 문서 본문 | optional | 가벼운 size-adjust | 안정성 우선 |
| 고정폭 코드 | swap | 시스템 고정폭에 맞춤 | pre 가로 흔들림 방지 |
| CJK 로케일 | swap | 언어별 측정 | 라틴 값 재사용 금지 |
랩 CLS와 필드 CLS
Lighthouse 랩에서는 효과가 즉시 보이지만 CrUX 필드 값은 최대 28일 지연될 수 있습니다. 페이지에서 web-vitals를 수집하고 Safari UA 세그먼트로 P75 CLS가 0.1을 넘으면 알림을 걸어 두세요. 세션 리플레이 샘플링으로 미조정 롱테일 URL을 찾습니다.
예산이 빠듯하면 히어로 텍스트가 페이지 CLS의 35% 이상을 차지하는 URL부터 손대면 ROI가 큽니다.
FAQ
가변 폰트에도 쓸 수 있나요?
가능합니다. 기본 축 위치를 확인한 뒤 size-adjust, 그다음 축별 조정 순으로 진행하세요.
모든 웨이트를 preload 해야 하나요?
첫 화면에 필요한 웨이트만 하세요. 과도한 preload는 LCP 이미지와 대역폭을 빼앗아 4G 프로파일에서 80ms 지연을 만들 수 있습니다.
서드파티 폰트 CSS는?
외부 호스트의 @font-face는 안전하게 오버라이드하기 어렵습니다. WOFF2를 자체 호스팅하고 CSS를 완전히 통제하는 편이 현실적입니다.
Apple Silicon Mac mini 클라우드는 임원 노트북과 같은 Safari/Core Text 렌더링 경로를 제공해 Linux headless 근사치에 의존하지 않게 합니다. MacHTML 노드는 SSH로 자동 스크린샷과 WebPageTest 스크립트에 연결할 수 있고 VNC를 선택하면 디자이너가 필름스트립을 프레임 단위로 검토합니다. 유휴 전력은 종종 12W 전후로, 폰트 스프린트 2주만 검증용 mini를 빌리는 비용이 프로덕션 롤백 회의보다 저렴한 경우가 많습니다.
소유 대신 렌트하면 공개 가격인 하루 약 16.9달러로 캠페인 기간만 가동하고 끝나면 중지할 수 있습니다. 메트릭 표는 Git에 남기고 하드웨어를 36개월 감가상각에 올릴 필요도 없습니다.
진짜 Safari에서 CLS 친화 폰트 검증
클라우드 Mac mini를 빌려 정적 CSS를 머지하기 전에 메트릭 오버라이드와 font-display 타이밍을 확인하세요.