[딥다이브 week2-1] 웹 페이지 렌더링이란?

Hong Day·2025년 9월 19일

KTB 3기 cloud - Deep dive

목록 보기

1/3

오늘은 카테부에서 아래와 같은 주제에 대해 "왜?" 라는 질문을 하며 깊게 파고드는 딥다이브 세션을 진행해보았다.

웹 페이지 렌더링 방식이 CSR, SSR, SSG 차이에 대해 정리하시오.

그 전에, 나는 프론트엔드, 그중에서도 특히 웹에 대한 지식은 전무하기 때문에 웹 렌더링에 대해 공부해보았고, 공부한 내용들을 정리하려고 한다.

웹페이지는 미리 만들어지는 것을 가져오는 게 아니라 실시간으로 그려지는 것임.

실시간으로 웹사이트가 “그려지는” 과정 → 웹 브라우저의 렌더링 과정

렌더링 엔진 (화면을 그려내는 것)

: 텍스트, 이미지 리소스 파일 등등으로 이뤄진 요소들을 어떤 크기, 너비로 배치되는지, 텍스틑 어느정도 크기이며 색상은 어때야 하는지를 코드에서 해석해서 실시간으로 화면 안에 포현하는 엔진
자바스크립트 엔진 (자바스크립트 코드를 읽고 기능을 작동)

HTML : 문서에 들어갈 텍스트 내용이나 추가 이미지, 파일등을 다룸
- HTML 파싱 → DOM (Document Object Model) 트리 생성 (문서 구조를 트리 형태로 표현)
CSS : 문서가 어떻게 생겼고, 그림이나 파일을 어떻게 배치할지
- CSS 파싱 → CSSOM(CSS Object Model) 트리 생성
- CSS 규칙들이 어떤 요소에 적용되는지 (스타일) 계산

JavaScript 는 렌더링 엔진에 포함되지 않는다 → 이름에서도 알 수 있듯이 자바스크립트 엔진

렌더링 엔진은 HTML 파싱 중 <script> 태그를 만나면 자바스크립트 엔진에 실행을 요청하고 JavaScript 코드를 실행

실행된 JS는 DOM이나 CSSOM을 수정할 수 있고, 그 결과는 다시 렌더링 엔진에 반영됨

⇒ HTML 파싱을 중단 → JavaScript 코드 실행 → 렌더링 과정을 재개하는 구조.

⇒ DOM 조작, 이벤트 처리 등 웹 페이지의 “동적인 기능” 구현을 담당함.

: 웹 페이지를 불러올 때 HTML, CSS 요소들을 파싱함.

HTML 처리
: HTML 파싱 → DOM(Document Object Model) 트리 생성
DOM은 문서 구조(태그, 속성, 텍스트 등)을 트리형태로 표현
CSS 처리
: CSS 파싱 → CSSOM(CSS Object Model) 트리 생성
CSS 규칙들이 어떤 요소에 적용되는지 (스타일) 계산
DOM + CSSOM 결합
: 두 트리를 합쳐서 “렌더 트리(Render Tree)” 생성
→ 실제 화면에 표시될 요소와 스타일 정보만 포함됨
레이아웃 + 페인팅
: 각 요소의 위치와 크기를 계산하여 배치 (레이아웃)
: 계산된 위치에 픽셀 단위로 색상, 글꼴, 배경 등을 그려 화면에 출력 (페인팅 → 컴포지팅)