브라우저 엔진

브라우저 엔진(browser engine)은 주된 모든 웹 브라우저의 핵심이 되는 소프트웨어 구성 요소이다. 브라우저 엔진의 주된 역할은 HTML 문서와 기타 자원의 웹 페이지를 사용자의 장치에 상호작용적인 시각 표현으로 변환시키는 것이다.

이름과 적용 범위

브라우저 엔진은 독립적인 컴퓨터 프로그램이 아닌 웹 브라우저와 같은 더 큰 프로그램의 중요한 부분이며, 여기에서 이 용어가 파생되었다. ("엔진"이라는 용어는 자동차 엔진과 유사성이 있다.)

"브라우저 엔진" 외에 2가지 다른 용어가 관련 개념과 관련하여 일반적으로 사용된다: "레이아웃 엔진", "렌더링 엔진"'. 이론적으로 레이아웃과 렌더링(또는 페인팅)은 별도의 엔진에 의해 관리될 수 있다. 그러나 실제로는 이 둘은 서로 밀접히 결합되어 있으며 따로 떼어서 간주하는 일은 드물다.

게다가 레이아웃과 렌더링 외에 브라우저 엔진은 문서들 간의 보안 정책을 강제하며 페이지 스크립트에 노출되는 문서 객체 모델(DOM) 자료 구조를 구현한다. 또, 하이퍼링크와 웹 폼을 관리한다.

그러나 자바스크립트(JS) 코드를 실행하는 일은 별개의 문제인데, 주된 모든 웹 브라우저는 이를 위한 전용 엔진을 사용하기 때문이다. JS 언어는 원래 브라우저에 사용하기 위해 개발되었으나 현재는 그 외의 장소에서도 사용되므로 JS 엔진의 구현체는 브라우저 엔진과는 분리되고 있다. 웹 브라우저에서 2개의 엔진은 공유되는 DOM 자료 구조를 통해 조화롭게 동작한다.

브라우저 엔진은 웹 브라우저 외에도 다른 종류의 프로그램들에 사용될 수 있다.(마치, 다른 종류의 자동차가 동일한 엔진으로 제조될 수 있는 것처럼) 이를테면 이메일 클라이언트는 HTML 이메일의 표시를 위해 브라우저 엔진이 필요할 수 있다. 구글 크롬 브라우저의 2개의 엔진의 지원을 받는 일렉트론 프레임워크는 수많은 애플리케이션을 개발하기 위해 사용되고 있다.

저명한 엔진

이름	설명
게코(Gecko)	모질라 재단에서 만든 레이아웃 엔진으로 파이어폭스, 모질라 선더버드, 시몽키 등이 이를 탑재하고 있다.
블링크(Blink)	웹키트에서 파생된 레이아웃 엔진으로 크롬, 오페라 등이 이를 탑재하고 있다.
트라이던트(Trident)	마이크로소프트의 레이아웃 엔진으로 인터넷 익스플로러, 아웃룩 익스프레스, 마이크로소프트 아웃룩, 그리고 윈앰프, 리얼플레이어의 미니 브라우저 등이 이를 탑재하고 있다.
프레스토(Presto)	오페라 소프트웨어의 사유 엔진으로 오페라가 탑재하고 있었으나, 오페라 15부터는 블링크로 교체되었다.
KHTML	KDE의 컨커러가 탑재하고 있다.
웹키트(Webkit)	KHTML에서 파생된 레이아웃 엔진으로 사파리 등이 탑재하고 있다.
태즈먼(Tasman)	마이크로소프트의 레이아웃 엔진으로 맥용 인터넷 익스플로러가 탑재하고 있다.
EdgeHTML	트라이던트에서 파생된 마이크로소프트의 레이아웃 엔진으로 마이크로소프트 엣지 스파르탄(~2019) 버전에 탑재하고 있었으나, 마이크로소프트 엣지 애너하임(2019~)부터는 블링크로 교체되었다.

타임라인

<timeline>

1. header

ImageSize = width:700 height:170 PlotArea = left:80 right:5 bottom:20 top:5 AlignBars = justify DateFormat = dd/mm/yyyy Period = from:01/01/1997 till:31/05/2021 TimeAxis = orientation:horizontal format:yyyy

Colors =

 id:microsoft     value:rgb(0.3, 0.5, 1)
 id:gecko       value:rgb(1, 0, 0)
 id:khtml       value:rgb(0.3,0.3,0.3)
 id:webkit      value:rgb(0.3, 0.36, 0.36)
 id:blink       value:rgb(0.3, 0.39, 0.39)
 id:mgray       value:rgb(0.5, 0.5, 0.5)
 id:lgray       value:rgb(0.75, 0.75, 0.75)

ScaleMajor = gridcolor:mgray unit:year increment:1 start:01/01/1997 ScaleMinor = unit:month increment:3 start:01/01/1997 BackgroundColors = bars:lgray

BarData =

 bar:Gecko           text:Gecko
 bar:MSHTML          text:MSHTML
 bar:EdgeHTML        text:EdgeHTML
 bar:KHTML           text:KHTML
 bar:WebKit          text:WebKit
 bar:Blink           text:Blink

PlotData=

 align:center textcolor:black fontsize:8 mark:(line,black) width:15 shift:(0,-4)

 bar:Gecko
 from: 01/05/1997  till: 31/05/2021    color:gecko mark:(line,white)

 bar:MSHTML
 from: 01/10/1997  till: 15/07/2015    color:microsoft mark:(line,white)

 bar:EdgeHTML
 from: 12/11/2014  till: 15/12/2018    color:microsoft mark:(line,white)

 bar:KHTML
 from: 04/11/1998  till: 15/10/2016    color:khtml mark:(line,white)

 bar:WebKit
 from: 25/06/2001  till: 31/05/2021    color:webkit mark:(line,white)

 bar:Blink
 from: 03/04/2013  till: 31/05/2021    color:blink mark:(line,white)

</timeline>

같이 보기

• 게임 엔진
• 렌더링
• 페이지 기술 언어