Pretendard 웹폰트 때문에 CLS 점수가 깎일 때 잡는 법

페이지가 뜨자마자 글자가 한 번 출렁이고, 버튼이 살짝 밀리는 화면. 혹시 본 적 없나요? 라이프케어로그의 플랜씨(plan-c) 계산기 페이지가 딱 그랬어요.

Lighthouse를 돌려 보니 CLS 항목에서 점수가 깎이고 있었어요. 구글 기준으로 좋은 CLS는 0.1 이하인데, 그 선을 넘고 있었거든요. 범인은 Pretendard 웹폰트였어요.

원리는 단순해요. 브라우저가 처음엔 시스템 폰트로 글자를 그리고, Pretendard가 도착하면 다시 그려요. 이때 두 폰트의 글자 폭이 달라서 줄바꿈 위치가 바뀌고, 화면이 통째로 밀려요. 한글 폰트는 글리프 수가 많아 파일이 크다 보니 이 시간차가 더 길고요. 숫자가 주인공인 계산기 화면에서 결과 영역이 출렁이면 신뢰가 떨어지죠.

수정은 3단계로 끝났어요.

쓰는 굵기만 서브셋 프리로드→폴백 폰트 메트릭 보정→Lighthouse 재측정

먼저 굵기를 줄였어요. Pretendard는 9가지 굵기를 제공하는데, 실제 화면에 쓰는 건 400과 700 두 가지뿐이더라고요. 이 둘만 서브셋 woff2로 남기고 preload 링크를 걸었어요.

다음은 폴백 보정이에요. CSS의 size-adjust, ascent-override, descent-override, line-gap-override 4가지 속성으로 시스템 폰트의 글자 크기를 Pretendard에 맞춘 폴백을 @font-face로 하나 더 만들었어요. 직접 만들어 보니 보정값을 계산해 주는 도구도 있어서 어렵지 않았어요. 폰트가 늦게 와도 줄바꿈이 거의 같은 자리에 생겨서 화면이 밀리지 않아요.

적용해 봤더니 CLS 경고가 사라졌고, 전체 작업은 10분 정도 걸렸어요. 느린 네트워크 조건으로 테스트해 보면 차이가 더 크게 느껴져요. 폰트 로드가 늦어질수록 보정 효과가 잘 보이거든요.

혼자 운영하면서 배운 건, 폰트는 디자인이기 전에 성능이라는 점이에요. 웹폰트를 쓰고 있다면 오늘 Lighthouse 한 번만 돌려 보세요. 점수 옆에 폰트가 서 있을지도 몰라요.