브라우저란? : Browser 동작 원리

BROWSER

1. 브라우저란?

 브라우저(Browser)는 웹 페이지(HTML, CSS, JS 등)를 해석하고 화면에 보여주는 프로그램이다.

사용자가 선택한 요소를 서버에 요청하고, 전송받은 자원을 화면에 표시하는 것이다.

여기서 자원은 HTML, CSS, JS, PDF, Image 등의 콘텐츠를 얘기한다.

 

대표적인 브라우저(외에도 많음)

• Microsoft Edge
• Google Chrome
• Apple Safari

 

 

2. 브라우저 동작 흐름

 1) URL 입력 → 요청 보내기

• 사용자가 브라우저 주소창에 URL 입력
• 브라우저는 DNS를 통해 서버 주소(IP)를 찾음
• 해당 서버에 HTTP/HTTPS 요청을 보냄

 DNS(Domain Name System)
- 숫자로만 이루어진 IP주소를 일일이 외울 수없기 때문에 쉽게 기억할 수 있는 도메인 네임을 사용하는 것
예시) Google(IP, DNS 둘 다 주소창에 입력하면 접속 가능)
IP: 216.58.200.14
DNS: www.google.com

 HTTP/HTTPS
- HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜이다.(프로토콜 종류는 엄청 많음)
웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 하다. 텍스트, 레이아웃 설명, 이미지, 비디오, 스크립트 등 불러온 하위 문서들로 하나의 완전한 문서를 만든다.
* HTTPS는 간단하게 HTTP에서 보안이 강화된 버전이라 생각하면 된다.(지금은 대부분 얘를 씀)

출처: MDN Web Docs🔗

---

 2) 응답받기 → HTML 문서 수신

• 서버로부터 HTML 파일을 응답받음
• 받은 HTML 해석(parse) 시작

---

 3) 렌더링 준비 - HTML Parsing & DOM Tree 생성

• HTML을 한 줄씩 읽으며 DOM(Document Object Model)을 만듦
• 이때 외부 리소스(CSS, JS, Image 등)가 있으면 추가 요청 발생

DOM(Document Object Model)
- HTML 또는 XML 기반 문서와 상호작용하고 표현하는 API이며, (browser에서 로드됨) Node 트리(각 노드는 문서의 부분을 나타냄)로 표현하는 문서 모델이다.
 문서 객체 모델(DOM)은 웹 페이지를 스크립트 또는 프로그래밍 언어와 연결한다. 트리의 각 분기는 노드로 끝나고 각 노드에는 객체가 포함된다.(DOM Method를 이용하면 트리에 프로그래밍 방식으로 액세스 가능, 문서의 구조·스타일·내용을 변경할 수 있다.
* HTML 문서를 기반으로 브라우저가 생성하는 계층적 노드 트리 구조
* 각 HTML 태그가 노드로 변환되어 저장

 API(Application Programming Interface)
- 컴퓨터나 컴퓨터 프로그램 사이의 연결.
예시) 네이버 api를 이용하면 내가 만든 프로그램에 네이버 검색, login 등의 기능을 추가해서 사용할 수 있다.

 Node
- 상황에 따라 여러 가지 의미를 가질 수 있지만, DOM 맥락에서는 노드 트리의 단일 지점을 뜻한다. 노드가 되는 요소는 문서 자체, 요소, 텍스트, 주석 등이다.

모든 요소가 node

출처: MDN Web Docs🔗, 위키피디아🔗

---

 4) CSS Parsing → Render Tree 생성

• CSS는 별도로 파싱 되어 CSSOM(CSS Object Model) 생성
• DOM + CSSOM을 합쳐서 Render Tree를 구성함

CSSOM(CSS Object Model)
- JavaScript에서 CSS를 조작할 수 있는 API의 집합이다. HTML 대신 CSS가 대상인 DOM
사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법이다. DOM Tree의 각 노드에 적용할 스타일 정보를 담고 있음
DOM + CSSOM = Render Tree 생성에 필요
(크롬 개발자 모드에 CSS 건드리면 실시간으로 움직이는 그거인듯🤔?, CSS파일 자체가 바뀐다기보다는 CSSOM가 바뀌는 거인 듯)

Render Tree
- DOM Tree와 다르게 화면에 표시될 요소의 노드만 포함.
실제 화면 렌더링을 위한 구조, 스타일 및 레이아웃 정보를 포함하고 있음

* 화면에 어떤 요소를 어떻게 그릴지 결정하는 단계

출처: MDN Web Docs🔗

출처: web.dev🔗

---

 5) Layout → Paint → Composite

• Layout(Reflow): 요소들의 위치와 크기를 계산
• Paint( ≠ Repaint): 각 요소를 픽셀로 변환 (색상, 폰트, 그림자 등)
• Composite: 여러 레이어를 합쳐서 최종 화면에 출력 (끝)

Reflow
- 요소의 너비, 높이, 위치 등이 변경되어 렌더트리를 재생성하는 작업
DOM 요소의 기하학적 속성이 변경될 때(width, height 등 / 브라우저 사이즈가 변할 때)
주변 요소(부모, 자식, 형제)에도 영향을 주기 때문에 무거운 작업임.

Paint
- Reflow가 끝난 후 화면에 그려질 픽셀 스타일(색상, 그림자 등)을 채움(위치 변경은 없음)
* Repaint
- Reflow가 발생하거나 요소의 스타일이 변경되었을 때(색상, 배경색 등) 다시 채움 / 가벼운 작업

 

 

 

3. 결론

 

 웹 브라우저는 단순히 "보여주는 도구"가 아니라, 

HTML/CSS/JS를 해석하고, 렌더링 엔진을 통해 사용자 화면에 구성하는 복잡한 시스템이다.

 

 뭔가 줄줄 적어놓은 코드를 하나씩 읽어 큰 묶음으로 통합하면서 결과적으로 화면에 GUI로 보여주는?

그런 느낌적인 느낌? 

 

 

- 줄이고 줄였는데 생각보다 복잡함...