브라우저 엔진
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
브라우저 엔진은 웹 브라우저, HTML 이메일 클라이언트 등 HTML을 표시해야 하는 다양한 응용 프로그램에서 사용되는 소프트웨어 구성 요소이다. 레이아웃 엔진, 렌더링 엔진이라고도 불리며, CSS를 통해 웹 페이지의 레이아웃을 지정하고, 화면에 표시할 시각적 표현을 계산한다. 주요 엔진으로는 게코, 블링크, 트라이던트, 프레스토, KHTML, 웹킷, 태즈먼, EdgeHTML 등이 있다. 자바스크립트 실행은 별도의 자바스크립트 엔진이 담당하며, 브라우저 엔진과 상호 작용한다.
더 읽어볼만한 페이지
- 레이아웃 엔진 - 웹킷
웹킷은 KDE의 KHTML에서 시작된 오픈 소스 웹 브라우저 엔진으로, 애플 Safari 브라우저의 렌더링 엔진으로 사용되면서 다양한 운영체제와 플랫폼으로 이식되어 HTML5, CSS3 등 최신 웹 표준을 지원한다. - 레이아웃 엔진 - 프레스토 (브라우저 엔진)
과거 오페라 브라우저의 레이아웃 엔진이었던 프레스토는 2002년 오페라 7.0에 처음 도입되어 발전하며 핵심 기술로 사용되었으나, 2013년 오페라가 Blink 엔진으로 전환하면서 개발이 중단되었다. - 웹 브라우저 - 방문 기록
방문 기록은 사용자가 방문한 웹 페이지 정보를 저장하여 이전 페이지 접근성을 높이고, 타겟 광고 등에 활용되지만, 개인 정보 침해와 같은 프라이버시 문제를 야기할 수 있다. - 웹 브라우저 - NPAPI
NPAPI는 웹 브라우저 플러그인이 브라우저와 상호 작용하는 인터페이스였으나, 새로운 웹 표준 등장, API 노후화, 보안 문제로 쇠퇴하여 주요 브라우저들이 지원을 중단했고, 대한민국에서는 액티브X 대안으로 고려되다 HTML5 전환으로 과도기적인 기술로 사용되었다.
| 브라우저 엔진 | |
|---|---|
| 개요 | |
| 종류 | 소프트웨어 구성 요소 |
| 용도 | 웹 브라우저의 핵심 구성 요소 |
| 역할 | HTML XML 이미지 기타 웹 페이지 작성에 사용되는 자원들을 파싱하여 시각적으로 표현 |
| 기능 | |
| 주요 기능 | HTML, CSS 해석 및 시각적 렌더링 자바스크립트 실행 웹 페이지 레이아웃 계산 및 그리기 |
| 추가 기능 | HTTP 요청 처리 웹 페이지 자원(이미지, 동영상 등) 로드 사용자 인터랙션 처리 (마우스 클릭, 키보드 입력 등) |
| 동작 방식 | |
| 파싱 | HTML, CSS 코드를 해석하여 문서 구조 생성 (DOM 트리) |
| 렌더링 | 생성된 문서 구조를 기반으로 화면에 표시할 요소들의 위치, 크기, 스타일 결정 결정된 정보 바탕으로 실제 화면에 웹 페이지 내용 그림 |
| 주요 엔진 | |
| 블링크 (Blink) | 사용 브라우저: 크롬, 엣지, 오페라, 삼성 인터넷 등 |
| 게코 (Gecko) | 사용 브라우저: 파이어폭스 |
| 웹킷 (WebKit) | 사용 브라우저: 사파리 |
| 트라이던트 (Trident) | 사용 브라우저: 인터넷 익스플로러 (더 이상 사용되지 않음) |
| 관련 기술 | |
| 핵심 기술 | HTML CSS 자바스크립트 |
| 기타 관련 기술 | DOM 웹 표준 |
| 참고 사항 | |
| 역할 | 웹 브라우저의 핵심 구성 요소이며, 웹 페이지를 화면에 표시하는 모든 과정을 담당 |
| 발전 | 웹 표준 준수 및 성능 향상을 위해 지속적으로 발전하고 있으며, 새로운 웹 기술 지원을 위해 꾸준히 업데이트되고 있다. |
2. 이름과 적용 범위
브라우저 엔진은 웹 브라우저뿐만 아니라 HTML 이메일을 표시해야 하는 이메일 클라이언트와 같은 다른 종류의 프로그램에서도 사용된다.[13][14][15][16] "브라우저 엔진" 외에 "레이아웃 엔진", "렌더링 엔진"이라는 용어도 사용된다.[13][14][15][16] 이론적으로 레이아웃과 렌더링은 별도의 엔진으로 관리될 수 있지만, 실제로는 밀접하게 결합되어 있어 따로 구분하기 어렵다.
웹 페이지의 레이아웃은 일반적으로 캐스케이딩 스타일 시트 (CSS)로 지정된다. 각 스타일 시트는 페이지를 표시하는 방법에 대한 일련의 규칙이다. 예를 들어, 일부 규칙은 타이포그래피 세부 정보(예: 글꼴, 색상, 텍스트 크기)를 지정하고, 다른 규칙은 이미지 배치를 결정한다. 엔진은 모든 관련 CSS 규칙을 결합하여 화면에 그릴 시각적 표현에 대한 정확한 그래픽 좌표를 계산한다.[1][4]
브라우저 엔진은 콘텐츠 보안 정책 준수, 하이퍼링크 관리, 웹 폼 관리, 문서 객체 모델(DOM) 자료 구조 구현 등의 역할도 수행한다. 자바스크립트 실행은 별도의 자바스크립트 엔진이 담당하며, 웹 브라우저에서 두 엔진은 DOM을 통해 상호 작용한다.
3. 레이아웃과 렌더링
일부 엔진은 페이지의 리소스를 다운로드하기 전에 렌더링을 시작할 수 있다. 이는 이미지의 점진적인 채우기 또는 스타일이 적용되지 않은 내용의 플래시와 같이 더 많은 데이터를 수신함에 따라 시각적 변경이 발생할 수 있다.[7]
4. 주요 엔진
이름 설명 게코 모질라 재단에서 제작하였으며, 파이어폭스 등에 탑재된다. 블링크 웹키트에서 파생되었으며, 크롬, 오페라 등에 탑재된다. 트라이던트 마이크로소프트에서 제작하였으며, 인터넷 익스플로러 등에 탑재된다. 프레스토 오페라 소프트웨어의 사유 엔진이었으나, 오페라 15부터는 블링크로 교체되었다. KHTML KDE의 컨커러에 탑재된다. 웹키트 KHTML에서 파생되었으며, 사파리 등에 탑재된다. 태즈먼 마이크로소프트에서 제작하였으며, 맥용 인터넷 익스플로러에 탑재된다. EdgeHTML 트라이던트에서 파생되었으나, 마이크로소프트 엣지 애너하임(2019~)부터는 블링크로 교체되었다.
; 개발 종료된 것4. 1. 게코 (Gecko)
모질라 재단에서 만든 레이아웃 엔진으로 파이어폭스, 모질라 선더버드, 시몽키 등이 사용한다.[2] Servo는 게코와 함께 개발되는 실험적인 엔진이다.
4. 2. 웹킷 (WebKit)
KHTML에서 파생된 레이아웃 엔진으로 애플의 사파리 등이 탑재하고 있다.[8] 애플은 KDE 프로젝트의 KHTML 엔진을 포크하여 자사의 사파리 브라우저용 WebKit 엔진을 만들었다. iOS용 모든 브라우저는 WebKit을 엔진으로 사용해야 한다.[9] 구글은 원래 크롬 브라우저에 WebKit을 사용했지만, 결국 이를 포크하여 Blink 엔진을 만들었다.[10]
4. 3. 블링크 (Blink)
웹키트에서 파생된 레이아웃 엔진으로 크롬, 오페라 등이 이를 탑재하고 있다.[10] 모든 크로미움 기반 브라우저는 Blink를 사용하며, CEF, Electron 또는 크로미움을 임베드하는 다른 프레임워크로 구축된 응용 프로그램도 마찬가지이다. 엣지 브라우저(현재는 Edge Legacy라고 함)의 이전 엔진 EdgeHTML은 트라이던트에서 파생되었으나, 새로운 크로미움 기반 엣지는 Blink 엔진으로 다시 만들어졌다.[12]
4. 4. KHTML
KDE의 컨커러에 탑재되어 있다. 애플은 KDE 프로젝트의 KHTML 엔진을 포크하여 자사의 사파리 브라우저용 WebKit 엔진을 만들었다.[8]
4. 5. 트라이던트 (Trident)
마이크로소프트의 레이아웃 엔진으로 인터넷 익스플로러, 아웃룩 익스프레스, 마이크로소프트 아웃룩, 윈앰프, 리얼플레이어의 미니 브라우저 등에 탑재되었다.[11] MSHTML이라고도 한다.
4. 6. EdgeHTML
트라이던트에서 파생된 마이크로소프트의 레이아웃 엔진으로, 마이크로소프트 엣지 스파르탄(~2019) 버전에 탑재하고 있었으나, 마이크로소프트 엣지 애너하임(2019~)부터는 블링크로 교체되었다.[11] 크로미움 기반 새 엣지는 Blink 엔진으로 다시 만들어졌다.[12]
4. 7. 프레스토 (Presto)
오페라 소프트웨어의 사유 엔진으로 오페라에 탑재되었으나, 오페라 15부터는 블링크로 교체되었다.
4. 8. 태즈먼 (Tasman)
마이크로소프트의 레이아웃 엔진으로 맥용 인터넷 익스플로러에 탑재되었다.
5. 개발 타임라인
다음 타임라인은 주요 브라우저 엔진의 개발 기간을 나타낸다.
참조
[1]
웹사이트
Behind the scenes of modern web browsers
http://taligarsiel.c[...]
Tali Garsiel
2018-04-21
[2]
웹사이트
Gecko
https://wayback.arch[...]
Mozilla
2018-04-21
[3]
웹사이트
Introducing Goanna
https://forum.palemo[...]
M.C. Straver
2018-04-21
[4]
웹사이트
How Blink Works
https://docs.google.[...]
Google
2024-03-12
[5]
웹사이트
Open Source - Spotify
https://www.spotify.[...]
2023-12-01
[6]
뉴스
Building Hybrid Applications with Electron
https://slack.engine[...]
Slack
2023-12-01
[7]
웹사이트
How to prevent Flash of Unstyled Content on your websites
https://www.techrepu[...]
2021-10-09
[8]
웹사이트
Apple snub stings Mozilla
https://web.archive.[...]
CNET Networks
2017-02-16
[9]
웹사이트
Open-sourcing Chrome on iOS!
https://blog.chromiu[...]
2021-04-26
[10]
웹사이트
Google going its way, forking WebKit rendering engine
https://arstechnica.[...]
Conde Nast
2017-03-09
[11]
웹사이트
You Think You Can Forget About the "Legacy" Microsoft Edge? Not So Fast!
https://blog.ailon.o[...]
2021-05-14
[12]
웹사이트
Microsoft Edge Browser To Get New Rendering Engine but EdgeHTML Continues
https://redmondmag.c[...]
2019-12-21
[13]
웹인용
Definition of: browser rendering engine
https://www.pcmag.co[...]
PC Mag
[14]
웹인용
Behind the scenes of modern web browsers
http://taligarsiel.c[...]
Tali Garsiel
2018-04-21
[15]
웹인용
Gecko
https://wayback.arch[...]
Mozilla
2018-04-21
[16]
웹인용
Introducing Goanna
https://forum.palemo[...]
M.C. Straver
2018-04-21
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com