개인작업 / zenoBlog 2026.06.05 · 조회 2 · 좋아요 0

[CHAPTER 0] Part 2. 브라우저가 하는 일

브라우저의 렌더링 엔진과 자바스크립트 엔진이 HTML, CSS, JavaScript를 해석하여 화면에 그리는 '중요 렌더링 경로(Critical Rendering Path)' 과정을 상세히 다룹니다.

[CHAPTER 0] Part 2. 브라우저가 하는 일

1. 정의

웹 브라우저(Web Browser)는 방문자가 URL을 통해 서버에 웹페이지 데이터를 요청하고, 서버로부터 전달받은 원시 코드(HTML, CSS, JavaScript)를 사람이 눈으로 이해할 수 있는 시각적인 그래픽 화면으로 변환(렌더링)해 주는 핵심 소프트웨어입니다.

2. 필요한 이유

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

[젤리 짜부짜부]

₩4,900

₩9,800

마리오케이스

DOCO 헤어 드라이어 고속 75m/s 2억 개 음이온 헤어 케어 110000 RPM 전문가용 경량 가정 여행 선물

₩75,296

₩80,270

알리익스프레스

22살에 과일 판매로 매출 1000만원 달성한 노하우

₩159,000

크몽

브라우저가 코드를 화면으로 바꾸는 '렌더링 파이프라인'을 이해해야 프론트엔드 성능과 버그를 최적화할 수 있습니다. 예를 들어, 블로그의 모바일 메뉴가 늦게 열리거나 스크롤이 버벅거릴 때, 이것이 자바스크립트의 실행 지연 때문인지, CSS 레이아웃 재계산(Reflow)이 과도하게 발생해서인지 정확한 원인을 분석하고 해결할 수 있는 능력이 생깁니다.

3. 핵심 개념

브라우저는 크게 3가지 핵심 엔진과 통신 모듈로 구성됩니다.

렌더링 엔진 (Rendering Engine): 서버에서 받아온 HTML과 CSS를 파싱(해석)해서 화면에 직접 픽셀을 찍어 그리는 그래픽 엔진입니다. 브라우저마다 종류가 다릅니다. (예: 크롬/엣지는 Blink, 사파리는 WebKit을 사용)
자바스크립트 엔진 (JavaScript Engine): 웹페이지의 동적인 로직(예: 좋아요 버튼 클릭 시 숫자 증가 등)이 담긴 JS 코드를 기계어로 변환하고 실행합니다. (예: 구글 크롬의 V8 엔진)
네트워크 (Network) 계층: HTTP/HTTPS 통신 규칙에 따라 서버(Railway 등)와 연결을 맺고, 필요한 리소스 파일들을 다운로드하는 역할을 합니다.

4. 주변 기초 개념

파싱 (Parsing): 브라우저 엔진이 서버에서 받은 텍스트 코드를 한 줄씩 읽으면서, 브라우저가 이해하고 사용할 수 있는 구조적인 데이터로 변환하는 작업입니다.
DOM (Document Object Model): HTML 코드를 파싱하여 만들어낸 '문서 뼈대 트리'입니다. <div>, <p> 같은 태그들이 나뭇가지 형태의 계층 구조로 변환됩니다. 자바스크립트는 이 DOM 트리에 접근하여 화면 내용을 조작합니다.
CSSOM (CSS Object Model): HTML에 적용할 CSS(디자인 규칙)를 파싱하여 만들어낸 '스타일 구조 트리'입니다. 요소의 색상, 크기, 위치 정보가 담겨 있습니다.
렌더 트리 (Render Tree): DOM 트리와 CSSOM 트리를 결합한 '최종 화면 설계도'입니다. 화면에 보이지 않는 요소(예: display: none)는 렌더 트리에서 아예 제외됩니다.

5. 실제 흐름 (중요 렌더링 경로 - CRP)

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

브라우저가 코드를 받아 화면에 띄우기까지의 과정을 중요 렌더링 경로(Critical Rendering Path)라고 부르며, 다음 5단계를 순차적으로 거칩니다.

HTML 파싱 및 DOM 생성: 서버에서 받은 HTML 문서를 읽어 DOM 트리를 구축합니다. 파싱 도중 <link>나 <script> 태그를 만나면, 해당 CSS나 JS 파일을 즉시 네트워크로 요청하여 다운로드합니다.
CSS 파싱 및 CSSOM 생성: 다운로드한 CSS 파일(ZenoBlog의 경우 Vite로 빌드된 app.css)을 해석하여 CSSOM 트리를 구축합니다.
렌더 트리(Render Tree) 구축: 만들어진 DOM과 CSSOM을 결합합니다. 화면에 실제로 픽셀로 그려져야 할 노드들만 골라내어 렌더 트리를 만듭니다.
레이아웃 (Layout / Reflow): 렌더 트리를 기반으로 뷰포트(방문자의 기기 화면 크기) 내에서 각 요소들이 정확히 '어디에(위치), 얼마만큼의 크기로(너비/높이)' 배치되어야 하는지 수학적인 좌표를 계산합니다.
페인트 (Paint / Repaint): 레이아웃 계산이 완료되면, 렌더링 엔진이 각 좌표에 맞게 텍스트, 색상, 이미지, 그림자 등의 실제 픽셀을 화면에 칠합니다. 여러 개의 레이어(층)로 나누어 칠한 뒤, 이를 하나로 합성(Composite)하여 최종 화면을 보여줍니다.

6. 예시 (ZenoBlog 적용 화면)

방문자가 ZenoBlog의 글 상세 페이지를 열고 메뉴를 조작할 때 브라우저가 하는 일입니다.

DOM과 CSSOM의 만남: 라라벨 서버가 넘겨준 Blade 파일의 HTML 구조로 DOM을 만들고, Tailwind CSS의 max-w-7xl, bg-white 같은 유틸리티 클래스를 읽어 CSSOM을 만듭니다.
레이아웃과 페인트: 방문자의 스마트폰 화면(뷰포트) 가로폭에 맞춰 텍스트가 줄바꿈되도록 레이아웃을 계산한 뒤, 회색 글씨와 흰색 배경을 페인트합니다.
자바스크립트의 DOM 조작: 본문 하단의 '좋아요' 버튼을 누릅니다. 브라우저의 JS 엔진이 fetch 통신을 통해 서버에 데이터를 보내고, 응답을 받으면 하트 아이콘의 색상을 빨간색으로 변경하기 위해 DOM을 수정합니다.
리페인트(Repaint) 발생: 하트 색상이 바뀌는 것은 요소의 위치나 크기가 변한 것이 아니라 색상만 변한 것이므로, 레이아웃 단계는 건너뛰고 페인트(Repaint) 과정만 다시 실행되어 화면이 업데이트됩니다.

7. 주의점

렌더링 차단 리소스 (Render-Blocking): 브라우저는 HTML을 파싱하다가 무거운 CSS나 동기 방식의 <script>를 만나면 파싱을 일시 정지합니다. 이로 인해 화면이 하얗게 뜨는 시간이 길어질 수 있습니다. 따라서 중요한 CSS는 상단에, JavaScript는 최하단에 배치하거나 defer 속성을 사용하여 비동기로 불러와야 성능이 올라갑니다.
리플로우(Reflow) 최적화: 브라우저가 레이아웃을 다시 계산하는 리플로우는 컴퓨터 자원을 가장 많이 소모합니다. 자바스크립트로 요소의 넓이(width), 높이(height)를 수시로 변경하면 페이지가 심하게 버벅거립니다. 애니메이션 효과를 줄 때는 리플로우를 유발하지 않는 CSS transform이나 opacity 속성을 사용하는 것이 프론트엔드 최적화의 핵심입니다.

8. 요약

웹 브라우저는 서버에서 받은 HTML과 CSS를 파싱하여 각각 DOM 트리와 CSSOM 트리를 생성합니다. 이 둘을 결합해 실제 화면에 그려질 렌더 트리(Render Tree)를 구축하고, 화면의 정확한 크기와 위치를 계산(Layout)한 뒤, 최종적으로 픽셀을 색칠(Paint)하여 방문자에게 온전한 웹사이트를 보여주는 역할을 수행합니다.