렌더링 엔진
IT 위키
더 많은 작업
렌더링 엔진(Rendering engine)은 웹 브라우저에서 HTML·CSS 같은 웹 문서를 해석해 화면에 배치하고 그리는 핵심 구성 요소이다. 문서의 배치(레이아웃)를 계산한다는 뜻에서 레이아웃 엔진(Layout engine)이라고도 부른다.
브라우저는 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 자바스크립트 엔진, 네트워킹 계층 등으로 나뉜다. 이 가운데 렌더링 엔진이 웹 페이지가 어떻게 보일지를 정한다. 같은 웹 페이지가 브라우저마다 조금씩 다르게 보이는 것은 대개 렌더링 엔진이 다르기 때문이다. 그래서 브라우저를 구분할 때 "어느 렌더링 엔진을 쓰는가"를 많이 따진다.
렌더링 엔진은 대체로 다음 순서로 일한다.
- HTML 을 파싱해 DOM 트리를 만든다
- CSS 를 파싱해 스타일 규칙(CSSOM)을 만든다
- 둘을 합쳐 화면에 보일 요소만 담은 렌더 트리를 만든다
- 각 요소의 크기와 위치를 계산한다(레이아웃, 리플로)
- 픽셀로 그린다(페인트)와 여러 층을 합성한다(컴포지팅)
| 엔진 | 개발 주체 | 쓰는 브라우저 | 비고 |
|---|---|---|---|
| 게코(Gecko) | 모질라 | 파이어폭스, 썬더버드 | 넷스케이프 소스 공개(1998)에서 출발했다 |
| 웹킷(WebKit) | 애플 | 사파리, iOS 의 모든 브라우저 | KDE 의 KHTML 을 포크해 만들었다(2001) |
| 블링크(Blink) | 구글 | 크롬, 엣지(2020~), 오페라(2013~), 웨일, 삼성 인터넷 | 2013년 웹킷에서 갈라져 나왔다. 크로미움 프로젝트의 엔진 |
| 프레스토(Presto) | 오페라 소프트웨어 | 옛 오페라(12 이하) | 2013년 오페라가 블링크로 옮기면서 개발이 끝났다 |
| 트라이던트(Trident, MSHTML) | 마이크로소프트 | 인터넷 익스플로러 | IE 지원 종료(2022)와 함께 사라졌다 |
| 엣지HTML(EdgeHTML) | 마이크로소프트 | 초기 엣지(2015~2019) | 트라이던트를 고친 것. 엣지는 2020년부터 블링크를 쓴다 |
| KHTML | KDE | 컨커러(Konqueror) | 웹킷의 뿌리 |
- 계보는 KHTML → 웹킷 → 블링크 로 이어진다. "블링크는 웹킷의 포크"라는 말이 여기서 나온다.
- 파이어폭스만 독자 계열인 게코를 쓴다. 게코는 C++ 로 작성되었고, 최근에는 러스트로 만든 구성 요소(스타일 엔진 Stylo 등)를 더했다.
- 자바스크립트 엔진은 렌더링 엔진과 별개다. 크롬은 V8, 파이어폭스는 스파이더몽키(SpiderMonkey), 사파리는 자바스크립트코어(JavaScriptCore)를 쓴다.