웹폰트 로딩 시 글꼴이 깜빡이며 바뀌는 이유: FOIT와 FOUT 현상 및 WOFF2 포맷 압축 원리

웹폰트가 로딩될 때 발생하는 시각적 현상의 비밀

웹사이트를 방문했을 때 처음에는 텍스트가 보이지 않다가 갑자기 나타나거나, 기본 글꼴로 표시되던 글자가 잠시 후 예쁜 디자인의 폰트로 툭 바뀌는 경험을 해본 적이 있을 것입니다. 이러한 현상은 사용자 경험을 저해하는 요소 중 하나로, 웹 개발자와 디자이너에게는 반드시 해결해야 할 숙제입니다. 이 현상의 정체는 바로 FOIT와 FOUT이며, 이를 이해하는 것은 웹 성능 최적화의 첫걸음입니다.

FOIT와 FOUT의 차이점과 특징

웹폰트 로딩 방식에 따라 사용자가 체감하는 불편함은 두 가지 유형으로 나뉩니다. 브라우저가 폰트를 어떻게 처리하느냐에 따라 결정되는 이 현상들을 명확히 구분할 필요가 있습니다.

FOIT 현상

FOIT는 Flash of Invisible Text의 약자로, 글꼴이 완전히 로딩되기 전까지 텍스트를 아예 보여주지 않는 현상입니다. 브라우저는 지정된 폰트 파일이 준비될 때까지 텍스트를 투명하게 처리하거나 숨깁니다. 사용자 입장에서는 페이지는 다 떴는데 글자가 보이지 않아 사이트가 오류가 났다고 착각하게 만들 수 있습니다.

FOUT 현상

FOUT는 Flash of Unstyled Text의 약자입니다. 웹폰트가 로딩되기 전까지 시스템 기본 폰트로 텍스트를 먼저 보여주고, 폰트 파일 다운로드가 완료되면 그제야 지정된 웹폰트로 교체하는 방식입니다. 글자가 갑자기 툭 튀어나오거나 레이아웃이 미세하게 흔들리는 느낌을 주지만, 콘텐츠를 즉시 읽을 수 있다는 점에서 FOIT보다 사용자 경험 측면에서 더 권장되는 방식입니다.

웹폰트 로딩 최적화를 위한 실질적인 전략

이러한 깜빡임 현상을 최소화하기 위해 개발자들은 CSS의 font-display 속성을 적극적으로 활용합니다. 이 속성을 적절히 설정하는 것만으로도 웹사이트의 첫인상을 크게 개선할 수 있습니다.

• auto: 브라우저의 기본 동작을 따릅니다. 보통 FOIT와 유사하게 동작합니다.

• block: 폰트가 로딩될 때까지 텍스트를 숨깁니다(FOIT).
• swap: 폰트가 로딩되기 전까지 시스템 폰트를 보여주고, 준비되면 교체합니다(FOUT). 가장 추천되는 방식입니다.
• fallback: 매우 짧은 시간 동안 텍스트를 숨긴 뒤, 로딩되지 않으면 시스템 폰트로 대체하고 이후 폰트가 준비되어도 교체하지 않습니다.
• optional: 폰트 로딩 상태를 보고 브라우저가 최적의 선택을 합니다. 네트워크 상태가 좋으면 폰트를 사용하고, 아니면 시스템 폰트를 유지합니다.

WOFF2 포맷이 웹 성능에 미치는 영향

웹폰트 로딩 속도 자체를 물리적으로 줄이는 것도 중요합니다. 과거에는 TTF나 OTF 파일을 그대로 사용했지만, 요즘은 웹 전용 포맷인 WOFF(Web Open Font Format)를 사용합니다. 그중에서도 WOFF2는 혁신적인 변화를 가져왔습니다.

WOFF2의 압축 원리

WOFF2는 Brotli라는 압축 알고리즘을 사용합니다. 이는 구글이 개발한 오픈소스 압축 알고리즘으로, 기존의 WOFF 1.0보다 약 30% 이상 더 뛰어난 압축률을 자랑합니다. 파일 용량이 작아지면 당연히 다운로드 속도가 빨라지고, 이는 곧 FOIT나 FOUT가 발생하는 시간을 획기적으로 단축시킵니다.

효율적인 폰트 활용 팁

• 서브셋 폰트 사용: 한국어는 글자 수가 너무 많아 폰트 용량이 매우 큽니다. 자주 사용하는 글자만 추출한 서브셋 폰트를 사용하면 용량을 5MB에서 500KB 이하로 줄일 수 있습니다.
• 시스템 폰트 우선 전략: 디자인적으로 아주 특별한 강조가 필요한 경우가 아니라면, 본문 텍스트는 시스템 폰트를 사용하고 헤드라인에만 웹폰트를 사용하는 것이 성능상 훨씬 유리합니다.
• 폰트 프리로드: 중요한 폰트 파일은 브라우저에게 우선적으로 로딩하도록 명령하는 preload 기능을 활용하세요.

웹폰트와 관련된 흔한 오해와 진실

많은 이들이 웹폰트를 많이 쓰면 무조건 사이트가 느려진다고 생각합니다. 하지만 이는 웹폰트 자체의 문제라기보다는 관리 방식의 문제입니다.

오해: 웹폰트 개수가 많을수록 무조건 느리다?

사실입니다. 하지만 폰트 로딩을 비동기적으로 처리하고, 필요한 페이지에서만 로딩되도록 분할(Code Splitting)한다면 영향력을 최소화할 수 있습니다. 모든 페이지에서 모든 폰트를 다 불러올 필요는 없습니다.

오해: 시스템 폰트는 디자인이 구리다?

과거에는 그랬을지 모르지만, 최신 OS(macOS, Windows, iOS, Android)의 시스템 폰트는 가독성과 디자인 완성도가 매우 높습니다. 굳이 웹폰트를 쓰지 않아도 충분히 아름다운 타이포그래피를 구현할 수 있습니다.

전문가가 제안하는 웹폰트 관리 가이드

웹 성능 전문가들은 폰트 로딩을 ‘점진적 향상’의 관점에서 접근하라고 조언합니다. 가장 먼저 텍스트가 읽히는 것이 중요하고, 그 뒤에 디자인이 입혀지는 것은 부가적인 요소라는 점을 기억해야 합니다.

성능 최적화 체크리스트

자주 묻는 질문과 답변

Q: 왜 어떤 사이트는 폰트가 바뀌는 게 눈에 띄게 보이나요?

A: 로딩 속도가 느린 웹폰트를 사용하면서 font-display: swap 옵션이 적용되어 있기 때문입니다. 이는 시스템 폰트와 웹폰트의 자간이나 크기 차이가 클 때 더 두드러집니다. 해결책은 시스템 폰트와 웹폰트의 크기를 비슷하게 맞추는 CSS 설정을 추가하는 것입니다.

Q: 서브셋 폰트를 만들면 글자가 깨지지 않나요?

A: 서브셋에 포함되지 않은 글자를 입력하면 폰트가 적용되지 않고 시스템 기본 폰트로 출력됩니다. 따라서 자주 쓰는 글자(자주 쓰는 한글 2,350자 등)를 잘 선별하는 것이 중요합니다.

Q: 구글 폰트를 사용하면 로딩이 더 빠를까요?

A: 구글 폰트 서버는 전 세계적으로 최적화되어 있지만, 외부 서버를 거쳐야 하므로 네트워크 지연이 발생할 수 있습니다. 가장 빠른 방법은 폰트 파일을 내 서버에 직접 호스팅하고 압축하여 전달하는 것입니다.

실무에서의 적용 포인트

실제 웹 프로젝트를 진행할 때는 다음의 순서를 따르는 것이 좋습니다. 첫째, 프로젝트에 정말 필요한 폰트 파일만 남깁니다. 둘째, WOFF2로 변환하고 서브셋을 만듭니다. 셋째, CSS에서 font-display: swap을 적용합니다. 넷째, 라이트하우스(Lighthouse)와 같은 도구로 성능 점수를 확인하며 개선합니다. 이 과정만 거쳐도 사용자가 느끼는 웹 사이트의 속도는 훨씬 쾌적해질 것입니다. 웹폰트는 디자인의 완성도를 높이는 도구이지만, 그 도구가 사용자의 경험을 방해해서는 안 됩니다. 성능과 디자인 사이의 균형을 찾는 것이 진정한 웹 퍼블리싱의 기술입니다.