웹 페이지를 개발하다 보면 페이지가 로드될 때 잠깐 스타일이 적용되지 않은 채 기본 브라우저 스타일로 보였다가 이후 CSS가 적용되면서 확 달라지는 경험을 느껴본 적이 있을 것이다.
이를 흔히 FOUC(Flash of Unstyled Content, 스타일 미적용 콘텐츠 깜빡임) 이라고 부른다.
왜 FOUC가 발생할까?
FOUC는 주로 CSS가 늦게 적용되면서 발생한다.
- 브라우저는 HTML을 먼저 파싱하고 DOM을 만든다.
- CSS 파일은 외부 리소스로, 네트워크를 통해 추가로 다운로드해야 한다.
- CSS가 아직 로드되지 않았는데도 브라우저는 일단 기본 스타일로 화면을 그린다.
- CSS가 로드되면 스타일이 다시 적용되면서 레이아웃과 디자인이 "훅" 바뀐다.
즉, 렌더링과 CSS 로딩 시점이 맞지 않아서 발생하는 문제이다.
실무에서 쓰는 해결책
1. Cirtical CSS 인라인
- 페이지 로딩에 반드시 필요한 핵심 스타일(Critical CSS)을 <head> 에 직접 <style> 태그로 작성.
- 나머지 부가 스타일은 별도의 CSS 파일로 defer/async 로딩.
- 초기 렌더 시 꼭 필요한 스타일은 즉시 적용되므로 FOUC가 거의 사라짐.
<head>
<style>
body { font-family: sans-serif; }
.btn { display: inline-block; padding: 8px 12px; }
</style>
<link rel="stylesheet" href="/css/app.css">
</head>
2. CSS 파일을 최대한 빠르게 로드
<link rel="stylesheet"> 를 반드시 <head> 안 가장 위쪽에 배치.
@import 문법은 CSS 로딩을 지연시키므로 피하는게 좋음.
3. HTML 요소에 width/height 같은 초기 속성 지정
- 특히 이미지/아이콘의 크기를 HTML 속성이나 인라인 스타일로 고정해두면 CSS가 늦게 와도 갑자기 줄어드는 현상을 막을 수 있음.
<img src="/img/icon.png" width="18" height="18" alt="">
4. 폰트 FOUT(Flash of Unstyled Text) 해결
- 웹폰트 로딩 지연 시 기본 폰트가 깜빡이는 문제도 유사한 케이스.
- font-display: swap; 또는 preload(<link rel="preload" as="font">)로 해결.
정리
오늘 개발 중 이미지 크기가 뒤늦게 적용되면서 화면이 깜빡이는 문제를 직접 겪으면서, 이게 바로 FOUC 현상이라는 걸 알게 되었다. 이런 현상은 DOM이 먼저 로드되고, CSS나 이미지 같은 정적 리소스가 뒤늦게 다운로드되면서 발생하는 문제이다.
따라서 실무에서는 단순히 스타일만 다루는 것이 아니라, 브라우저가 완성된 웹페이지를 표시하기까지 어떤 순서로 DOM과 정적 파일을 처리하는지, 그 타이밍과 원리를 숙지하는 것이 이런 깜빡임 문제를 예방하고 해결하는 데 훨씬 더 도움이 된다.
728x90
반응형
'FrontEnd' 카테고리의 다른 글
| Babel과 Webpack 개념 정리 (0) | 2025.10.18 |
|---|---|
| 서버 사이드 렌더링(SSR) vs 클라이언트 사이드 렌더링(CSR) (6) | 2025.08.06 |
| 웹페이지의 Metadata와 SEO란 무엇인가 (1) | 2025.06.19 |
| 시니어 프론트엔드 개발자가 전하는 37가지 팁 (0) | 2024.05.28 |
| 브라우저에서 업데이트된 스크립트 파일 미 적용 문제와 해결책 (0) | 2023.12.06 |