렌더링 엔진과 특징 분석하기(webkit, blink, gecko)

독립 발전하는 웹 브라우저 렌더링 엔진

웹 브라우저의 대표적인 렌더링 엔진은 Webkit, Blink, Gecko 세 가지가 있다.

각각의 발전사와 점유율, 특징을 살펴보자.

1. 엔진의 점유율

각 엔진의 점유율은 해당 엔진을 사용하는 브라우저의 점유율 추정치로 살펴보면 다음과 같다.

엔진BlinkWebkitGecko
점유율75%20%3%
브라우저Google Chrome(65%)
Microsoft Edge(5%)
Opera(2.5%)
Samsung Internet(2.5%)
Brabe
Vivaldi
Safari(19%)
iOS용 모든 브라우저
Mozilla Firefox
Statcounter Global Stats – Browser Market Share 참고

‘iOS용 모든 브라우저’는 애플 OS에서 사용되는 크롬, 엣지 등은 Webkit, 이외의 윈도우, 안드로이드 등의 OS에서 사용되는 크롬, 엣지는 Blink를 사용한다는 의미가 된다.

따라서 애플 기기의 브라우저는 모두 Webkit을 사용하며, 이는 전체에서 대략 20%가 된다.

이 같은 특성을 봤을 때 맥 OS에서 개발하고 크롬의 호환성 OK 여부를 결정할 것이 아니라 실제 OS를 변경하여 브라우저 테스트의 필요성이 제기된다.

2. 발전사

Webkit

Webkit은 애플에서 개발한 오픈소스 렌더링 엔진으로 KHTML(1998년부터 사용된 HTML 렌더링 엔진)과 KJS(JavaScript 엔진)을 기반으로 2002년부터 개발되었다.

웹 브라우저에서 웹 페이지를 렌더링하기 위해 사용되며, HTML, CSS, JavaScript 등을 해석하여 사용자가 볼 수 있는 형태로 화면에 렌더링한다.

2003년 Safari 브라우저 출시와 함께 Webkit을 공식적으로 발표했으며, 2005년 오픈소스화하여 현재까지 애플 생태계 전반에 걸쳐 기본 렌더링 엔진으로 사용된다.

Webkit의 구성 요소는 다음과 같다.

WebCore – HTML, CSS, SVG, 이미지 등의 렌더링과 관련된 부분을 처리하는 핵심 렌더링 엔진

JavaScriptCore(Nitro 엔진) – JavaScript 코드를 해석하고 실행하는 엔진으로 성능이 개선된 Nitro 엔진이 주로 사용됨. Webkit을 사용하는 브라우저는 기본적으로 별도의 JavaScript 엔진이 필요없음

Web Inspector – 내장 디버깅 도구로 DOM, css, 네트워크 ㅇㅎ청 등의 분석과 디버깅이 가능

플랫폼 특정 코어 – 운영 체제와 엔진을 연결하거나 플랫폼 간의 차이를 추상화, 특정 플랫폼에서의 성능 최적화 등을 담당

Webkit의 특징으로는 웹 표준을 준수하여 최신 웹 표준을 지원하며 지속적인 최적화를 통해 성능과 에너지 효율성이 강화되었다. 특히 모바일 기기에서 배터리 소모 최소화에 중점을 둔다.

초기부터 경량화된 구조와 빠른 렌더링 속도가 장점이며 높은 에너지 효율성과 함께 애플 생태계에 최적화된 성능과 안정성을 보여준다.

그러나 애플 중심 개발과 강한 통제로 인해 애플 생태계 외에서는 기술 채택이 더디며 타플랫폼의 기여가 제한적이고 점유율이 낮다.

Blink

2013년 구글이 Webkit을 fork하여 만든 렌더링 엔진이다. Chrome 브라우저도 초기에는 Webkit을 사용했지만 아키텍쳐와 개발 방식이 맞지 않아 Blink를 개발하게 되었다.

초기 버전은 상당히 많은 부분의 코드를 공유했지만 독자적인 개발 노선을 걷기 시작하고 멀티 프로세스 아키텍쳐에 집중하여 다양한 운영 체제와 디바이스에서 원활히 작동하도록 설계되었다.

Chromium(구글 주도 오픈소스 웹 브라우저 프로젝트)은 Blink 엔진을 사용하므로 Chromium을 기반으로 하는 브라우저는 모두 Blink 렌더링 엔진을 사용한다.

Blink의 주요 구성 요소는 다음과 같다.

DOM core – HTML 파싱과 DOM 트리 생성 및 조작 지원

Layout&Render Engine – 레이아웃 계산 및 렌더 트리 생성

CSS Parser&Style Engine – CSS 파싱 및 스타일 계산

DevTools – 개발자용 디버깅 및 성능 분석 도구

참고로 Blink는 내부에 JavaScript 엔진을 포함하지 않고 외부 엔진인 V8 엔진을 사용한다.

특징으로는 멀티 프로세스 모델과 통합되어 각 탭이 독립적으로 실행되므로 보안이 강화된다. 렌더링 성능 향상을 위해 GPU를 적극 사용하고 멀티 프로세스 구조로 빠른 성능과 광범위한 생태계가 장점이다.

시장 점유율이 집중화되면서 경쟁이 줄고 웹 기술 발전이 특정 기업에 의존 경향을 보이는 것과 메모리, CPU 사용량이 많아 리소스 소모가 크고 해당 생태계에 속한 브라우저의 독립성이 감소하는 단점이 있다.

Gecko

1997년 Netscape에서 개발을 시작하였으며, 2004년 Firefox의 핵심 엔진으로 채택되었다. 2017년 Quantum 프로젝트를 통해 멀티스레드 지원, GPU 활용, 웹 표준 강화 등을 강화했다.

주요 구성 요소로는 HTML parser, CSS parser, Rendering Engine 등이 있으며, Gecko에 통합된 JavaScript 엔진은 SpiderMonkey를 사용하며 개발자 도구인 Developer Tools도 제공한다.

특징으로는 Servo 프로젝트 기술 통합을 통해 Stylo CSS 엔진을 도입하고 멀티스레드 렌더링을 지원하며 GPU 가속 활용이 강화되었다. 강력한 개인정보 보호 및 확장성이 장점이지만 낮은 시장 점유율과 Blink보다 리소스 사용량이 많은 것이 단점이다.


출처
Chromium Documentation
Google Developers Blog
Webkit Official
Mozilla Developer Network(MDN)