깜박이는 현상 (FOUC와 FOUT 현상) 블로그 사이트 처음 화면 문제 파헤치기

1 FOUC (Flash of Unstyled Content) – 스타일 없는 콘텐츠 깜빡임

FOUC(Flash of Unstyled Content)는 블로그 첫 로딩 시 HTML 콘텐츠가 외부 CSS 또는 Critical CSS 적용 전 잠시 스타일 없이 표시되는 현상입니다.

브라우저는 HTML 파싱을 통해 DOM(Document Object Model)을 먼저 생성하지만, CSSOM(CSS Object Model) 구축이 지연되면 렌더링 차단 리소스인 CSS 때문에 브라우저가 스타일 없는 원시 콘텐츠를 먼저 보여주는 방법을 선택하며, 이 과정에서 페이지 깜박임(Flash of Content), 초기 로딩 깜박임과 같은 시각적 불안정성이 발생합니다.

2 FOUT (Flash of Unstyled Text) – 웹 폰트 로드 지연으로 인한 텍스트 교체

FOUT(Flash of Unstyled Text)는 웹 폰트 파일이 로드되기 전, 텍스트가 기본 시스템 폰트(Fallback Font)로 잠시 표시되었다가 웹 폰트로 교체될 때 발생하는 현상입니다.

이러한 웹 폰트 로드 지연은 페이지 깜박임(Flash of Text), 폰트 깜빡임, 초기 로딩 글꼴 변경 등 시각적 불안정성을 유발하며, 폰트 교체 시 글꼴 크기, 자간(Letter Spacing), 행간(Line Height) 등이 변하면서 주변 요소까지 함께 이동하는 레이아웃 시프트(Layout Shift)를 초래합니다.

1 CSS를 head 태그 최상단에 배치 (우선순위 확보)

CSS 파일을 HTML 문서의 head 태그 내에, 다른 meta 태그나 스크립트보다 앞쪽 순서에 배치합니다. 브라우저는 파일을 순차적으로 파싱하므로, CSS를 먼저 발견하여 다운로드를 시작하고CSSOM 구축 시간을 단축합니다.

head
meta charset="UTF-8"
!-- CSS 파일을 최대한 앞쪽에 배치하여 우선순위를 높입니다 --
link rel="stylesheet" href="main.css"
title웹 성능 최적화/title
/head

2 크리티컬 CSS (Critical CSS) 인라인 삽입 및 비동기 로드

초기 뷰포트(Above-the-Fold) 렌더링에 필요한 최소한의 CSS(Critical CSS)만을 추출하여 style 태그로 head 안에 인라인으로 직접 삽입합니다.

이렇게 하면 HTTP 요청 없이 브라우저가 즉시 스타일을 적용할 수 있어 FOUC 방지, 웹 페이지 깜박임 최소화, First Contentful Paint(FCP) 최적화가 동시에 이루어집니다.

나머지 CSS 파일은 link 태그에 media=”print” 속성을 사용하고, onload=”this.media=’all'” JavaScript 코드를 통해 로드 완료 후 media를 ‘all’로 변경하여 비동기적으로 로드함으로써 렌더링 차단 방지와 페이지 로딩 성능 향상을 지원합니다.

head
style
/* Critical CSS: 초기 뷰포트 스타일 */
body { margin: 0; font-family: sans-serif; }
.header { background: #1a1a1a; }
/style
!-- 나머지 CSS는 비동기적으로 로드하여 렌더링 차단 해제 --
link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'"
/head

3 CSS 파일 압축 및 최소화 (Minification & Compression)

CSS 파일의 크기를 줄이면 다운로드 시간이 단축되어 CSSOM 구축이 빨라지고 FOUC 발생 가능성을 줄입니다.

• Minification (최소화): 불필요한 공백, 주석, 중복 코드를 제거하여 파일 크기를 줄입니다.
• Compression (압축): 서버 설정(Nginx, Apache)을 통해 전송되는 CSS 파일에 Gzip 또는 Brotli 압축을 적용하여 네트워크 전송량을 줄입니다.
• Unused CSS 제거: CSS 트리 쉐이킹(Tree Shaking) 도구를 사용하여 실제 페이지에서 사용하지 않는 CSS 규칙을 제거합니다.

4 Anti-FOUC 패턴 (콘텐츠 숨기기)

CSS 로드가 완료될 때까지 중요 콘텐츠 렌더링 지연 방지를 위해 페이지의 핵심 요소를 일시적으로 숨기는 패턴을 사용합니다. 예를 들어, 최상위 HTML 요소에 opacity: 0 또는 visibility: hidden을 적용하고, CSS 로드 완료 시점에 JavaScript로 해당 스타일을 제거합니다.

이렇게 하면 웹 페이지 깜박임(Flicker) 최소화, FOUC 방지, 사용자 경험(UX) 저하 방지와 함께 로딩 인디케이터를 제공하여 방문자가 콘텐츠 로딩 상태를 직관적으로 인식할 수 있습니다.

1 font-display 속성 활용: 폰트 로드 방식 제어

CSS의 @font-face 규칙에 font-display 속성을 지정하여 브라우저의 폰트 로드 전략을 명시적으로 제어합니다.

CLS 최소화 팁: font-display: swap을 사용하더라도, fallback 폰트와 웹 폰트의 크기, 자간, 행간을 CSS의 `size-adjust`, `ascent-override` 등을 사용하여 최대한 유사하게 맞추면 CLS 발생을 최소화할 수 있습니다.

2 link rel=”preload” 사용: 폰트 우선 다운로드

웹 폰트 파일을 link rel=”preload”로 지정하면 브라우저가 이를 렌더링 필수 리소스(Critical Font Resource)로 인식하여 다른 리소스보다 우선적으로 다운로드합니다.

이렇게 하면 웹 폰트 로딩 지연 최소화, FOUT 방지, 레이아웃 이동(Layout Shift) 감소와 함께 초기 렌더링 시 텍스트가 빠르게 표시되어 페이지 깜박임(Flicker) 없는 안정적 UX를 구현할 수 있습니다

head
!-- 폰트 파일을 CSS보다 먼저 로드하여 FOUT 발생 시간 최소화 --
link rel="preload" href="/fonts/CustomFont.woff2" as="font" type="font/woff2" crossorigin
link rel="stylesheet" href="main.css"
/head

주의사항: `crossorigin` 속성은 폰트 파일을 로드할 때 CORS(Cross-Origin Resource Sharing) 정책에 의해 필수적으로 포함되어야 합니다.

1. JavaScript 로드 순서 최적화

JavaScript가 HTML 파싱을 차단하여 렌더링을 지연시키지 않도록 로드 순서를 제어해야 합니다.

• script 태그를 body 끝에 배치: HTML 파싱 및 CSSOM 구축 후 스크립트가 실행되도록 하여 초기 렌더링 차단 시간을 최소화합니다.
• async 속성: 스크립트 다운로드가 HTML 파싱과 동시에 진행되지만, 다운로드 완료 즉시 실행을 위해 HTML 파싱을 멈춥니다. (순서 보장이 필요 없는 스크립트)
• defer 속성: 스크립트 다운로드가 HTML 파싱과 동시에 진행되지만, 실행은 HTML 파싱이 완료된 후 (DOMContentLoaded 이벤트 직전)에 순서 보장 하에 실행됩니다. (DOM 조작 스크립트에 적합)

2. 서버 사이드 렌더링(SSR) 활용: FOUC의 근본적 해결

SSR(Server-Side Rendering)은 클라이언트 사이드 렌더링 이전(Pre-rendering)에 서버에서 HTML을 미리 구성하는 기술로, 초기 페이지 로딩 시 FOUC 방지, FOUT 최소화, 레이아웃 이동(Layout Shift) 감소를 통해 Core Web Vitals 최적화와 빠른 사용자 경험(UX) 제공하는 방법입니다.

• 원리: 서버에서 CSS와 콘텐츠를 결합한 완전한 HTML을 생성하여 브라우저에 전송합니다.
• 효과: 브라우저는 이미 스타일이 적용된 HTML을 받으므로 별도의 CSS 로드 지연이 발생하지 않아 FOUC를 근본적으로 방지합니다. 또한 Time to First Byte(TTFB) 개선을 통해 SEO 점수 향상에도 크게 기여합니다.