웹 브라우저란?

artp·2025년 4월 8일

cs

목록 보기

5/16

1. 웹 브라우저란?

웹 브라우저(Web Browser)는 사용자가 인터넷 상의 웹 서버에 요청을 보내고, 그 응답으로 받은 웹 문서(HTML, CSS, JS 등)를 해석하여 화면에 보여주는 프로그램입니다.
브라우저는 HTTP 또는 HTTPS 프로토콜을 통해 서버와 통신하며, 받은 데이터를 기반으로 DOM(Document Object Model)을 생성하여 사용자에게 시각적으로 표현합니다. 이를 통해 사용자는 웹사이트를 탐색하고, 정보를 읽거나 동영상을 시청하며, 폼 제출과 같은 상호작용을 할 수 있습니다.

웹 브라우저는 웹 문서를 요청하고, 응답을 해석해서 보여주는 프로그램입니다.

1.1 웹과 브라우저의 관계

항목	웹(Web)	웹 브라우저(Web Browser)
개념	인터넷 위의 정보 공유 시스템	웹 문서를 사용자에게 보여주는 프로그램
예시	HTML 페이지, 블로그, 유튜브 등	크롬, 사파리, 엣지, 파이어폭스 등
역할	정보를 담는 곳	그 정보를 불러오고, 보여주는 도구
통신 방식	HTTP/HTTPS	서버와 통신하여 웹 컨텐츠 요청/응답

1.2 웹 브라우저가 하는 일

URL 입력 → 서버 요청 → 문서 수신 → 화면 렌더링

1.2.1 주소창(URL 입력)

사용자가 브라우저의 주소창에 URL(예: https://www.example.com)을 입력하면, 브라우저는 사용자가 접근하려는 웹 리소스의 위치를 확인합니다.

https://는 보안 통신(HTTPS)을, www.example.com은 도메인 이름을 나타냅니다.

1.2.2 DNS 서버 조회 → 서버 연결

브라우저는 입력된 도메인 이름(예: www.example.com)을 DNS 서버를 통해 실제 IP 주소(예: 192.168.0.1)로 변환합니다. 이후 해당 IP 주소를 가진 서버와 연결을 설정합니다(TCP/IP 프로토콜 사용).

DNS는 인터넷의 "전화번호부" 역할을 합니다.
도메인은 "가게 이름", IP 주소는 "가게 주소"와 같습니다.

1.2.3 HTTP 요청 전송

브라우저는 서버에 HTTP 또는 HTTPS 요청을 전송하여 필요한 데이터(HTML, CSS, JavaScript, 이미지 등)를 요청합니다.

"이 페이지에 필요한 HTML 파일과 스타일(CSS), 스크립트(JS)를 주세요"라는 요청을 보냅니다.
HTTPS는 데이터를 암호화하여 안전하게 전송합니다.

1.2.4 응답 해석 후 렌더링(Rendering)

서버로부터 받은 응답 데이터를 해석하여 화면에 표시합니다.

과정:
1. HTML 파일을 분석하여 DOM(Document Object Model)을 생성
2. CSS 파일을 적용하여 스타일 적용
3. JavaScript를 실행하여 동적인 요소를 추가
결과: 사용자는 완성된 웹 페이지를 볼 수 있습니다.

1.2.5 자바스크립트 실행

브라우저는 페이지 로딩 후에도 JavaScript 코드를 실행하여 동적인 동작(예: 애니메이션, 버튼 클릭 이벤트 처리)을 수행합니다.

예시:
- 검색창에 입력하면 실시간으로 추천 검색어가 표시됨(AJAX 통신).
- 버튼 클릭 시 팝업 창이 나타남.

2. 웹 브라우저의 기본 구성 요소

웹 페이지는 단순히 화면에 표시되는 결과물이 아니라, 브라우저 내부에서 여러 구성 요소가 서로 협력하여 만들어지는 복잡한 시스템입니다. 이러한 구조를 이해하면 웹 페이지의 렌더링 성능 최적화, 보안 강화, 문제 디버깅 등에 큰 도움이 됩니다.

2.1 웹 브라우저의 주요 구성 요소

2.1.1 유저 인터페이스 (UI)

사용자가 브라우저를 조작하는 직접적인 인터페이스입니다.
주소창, 뒤로가기/앞으로 가기 버튼, 북마크 바, 탭 영역 등으로 구성되어 있습니다.
사용자가 URL을 입력하거나, 이전 페이지로 이동하는 등의 행동을 입력받는 창구입니다.

2.1.2 브라우저 엔진 (Browser Engine)

유저 인터페이스와 렌더링 엔진 사이에서 명령을 중개합니다.
HTML 문서를 렌더링 엔진에 전달하고, 사용자 상호작용(예: 탭 전환, 스크롤 등)을 처리하여 렌더링 결과를 UI에 반영합니다.
일종의 컨트롤러(통역사) 역할로, 브라우저의 흐름을 총괄하고 조정합니다.

2.1.3 렌더링 엔진 (Rendering Engine)

웹 문서를 화면에 시각적으로 출력하는 핵심 엔진입니다.
주요 작업 단계:
1. HTML 파싱 → DOM (Document Object Model) 생성
2. CSS 파싱 → CSSOM (CSS Object Model) 생성
3. DOM + CSSOM → 렌더 트리 (Render Tree) 구성
4. Layout (각 요소 위치 계산)
5. Paint (화면에 시각적 요소 그림)
6. Compositing (레이어 조합 후 최종 출력)
브라우저별 렌더링 엔진 예시
- 크롬/엣지: Blink
- 사파리: WebKit
- 파이어폭스: Gecko

2.1.4 UI 백엔드 (UI BackEnd)

브라우저 내부에서 기본적인 시각적 UI 요소를 그리는 시스템입니다.
기능:
- 콤보 박스, 버튼, 입력 필드 등 브라우저 자체의 UI 위젯을 렌더링합니다.
- 운영 체제의 그래픽 라이브러리를 이용해 실제 화면에 그립니다.
- 운영 체제마다 그래픽 시스템이 다르기 때문에, UI 백엔드는 이를 추상화하여 플랫폼 독립적인 인터페이스를 제공합니다.
- 렌더링 엔진과 협력하여 웹 페이지 컨텐츠도 시각적으로 표시할 수 있도록 연결해 줍니다.

2.1.5 통신 계층 (Networking)

브라우저와 외부 서버 간의 네트워크 통신을 담당합니다.
기능:
- URL에 따른 DNS 조회, 실제 IP 주소 확인
- 서버에 HTTP/HTTPS 요청을 보내고 응답을 받음
- HTML 외에도 이미지, CSS, JavaScript 등 외부 리소스를 비동기로 로드
- 보안 연결 시 TLS/SSL 암호화 처리 수행
웹 브라우저의 통신은 네트워크 계층이 담당하며, 일종의 우편 배달부 역할을 합니다.

2.1.6 자바스크립트 엔진 (JS Engine)

웹 페이지에서 사용하는 자바스크립트 코드를 파싱하고 실행하는 엔진입니다.
기능:
- DOM 조작: HTML 요소를 동적으로 변경 (예: 버튼 클릭 시 텍스트 변경)
- 이벤트 처리: 클릭, 입력, 마우스 이동 등 사용자 상호작용 처리
- AJAX 및 fetch 등을 통한 비동기 통신 처리
브라우저별 자바스크립트 엔진 예시:
- 크롬/엣지: V8
- 사파리: JavaScriptCore
- 파이어폭스: SpiderMonkey

2.1.7 데이터 저장소 (Storage Layer)

브라우저 내에서 사용자 데이터를 저장하는 공간으로 다양한 저장소가 제공됩니다.

저장소 종류	설명	예시
쿠키 (Cookies)	서버와 클라이언트가 모두 접근 가능한 작은 데이터 조각. 세션 유지 및 인증 정보를 저장	로그인 상태 유지, 장바구니 정보
로컬스토리지	key-value 형태의 영구 저장소. 서버와는 공유되지 않음	사용자 설정 저장
세션스토리지	탭 단위로 데이터를 저장하며 브라우저를 닫으면 사라짐	폼 입력 내용 임시 저장
캐시(Cache)	외부 리소스를 저장하여 재요청 시 빠르게 로드	이미지, JS, CSS 파일 캐싱(재사용)으로 페이지 로딩 속도 향상

3. 렌더링 엔진의 동작 과정

렌더링 엔진은 브라우저 내부에서 HTML, CSS 등 웹 문서를 해석해서 화면에 시각적으로 표시하는 핵심 모듈입니다.
우리가 보는 웹 페이지는 그냥 문서가 아니라 렌더링 결과물입니다. 이 결과물이 만들어지는 과정은 다음의 단계를 거쳐 일어납니다.

렌더링 엔진은 대체로 다음과 같은 6단계를 거쳐 웹 페이지를 출력합니다.

1. HTML 파싱 → DOM 생성
2. CSS 파싱 → CSSOM 생성
3. DOM + CSSOM → 렌더 트리(Render Tree) 생성
4. Layout (Reflow): 요소 위치 계산
5. Paint: 시각 요소를 픽셀로 표현
6. Compositing: 여러 레이어를 결합해 최종 화면 표시

3.1 HTML 파싱 → DOM 생성

HTML 문서를 위에서부터 읽으면서 DOM 트리를 생성합니다.
DOM은 HTML 요소를 객체로 표현한 구조화된 트리입니다.

<body>
  <h1>Hello</h1>
  <p>World</p>
</body>

→ DOM 구조:

<body>
 ├── <h1>Hello</h1>
 └── <p>World</p>

3.2 CSS 파싱 → CSSOM 생성

<style> 태그나 외부 CSS 파일을 파싱해 CSSOM (CSS Object Model)이라는 스타일 트리를 만듭니다.
각 요소에 어떤 스타일이 적용되는지 트리 형태로 표현합니다.

p { color: red;}

p 요소에 color: red 정보가 포함됩니다.

3.3 DOM + CSSOM → 렌더 트리 생성

DOM + CSSOM을 결합해 실제로 화면에 표시될 요소들만 포함한 트리를 생성합니다.
위 과정을 Render Tree라고 합니다.

❗️display: none 요소는 화면에 보이지 않으므로 렌더 트리에 포함되지 않습니다.

3.4 Layout

렌더 트리의 각 요소가 어디에 위치할지, 어떤 크기를 가질지 계산하는 단계입니다.
뷰포트의 너비, 패딩, 폰트 크기 등을 반영해 위치가 결정됩니다.
이 과정을 LayOut 또는 Reflow 이라고 합니다.

일반적으로 Layout은 최초 위치 계산을 의미하고,
이후 DOM 구조나 스타일이 변경되어 레이아웃이 다시 계산되면 이를 Reflow라고 부릅니다.

❗️DOM 구조가 변경되거나 창 크기가 바뀌면 Reflow가 다시 발생합니다 (성능 영향 큼)

3.5 Paint

위치가 결정된 요소들을 실제로 화면에 그리는 단계입니다.
텍스트, 배경색, 그림자, 이미지 등 시각적인 요소들을 픽셀로 변환합니다.

"색을 칠한다"고 보면 됩니다.

3.6 Compositing (합성)

Compositing(합성)은 Paint 단계에서 각 요소를 개별 레이어로 분리해 정리한 뒤,
이 레이어들을 올바른 순서로 겹쳐서 최종 화면을 만드는 과정입니다.

예를 들어,

배경 이미지가 맨 아래에 있고,
그 위에 텍스트가 올라오고,
다시 그 위에 투명한 버튼이 겹쳐져 있다면,

이 세 가지를 각자 따로 그린 다음, 하나의 화면으로 합쳐서 사용자에게 보여주는 작업이 바로 Compositing입니다.

브라우저는 이 작업을 더 빠르게 처리하기 위해, 일부 레이어를 GPU(그래픽 카드)를 이용해 처리합니다.
특히 CSS 속성 중 transform, opacity처럼 시각적으로 변화가 있는 요소들은 브라우저가 별도의 레이어로 분리해서 처리하는 경우가 많습니다.

이렇게 하면 특정 요소만 다시 합성하면 되기 때문에, 성능을 크게 향상시킬 수 있습니다.

참고: 렌더링 흐름 요약

웹 브라우저는 스스로 화면에 그림을 그릴 수 없습니다.
실제로 픽셀을 찍고, 선을 그리고, 색을 채우는 일은 운영체제의 그래픽 API가 수행합니다.

각 운영체제의 그래픽 API

운영체제	그래픽
Windows	GDI, GDI+, Direct2D, DirectWrite
macOS	Quartz, CoreGraphics
Linux	X11, Wayland, Cairo, Skia 등

브라우저는 이 API들을 직접 호출하지 않습니다.
대신, UI 백엔드라는 중간 계층을 통해 호출하며, 이 UI 백엔드는 운영체제마다 다른 그래픽 시스템을 추상화하여 일관된 인터페이스를 제공합니다.

렌더링 과정 요약

렌더링은 요소의 위치와 크기를 계산하는 설계 단계,
Paint는 요소를 그릴 준비를 마치는 시각적 설정 단계,
UI 백엔드는 그릴 명령을 운영체제에게 전달하는 통역사,
마지막으로 운영체제의 그래픽 API가 실제로 픽셀을 찍어 화면에 그려주는 주체입니다.

렌더링 단계별 역할 정리

1. 렌더링 엔진

→ HTML/CSS를 해석하여 각 요소의 위치와 크기를 계산

2. Paint 단계

→ 각 요소의 색상, 텍스트, 그림자 등 시각 정보를 준비

3. UI 백엔드

→ Paint 정보를 바탕으로 운영체제의 그래픽 API에 전달

4. 운영체제의 그래픽 API

→ 실제로 픽셀 단위의 화면 출력을 수행

4. 웹 브라우저의 자원 요청 처리 흐름

웹 브라우저가 웹 페이지를 화면에 보여주기 위해서는 단순히 HTML 파일 하나만 받는 것이 아닙니다.
HTML 파일을 기반으로 추가적인 자원(CSS, JavaScript, 이미지 등)을 서버에 요청해서 받아와야 비로소 우리가 보는 "완성된 웹 페이지"가 만들어집니다.

1. 사용자가 주소(URL)를 입력하면
2. 브라우저가 서버에 HTML을 요청하고
3. HTML 안에서 필요한 자원을 분석해서
4. 필요한 CSS, JS, 이미지 등을 다시 서버에 요청하고
5. 모두 받아서 화면을 완성함

4.1 단계별 흐름 설명

4.1.1 사용자 입력 (URL 입력)

사용자가 브라우저 주소창에 https://example.com(예시)을 입력합니다.
브라우저는 이 주소에 해당하는 웹 서버에 연결할 준비를 시작합니다.

4.1.2 DNS 조회 (도메인 → IP 주소)

example.com이라는 글자 주소를 실제 IP 주소(예: 192.0.2.1)로 바꾸기 위해 DNS 서버에 요청을 보냅니다.
브라우저는 캐시에 저장된 정보를 먼저 확ㅇ니하고, 없으면 네트워크를 통해 DNS를 조회합니다.

4.1.3 HTTP 요청 전송

IP 주소를 찾은 브라우저는, 해당 서버에 HTTP 요청을 보냅니다.
요청 방식은 보통 GET입니다.

GET / HTTP/1.1
Host: example.com

4.1.4 HTML 응답 수신

웹 서버는 HTML 문서를 브라우저에 응답합니다.
브라우저는 이 HTML을 파싱하기 시작합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="main.js"></script>
  </head>
  <body>
    <img src="logo.png" />
  </body>
</html>

4.1.5 추가 자원 요청 (CSS, JS, 이미지 등)

브라우저는 HTML을 해석하면서 외부 자원들을 만나게 됩니다.

<link href="style.css"> → CSS 요청
<script src="main.js"> → JS 요청
<img src="logo.png"> → 이미지 요청

브라우저는 이들을 별도로 서버에 요청합니다 (병렬 요청 가능).

4.1.6 응답 수신 및 렌더링

요청한 자원들이 모두 도착하면, 브라우저는 HTML, CSS, JS, 이미지 등을 종합해 화면을 렌더링합니다.
이후 사용자와의 상호작용에 따라 자바스크립트가 동작하거나, 추가 요청이 발생할 수 있습니다.

4.2 시각적 흐름 정리

[사용자]
  ↓ URL 입력
[브라우저]
  ↓ DNS 조회 → IP 확인
  ↓ 서버에 HTML 요청 (GET)
[서버]
  ↓ HTML 응답
[브라우저]
  ↓ HTML 해석 중 CSS/JS/이미지 발견
  ↓ 자원 개별 요청 (병렬)
[서버]
  ↓ 각 자원 응답
[브라우저]
  → 렌더링 완료 → 웹 페이지 표시

브라우저는 단일 요청이 아닌 HTML → 자원 파싱 → 추가 요청이라는 복합적인 요청 흐름을 통해 웹 페이지를 완성합니다.
이 흐름 속에는 DNS, HTTP, 병렬 요청, 렌더링 지연 같은 중요한 요소들이 숨어 있습니다.

5. 자바스크립트 엔진

자바스크립트 엔진은 웹 브라우저 내부에서 자바스크립트 코드를 해석하고 실행하는 기능을 담당하는 핵심 엔진입니다.

HTML과 CSS는 정적인 컨텐츠를 담당하고, JS는 버튼 클릭, 애니메이션, 데이터 요청 등 동적인 행동을 가능하게 만듭니다.
그 JS 코드를 실제로 실행시켜주는 게 자바스크립트 엔진입니다.

5.1 주요 기능 정리

기능	설명
JS 코드 파싱	텍스트로 된 자바스크립트 코드를 분석
바이트코드/기계어 변환	실행 가능한 형식으로 변환
실행	메모리 할당, 연산, 로직 수행 등 실제 동작 처리
DOM 조작	웹 문서와 연결되어 요소 변경 (예: 텍스트 수정, 버튼 숨기기 등)
이벤트 처리	클릭, 입력 등 사용자 행동에 반응
비동기 처리	AJAX 요청, setTimeout, fetch 등 실행 순서 관리

5.2 브라우저별 자바스크립트 엔진

브라우저	엔진 이름	특징
Chrome / Edge	V8	빠르고 널리 사용됨
Firefox	SpiderMonkey	JS 최초 구현체
Safari	JavaScriptCore (또는 Nitro)	macOS/iOS 전용 최적화

5.3 자바스크립트 엔진의 내부 동작 흐름

자바스크립트 코드는 기본적으로 사람이 읽을 수 있는 텍스트 형식의 명령어로 작성됩니다. 하지만 컴퓨터는 이러한 텍스트를 곧바로 이해하거나 실행할 수 없습니다.
따라서 자바스크립트 엔진은 이 코드를 여러 단계를 거쳐 해석하고 실행합니다.

5.3.1 파싱 (Parsing)

가장 먼저 자바스크립트 엔진은 작성된 코드를 한 줄씩 읽으면서 문법 구조를 분석합니다.
이 과정을 통해 코드는 AST(Abstract Syntax Tree, 추상 구문 트리)라는 내부 구조로 변환됩니다. 이 구조는 마치 문장의 주어, 동사, 목적어처럶 코드의 구성 요소를 계층적으로 표현한 트리 구조입니다.

5.3.2 컴파일 (Compile)

파싱을 통해 생성된 AST는 그대로 실행되지 않고, 기계가 이해할 수 있는 중간 코드 형태로 변환됩니다. 이때 생성되는 것이 바이트 코드 또는 기계어입니다.
자바스크립트 엔진은 대부분 JIT(Just-In-Time) 컴파일러를 도입하여, 코드 실행 중 필요한 부분을 실시간으로 컴파일하고, 반복되는 부분은 캐싱하여 성능을 최적화합니다.

5.3.3 실행 (Execution)

최종적으로 바이트코드나 기계어로 변환된 코드는 실제 실행 단계로 진입합니다.
이 단계에서 변수에 값이 할당되고, 함수가 호출되며, DOM 요소가 조작되는 등 자바스크립트 코드에 정의된 모든 동작이 순차적으로 실행됩니다.

6. 다양한 웹 브라우저 종류와 차이

6.1 웹 브라우저란?

웹 브라우저는 사용자가 웹 페이지에 접근하고, HTML/CSS/JS로 구성된 콘텐츠를 화면에 표시하는 프로그램입니다.
대표적인 브라우저로는 Chrome, Safari, Firefox, Edge 등이 있습니다.

6.2 주요 웹 브라우저 비교

브라우저	엔진	운영체제	특징
Chrome	Blink + V8	Windows, macOS, Linux, Android, iOS	속도 빠름, 확장성 좋음, 점유율 1위
Safari	WebKit + JavaScriptCore	macOS, iOS	애플 기기에 최적화, 에너지 효율 우수
Firefox	Gecko + SpiderMonkey	Windows, macOS, Linux, Android, iOS	오픈소스, 개발자 친화적 기능 많음
Edge (Chromium 기반)	Blink + V8	Windows, macOS, Android, iOS	Microsoft 제품과 연동 강함, Chrome과 유사
Opera	Blink + V8	Windows, macOS, Android, iOS	기본 내장 기능 다양 (VPN, 광고 차단 등)

6.3 엔진이 중요한 이유

브라우저의 동작은 주로 다음 두 가지 엔진에 의해 좌우됩니다.

렌더링 엔진(Rendering Engine): HTML/CSS를 해석하여 화면에 표시
자바스크립트 엔진(JS Engine): JS 코드를 해석하고 실행

같은 웹 사이트라도 엔진이 다르면 렌더링 방식, 속도, 기능 구현에 미묘한 차이가 생길 수 있습니다.

6.4 정리

브라우저는 모두 웹 표준을 기반으로 동작하지만, 사용하는 엔진이 다르기 때문에 결과가 약간씩 다를 수 있음
크로스 브라우징 테스트는 여전히 중요
대부분은 Blink 엔진 기반으로 통일되는 추세이지만, Firefox, Safari는 여전히 독립적인 엔진을 유지 중

7. 개발자를 위한 브라우저 도구

7.1 브라우저 개발자 도구란?

웹 브라우저에는 웹 개발자를 위한 개발자 도구(DevTools)가 내장되어 있습니다.
HTML 구조, CSS 스타일, JS 코드, 네트워크 요청, 스토리지 상태 등을 실시간으로 확인하고 수정할 수 있습니다.

브라우저에서 F12 또는 Ctrl + Shift + I를 누르면 실행됩니다.

7.2 주요 패널 정리 (Chrome 기준)

패널	설명
Elements	HTML 구조 및 CSS 스타일 확인/수정
Console	자바스크립트 실행, 로그, 오류 메시지 확인
Network	모든 요청/응답 내역 확인, 속도 분석
Sources	JS 파일 디버깅 (브레이크포인트 설정 등)
Application	쿠키, 로컬/세션스토리지, 캐시 등 확인
Performance	렌더링, 페인트, 프레임 분석
Lighthouse	성능, 접근성, SEO, PWA 품질 자동 분석 리포트

7.3 실전 활용 예시

버튼 클릭 시 동작 안 됨 → Console 탭에서 JS 오류 확인
스타일이 적용되지 않음 → Elements 탭에서 CSS 우선순위 분석
페이지가 느림 → Network/Performance 탭에서 병목 구간 분석
디자인 빠르게 수정 → Elements에서 직접 HTML/CSS 수정 후 테스트

7.4 정리

개발자 도구는 웹 개발에서 디버깅, 최적화, 테스트에 필수적인 도구입니다.
브라우저마다 UI는 조금씩 다르지만 기능은 유사합니다.
개발자 도구는 웹 페이지의 구조와 성능을 빠르게 파악하고 개선할 수 있는 매우 유용한 도구입니다.

artp

donggyun_ee

이전 포스트

네트워크, 인터넷, 웹

다음 포스트