렌더링 (Rendering)

렌더링(Rendering)은 문서 구조나 장면 설명 같은 입력을 화면에 보일 결과물로 계산해 바꾸는 과정입니다. 웹 브라우저에서는 HTML과 CSS를 해석해 화면에 픽셀을 그리는 과정을, React에서는 컴포넌트를 호출해 화면에 무엇을 보여 줄지 계산하는 단계를, 3D 그래픽에서는 3D 장면을 2D 이미지로 만드는 과정을 가리킵니다.

브라우저가 페이지를 화면에 그리는 과정

MDN의 브라우저 작동 방식 문서에 따르면 브라우저는 네트워크로 받은 HTML과 CSS를 파싱해 DOM과 CSSOM이라는 두 트리를 만들고, 렌더러가 이를 써서 페이지를 화면에 그립니다. 렌더링 단계는 스타일, 레이아웃, 페인트이며 경우에 따라 합성이 더해집니다. 스타일 단계에서 DOM과 CSSOM을 합친 렌더 트리에는 화면에 보이는 노드만 들어갑니다. <head>나 display: none인 노드는 빠지고, visibility: hidden인 노드는 자리를 차지하므로 남습니다.

레이아웃은 렌더 트리의 각 노드가 화면에서 차지할 크기와 위치를 뷰포트 크기를 기준으로 계산하는 단계입니다. 처음 한 번의 계산을 레이아웃, 그 뒤의 재계산을 리플로라고 부릅니다. 크기를 지정하지 않은 이미지가 늦게 도착하면 브라우저는 이미지 크기를 안 뒤 레이아웃 단계로 돌아가 리플로를 하고, 그 결과 다시 페인트와 합성을 합니다.

페인트는 레이아웃에서 계산한 상자를 실제 픽셀로 바꾸는 단계로, 텍스트와 색, 테두리, 그림자, 이미지를 그립니다. 스크롤과 애니메이션을 부드럽게 하려면 스타일 계산, 리플로, 페인트가 화면 갱신 간격 안에 끝나야 합니다. <video>, <canvas>, opacity나 3D 변환을 쓴 요소는 별도 레이어로 처리될 수 있습니다. GPU를 활용하면 페인트 성능을 높일 수 있지만 레이어가 늘면 메모리 부담도 커집니다. 레이어가 겹치면 올바른 순서로 화면에 보이도록 합성 단계를 거칩니다.

React 컴포넌트 렌더링과 커밋

React 공식 문서의 렌더와 커밋 설명은 React에서 렌더링을 React가 컴포넌트 함수를 호출하는 일로 정의하고, 화면 갱신을 트리거, 렌더, 커밋의 세 단계로 나눕니다. 렌더링은 앱이 처음 시작할 때와 컴포넌트나 그 상위 컴포넌트의 상태가 바뀔 때 일어나며, 반환된 컴포넌트를 따라 내려가며 화면에 무엇을 보일지 정할 때까지 이어집니다. 문서는 렌더링이 같은 입력에 같은 JSX를 돌려주는 순수한 계산이어야 한다고 하며, 개발 모드의 Strict Mode에서는 이런 실수를 찾도록 컴포넌트 함수를 두 번 호출합니다.

커밋 단계에서 React는 실제 DOM을 고칩니다. 첫 렌더에서는 만든 DOM 노드를 appendChild()로 화면에 붙이고, 다시 렌더할 때는 직전 렌더 결과와 다른 부분에만 최소한의 변경을 적용하며 결과가 같으면 DOM을 건드리지 않습니다. 문서의 시계 예제에서 매초 다시 렌더되는 컴포넌트는 <h1>의 시각만 바꾸고 같은 자리에 있는 <input>은 건드리지 않으므로, 사용자가 입력한 글자가 지워지지 않습니다.

커밋 뒤 브라우저가 화면을 다시 그리는 일은 ‘브라우저 렌더링’으로도 불리지만, React 문서는 혼동을 피하려고 이를 ‘페인팅’이라고 따로 부릅니다. 바이브 코딩에서 ‘화면이 렌더링되지 않는다’는 증상도 컴포넌트 호출 단계의 오류인지, 브라우저의 레이아웃이나 페인트 단계 문제인지 나누어 보면 원인을 좁히기 쉽습니다.

3D 그래픽 렌더링과 렌더 엔진

Blender 4.5 매뉴얼의 렌더링 소개는 렌더링을 3D 장면을 2D 이미지로 바꾸는 과정으로 정의하고, Blender에 들어 있는 렌더 엔진 세 가지를 소개합니다. EEVEE는 물리 기반 실시간 렌더러, Cycles는 물리 기반 경로 추적기(path tracer), Workbench는 레이아웃과 모델링, 미리보기용 엔진입니다.

같은 매뉴얼에 따르면 렌더 결과의 모습은 카메라, 조명, 재질이 정하고, 이 설정은 EEVEE와 Cycles가 함께 쓰지만 일부 기능은 한쪽에서만 지원됩니다. 렌더 결과는 레이어와 패스로 나누어 나중에 합성할 수 있고, 실제 촬영 영상과 합칠 때도 이 방식을 씁니다.

Blender는 모든 렌더 엔진에서 3D 뷰포트 안의 대화형 렌더링을 지원해 조명과 셰이딩을 빠르게 반복해 볼 수 있게 하고, 작업이 끝나면 최종 품질의 이미지나 애니메이션을 렌더해 출력합니다. 엔진마다 렌더 품질과 성능을 조절하는 설정이 따로 있고, 기본 엔진 외에 외부 개발자가 만든 렌더러를 애드온으로 추가할 수도 있습니다.