브라우저가 작동하는 방식: 초보자 친화적인 브라우저 내부 가이드
Source: Dev.to
You type a URL.
You press Enter.
A webpage appears.
It feels instant—effortless. Nothing special, right?
But under the hood that single key‑press triggers a carefully coordinated chain of events involving networking, parsing, layout calculations, and rendering logic—all happening in milliseconds (or less).
Most beginners assume a browser’s job is simple: “It opens websites.”
That’s not wrong, but it’s wildly incomplete.
A browser is not just a viewer. It’s a system—almost an operating system in its own right. It fetches files, understands languages like HTML and CSS, converts text into structured data, calculates layouts, and finally paints pixels onto your screen.
In this guide we’ll slow down that moment.
We won’t dive into specifications or try to memorize components.
Instead we’ll follow a story—from typing a URL to seeing the pixels.
When you press Enter, the browser doesn’t jump straight to drawing the page.
It follows a pipeline—a sequence of steps where each stage prepares data for the next.
By the end, browsers will feel less like magic and more like well‑designed machines doing exactly what they’re supposed to do.
브라우저란 실제로 무엇인가?
높은 수준에서 브라우저는 네 가지 핵심 작업을 수행하는 플랫폼입니다:
- 사용자 인터페이스 제공 (탭, 주소 표시줄, 버튼).
- 네트워크에서 리소스 가져오기.
- 웹 언어 이해 (HTML, CSS, JavaScript).
- 그 명령을 화면의 픽셀로 변환.
브라우저를 식당에 비유해 보세요:
| 식당 비유 | 브라우저 비유 |
|---|---|
| 메뉴와 테이블(사용자가 상호작용하는 부분) | UI(주소 표시줄, 탭, 버튼) |
| 주방(원재료를 가공) | 네트워킹 및 렌더링 엔진 |
| 요리사(지시를 따름) | JavaScript 엔진, 레이아웃 엔진 |
| 최종 요리(제공되는 음식) | 렌더링된 페이지(픽셀) |
핵심 요점:
브라우저는 단일 프로그램이 아니라 HTML(및 관련 언어)을 시각 데이터로 변환하는 협력적인 구성 요소들의 집합입니다.
Source:
브라우저의 주요 구성 요소
아래는 현대 브라우저 내부의 주요 구성 요소들입니다.
1. 사용자 인터페이스 (UI)
페이지 렌더링 영역을 제외한 모든 것이 UI에 해당합니다: 주소 표시줄, 탭, 새로 고침 버튼, 뒤로/앞으로 버튼 등.
- UI는 웹사이트를 렌더링하지 않습니다.
- 단순히 사용자 입력을 받아 다른 구성 요소에 작업을 전달합니다.
- URL을 입력하고 Enter 키를 누르면 UI는 “요청이 여기 있습니다. 처리해 주세요.”라고 말합니다.
2. 브라우저 엔진
종종 브라우저의 두뇌라고 불리며, 엔진은 다음을 조정합니다:
- 네비게이션 (뒤로, 앞으로, 새로 고침).
- UI 레이어와 저장소 서브시스템 간 통신.
- 세션 관리 (탭 간 상태, 히스토리 등).
브라우저 엔진 예시:
- Trident (Internet Explorer, 초기 Edge)
- Blink (Chrome, Opera, Brave)
- WebKit (Safari)
- Gecko (Firefox)
3. 렌더링 엔진
렌더링 엔진은 HTML/CSS를 눈에 보이는 형태로 변환합니다. 주요 작업은 다음과 같습니다:
- HTML 파싱 → DOM (Document Object Model).
- CSS 파싱 → CSSOM (CSS Object Model).
- 렌더 트리 구축.
- 레이아웃 (reflow) 및 페인팅 수행.
렌더링 엔진은 브라우저 엔진으로부터 명령을 받습니다(예: 새로 고침, 리로드).
4. 네트워킹 레이어
브라우저 엔진이 URL을 받으면 네트워킹 레이어에 리소스 가져오기를 요청합니다. 책임 범위:
- DNS 해석.
- TCP/TLS 핸드셰이크 설정.
- HTTP/HTTPS 요청 전송.
일반적으로 가져오는 리소스:
- HTML 문서
- CSS 스타일시트
- JavaScript 파일
- 이미지, 폰트, 비디오 등
이 단계에서는 브라우저가 원시 자료를 수집하고 있을 뿐이며, 아직 어떻게 표시될지는 모릅니다.
5. JavaScript 엔진 (JS 인터프리터)
JavaScript 엔진은 JavaScript 코드를 파싱, 컴파일, 실행합니다. 주요 엔진:
- V8 (Chrome, Node.js)
- SpiderMonkey (Firefox)
- JavaScriptCore (Safari, Bun)
- Chakra (레거시 Edge)
6. UI 백엔드 (그래픽 레이어)
UI 백엔드는 실제로 화면에 픽셀을 그립니다. 렌더링 엔진이 레이아웃 및 페인팅 명령을 생성하면, UI 백엔드는 이를 래스터 이미지로 변환해 운영 체제가 표시하도록 합니다.
7. 저장소 / 디스크 API
다음과 같은 영구 저장소를 제공합니다:
- 브라우저 캐시
- 쿠키
localStorage/sessionStorage- IndexedDB 등
내부 메서드를 사용해 데이터를 디스크의 브라우저 프로필 폴더에 기록합니다.
개요 다이어그램
그림: 브라우저 구성 요소와 그 책임에 대한 고수준 뷰.
브라우저가 실제로 작동하는 방식
URL을 입력하고 픽셀을 보는 과정까지 깊이 파헤쳐 보겠습니다.
- 사용자 입력 – 주소 표시줄에서 Enter 키를 누릅니다.
- Browser engine → Networking – 엔진이 네트워킹 계층에 도메인 이름(DNS)을 해석하도록 지시합니다.
- DNS 해석 – 네트워킹 계층이 서버의 IP 주소를 얻습니다.
- 연결 핸드셰이크 – TCP(및 선택적으로 TLS) 연결이 설정됩니다.
- HTTP 요청 – 네트워킹 계층이 HTML 문서에 대한 HTTP/HTTPS 요청을 보냅니다.
- 데이터 도착 – 첫 바이트가 도착하면 rendering engine으로 스트리밍됩니다.
- HTML 파싱 – 렌더링 엔진이 HTML을 토큰화하고 DOM을 구축하며 render tree 구성을 시작합니다.
- CSS 가져오기 및 파싱 – HTML을 파싱하는 동안 엔진은
<link>와<style>태그를 발견하고 네트워킹 계층에 CSS 파일을 요청한 뒤 이를 CSSOM으로 파싱하고 DOM과 병합합니다. - JavaScript 실행 – 발견된
<script>태그가 JavaScript engine을 트리거하고, 이 엔진은 DOM/CSSOM을 수정하여 추가 레이아웃 작업을 일으킬 수 있습니다. - 레이아웃(리플로우) – 완전한 렌더 트리를 기반으로 엔진이 각 노드의 기하학적 정보를 계산합니다.
- 페인팅 – 엔진이 레이아웃 정보를 그리기 명령(레이어, 텍스처)으로 변환합니다.
- UI 백엔드 – 이러한 명령이 그래픽 레이어에 전달되어 래스터화되고 화면에 업데이트됩니다.
결과: 여러분이 보는 페이지입니다.
빠른 요약
| 단계 | 관련 컴포넌트 | 수행 내용 |
|---|---|---|
| 1️⃣ | UI, Browser Engine | 사용자 입력이 캡처됨 |
| 2️⃣ | Browser Engine → Networking | DNS 조회 |
| 3️⃣ | Networking | TCP/TLS 핸드셰이크 |
| 4️⃣ | Networking | HTTP 요청 전송 |
| 5️⃣ | Networking → Rendering Engine | HTML 스트림 수신 |
| 6️⃣ | Rendering Engine | 토큰화 → DOM |
| 7️⃣ | Rendering Engine + Networking | CSS 가져오기 및 파싱 → CSSOM |
| 8️⃣ | JS Engine | 스크립트 실행, DOM/CSSOM 변경 가능 |
| 9️⃣ | Rendering Engine | 레이아웃(리플로우) |
| 🔟 | Rendering Engine | 페인팅 |
| 1️⃣1️⃣ | UI Backend | 래스터화 및 표시 |
추가 읽을거리
- “How Browsers Work” – Tali Garsiel & Paul Irish가 만든 상세 시리즈.
- MDN Web Docs – 각 브라우저 서브시스템에 대한 훌륭한 참고 자료.
- “Browser Architecture” – 현대 엔진 설계(Blink, Gecko, WebKit)에 관한 강연 및 기사.
이제 간단한 URL을 완전하게 렌더링된 웹 페이지로 변환하는 보이지 않는 기계 장치에 대한 더 명확한 그림을 얻었습니다.
[](https://media2.dev.to/dynamic/image/width=800,height=&fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffas2fanc5chbrn7j2ybr.png)HTML 파싱: 텍스트에서 DOM으로
HTML은 일반 텍스트 형태로 도착합니다.
브라우저는 아직 “headings”나 “sections”을 보지 못하고 — 문자만을 봅니다.
그래서 브라우저는 HTML을 파싱합니다:
- 토큰 단위로 읽습니다
- 태그와 중첩 구조를 이해합니다
그 후 DOM이라고 불리는 구조화된 표현을 구축합니다.
DOM이란?
Document Object Model (DOM) 은 트리‑같은 구조이며, 여기서:
- 각 HTML 요소는 노드가 됩니다
- 부모‑자식 관계가 유지됩니다
DOM을 요소들의 가계도라고 생각하면 됩니다.
CSS 파싱: 스타일에서 CSSOM까지
CSS도 텍스트로 시작합니다.
브라우저는 CSS를 CSSOM (CSS Object Model) 라는 또 다른 구조로 파싱합니다.
이 구조는 다음을 저장합니다:
- 선택자
- 속성
- 값
- 계단식 및 상속 규칙
중요한 참고:
CSSOM은 위치를 결정하지 않으며 — 단지 어떻게 보여야 하는지만 정의합니다.
