📌 핵심 요약
- FOIT (Flash of Invisible Text): 폰트가 로드되기 전까지 텍스트가 보이지 않는 현상입니다.
- FOUT (Flash of Unstyled Text): 폰트 로드 전 기본 서체가 보이다가 로드 후 지정 서체로 바뀌며 깜빡이는 현상입니다.
- 해결책: font-display: swap을 사용해 즉시 텍스트를 보여주고, <link rel="preload">로 폰트 자원의 우선순위를 높여 다운로드 시간을 단축합니다.
💬 실제 면접 답변 예시 "웹 폰트 로딩 시 사용자 경험을 해치는 FOIT와 FOUT는 성능 최적화의 핵심 과제입니다. 저는 이를 해결하기 위해 CSS의 font-display 속성을 swap으로 설정하여, 폰트가 로드되기 전에도 시스템 기본 서체로 내용을 즉시 읽을 수 있게 처리합니다.
또한, 중요한 메인 서체는 HTML 상단에서 rel="preload"를 사용해 브라우저가 CSS 파싱을 기다리지 않고 즉시 폰트를 요청하도록 우선순위를 부여합니다. 이를 통해 폰트가 적용되는 시점을 앞당겨 레이아웃 시프트(CLS)를 최소화하고, 초기 렌더링 시 텍스트 가독성을 확보하는 전략을 실무에서 주로 사용하고 있습니다."
💡 실무 팁 & 주의점
- Tip: 폰트 파일 형식을 woff2로 사용하면 ttf나 woff보다 압축률이 훨씬 좋아 로딩 속도를 비약적으로 높일 수 있다는 점을 덧붙이면 좋습니다.
- 주의점: preload를 너무 많은 폰트에 적용하면 오히려 다른 중요한 자원(JS, CSS)의 초기 로딩을 방해할 수 있으므로, 초기 뷰포트에 보이는 핵심 서체 1~2개에만 선별적으로 적용해야 합니다.