브라우저는 어떻게 동작하는가? [1/3]

NHN 개발자 블로그인 Hello World에 투고되어있는 “브라우저는 어떻게 동작하는가?“의 정리본입니다.
너무 어려워서 다시 정리합니다.

Web Browser

가장 많이 사용되는 프로그램이고 우리가 웹을 탐색할 때 사용하는 프로그램입니다.
최근에는 “인터넷 익스플로러(MS)”, “파이어폭스(Mozilla)”, “크롬(Google)”, “사파리(Apple)”, “오페라(Opera)”가 주력 브라우저로 활약을 하고 있습니다.
브라우저의 주요 기능은 “사용자가 요청한 데이터를 서버에 요청한 뒤 그 데이터를 받아서 다시 브라우저에 뿌려주는 것”입니다.
이 과정에서 데이터는 HTML 문서인 경우가 많지만 PDF, 이미지 등 여러 케이스가 존재합니다.
브라우저는 W3C에서 정의한 명세에 따라 HTML과 CSS를 해석하게 됩니다.
예전에는 독자적인 표준을 만들어서 브라우저의 렌더링을 하던 시절^[1]도 있지만 근래에는 대부분의 브라우저가 W3C 표준을 준수합니다.
브라우저의 “사용자 인터페이스^[2]“는 대체로 공통적인 성향을 띄며,
아래와 같은 요소들이 일반적입니다.

• URI를 입력할 수 있는 주소표시줄
• 이전 버튼과 다음 버튼
• 북마크 버튼
• 새로고침 버튼과 정지 버튼
• 홈 버튼

브라우저의 사용자 인터페이스는 표준 명세가 없음에도 불구하고 오랜 시간동안 서로의 장점을 모방하며 비슷한 형태를 취하게 되었습니다.
HTML5 명세는 주소표시줄, 상태표시줄, 도구 모음 같은 일반적인 요소를 제외하고는 브라우저의 필수 UI를 정의하지 않았습니다.

Browser Structure

브라우저의 주요 구성요소는 7가지입니다.

• 사용자 인터페이스(User Interface)

  주소표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분

• 브라우저 엔진(Browser Engine)

  사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

• 렌더링 엔진(Rendering Engine)

  사용자 인터페이스에서 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML을 파싱하여 화면에 표시

• 통신(Networking)

  HTTP Request와 같은 네트워크 호출에 사용. 플랫폼에 독립적인 인터페이스고 플랫폼 하부에서 실행

• UI 백엔드(UI Backend)

  콤보박스와 창같은 기본 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS의 UI체계를 사용

• 자바스크립트 해석기(JavaScript Interpreter)

  자바스크립트 코드를 해석하고 실행

• 자료 저장소(Data Persistence)

  쿠키를 저장하는 것과 같은 모든 종류의 자원을 하드디스크에 저장하는 공간. HTML5 명세에는 브라우저가 지원하는 ‘Web storage‘ 명세 존재

이를 그림으로 보면 아래 그림과 같은 구조가 됩니다.

그림 1. 브라우저 내부 구조
이 게시글에서는 위 구조 중 “렌더링 엔진”에 대한 부분을 중점적으로 다룹니다.

렌더링 엔진

렌더링 엔진의 역할은 브라우저의 핵심 기능인 “요청받은 내용을 브라우저 화면에 표시하는 일”입니다.
렌더링 엔진은 HTML, XML, 이미지, PDF등 다양한 유형의 데이터를 표현할 수 있지만, 여기서는 HTML과 이미지를 CSS로 표현하는 주된 사용 패턴에 포커스를 맞추겠습니다.

렌더링 엔진의 종류가 매우 많지만, 여기서는 오픈소스인 Webkit과 Gecko 엔진만 살펴보도록 하겠습니다.
대부분의 엔진의 동작 방식은 대체로 유사합니다.

동작과정

렌더링 엔진은 통신에 요청한 문서의 내용을 얻는 것으로 시작하는데 문서의 내용은 보통 8KB단위로 전송됩니다.
다음은 렌더링 엔진의 기본적인 동작과정입니다.

1. DOM 트리 구축을 위한 HTML 파싱
2. 렌더 트리 구축
3. 렌더 트리 배치
4. 렌더 트리 그리기

렌더링 엔진은 독자적인 HTML 파서를 이용해 HTML을 파싱하고, “콘텐츠 트리” 내부에서 태그를 DOM 노드로 변환합니다.
그리고나서 외부 CSS파일과 함께 포함된 스타일 요소도 파싱합니다.
파싱된 스타일 정보와 HTML 표시 규칙은 “렌더 트리”라고 부르는 또 다른 트리를 생성합니다.
렌더 트리는 색상, 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있고, 정해진 순서대로 화면에 표시됩니다.
렌더 트리 생성이 끝나면 배치(reflow / layout) 과정이 시작되는데 이 과정에서 각 노드가 정확한 위치에 표시되게 됩니다.
그리고 나서 UI 백엔드에서 렌더 트리의 각 노드들을 가로지르며 형상을 만들어 화면에 그립니다.
이 모든 과정들은 점진적으로 진행됩니다.
렌더링 엔진은 가능하면 HTML이 모두 파싱될 때까지 기다리지 않고, 배치와 그리기 과정을 시작합니다.
먼저 파싱된 내용들을 우선적으로 화면에 표현하는 것입니다.
Webkit 렌더링 엔진과 Gecko 렌더링 엔진의 동작과정을 그림으로 그리면 아래와 같습니다.

그림 2. Webkit 렌더링 엔진 동작 과정

그림 3. Gecko 렌더링 엔진 동작 과정
Webkit과 Gecko가 용어를 약간 다르게 사용하고 있지만 동작 과정은 기본적으로 동일합니다.
다음 게시글에서는 파싱 과정 및 HTML 파싱 과정, DOM 트리 구축 과정에 대해 알아보겠습니다.

Knowledge

• 브라우저 전쟁
• 사용자 인터페이스