<22.05.03> 컴퓨터 지식 공부 일지 #13. 웹 브라우저는 어떻게 작동하는가?

 

웹 브라우저는 어떻게 동작할까? 인터넷을 하면서 웹 브라우저는 절대로 빼놓을 수 없는 프로그램 중 하나다. 웹 개발을 공부하느 나로써 웹 브라우저의 원리에 대해 알아야 하지 않을까라는 작은 의무감이 생겨 공부해보았는데, 오늘은 그것을 포스팅해보도록 하겠다.

 

 

1. 웹 브라우저란?

 

 

웹 브라우저는, 인터넷 브라우저 / 웹 탐색기라고도 불리는데, 웹 서버에서 이동하여 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 GUI 기반의 응용소프트웨어이다. 이러한 웹 브라우저는 HTTP 사용자 에이전트의 하나라고 할 수 있는데, 여기서 사용자 에이전트(User Agent)란, 사용자를 대신하여 일을 수행하는 소프트 웨어이다. 혹시 크롤링을 해본적이 있다면, 크롬 개발자도구에서 User Agent를 확인해본적이 있을 것이다.

 

1-1. 웹 브라우저의 역사

 

최초의 웹 브라우저는 지난 번에 포스팅했던 것과 같이 팀 버너스 리에 의해 만들어졌다.

 

<22.03.01> 컴퓨터 지식 공부 일지 #04. Internet과 Web ㅡ 둘 다 똑같은거 아니냐?

 

팀 버너스 리가 1990년 최초로 발명한 World Wide Web이 그 시초라 할 수 있지만 이 때는 GUI 형태의 브라우저는 아니었기에 지금 우리가 사용하고 있는 크롬이나 Edge와 같은 웹 브라우저와는 형태가 많이 다르다. 우리가 익히 알고 있는, 여기서 설명하고자 하는 GUI 유형의 웹 브라우저의 시초는 로버트 카이유라는 사람이 개발을 시작한 Erwise이다.

 

 

이 프로그램의 등장으로 대중이 일반적으로 사용할 수 있는 웹 브라우저의 초기 형태가 등장했다고 볼 수 있다.

 

 

2. 웹 브라우저의 통신과 표준

 

 

웹 브라우저가 통신을 하는 이유는 웹 서버에서 웹 페이지를 가져오기 위함이다. 이 대 대부분의 웹 서버가 사용하는 HTTP로 통신을 진행한다. 이 때 HTTP 통신으로 웹 서버에서 웹 페이지를 가져오기도 하며, 웹 서버에 정보를 송신하기도 한다. HTTP에 대한 자세한 설명은 지난번에도 포스팅한 적이 있으니 참고바란다.

 

<22.03.12> 컴퓨터 지식 공부 일지 #08. HTTP의 정의와 구조에 대해

 

웹 페이지의 일반적인 파일 포맷은 HTML이 사용된다. 이는 HTTP의 MIME 표준에 정의된 'content type'에 의해 확인된다. MIME이란, 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 하나의 매커니즘인데, MIME의 content type에 의해 이미지, 애니메이션, 동영상, 소리, 스트리밍 미디어와 같은 다양한 타입의 자료들을 웹 페이지에 게재, 전송할 수 있게 되었다. 

 

초기 웹 브라우저는 단순 HTML만을 지원했지만, 향후 IT 기업에 의해 웹 브라우저 개발이 독점적으로 이루어지면서 HTML의 비표준 확장이 많이 이루어지고, 이는 서로 다른 웹 브라우저 간에 동일한 HTML 문서라도 호환이 잘 되지 않은 웹 호환성에 심각한 문제를 일으키게 되었다. 이를 위해 현대의 웹 브라우저들은 모든 브라우저에서 동일하게 표시되어야할 표준 기반의 HTML과 XHTML을 지원하게 되었다.

 

 

3. 웹 브라우저의 구조

 

 

 

본격적으로 웹 브라우저의 구조에 대해 살펴보자. 웹 브라우저의 구조는 위와 같이 구성되어있는데, 꽤 복잡하다고 생각할 수도 있지만, 하나하나 뜯어보면 그리 어렵지도 않다. User Interface, Rendering Engine, Browser Engine, Networking, Javascript Interpreter, UI Backend, Data Storage 순으로 각 구성요소들이 어떤 역할을 하는지 알아보자.

 

3-1. User Interface

 

User Interface는 사용자가 웹 브라우저 상에서 웹을 이용할 수 있도록 도와주는 다양한 버튼 및 기능이다. 예를 들면 쇼핑몰 사이트의 회원가입창이나, 장바구니 기능, 구매하기 버튼 등, 사용자가 직접 웹 서비스를 이용할 수 있도록 도와준다. 

 

3-2. Rendering Engine

 

웹 브라우저는 클라이언트가 요청한 자료를 웹 서버로부터 받아온다고 했다. 웹 서버로부터 받은 리소스(HTML/CSS/Javascript)들을 UI 상에 나타내주는 Engine이다. 즉 웹 브라우저의 핵심과도 같은 존재다.

 

3-3. Browser Engine

 

User Interface(UI)와 Rendering Engine 사이에서 중간매체역할을 수행한다.

 

3-4. Networking

 

HTTP 요청과 같이 웹 서버와 통신이 가능하게 하는 모듈이다.

 

3-5. Javascript Interpreter

 

HTML 문서 내 javascript 코드를 파싱하고 실행한다.

 

3-6. UI Backend

 

HTML에서 form을 통해 백엔드로 전달하는 자료를 처리할 수 있도록 도와준다.

 

3-7. Data Storage 

 

쿠키와 같은 로컬 데이터를 저장하는 물리적 공간이다.

 

웹 브라우저는 위와 같은 구성 요소들을 통해 웹 서버로 부터 받은 HTML 리소스를 단계적으로 구조화하여 화면상에 구현한다. 여기서 웹 브라우저 동작의 가장 중요한 핵심은 바로 Rendering Engine이다. 이번엔 Rendering Engine의 중요성에 대해 알아보자.

 

 

4. Rendering Engine의 중요성

 

 

Rendering Engine은 웹 서버로부터 받은 리소스를 UI 상에 나타내준다고 했다. 웹 브라우저의 핵심이라고 할 수 있는 이 엔진은 웹 브라우저마다 동일하지 않고 웹 브라우저를 개발한 회사마다 각각 다른 Rendering Engine을 사용한다. CSS 공부를 해본 사람이라면, 아래와 같은 코드를 본적이 있을 것이다.

 

.hello-box {
  -webkit-padding-start: 0px;
}

 

위는 HTML 태그에서 기본값으로 설정한 padding값을 0으로 변경해주는 CSS 코드인데, 크로싱 브라우저를 위해서 사용하는 접두사로 '-webkit'을 사용하였다. 크로싱 브라우저란, 크롬에서도, 파이어폭스에서도, 마이크로엣지에서도 동일하게 HTML이나 CSS 요소를 적용시키기 위한 작업을 의미한다. 이를 위해 각 웹 브라우저에 맞게 접두사를 사용해야 한다.

 

-webkit- : 크롬, 사파리 브라우저

-moz- : 파이어폭스

-ms- : 익스플로러

-o- : 오페라 브라우저

 

여기서 webkit이 바로 크롬에서 사용하는 Rendering Engine이다.(moz,ms,o는 그냥 접두사일 뿐이다). IE에서는 Trident를, Firefox에서는 Gecko, Safari에서는 Webkit을, 그리고 Chrome에서는 webkit을 사용하는 것으로 알려져있는데, 이제는 구글에서 webkit을 개조한 blink라는 독자적인 Rednering Engine을 사용한다고 한다.

 

 

4-1. Rendering Engine 작동 방식

 

 

웹 브라우저는 웹 서버로부터 전달받은 HTML 문서를 맨 처음 네트워크 레이어(TCP/IP 프로토콜)에서 불러오며 아래 네 단계를 거쳐 UI로 구현된다. 웹 브라우저에 탑재된 Rendering Engine마다 차이는 조금 있지만, 대개 아래와 같은 기본적인 흐름을 따른다.

 

1. HTML 파싱 후 DOM 트리 생성

2. Render Tree 생성

3. Render Tree 레이아웃 생성

4. Render Tree 그리기

 

아래 그림은 Webkit Engine이 HTML 문서를 받아 UI로 구현하기 까지의 과정을 그려낸 것이다. 앞서 소개한 Rendering의 네 가지 Flow와 비교해보면 크게 다르지 않음을 알 수 있다. 

 

Webkit에서의 Rendering 과정

 

각 단계에 대한 설명을 진행하기에 앞서 DOM(Document Object Model)에 대한 간략한 소개를 해야한다. 이를 이해하고 나서 Rendering Engine의 네 가지 Flow를 이해할 수 있다.

 

---

* DOM(Document Object Model이란?

 

Markup 형태로 구성된 HTML 문서를 Object 모델의 형태로 바꿔 놓은 것

 

 

HTML 문서는 <!DOCTYPE html>로 시작하여, 그 아래부터 UI를 구성하기 위한 다양한 태그들 <h1>,<input>과 같은 태그들이 주렁주렁 달리게 된다. 이러한 태그들의 모음인 HTML 문서를 위와 같은 트리 형태의 구조로 나타낸 것이 DOM이다. 

 

위 그림에서 DOM을 이루는 개별적인 요소들을 '노드'라고 하는데, HTML 문서 내에 있는 모든 HTML 태그는 DOM의 각 노드와 1:1 매칭된다. 즉, HTML 문서에 포함된 모든 태그들은 DOM 노드로 모조리 변환된다. 앞으로 설명할 Rendering Engine도 이러한 DOM 구조를 이용한다.

---

4-1-1. HTML 파싱 후 DOM 트리 생성

 

네트워크 레이어를 통해 전달받은 HTML 문서(Source Code)를 파싱하여 각 요소들을 DOM Tree의 각 DOM 노드들로 전환한다. 여기서 완성된 DOM Tree는 브라우저 화면에 나타날 내용을 구성하는 지도인 셈이다.

 

4-1-2. Render Tree 생성

 

이전 단계에서 DOM Tree를 생성했다면, Rendering Engine은 CSS/Style 데이터를 파싱하게 되고, 해당 스타일 데이터들을 통해 Render Tree를 생성하게 된다. 

 

이전 단계에서는 DOM Tree를 생성하고, 이번 단계에서는 Render Tree를 생성하는데, 각 Tree에 대한 차이를 설명하자면, DOM Tree는 전술한것처럼 웹 상에 나타날 내용을 구성하기 위함이고, Render Tree는 DOM Tree에 시각적 요소를 구성하기 위한 요소를 덧붙인 것이다. 즉, DOM Tree가 HTML 태그들을 활용하여 Tree 구조의 문서구조를 생성했다면, Render Tree는 CSS를 활용하여 시각적인 구성까지 포함한 Tree 형태의 문서구조를 생성한 것이다.

 

Render Tree의 모습은 아래와 같다.

 

 

위 Render Tree는 색상, 차원 등 시각적 지침들을 담은 정사각형들로 구성되며, 스크린에 맞는 순서대로 정렬되어야 한다. 이 때, Render Tree의 정사각형을 Renderer라고 하는데, 이들은 DOM Tree의 개별 요소들에 적용되나 반드시 1:1 대응이 되지는 않는다. Render Tree는 DOM Tree와 다르게 모든 요소들이 1대1 대응이 되지 못하는데, 이는 시각적이지 못한 DOM 요소들(html, head, title)이나, CSS 속성을 통해 UI에 표현되지 않는 태그(display:none;)들은 Render Tree에 포함되지 못하기 때문이다.

 

Rendering Engine은 앞서 생성한 DOM Tree와 CSS/Style 데이터를 파싱한 결과를 토대로 구성한 Render Tree를 통해 Markup된 HTML 문서를 웹 브라우저 상에 시각적으로 표현한다. Render Tree는 HTML과 CSS를 종합하여 만든 HTML 문서의 최종 문서구조인셈이다.

 

4-1-3. Render Tree 레이아웃 만들기

 

Render Tree 레이아웃 구성을 통해 DOM Tree의 각 노드들이 스크린의 어느 공간에 위치해야하는지 알아야 한다. 이를 위해 각각의 값(Position, Size)을 부여하는 단계이다.

 

4-1-4. Render Tree 그리기

 

Render Tree가 완성되어 웹 문서의 레이아웃이 구성되었다면, UI Backend가 동작하여 각 노드들을 정해진 스타일 및 위치값대로 화면에 배치하는 단계이다.

 

 

이로써 웹 브라우저가 웹 서버에서 웹 문서를 받아 화면에 어떻게 구성하는지를 알았다. Rendering Engine이 웹 브라우저에서 가장 핵심적인 역할을 하고 있음을 알았는데, Rendering Engine의 특징은 HTML 요소들을 한거번에 출력하지 않고, 일부 콘텐츠는 Tree 과정을 거쳐 스크린에 출력하고, 그 외 다른 요소들은 네트워크를 통해 Rendering Engine으로 읽어들이는 순차적인 방식으로 입출력이 진행된다.

 

 

 

오늘은 웹 브라우저가 어떻게 화면에 웹 페이지를 출력하는지 그 원리에 대해 알아보았다. 평소에 아무렇지 않게 사용하던 프로그램이었는데, 복잡한 Flow가 있음을 알게 되니 신기할 따름이다. 다음번에 또 재미있는 공부거리를 들고 포스팅하도록 하겠다.

 

P. S 조잡한 글 읽어주셔서 감사합니다! 혹시나 틀린 정보가 있다면 과감한 지적(하지만 욕은 삼가해주시면 감사하겠습니다 ㅎㅎ) 부탁드립니다.