HTML
브라우저 렌더링과 FOUC, 왜 화면이 흔들릴까
웹페이지를 열었을 때 잠깐 기본 스타일로 보이다가, 곧바로 디자인이 바뀌는 장면을 본 적이 있을 겁니다. 버튼 크기가 달라지고, 배경색이 바뀌고, 글꼴이나 레이아웃이 뒤늦게 정리되는 현상입니다.이런 현상을 보통 FOUC, 즉 Flash of Unstyled Content라고 부릅니다. 말 그대로 스타일이 적용되지 않은 콘텐츠가 순간적으로 보이는 문제입니다.단순히 “화면이 예쁘지 않다”의 문제가 아닙니다. 브라우저가 첫 화면을 그리기 전에 필요한 스타일을 제때 확보하지 못했고, 그 중간 상태가 사용자에게 노출됐다는 뜻입니다.브라우저는 어떻게 첫 화면을 그릴까브라우저는 HTML을 받으면 먼저 문서를 파싱해서 DOM을 만듭니다. 동시에 CSS를 읽어 CSSOM을 구성합니다. 이후 DOM과 CSSOM을 조합해 ..
2026. 7. 25. 00:14
