스마트폰으로 내 블로그를 열었을 때 텍스트가 2초 가까이 사라졌다가 갑자기 나타난 적 있으신가요? 저는 한동안 그걸 모바일 인터넷 속도 탓으로 돌렸습니다. 와이파이 연결 상태가 좋은데도 같은 증상이 반복됐고, 그때도 "오늘따라 왜 이러지" 수준으로 넘겼습니다. 그러다 PageSpeed Insights 검사에서 Google Fonts 링크가 "렌더링 차단 리소스"로 잡히는 걸 보고 나서야 원인이 다른 데 있다는 걸 알았습니다. HTML 설정 두 곳을 고치는 것만으로 체감이 완전히 달라졌습니다.
FOIT 현상, 왜 생기는 걸까요
폰트가 로딩되는 동안 텍스트가 아예 보이지 않는 현상을 FOIT(Flash of Invisible Text)라고 합니다. 브라우저가 웹 폰트를 다 받을 때까지 해당 텍스트 자체를 화면에 그리지 않는 방식으로, 특히 모바일 네트워크처럼 응답 속도가 느린 환경에서 눈에 띄게 나타납니다. 반대로 시스템 폰트가 먼저 보이다가 웹 폰트로 교체되는 현상은 FOUT(Flash of Unstyled Text)라고 부릅니다. FOUT는 폰트 교체 순간 레이아웃이 잠깐 흔들려 보이는 현상입니다.
직접 겪어보니, FOIT는 "텍스트가 없다"는 느낌을 줘서 페이지가 고장난 것처럼 보입니다. 반면 FOUT는 글씨가 한 번 바뀌는 불편함은 있지만 최소한 내용은 바로 읽을 수 있습니다. 텍스트가 아예 안 보이는 쪽이 사용자 입장에서는 훨씬 당황스럽습니다. 블로그를 처음 방문한 사람이 흰 화면을 2초 보고 나면, 그 첫인상은 콘텐츠가 아무리 좋아도 회복하기 어렵습니다.
Google Fonts를 HTML에 그냥 link 태그로 연결하면, 브라우저는 HTML을 파싱하다 멈추고 fonts.googleapis.com에 접속해 CSS를 받아온 뒤, 다시 fonts.gstatic.com에서 실제 폰트 파일을 받아옵니다. 이 두 번의 왕복 요청이 텍스트 렌더링을 막는 겁니다. preconnect 힌트를 미리 추가하면 HTML 파싱 초반부터 두 서버에 TCP 연결과 TLS 핸드셰이크를 선행해 두기 때문에, 실제 폰트 요청이 들어올 때 대기 시간이 크게 줄어듭니다.
구글 폰트 URL에 display=swap 파라미터를 붙이면 font-display: swap 속성이 적용됩니다. font-display: swap이란 폰트가 로드되는 동안 시스템 폰트로 텍스트를 먼저 보여주다가, 웹 폰트가 준비되면 교체하는 방식입니다. 저는 폴백 폰트로 Apple SD Gothic Neo와 맑은 고딕을 추가해 뒀는데, 폰트 로드가 실패해도 전체적인 느낌이 크게 어긋나지 않았습니다.
font-display 값, swap이 항상 정답일까요
솔직히 이건 예상 밖이었습니다. 처음엔 font-display: swap으로 FOIT가 사라진 것만으로도 충분하다고 생각했는데, 조금 더 파고들다 보니 swap이 만능은 아니라는 걸 알게 됐습니다.
Core Web Vitals 중 CLS(Cumulative Layout Shift)라는 지표가 있습니다. CLS란 페이지가 로드되는 동안 화면 요소들이 예상치 못하게 움직이는 정도를 수치화한 것으로, 구글이 검색 순위에 직접 반영하는 항목입니다. font-display: swap을 사용하면 폰트 교체 시점에 글자 크기나 줄 간격이 미묘하게 달라지면서 레이아웃이 밀릴 수 있습니다. 폰트 로드가 늦을수록 이 밀림 현상이 더 심해져서 CLS 점수를 깎아먹을 수 있습니다.
이 경우 font-display: optional이 더 유리할 수 있습니다. optional이란 브라우저가 폰트를 아주 짧은 시간 안에 받아오지 못하면 그냥 시스템 폰트를 계속 쓰는 방식입니다. 레이아웃 교체가 일어나지 않으니 CLS 점수에는 더 좋습니다. 다만 첫 방문 시 웹 폰트가 적용되지 않을 수 있어, 브랜드 일관성이 중요한 사이트에는 맞지 않을 수도 있습니다.
일반적으로 font-display: swap이 정답처럼 소개되는 경우가 많은데, 제 생각은 좀 다릅니다. 폰트 교체 시 발생하는 CLS 페널티까지 고려하면, 콘텐츠 위주의 블로그냐 디자인 일관성이 중요한 서비스냐에 따라 선택이 달라져야 합니다. 상황에 맞는 값을 고르는 게 맞지, 특정 값 하나를 무조건 권장하는 건 지나친 단순화입니다.
font-display 값별 특성을 간단히 정리하면 이렇습니다. swap은 텍스트를 항상 보여주지만 폰트 교체 시 CLS가 발생할 수 있습니다. optional은 CLS가 없지만 네트워크 상황에 따라 웹 폰트가 적용 안 될 수 있습니다. fallback은 그 중간으로, 100ms 내에 로드되면 교체하고 그 이후면 다음 페이지 로드 시 적용됩니다.
저는 결국 swap을 선택했습니다. 텍스트가 안 보이는 FOIT보다 폰트가 교체되는 FOUT 쪽이 제 블로그 특성상 덜 치명적이었기 때문입니다. 하지만 CLS 점수가 중요한 분이라면 optional도 충분히 고려할 만한 선택지입니다.
코드 두 줄보다 먼저 얻은 것
폰트 설정을 고치고 나서 가장 크게 느낀 건 PageSpeed 점수 변화가 아니었습니다. 블로그를 처음 열었을 때의 인상이 달라졌다는 것이었습니다. 폰트가 흔들리지 않고 바로 자리를 잡는 페이지와, 글씨가 깜빡이면서 교체되는 페이지는 내용을 읽기 전부터 신뢰감이 다릅니다.
콘텐츠에 공을 들일수록, 그 콘텐츠가 처음 눈에 들어오는 순간도 함께 챙겨야 한다는 걸 폰트 설정 두 줄을 고치면서 배웠습니다. 화면에 글씨가 자연스럽게 뜨는 것, 당연해 보이지만 그게 만들어지는 데는 의도가 필요합니다. preconnect와 font-display 설정부터 점검해 보시길 권합니다.
참고: