Renderer Process

작성자

익명

작성일

2026.08.09

조회수

버전

Renderer Process (렌더러 프로세스)

1. 개요

본 문서는 Chromium 기반 브라우저의 멀티 프로세스 아키텍처를 중심으로 설명한다. 렌더러 프로세스(Renderer Process)는 현대적인 웹 브라우저의 멀티 프로세스 아키텍처(Multi-process Architecture)에서 웹 페이지의 콘텐츠를 해석하고 화면에 시각적으로 구현하는 역할을 담당하는 독립적인 프로세스이다. 과거의 브라우저는 단일 프로세스로 동작하여 탭 하나만 응답하지 않아도 브라우저 전체가 종료되는 문제가 있었으나, 이를 해결하기 위해 각 탭이나 프레임별로 렌더러 프로세스를 분리하여 안정성과 보안성을 높이는 구조를 채택하고 있다.

2. 동작 원리 및 구조

렌더러 프로세스는 브라우저 프로세스로부터 네트워크를 통해 전달받은 HTML, CSS, JavaScript 데이터를 받아 사용자가 볼 수 있는 픽셀 형태로 변환하는 렌더링 파이프라인(Rendering Pipeline)을 수행한다.

2.1 브라우저 프로세스와 렌더러 프로세스의 역할 비교

구분	브라우저 프로세스 (Browser Process)	렌더러 프로세스 (Renderer Process)
주요 역할	브라우저 전체 제어, 주소창, 북마크, 네트워크 요청	웹 페이지 콘텐츠 렌더링, JS 실행
권한	OS 자원(파일 시스템, 네트워크) 직접 접근 가능	샌드박스 내 제한적 권한 (직접 접근 불가)
수량	브라우저 실행 시 단 하나만 존재	탭, iframe, 사이트 단위로 여러 개 생성 가능
핵심 기능	UI 렌더링, 권한 관리, 프로세스 스케줄링	DOM/CSSOM 생성, 레이아웃 계산, 페인팅

3. 주요 구성 요소

렌더러 프로세스는 웹 페이지를 화면에 그리기 위해 다음과 같은 핵심 엔진과 데이터 구조를 활용한다.

3.1 핵심 엔진

렌더링 엔진 (Rendering Engine): HTML과 CSS를 해석하여 화면에 표시하는 엔진이다. (예: Chrome의 Blink, Safari의 WebKit, Firefox의 Gecko)
자바스크립트 엔진 (JavaScript Engine): JS 코드를 해석하고 실행하는 엔진이다. (예: Chrome의 V8, Safari의 JavaScriptCore)

3.2 렌더링 파이프라인 (Rendering Pipeline)

웹 페이지가 화면에 그려지기까지의 전체 흐름은 다음과 같다.

[렌더링 파이프라인 흐름도]

graph LR
    HTML-->DOM[DOM 트리 생성]
    CSS-->CSSOM[CSSOM 트리 생성]
    DOM --> RT[렌더 트리 생성]
    CSSOM --> RT
    RT --> Layout[레이아웃/리플로우]
    Layout --> Paint[페인팅]
    Paint --> Composite[합성/컴포지팅]
    Composite --> Screen[화면 출력]

상세 단계: 1. DOM(Document Object Model) 트리 생성: HTML 마크업을 파싱하여 트리 구조의 객체 모델로 변환한다. 2. CSSOM(CSS Object Model) 트리 생성: CSS 스타일 시트를 파싱하여 각 요소에 적용될 스타일 규칙을 트리 형태로 구축한다. 3. 렌더 트리(Render Tree) 생성: DOM과 CSSOM을 결합하여 실제로 화면에 표시될 요소들만 포함하는 렌더 트리를 생성한다. (예: display: none 요소는 제외됨) 4. 레이아웃(Layout): 렌더 트리를 바탕으로 각 노드의 정확한 위치와 크기를 계산한다. 5. 페인팅(Painting): 계산된 위치에 실제 색상을 입히고 픽셀로 변환한다.

4. 렌더러 프로세스 내 스레드 구조

렌더러 프로세스는 내부적으로 여러 개의 스레드를 운용하여 작업을 분담한다.

메인 스레드 (Main Thread): HTML 파싱, DOM/CSSOM 생성, JS 실행, 레이아웃 계산 등 대부분의 핵심 작업을 처리한다.
컴포지터 스레드 (Compositor Thread): 렌더 트리를 기반으로 생성된 레이어들을 실제 화면에 합성하여 출력하는 작업을 담당한다. (Compositing)
래스터 스레드 (Raster Thread): 벡터 형태의 레이아웃 정보를 실제 픽셀(Bitmap)로 변환하는 래스터화 작업을 수행한다. (Rasterization)
워커 스레드 (Worker Thread): Web Worker를 통해 메인 스레드와 별개로 무거운 연산을 처리하여 UI 프리징을 방지한다.

5. 샌드박스(Sandbox)와 보안

렌더러 프로세스는 외부 웹사이트의 악성 코드가 사용자의 시스템을 공격하는 것을 방지하기 위해 샌드박스(Sandbox) 환경에서 동작한다. 샌드박스는 프로세스가 OS의 파일 시스템, 네트워크 소켓, 하드웨어 장치에 직접 접근하는 것을 차단하는 보안 메커니즘이다.

5.1 IPC (Inter-Process Communication) 통신

렌더러 프로세스가 네트워크 요청이나 파일 읽기가 필요할 경우, 직접 수행하지 않고 IPC(프로세스 간 통신)를 통해 권한을 가진 브라우저 프로세스에 요청을 보낸다. Chromium 브라우저의 경우 Mojo라는 IPC 시스템을 사용하여 프로세스 간 메시지를 교환한다.

[IPC 통신 시퀀스 다이어그램]

sequenceDiagram
    participant RP as Renderer Process
    participant BP as Browser Process
    participant OS as Operating System / Network

    RP->>BP: IPC 요청 (예: "https://example.com/data" 요청)
    BP->>BP: 권한 검증 및 요청 처리
    BP->>OS: 네트워크 요청 수행
    OS-->>BP: 데이터 응답
    BP-->>RP: IPC 응답 (데이터 전달)
    RP->>RP: 데이터 기반 화면 렌더링

6. 프로세스 관리 및 생명주기

브라우저는 메모리 효율과 보안을 위해 렌더러 프로세스의 생성과 소멸을 동적으로 관리한다.

6.1 사이트 격리 (Site Isolation)

사이트 격리는 서로 다른 사이트(Origin)의 콘텐츠를 서로 다른 프로세스에서 실행하여, 한 사이트의 취약점을 이용해 다른 사이트의 데이터(쿠키, 세션 등)를 훔치는 공격(예: Spectre)을 방지하는 기술이다.

[사이트 격리 적용 전후 비교]

구분	사이트 격리 미적용 (과거)	사이트 격리 적용 (현재)
프로세스 할당	동일 탭 내 여러 Origin이 한 프로세스 공유 가능	Origin별로 독립적인 프로세스 할당
보안 수준	프로세스 내 메모리 공유로 데이터 유출 위험 존재	프로세스 단위 격리로 타 사이트 데이터 접근 불가
리소스 사용	프로세스 수가 적어 메모리 사용량 낮음	프로세스 수가 증가하여 메모리 사용량 증가
iframe 처리	메인 페이지와 동일 프로세스에서 실행	서로 다른 Origin의 iframe은 별도 프로세스로 분리

6.2 생명주기 최적화

브라우저는 가용 메모리가 부족할 경우, 오랫동안 사용하지 않은 백그라운드 탭의 렌더러 프로세스를 일시 중단(Suspend)하거나 종료(Discard)하여 메모리를 회수한다. 사용자가 다시 해당 탭을 클릭하면 프로세스를 재시작하고 상태를 복구한다.

7. 성능 최적화 및 이슈

렌더러 프로세스의 성능은 주로 메인 스레드의 효율성에 좌우된다.

7.1 메인 스레드 차단 (Blocking)

자바스크립트는 싱글 스레드로 동작하므로, 복잡한 연산이나 무한 루프가 발생하면 메인 스레드가 점유되어 렌더링 파이프라인이 멈추는 UI 프리징(Freezing) 현상이 발생한다. 이 경우 사용자의 클릭, 스크롤 등의 입력에 브라우저가 반응하지 않으며, 화면 갱신이 중단되어 페이지가 '먹통'이 된 것처럼 보인다.

7.2 리플로우(Reflow)와 리페인트(Repaint)

리플로우 (Reflow): DOM 요소의 크기나 위치가 변경되어 레이아웃을 다시 계산하는 과정이다. 비용이 매우 높으며, 연쇄적인 리플로우를 유발할 수 있다.
리페인트 (Repaint): 레이아웃 변경 없이 색상, 가시성 등 시각적 요소만 변경되어 다시 그리는 과정이다. 리플로우보다는 가볍지만 빈번할 경우 CPU/GPU 부하를 일으킨다.

[최적화 방안]

최적화 방안	해결하는 문제	기대 효과
`requestAnimationFrame` 사용	프레임 드랍 및 렌더링 불일치	브라우저 갱신 주기와 동기화하여 부드러운 애니메이션 구현
`transform`, `opacity` 속성 활용	리플로우 및 리페인트 발생	메인 스레드를 거치지 않고 컴포지터 스레드에서 직접 처리
Web Worker 도입	메인 스레드 차단 (Blocking)	무거운 연산을 백그라운드 스레드로 위임하여 UI 프리징 방지

📝 마크다운 원본

이 문서의 마크다운 원본 내용입니다.

# Renderer Process (렌더러 프로세스)

## 1. 개요
본 문서는 Chromium 기반 브라우저의 멀티 프로세스 아키텍처를 중심으로 설명한다. **렌더러 프로세스(Renderer Process)**는 현대적인 웹 브라우저의 멀티 프로세스 아키텍처(Multi-process Architecture)에서 웹 페이지의 콘텐츠를 해석하고 화면에 시각적으로 구현하는 역할을 담당하는 독립적인 프로세스이다. 과거의 브라우저는 단일 프로세스로 동작하여 탭 하나만 응답하지 않아도 브라우저 전체가 종료되는 문제가 있었으나, 이를 해결하기 위해 각 탭이나 프레임별로 렌더러 프로세스를 분리하여 안정성과 보안성을 높이는 구조를 채택하고 있다.

## 2. 동작 원리 및 구조
렌더러 프로세스는 브라우저 프로세스로부터 네트워크를 통해 전달받은 HTML, CSS, JavaScript 데이터를 받아 사용자가 볼 수 있는 픽셀 형태로 변환하는 **렌더링 파이프라인(Rendering Pipeline)**을 수행한다.

### 2.1 브라우저 프로세스와 렌더러 프로세스의 역할 비교

| 구분 | 브라우저 프로세스 (Browser Process) | 렌더러 프로세스 (Renderer Process) |
| :--- | :--- | :--- |
| **주요 역할** | 브라우저 전체 제어, 주소창, 북마크, 네트워크 요청 | 웹 페이지 콘텐츠 렌더링, JS 실행 |
| **권한** | OS 자원(파일 시스템, 네트워크) 직접 접근 가능 | 샌드박스 내 제한적 권한 (직접 접근 불가) |
| **수량** | 브라우저 실행 시 단 하나만 존재 | 탭, iframe, 사이트 단위로 여러 개 생성 가능 |
| **핵심 기능** | UI 렌더링, 권한 관리, 프로세스 스케줄링 | DOM/CSSOM 생성, 레이아웃 계산, 페인팅 |

## 3. 주요 구성 요소
렌더러 프로세스는 웹 페이지를 화면에 그리기 위해 다음과 같은 핵심 엔진과 데이터 구조를 활용한다.

### 3.1 핵심 엔진
- **렌더링 엔진 (Rendering Engine):** HTML과 CSS를 해석하여 화면에 표시하는 엔진이다. (예: Chrome의 Blink, Safari의 WebKit, Firefox의 Gecko)
- **자바스크립트 엔진 (JavaScript Engine):** JS 코드를 해석하고 실행하는 엔진이다. (예: Chrome의 V8, Safari의 JavaScriptCore)

### 3.2 렌더링 파이프라인 (Rendering Pipeline)
웹 페이지가 화면에 그려지기까지의 전체 흐름은 다음과 같다.

**[렌더링 파이프라인 흐름도]**
```mermaid
graph LR
    HTML-->DOM[DOM 트리 생성]
    CSS-->CSSOM[CSSOM 트리 생성]
    DOM --> RT[렌더 트리 생성]
    CSSOM --> RT
    RT --> Layout[레이아웃/리플로우]
    Layout --> Paint[페인팅]
    Paint --> Composite[합성/컴포지팅]
    Composite --> Screen[화면 출력]
```

**상세 단계:**
1. **DOM(Document Object Model) 트리 생성:** HTML 마크업을 파싱하여 트리 구조의 객체 모델로 변환한다.
2. **CSSOM(CSS Object Model) 트리 생성:** CSS 스타일 시트를 파싱하여 각 요소에 적용될 스타일 규칙을 트리 형태로 구축한다.
3. **렌더 트리(Render Tree) 생성:** DOM과 CSSOM을 결합하여 실제로 화면에 표시될 요소들만 포함하는 렌더 트리를 생성한다. (예: `display: none` 요소는 제외됨)
4. **레이아웃(Layout):** 렌더 트리를 바탕으로 각 노드의 정확한 위치와 크기를 계산한다.
5. **페인팅(Painting):** 계산된 위치에 실제 색상을 입히고 픽셀로 변환한다.

## 4. 렌더러 프로세스 내 스레드 구조
렌더러 프로세스는 내부적으로 여러 개의 스레드를 운용하여 작업을 분담한다.

- **메인 스레드 (Main Thread):** HTML 파싱, DOM/CSSOM 생성, JS 실행, 레이아웃 계산 등 대부분의 핵심 작업을 처리한다.
- **컴포지터 스레드 (Compositor Thread):** 렌더 트리를 기반으로 생성된 레이어들을 실제 화면에 합성하여 출력하는 작업을 담당한다. (Compositing)
- **래스터 스레드 (Raster Thread):** 벡터 형태의 레이아웃 정보를 실제 픽셀(Bitmap)로 변환하는 래스터화 작업을 수행한다. (Rasterization)
- **워커 스레드 (Worker Thread):** Web Worker를 통해 메인 스레드와 별개로 무거운 연산을 처리하여 UI 프리징을 방지한다.

## 5. 샌드박스(Sandbox)와 보안
렌더러 프로세스는 외부 웹사이트의 악성 코드가 사용자의 시스템을 공격하는 것을 방지하기 위해 **샌드박스(Sandbox)** 환경에서 동작한다. 샌드박스는 프로세스가 OS의 파일 시스템, 네트워크 소켓, 하드웨어 장치에 직접 접근하는 것을 차단하는 보안 메커니즘이다.

### 5.1 IPC (Inter-Process Communication) 통신
렌더러 프로세스가 네트워크 요청이나 파일 읽기가 필요할 경우, 직접 수행하지 않고 **IPC(프로세스 간 통신)**를 통해 권한을 가진 브라우저 프로세스에 요청을 보낸다. Chromium 브라우저의 경우 **Mojo**라는 IPC 시스템을 사용하여 프로세스 간 메시지를 교환한다.

**[IPC 통신 시퀀스 다이어그램]**
```mermaid
sequenceDiagram
    participant RP as Renderer Process
    participant BP as Browser Process
    participant OS as Operating System / Network

    RP->>BP: IPC 요청 (예: "https://example.com/data" 요청)
    BP->>BP: 권한 검증 및 요청 처리
    BP->>OS: 네트워크 요청 수행
    OS-->>BP: 데이터 응답
    BP-->>RP: IPC 응답 (데이터 전달)
    RP->>RP: 데이터 기반 화면 렌더링
```

## 6. 프로세스 관리 및 생명주기
브라우저는 메모리 효율과 보안을 위해 렌더러 프로세스의 생성과 소멸을 동적으로 관리한다.

### 6.1 사이트 격리 (Site Isolation)
**사이트 격리**는 서로 다른 사이트(Origin)의 콘텐츠를 서로 다른 프로세스에서 실행하여, 한 사이트의 취약점을 이용해 다른 사이트의 데이터(쿠키, 세션 등)를 훔치는 공격(예: Spectre)을 방지하는 기술이다.

**[사이트 격리 적용 전후 비교]**

| 구분 | 사이트 격리 미적용 (과거) | 사이트 격리 적용 (현재) |
| :--- | :--- | :--- |
| **프로세스 할당** | 동일 탭 내 여러 Origin이 한 프로세스 공유 가능 | Origin별로 독립적인 프로세스 할당 |
| **보안 수준** | 프로세스 내 메모리 공유로 데이터 유출 위험 존재 | 프로세스 단위 격리로 타 사이트 데이터 접근 불가 |
| **리소스 사용** | 프로세스 수가 적어 메모리 사용량 낮음 | 프로세스 수가 증가하여 메모리 사용량 증가 |
| **iframe 처리** | 메인 페이지와 동일 프로세스에서 실행 | 서로 다른 Origin의 iframe은 별도 프로세스로 분리 |

### 6.2 생명주기 최적화
브라우저는 가용 메모리가 부족할 경우, 오랫동안 사용하지 않은 백그라운드 탭의 렌더러 프로세스를 일시 중단(Suspend)하거나 종료(Discard)하여 메모리를 회수한다. 사용자가 다시 해당 탭을 클릭하면 프로세스를 재시작하고 상태를 복구한다.

## 7. 성능 최적화 및 이슈
렌더러 프로세스의 성능은 주로 메인 스레드의 효율성에 좌우된다.

### 7.1 메인 스레드 차단 (Blocking)
자바스크립트는 싱글 스레드로 동작하므로, 복잡한 연산이나 무한 루프가 발생하면 메인 스레드가 점유되어 렌더링 파이프라인이 멈추는 **UI 프리징(Freezing)** 현상이 발생한다. 이 경우 사용자의 클릭, 스크롤 등의 입력에 브라우저가 반응하지 않으며, 화면 갱신이 중단되어 페이지가 '먹통'이 된 것처럼 보인다.

### 7.2 리플로우(Reflow)와 리페인트(Repaint)
- **리플로우 (Reflow):** DOM 요소의 크기나 위치가 변경되어 레이아웃을 다시 계산하는 과정이다. 비용이 매우 높으며, 연쇄적인 리플로우를 유발할 수 있다.
- **리페인트 (Repaint):** 레이아웃 변경 없이 색상, 가시성 등 시각적 요소만 변경되어 다시 그리는 과정이다. 리플로우보다는 가볍지만 빈번할 경우 CPU/GPU 부하를 일으킨다.

**[최적화 방안]**

| 최적화 방안 | 해결하는 문제 | 기대 효과 |
| :--- | :--- | :--- |
| `requestAnimationFrame` 사용 | 프레임 드랍 및 렌더링 불일치 | 브라우저 갱신 주기와 동기화하여 부드러운 애니메이션 구현 |
| `transform`, `opacity` 속성 활용 | 리플로우 및 리페인트 발생 | 메인 스레드를 거치지 않고 컴포지터 스레드에서 직접 처리 |
| Web Worker 도입 | 메인 스레드 차단 (Blocking) | 무거운 연산을 백그라운드 스레드로 위임하여 UI 프리징 방지 |

AI 생성 콘텐츠 안내

이 문서는 AI 모델(gemma-4-31b)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

위키너와나