[네트워크] 웹 렌더링(Web Rendering)이란?

우리가 웹사이트에 접속하면, 화면에 예쁘게 구성된 콘텐츠들이 자연스럽게 나타납니다.
하지만 그 안에서는 복잡한 과정이 진행되고 있다는 사실, 알고 계셨나요?

이번 포스팅에서는 웹 렌더링이란 무엇이며, 브라우저가 어떤 과정을 거쳐 화면을 구성하는지에 대해 정리해보겠습니다.

 

📌 웹 렌더링(Web Rendering)이란?

웹 렌더링이란, 쉽게 말해 서버로부터 받은 리소스를 브라우저가 화면에 시각적으로 출력하는 과정을 말합니다.

1. 사용자가 어떤 웹사이트 주소(URL)를 입력합니다.
2. 브라우저는 서버에 요청을 보내고, HTML, CSS, JavaScript 등의 웹 리소스를 응답받습니다.
3. 이 리소스들을 브라우저 내부의 렌더링 엔진(Rendering Engine)이 해석하고 조합해서 사용자가 보는 화면을 만들어냅니다.

즉, 사용자는 코드를 보는 것이 아니라, 브라우저가 렌더링한 결과물(화면)을 보게 되는 거죠.

 

---

 

⚙️ 브라우저 렌더링 엔진이란?

브라우저마다 렌더링을 담당하는 엔진이 존재합니다. 각 엔진은 HTML, CSS, JS 등을 처리하는 방식에서 차이가 있지만, 기본적인 동작 원리는 유사합니다.

브라우저렌더링 엔진

Chrome	Blink
Safari	WebKit
Firefox	Gecko

이 엔진들은 HTML을 파싱(parsing)하고, CSS를 적용(apply)하며, JavaScript로 동작을 조작하는 역할을 수행합니다.

 

---

 

🧩 웹 렌더링 과정 간단히 살펴보기

1. HTML 파싱
   → HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성합니다.
2. CSS 파싱
   → CSS 정보를 바탕으로 스타일 규칙을 적용해 CSSOM(CSS Object Model)을 만듭니다.
3. 렌더 트리(Render Tree) 생성
   → DOM과 CSSOM을 합쳐 렌더 트리를 구성합니다.
4. 레이아웃(Layout)
   → 각 요소의 위치와 크기를 계산합니다.
5. 페인팅(Painting)
   → 요소들을 픽셀 단위로 화면에 그립니다.

 

---

 

💡 외부 API와의 연계는 어떻게 렌더링에 영향을 줄까?

현대 웹 애플리케이션은 다양한 외부 API와 연동됩니다. 예를 들어:

• 도서 검색 API를 이용해 책 정보를 가져온다든지,
• 날씨 API로 실시간 기온을 보여주는 기능 등.

이러한 API를 통해 받은 데이터도 렌더링 엔진이 DOM을 다시 구성하면서 실시간으로 화면에 반영됩니다. 이를 동적 렌더링(Dynamic Rendering)이라고 하며, 리액트 같은 프레임워크가 주로 이 방식을 사용합니다.

 

---

 

🔑 키워드 정리

웹 브라우저	서버와 통신하고, 웹 리소스를 시각화하여 사용자에게 보여주는 도구
URL	서버에 특정 리소스를 요청할 수 있는 주소 체계
DNS	도메인 이름을 IP 주소로 변환해주는 시스템
웹 렌더링	서버로부터 받은 HTML, CSS, JS 등을 화면에 시각적으로 출력하는 과정

 

웹 렌더링은 단순히 "보여지는 화면"이 아니라, 수많은 기술과 처리 과정이 모여 이뤄지는 복잡한 흐름입니다.
프론트엔드 개발자뿐만 아니라 백엔드 개발자에게도 이 렌더링 과정을 이해하는 것은 굉장히 중요합니다.

 

 

👀 웹에 관련한 다른 포스팅이 궁금하시다면 아래의 글을 추천해요

[네트워크]웹(Web)이란? - 웹의 발전, 보안의 중요성

[네트워크] 웹 리소스란? 웹을 구성하는 정보 자산

[네트워크] 웹 브라우저란?