"주소창에 엔터를 친 후" 브라우저가 화면을 그리는 5단계

"내가 짠 코드가 어떻게 실제 화면이 될까요?"
성능 좋은 웹사이트를 만들기 위해 반드시 알아야 할 브라우저의 내부 동작 원리, 주요 렌더링 경로(Critical Rendering Path)를 정리합니다.

1. 렌더링의 5단계 과정

1. DOM 트리 생성: 서버로부터 받은 HTML을 파싱하여 객체 모델인 DOM(Document Object Model)을 만듭니다.
2. CSSOM 트리 생성: 스타일시트(CSS)를 파싱하여 CSSOM(CSS Object Model)을 만듭니다.
3. 렌더 트리(Render Tree) 결합: DOM과 CSSOM을 합쳐 실제로 화면에 보일 요소들만 골라 렌더 트리를 구성합니다.
4. 레이아웃(Layout): 각 노드가 화면의 정확히 어느 위치에, 어떤 크기로 배치될지 계산합니다.
5. 페인트(Paint): 계산된 레이아웃을 바탕으로 화면에 실제 픽셀을 그립니다.

2. 리플로우(Reflow)와 리페인트(Repaint)

자바스크립트로 DOM을 수정하면 브라우저는 다시 레이아웃을 계산하고(Reflow) 화면을 다시 그립니다(Repaint). 이 과정이 빈번하게 일어나면 화면 버벅임의 원인이 됩니다.

💡 실무 노트

면접에서 "브라우저 성능을 어떻게 개선했나요?"라는 질문을 받으면 이 렌더링 과정을 활용해 답변해 보세요.

팁: 예를 들어, <script> 태그를 HTML 하단에 두는 이유는 JS 파싱이 DOM 생성을 방해(Block)하지 않게 하기 위해서입니다. 또한 애니메이션을 구현할 때 width나 top 대신 transform이나 opacity를 쓰면 리플로우 과정을 건너뛰고 바로 페인트(정확히는 합성) 단계로 가기 때문에 훨씬 부드러운 화면을 제공할 수 있습니다.

"브라우저의 마음을 이해할 때, 비로소 끊김 없는 사용자 경험(UX)이 완성됩니다."