웹 개발에서 렌더링과 랜더링 과정이란?

웹 개발에서의 렌더링을 이해하기 위해서는 파싱에 대해 알아두면 이해하기 더 수월합니다.

해당 링크에서 파싱에 대해 참고바랍니다.

---

먼저, 랜더링이란 무엇일까요?

 

렌더링(Rendering)이라는 단어 자체는 컴퓨터 그래픽스나 웹 개발에서 사용되는 용어로, 그래픽이나 웹 요소들을 적절하게 배치하고 스타일을 적용하여 화면에 표시하는 과정을 말합니다.

컴퓨터 그래픽스에서 렌더링은 3D 모델링, 조명, 텍스처, 색상 등의 정보를 기반으로 화면에 이미지를 생성하는 과정을 의미합니다. 이러한 과정에서는 3D 모델의 형상과 재질, 조명의 위치와 세기, 카메라의 시점 등이 고려되어 실제같은 이미지를 생성합니다.

웹 개발에서의 렌더링은 웹 페이지를 구성하는 HTML, CSS, JavaScript 등의 코드를 실행하여 브라우저에서 화면에 내용을 그리는 과정을 의미합니다. 이 과정에서 HTML 요소들의 배치와 스타일(CSS)을 적용하고, JavaScript에 의해 동적으로 변경되는 내용을 업데이트합니다. 최종적으로 사용자는 브라우저를 통해 렌더링된 웹 페이지를 시각적으로 볼 수 있게 됩니다.

---

랜더링을 이해했다면, 랜더링 과정까지 알아봅시다.

1. HTML 파싱:
웹 페이지를 구성하는 HTML 문서가 브라우저로 전달되면, 브라우저는 먼저 HTML 파싱 과정을 거쳐 문서의 구조를 이해합니다. 이 과정에서 HTML 태그들과 요소들의 관계를 파악하고, 문서 객체 모델(DOM, Document Object Model)을 생성합니다. DOM은 웹 페이지의 요소들을 트리 구조로 표현한 것으로, 각 요소는 노드(Node)로 표현됩니다.

2. CSS 파싱:
다음으로, CSS 스타일 시트가 파싱됩니다. CSS는 HTML 요소들에 스타일을 적용하는 역할을 합니다. 브라우저는 CSS 파일을 읽고, 각 HTML 요소에 적용될 스타일 규칙들을 분석하여 스타일 정보를 생성합니다. 이렇게 생성된 스타일 정보는 렌더 트리(Render Tree)라는 형태로 저장됩니다. 렌더 트리는 DOM의 일부분이며, 실제로 화면에 표시되는 요소들로 구성되어 있습니다.

3. 레이아웃 계산:
렌더 트리가 생성되면, 브라우저는 각 요소의 크기와 위치를 계산합니다. 이를 레이아웃(Layout) 또는 리플로우(Reflow) 과정이라고도 합니다. 브라우저는 각 요소의 박스 모델(Box Model)을 고려하여 요소의 크기와 위치를 결정하고, 화면에 배치합니다.

4. 페인팅:
마지막 단계는 페인팅(Painting)입니다. 레이아웃 계산이 완료되면, 브라우저는 화면에 요소들을 그리기 위해 페인팅 과정을 진행합니다. 이 과정에서 각 요소의 배경색, 텍스트, 이미지 등이 실제 화면에 그려집니다.

이렇게 HTML, CSS, JavaScript를 실행하고 브라우저에서 화면에 내용을 그리는 과정을 렌더링이라고 합니다. 

이 과정은 사용자가 웹 페이지를 열거나 변경할 때마다 반복되어 새로운 내용이 화면에 업데이트됩니다.