3. 브라우저의 작동 원리

브라우저란 무엇인가?

브라우저(Browser)는 사용자가 웹페이지에 접근할 수 있도록 해주는 클라이언트 측 애플리케이션이다.

웹 서버로부터 HTML, CSS, JavaScript 등의 리소스를 요청하고, 이를 해석(Rendering)하여 시각적으로 화면에 표시한다.

대표적인 브라우저에는 Chrome, Safari, Edge, Firefox등이 있으며,

각각 고유한 렌더링 엔진을 사용한다. (예: Chrome의 Blink, Safari의 WebKit, Firefox의 Gecko)

---

브라우저의 내부 구조

브라우저는 단순한 뷰어(Viewer)가 아니라,

복잡한 여러 서브시스템으로 구성된 고성능 애플리케이션이다.

일반적으로 다음과 같은 핵심 구성 요소를 가진다.

구성요소	역할
User Interface (UI)	주소창, 북마크, 뒤로 가기 등 사용자와 직접 상호작용
Browser Engine	사용자 명령을 렌더링 엔진에 전달하고 제어
Rendering Engine	HTML, CSS를 해석하여 실제 화면을 그림
JavaScript Engine	JS 코드를 실행하고 DOM을 동적으로 조작
Networking Module	HTTP 요청/응답 및 캐시 처리
UI Backend	시스템 GUI와의 인터페이스 관리
Data Storage	쿠키, 세션, IndexedDB, LocalStorage 등 저장소 관리

---

렌더링(Rendering) 과정

브라우저의 렌더링 엔진(Rendering Engine)은 서버에서 받은 HTML, CSS, JavaScript를 화면에 표시 가능한 형태로 변환한다.

렌더링 과정은 다음과 같은 단계로 진행된다 :

 

• HTML 파싱 (Parsing HTML)
  HTML 문서를 해석하여 DOM 트리(Document Object Model) 생성
  → 각 태그는 DOM 노드로 변환된다.
• CSS 파싱 (Parsing CSS)
  CSS 파일과 <style> 태그를 해석하여 CSSOM 트리(CSS Object Model) 생성
• Render Tree 생성
  DOM과 CSSOM을 결합하여 렌더 트리(Render Tree) 구성
  → 어떤 요소가 어떤 스타일로, 어디에 그려질지 계산
• Layout (Reflow)
  각 노드의 위치와 크기를 계산한다. (화면 배치 과정)
• Painting
  계산된 스타일 정보(색상, 그림자, 글꼴 등)를 기반으로 픽셀 단위로 그리기(Paint)
• Compositing
  여러 레이어를 합성하여 실제 화면으로 출력한다.

---

JavaScript 실행 과정

HTML과 CSS는 선언형 언어지만, JavaScript는 브라우저 내부의 동적 로직 처리 언어이다.

JavaScript는 브라우저 내의 JavaScript Engine에서 실행된다.

(예시로, Chrome/Edge는 V8 엔진, Safari는 JavaScriptCore(Nitro), Firefox는 SpiderMonkey 엔진을 사용한다.)

 

- JS 엔진 실행 흐름

1. Parsing & Compilation: JS 코드를 AST(Abstract Syntax Tree)로 파싱
2. Interpretation & JIT Compilation: 인터프리터와 JIT(Just-In-Time) 컴파일러가
   자주 실행되는 코드를 최적화하여 성능을 향상시킨다.
3. Execution: 실행 컨텍스트, 콜 스택(Call Stack), 이벤트 루프(Event Loop) 관리

이 구조를 통해 JavaScript는 비동기 처리(Async), Promise, Event 기반 동작 등을 수행할 수 있다.

---

브라우저의 네트워크 통신

브라우저는 HTTP 요청(Request)를 보내고 HTTP 응답(Response)을 받아 웹 리소스를 가져온다.

이 과정은 전 글에서 설명한 "HTTP의 작동 원리"를 기반으로 한다. 

• 요청(Request) : HTML, CSS, JS, 이미지, 폰트 등 리소스를 서버에 요청
• 응답(Response) : 서버는 리소스와 함께 상태 코드, 캐시 정책, CORS 정보 등을 전달

브라우저는 캐시(Cache) 와 쿠키(Cookie) 를 이용해 통신 효율을 높이고,
CORS (Cross-Origin Resource Sharing) 정책으로 보안을 유지한다.

---

브라우저의 최적화 및 보안

- 성능 최적화 요소

• 캐싱(Caching) : 동일한 리소스 재요청 시 네트워크 대신 로컬 캐시 사용
• 프리로드(Preload) / 프리페치(Prefetch) : 이후 필요할 리소스를 미리 불러오기
• 병렬 다운로드(Parallel Download) : 여러 요청을 동시에 처리
• Lazy Loading : 스크롤 시점에 따라 이미지나 데이터 지연 로드

- 보안 요소

• Same-Origin Policy : 서로 다른 출처의 스크립트 접근 제한
• CSP(Content Security Policy) : 스크립트·리소스의 허용 출처를 명시
• HTTPS 통신 : TLS를 통한 암호화 및 서버 인증

이러한 보안 정책은 브라우저가 악성 스크립트나 데이터 탈취 공격을 방어하는 핵심 기법이다.

---

정리 및 요약

브라우저는 네트워크, 렌더링, 스크립트 엔진이 결합된 복합 시스템이다. 

• 서버로부터 HTML, CSS, JS 파일을 HTTP를 통해 수신하고
• 렌더링 엔진이 이를 DOM/CSSOM 트리로 파싱해 시각화하며
• JavaScript 엔진이 동적 로직을 실행하고 DOM을 조작한다.

이 일련의 과정 속에서 HTTP는 데이터의 운반자, 브라우저는 그 데이터를 구조화하고 표현하는 해석자 역할을 한다.