웹 브라우저에 대해서 (1)

한 줄 정리

웹 브라우저는 HTML 문서나 파일 등 인터넷의 콘텐츠를 검색 및 열람하기 위한 응용 소프트웨어이다.

---

웹 브라우저

웹 브라우저(Web Browser)는 사용자가 선택한 리소스를 서버에 요청하고 브라우저 창에 표시하는 응용 소프트웨어다.

여기서 리소스란 일반적으로 HTML 문서이지만, PDF, 이미지 등 여러 콘텐츠가 될 수 있다.

 

초기 웹 브라우저는 웹서핑 전용 어플리케이션에 불과했지만 HTML5 등 관련 기술들이 발달하며 점차 기능이 확대되었고, 거의 모든 프로그램의 기능 구현이 가능해지고 있다.

 

사용자 수가 많고, 인지도가 높은 웹 브라우저는 Microsoft Edge, Chrome, Firefox, Safari, Opera이며, 이를 '5대 브라우저'리 부른다.

---

웹 브라우저 기본 구조

• 사용자 인터페이스(User Interface):
  웹 페이지에서 사용할 수 있는 모든 시각적 요소
  페이지 창을 제외한 나머지 모든 부분(예: 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등)
• 브라우저 엔진(Browser Engine):
  브라우저의 핵심 구성 요소로 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
  사용자 인터페이스에서 받은 입력을 렌더링 엔진에 쿼리 및 처리
• 렌더링 엔진(Rendering Engine):
  사용자가 요청한 콘텐츠를 화면에 표시
  HTML 문서 내 HTML과 CSS를 파싱(해석)하여 사용자 인터페이스에 출력
• 통신(Networking):
  HTTP 또는 FTP와 같은 표준 프로토콜을 사용하여 네트워크 호출에 사용
  또한 인터넷 통신과 관련된 보안 문제를 처리
• UI 백엔드(UI Backend):
  select box / input 등 위젯을 형성하는 데 사용 
• 자바스크립트 해석기(JS Interpreter):
  자바스크립트 코드를 분석 및 실행
• 데이터 저장소(Data Persistence):
  데이터를 정장하는 계층으로 쿠키와 같은 모든 종류의 데이터를 저장
  LocalStorage, IndexedDB, WebSQL 및 FileSysyem과 같은 저장소 메커니즘 지원

그림 1) 웹 브라우저의 주요 구성 요소

---

렌더링 엔진

5대 브라우저(Chrome, Edge, Opera, Firefox, Safari)에서 사용되는 렌더링 엔진은 Blink, Gecko, WebKit이다.

Blink 기반
WebKit 엔진의 포크로 생성된 렌더링 엔진이지만, WebKit 엔진과 프로세스 구조가 다르다.

• Chrome
• Microsoft Edge
• Brave
• 삼성 인터넷
• Opera
• 웨일 등

Gecko 기반
모질라에서 자체적으로 개발한 오픈소스 렌더링 엔진이다.

• Firefox 등

WebKit 기반
애플에서 개발한 오픈소스 렌더링 엔진으로 모든 iOS는 WebKit을 사용해야한다.

• Safari
• iOS용으로 개발된 모든 웹 브라우저 등

렌더링 엔진 동작 과정

렌더링 엔진은 사용자로부터 요청받은 내용을 브라우저 화면에 표시하는 역할을 갖는다.

이는 통신(Networking) 과정에서 요청한 리소스(HTML문서, PDF 등)를 요청하는 것으로부터 시작되며, 리소스들은 8KB 단위로 전송된다.

다음 그림은 렌더링 엔진의 동작 과정이다.

 

그림 2) 렌더링 엔진의 동작 과정

• DOM 트리 구축을 위한 HTML 파싱
  렌더링 엔진은 HTML 문서를 파싱하고 각 태그들을 DOM 노드로 변환한 다음 외부 CSS파일과 함께 포함된 스타일 요소도 파싱한다. 이후 HTML 표시 규칙과 스타일 정보는 렌더 트리를 구축한다.
• 렌더 트리 구축
  렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있다.
  이러한 사각형을 정해진 순서대로 화면에 표시한다.
• 렌더 트리 배치
  렌더 트리 구축이 끝나면 각 노드가 화면의 정확한 위치에 표시될 수 있도록 배치를 시작한다.
• 렌더 트리 그리기
  UI 백엔드에서 렌더 트리의 각 노드를 거치며 형상을 만들어내는 과정이다.

렌더링 엔진은 빠르고 쾌적한 사용자 경험(UX)을 위해 가능한 빠르게 내용을 표시한다.

모든 HTML의 파싱을 마치고 화면에 표시하는 것이 아닌 렌더 트리 배치와 그리기 과정부터 표시한다. 이후 네트워크로 부터 나머지 내용(텍스트 정보, 이미지 등)을 전송받는 대로 화면에 표시한다.

이로 인해 사용자는 빈 화면을 보며 기다리는 것이 아닌 화면이 그려지며 내용이 채워짐을 볼 수 있게 된다.

WebKit 엔진 & Gecko 엔진 동작과정

그림 3) WebKit 엔진 동작 과정

그림 4) Gecko 엔진 동작과정

WebKit 엔진
객체로 구성되어 있는 렌더 트리를 사용하고, 요소를 배치하는데 배치(layout)라는 용어를 사용한다.
Gecko 엔진
렌더 트리를 형상 트리(frame tree)라 칭하며, 각 요소를 형상(frame)이라 한다. 또한 배치(layout)를 리플로우(reflow)라는 용어로 사용한다.

WebKit 엔진과 Gecko 엔진 사이에서 사용되는 용어 간 차이는 존재하지만, 동작과정은 기본적으로 동일하다. 

---

다음 글

[인터넷] - 웹 브라우저에 대해서 (2)

---

참고자료

탈리 가르시엘(Tali Garsiel) - How Browsers Work: Behind the scenes of modern web browsers

BrowserStack - Understanding the Role of Rendering Engine in Browsers

나무위키 - 웹 브라우저 

위키백과 - 웹 브라우저

백산의 벨로그 - 웹 브라우저의 작동 구조