브라우저 엔진
1. 개요
브라우저 엔진은 웹 브라우저, HTML 이메일 클라이언트 등 HTML을 표시해야 하는 다양한 응용 프로그램에서 사용되는 소프트웨어 구성 요소이다. 레이아웃 엔진, 렌더링 엔진이라고도 불리며, CSS를 통해 웹 페이지의 레이아웃을 지정하고, 화면에 표시할 시각적 표현을 계산한다. 주요 엔진으로는 게코, 블링크, 트라이던트, 프레스토, KHTML, 웹킷, 태즈먼, EdgeHTML 등이 있다. 자바스크립트 실행은 별도의 자바스크립트 엔진이 담당하며, 브라우저 엔진과 상호 작용한다.
| 종류 | 소프트웨어 구성 요소 |
|---|---|
| 용도 | 웹 브라우저의 핵심 구성 요소 |
| 역할 | HTML XML 이미지 기타 웹 페이지 작성에 사용되는 자원들을 파싱하여 시각적으로 표현 |
| 주요 기능 | HTML, CSS 해석 및 시각적 렌더링 자바스크립트 실행 웹 페이지 레이아웃 계산 및 그리기 |
|---|---|
| 추가 기능 | HTTP 요청 처리 웹 페이지 자원(이미지, 동영상 등) 로드 사용자 인터랙션 처리 (마우스 클릭, 키보드 입력 등) |
| 파싱 | HTML, CSS 코드를 해석하여 문서 구조 생성 (DOM 트리) |
|---|---|
| 렌더링 | 생성된 문서 구조를 기반으로 화면에 표시할 요소들의 위치, 크기, 스타일 결정 결정된 정보 바탕으로 실제 화면에 웹 페이지 내용 그림 |
| 블링크 (Blink) | 사용 브라우저: 크롬, 엣지, 오페라, 삼성 인터넷 등 |
|---|---|
| 게코 (Gecko) | 사용 브라우저: 파이어폭스 |
| 웹킷 (WebKit) | 사용 브라우저: 사파리 |
| 트라이던트 (Trident) | 사용 브라우저: 인터넷 익스플로러 (더 이상 사용되지 않음) |
| 핵심 기술 | HTML CSS 자바스크립트 |
|---|---|
| 기타 관련 기술 | DOM 웹 표준 |
| 역할 | 웹 브라우저의 핵심 구성 요소이며, 웹 페이지를 화면에 표시하는 모든 과정을 담당 |
|---|---|
| 발전 | 웹 표준 준수 및 성능 향상을 위해 지속적으로 발전하고 있으며, 새로운 웹 기술 지원을 위해 꾸준히 업데이트되고 있다. |
-
레이아웃 엔진 -
웹킷
웹킷은 KDE의 KHTML에서 시작된 오픈 소스 웹 브라우저 엔진으로, 애플 Safari 브라우저의 렌더링 엔진으로 사용되면서 다양한 운영체제와 플랫폼으로 이식되어 HTML5, CSS3 등 최신 웹 표준을 지원한다. -
레이아웃 엔진 -
프레스토 (브라우저 엔진)
과거 오페라 브라우저의 레이아웃 엔진이었던 프레스토는 2002년 오페라 7.0에 처음 도입되어 발전하며 핵심 기술로 사용되었으나, 2013년 오페라가 Blink 엔진으로 전환하면서 개발이 중단되었다. -
웹 브라우저 -
방문 기록
방문 기록은 사용자가 방문한 웹 페이지 정보를 저장하여 이전 페이지 접근성을 높이고, 타겟 광고 등에 활용되지만, 개인 정보 침해와 같은 프라이버시 문제를 야기할 수 있다. -
웹 브라우저 -
NPAPI
NPAPI는 웹 브라우저 플러그인이 브라우저와 상호 작용하는 인터페이스였으나, 새로운 웹 표준 등장, API 노후화, 보안 문제로 쇠퇴하여 주요 브라우저들이 지원을 중단했고, 대한민국에서는 액티브X 대안으로 고려되다 HTML5 전환으로 과도기적인 기술로 사용되었다.
2. 이름과 적용 범위
브라우저 엔진은 웹 브라우저뿐만 아니라 HTML 이메일을 표시해야 하는 이메일 클라이언트와 같은 다른 종류의 프로그램에서도 사용된다. "브라우저 엔진" 외에 "레이아웃 엔진", "렌더링 엔진"이라는 용어도 사용된다. 이론적으로 레이아웃과 렌더링은 별도의 엔진으로 관리될 수 있지만, 실제로는 밀접하게 결합되어 있어 따로 구분하기 어렵다.
브라우저 엔진은 콘텐츠 보안 정책 준수, 하이퍼링크 관리, 웹 폼 관리, 문서 객체 모델(DOM) 자료 구조 구현 등의 역할도 수행한다. 자바스크립트 실행은 별도의 자바스크립트 엔진이 담당하며, 웹 브라우저에서 두 엔진은 DOM을 통해 상호 작용한다.
3. 레이아웃과 렌더링
웹 페이지의 레이아웃은 일반적으로 캐스케이딩 스타일 시트 (CSS)로 지정된다. 각 스타일 시트는 페이지를 표시하는 방법에 대한 일련의 규칙이다. 예를 들어, 일부 규칙은 타이포그래피 세부 정보(예: 글꼴, 색상, 텍스트 크기)를 지정하고, 다른 규칙은 이미지 배치를 결정한다. 엔진은 모든 관련 CSS 규칙을 결합하여 화면에 그릴 시각적 표현에 대한 정확한 그래픽 좌표를 계산한다.
일부 엔진은 페이지의 리소스를 다운로드하기 전에 렌더링을 시작할 수 있다. 이는 이미지의 점진적인 채우기 또는 스타일이 적용되지 않은 내용의 플래시와 같이 더 많은 데이터를 수신함에 따라 시각적 변경이 발생할 수 있다.
4. 주요 엔진
| 이름 | 설명 |
|---|---|
| 게코 | 모질라 재단에서 제작하였으며, 파이어폭스 등에 탑재된다. |
| 블링크 | 웹키트에서 파생되었으며, 크롬, 오페라 등에 탑재된다. |
| 트라이던트 | 마이크로소프트에서 제작하였으며, 인터넷 익스플로러 등에 탑재된다. |
| 프레스토 | 오페라 소프트웨어의 사유 엔진이었으나, 오페라 15부터는 블링크로 교체되었다. |
| KHTML | KDE의 컨커러에 탑재된다. |
| 웹키트 | KHTML에서 파생되었으며, 사파리 등에 탑재된다. |
| 태즈먼 | 마이크로소프트에서 제작하였으며, 맥용 인터넷 익스플로러에 탑재된다. |
| EdgeHTML | 트라이던트에서 파생되었으나, 마이크로소프트 엣지 애너하임(2019~)부터는 블링크로 교체되었다. |
* 애플은 KDE 프로젝트의 KHTML 엔진을 포크하여 자사의 사파리 브라우저용 WebKit 엔진을 만들었다.
* 구글은 원래 크롬 브라우저에 WebKit을 사용했지만, 결국 이를 포크하여 Blink 엔진을 만들었다.
* 마이크로소프트는 트라이던트와 EdgeHTML을 가지고 있다. 트라이던트는 인터넷 익스플로러 브라우저에서 사용된다. EdgeHTML은 엣지 브라우저(현재는 Edge Legacy라고 함)의 이전 엔진이었으며, 새로운 크로미움 기반 엣지는 Blink 엔진으로 다시 만들어졌다.
* 모질라는 파이어폭스 브라우저와 썬더버드 이메일 클라이언트를 위해 게코 엔진을 개발한다.
; 개발 종료된 것
* Trident
** EdgeHTML
* Presto
4.2. 웹킷 (WebKit)
KHTML에서 파생된 레이아웃 엔진으로 애플의 사파리 등이 탑재하고 있다. 애플은 KDE 프로젝트의 KHTML 엔진을 포크하여 자사의 사파리 브라우저용 WebKit 엔진을 만들었다. iOS용 모든 브라우저는 WebKit을 엔진으로 사용해야 한다. 구글은 원래 크롬 브라우저에 WebKit을 사용했지만, 결국 이를 포크하여 Blink 엔진을 만들었다.
4.3. 블링크 (Blink)
웹키트에서 파생된 레이아웃 엔진으로 크롬, 오페라 등이 이를 탑재하고 있다. 모든 크로미움 기반 브라우저는 Blink를 사용하며, CEF, Electron 또는 크로미움을 임베드하는 다른 프레임워크로 구축된 응용 프로그램도 마찬가지이다. 엣지 브라우저(현재는 Edge Legacy라고 함)의 이전 엔진 EdgeHTML은 트라이던트에서 파생되었으나, 새로운 크로미움 기반 엣지는 Blink 엔진으로 다시 만들어졌다.
4.5. 트라이던트 (Trident)
마이크로소프트의 레이아웃 엔진으로 인터넷 익스플로러, 아웃룩 익스프레스, 마이크로소프트 아웃룩, 윈앰프, 리얼플레이어의 미니 브라우저 등에 탑재되었다. MSHTML이라고도 한다.
4.6. EdgeHTML
트라이던트에서 파생된 마이크로소프트의 레이아웃 엔진으로, 마이크로소프트 엣지 스파르탄(~2019) 버전에 탑재하고 있었으나, 마이크로소프트 엣지 애너하임(2019~)부터는 블링크로 교체되었다. 크로미움 기반 새 엣지는 Blink 엔진으로 다시 만들어졌다.