웹사이트 속도가 느리거나 구글 점수가 낮게 나온다면 혹시 폰트 때문은 아닌지 확인해볼 필요가 있어요. 폰트 최적화만 잘해도 LCP(가장 큰 콘텐츠가 뜨는 시간)와 CLS(화면 밀림 현상) 문제를 잡고 검색엔진 노출에도 큰 도움이 되거든요. WOFF2 적용부터 인라인 CSS, font-display 설정까지 실무에서 바로 쓸 수 있는 팁들을 정리해 드릴게요.
이 글을 읽고 계신 분이라면 웹사이트 성능에 관심이 많으실 텐데요, 하나씩 차근차근 따라 해 보시면 분명 도움이 될 거예요.
폰트 로딩 속도와 화면 안정성, 왜 중요할까요?
폰트 최적화는 사이트가 뜨는 속도와 화면이 흔들리는 현상을 잡는 데 정말 중요해요. 폰트가 늦게 로딩되면 글자가 늦게 뜨거나 갑자기 모양이 바뀌면서 콘텐츠가 밀려나는데, 이게 바로 LCP와 레이아웃 변경(CLS) 점수를 깎아먹는 주범이에요. 구글은 이런 사용자 경험을 중요하게 보기 때문에, 폰트를 가볍게 만들고 레이아웃이 흔들리지 않게 잡아주는 것이 핵심이랍니다.
검색엔진에 잘 노출되려면 폰트 최적화는 선택이 아니라 필수인 것 같아요. 폰트를 빠르게 불러오고, 글꼴이 바뀌더라도 화면이 덜컹거리지 않게 만드는 게 LCP와 CLS 문제를 해결하는 지름길입니다.
폰트 로딩 속도를 확 줄이는 기술적인 방법
검색엔진이 좋아하는 사이트를 만들려면 초기 로딩 때 폰트를 얼마나 똑똑하게 처리하느냐가 관건이에요. 속도를 개선하는 확실한 방법들을 정리해 봤어요.
1. 인라인 CSS로 초기 로딩 빠르게 만들기
폰트를 외부 CSS 파일에서 불러오면 시간이 걸리니까, 아예 HTML 안에 중요한 폰트 설정을 넣어버리는 거예요. 이렇게 하면 브라우저가 외부 파일을 기다릴 필요 없이 바로 폰트를 읽어서 LCP 지연을 막을 수 있어요. 아래 코드를 참고해서 적용해 보세요.
✔ 예시 코드
@font-face{ font-display:swap; font-family: ‘Noto Sans KR’; font-style: normal; src: url(폰트 경로/NotoSans-Regular.woff2) format(‘woff2′); unicode-range: U+AC00-D7AF, U+0030-0039, U+0041-005A, U+0061-007A, U+0020-007E; } html { font-family:’Noto Sans KR’, sans-serif; }
2. 외부 폰트 사이트 미리 연결하기 (Preconnect)
만약 구글 폰트 같은 외부 서비스를 쓴다면, 브라우저한테 “우리 저기서 뭐 가져올 거야”라고 미리 알려주는 게 좋아요. `preconnect`를 쓰면 DNS 조회나 연결 준비를 미리 끝내놔서 대기 시간을 줄여주거든요.
✔ 적용 예시
<link rel=”preconnect” href=”https://fonts.com”>
3. 기본 시스템 폰트 활용하기
사실 제일 빠른 건 다운로드할 필요가 없는 폰트를 쓰는 거예요. 사용자의 컴퓨터나 핸드폰에 이미 깔려 있는 시스템 폰트(system-ui)를 쓰면 로딩 시간이 ‘0’이 되니까 성능 면에서는 제일 좋겠죠? 외부 서버 상태에 영향을 받지 않는다는 점도 큰 장점이에요.
✔ 적용 예시
font-family: system-ui
4. WOFF2 포맷과 서브셋팅 사용하기
기존 폰트보다 용량을 30% 정도 줄인 WOFF2 형식을 쓰는 게 요즘은 국룰이에요. 대부분의 브라우저에서 지원하니까 이걸 1순위로 설정해 주세요.
그리고 폰트 파일 안에 있는 모든 글자를 다 가져올 필요 없이, 딱 필요한 글자만 가져오는 ‘서브셋팅’을 하면 더 가벼워져요. 특히 한글 폰트는 용량이 커서 이 방법이 정말 효과적이에요. 아래처럼 `unicode-range`를 써서 필요한 문자만 지정해 보세요.
✔ 서브셋팅 예시
unicode-range: U+AC00-D7AF (한글), U+0030-0039 (숫자), U+0041-005A (대문자), U+0061-007A (소문자), U+0020-007E (기호)
CLS 문제 해결: 화면 덜컹거림 방지하기
폰트가 로딩되면서 기본 글꼴에서 웹 폰트로 바뀔 때 글자 크기가 달라지거나 줄 간격이 변해서 화면이 덜컹거리는 걸 CLS라고 해요. 이걸 막는 방법도 알아볼게요.
1. font-display 설정으로 보여주는 방식 제어하기
브라우저는 폰트가 다 받아질 때까지 보통 3초 정도 글자를 숨기는데, 이걸 조절할 수 있어요. `font-display` 속성을 상황에 맞게 쓰면 사용자가 기다리는 시간을 줄이거나 레이아웃 변경을 최소화할 수 있답니다.
✔ 주요 설정값
* swap: 기본 폰트를 먼저 보여주다가 웹 폰트가 로딩되면 바꿔줍니다. 글자가 바로 보여서 좋지만 화면이 살짝 바뀔 수 있어요.
* optional: 폰트 로딩이 너무 늦어지면 그냥 기본 폰트를 계속 씁니다. 화면이 흔들리는 걸 아예 막고 싶을 때 추천해요.
* block: 폰트가 올 때까지 잠깐 숨깁니다.
속도가 중요하다면 `optional`을, 글자 스타일이 중요하다면 `swap`을 고려해 보세요.
2. 폰트 크기 비율 맞춰주기 (font-size-adjust)
폰트가 바뀔 때 글자 높이가 달라서 화면이 밀리는 거라면 `font-size-adjust` 속성을 써보세요. 웹 폰트랑 기본 폰트의 크기 비율을 비슷하게 맞춰줘서 눈에 거슬리는 변화를 줄여줍니다.
✔ 적용 예시
font-size-adjust: 0.5; /* 글자 높이 비율 조정 */
폰트는 웹페이지 용량의 큰 부분을 차지하니까 이렇게만 신경 써도 전체적인 성능이 확 좋아질 거예요. 검색엔진 최적화는 거창한 게 아니라 이런 디테일에서 시작된답니다.
자주 묻는 질문 (FAQ)
Q: LCP와 CLS 문제는 폰트 말고 또 뭐가 영향을 주나요?
A: LCP는 폰트 외에도 큰 이미지나 동영상 로딩 속도에 영향을 받아요. CLS는 크기(width, height)가 지정되지 않은 이미지나 갑자기 뜨는 광고 배너 때문에 화면이 밀리면서 자주 발생해요.
Q: WOFF2 폰트를 쓰면 옛날 브라우저에서는 안 보이나요?
A: 걱정하지 않으셔도 돼요. CSS에서 `format()`을 써서 WOFF2를 먼저 적고, 그 뒤에 WOFF나 TTF를 적어주면 됩니다. 브라우저가 알아서 지원하는 파일 중 가장 좋은 걸 골라서 보여주거든요.
Q: font-display: swap을 쓰면 화면이 흔들린다는데 어떻게 하죠?
A: 맞아요, `swap`은 폰트가 바뀔 때 깜빡임(FOUT)이 있을 수 있어요. 레이아웃이 흔들리는 게 정말 싫다면 `font-display: optional;`을 추천드려요. 이 설정은 폰트가 빨리 안 오면 그냥 기본 폰트를 써서 화면 변화를 아예 막아주거든요.
