FOUT 방지란 무엇인가? (Flash of Unstyled Text)

웹 개발을 하다 보면 페이지 로딩 시 폰트가 갑자기 바뀌는 경험을 한 적이 있을 것이다.
이 현상을 FOUT(Flash of Unstyled Text)라고 한다.

이번 글에서는 FOUT이 무엇인지, 왜 발생하는지, 그리고 실무에서 어떻게 방지하는지 정리해본다.

---

FOUT이란?

FOUT (Flash of Unstyled Text)
웹폰트가 로딩되기 전에 기본 폰트로 먼저 렌더링되었다가,
이후 웹폰트가 적용되면서 텍스트 스타일이 바뀌는 현상이다.

예시 흐름

1. 페이지 로딩 시작
2. 기본 시스템 폰트로 텍스트 표시
3. 웹폰트 로딩 완료
4. 텍스트가 다른 폰트로 변경됨

→ 이때 폰트가 바뀌는 느낌이 바로 FOUT

---

왜 문제가 될까?

• UI가 깜빡이는 것처럼 보임
• 디자인 완성도가 떨어져 보일 수 있음
• 콘텐츠 집중도를 방해
• 경우에 따라 CLS(Cumulative Layout Shift)에도 영향

---

FOIT과의 차이

구분	FOUT	FOIT
의미	기본 폰트 → 웹폰트로 변경	텍스트가 안 보이다가 나타남
UX	깜빡임 있음	아예 안 보임
전략	빠르게 보여주기	스타일 유지

→ 최근에는 FOIT보다 FOUT을 허용하고 최적화하는 방향이 일반적이다.

---

🛠️ FOUT 줄이는 방법

1. font-display 속성 활용

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;
}

• swap: 기본 폰트 → 웹폰트 교체 (가장 많이 사용)
• block: 텍스트 숨김 후 표시 (FOIT)
• optional: 네트워크 상황에 따라 웹폰트 생략

→ 실무에서는 보통 swap을 기본으로 사용한다.

---

2. preload로 폰트 로딩 최적화

<link 
  rel="preload" 
  href="/fonts/myfont.woff2" 
  as="font" 
  type="font/woff2" 
  crossorigin
/>

→ 폰트를 우선적으로 다운로드해서 FOUT 시간을 줄인다.

---

3. fallback 폰트 설정

font-family: 'MyFont', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;

→ 웹폰트와 비슷한 폰트를 설정하면 변경 시 이질감이 줄어든다.

---

4. 폰트 파일 최적화

• woff2 포맷 사용
• 필요한 글자만 포함 (subset)
• 폰트 용량 최소화

→ 로딩 속도가 빨라질수록 FOUT도 줄어든다.

---

5. 폰트 로딩 이후 처리 (선택)

document.fonts.ready.then(() => {
  document.body.classList.add('fonts-loaded');
});

→ 폰트 로딩 시점을 기준으로 스타일 제어가 가능하다.

---

실무에서 사용하는 기본 조합

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: 'MyFont', 'Apple SD Gothic Neo', sans-serif;
}

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>

→ 이 정도 설정으로 대부분의 FOUT 문제는 완화된다.

---

추가로 고려할 점

CLS까지 함께 고려하기

폰트 변경 시 레이아웃이 흔들릴 수 있다.

• fallback 폰트를 최대한 유사하게 선택
• font-size-adjust 사용 고려

---

Google Fonts 사용할 경우

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

→ display=swap 옵션을 함께 사용하는 것이 좋다.

---

정리

• FOUT은 웹폰트 로딩 과정에서 발생하는 자연스러운 현상
• font-display: swap은 기본적으로 적용하는 것이 좋음
• preload + fallback 폰트 조합으로 대부분의 문제는 완화 가능
• 완전히 제거하기보다, 사용자 입장에서 자연스럽게 보이도록 만드는 것이 더 중요

---

마무리

웹폰트는 단순히 디자인 요소라고만 생각했는데,
실제로는 성능과 UX에도 영향을 주는 부분이었다.

특히 fallback 폰트나 로딩 전략에 따라
사용자가 느끼는 화면의 안정감이 달라진다는 점이 인상적이었다.

앞으로는 폰트를 적용할 때도 단순히 디자인만 생각할 게 아니라,
로딩 과정과 사용자 경험까지 같이 고려해야겠다고 느꼈다.