시작 전에, velog에서는 이미지 크기 조절이나 글자들의 정렬을 지원해주지 않아 조금 깨져보일 수 있다는 점, 미리 양해 구합니다.
브라우저, 이건 도대체 뭘까?
전 세계의 수많은 사람들은 매일매일 이 브라우저에 접속한다.
"HTML 문서와 그림, 멀티미디어 파일등 월드 와이드 웹을 기반으로 한 인터넷의 컨텐츠를 검색 및 열람하기 위한 응용 프로그램의 총칭" 인 브라우저는 단순한 응용 프로그램 중 하나임에도 불구하고 다른 프로그램들과는 차원이 다른 접속량을 보여주고 있다. 웹서핑, 쇼핑, 콘텐츠 시청 등 이제 브라우저에서 못하는 걸 찾는게 더 빠를 정도이다. 하지만 이렇게 자주, 많이 쓰는 브라우저임에도 불구하고 의외로 많은 사람들은 브라우저가 어떻게 원하는대로 작동하는지에 대해 무지하다. 오늘은 이에 대해 알아보자.
브라우저의 기본 구조
브라우저가 할 수 있는건 많지만 이들을 모두 관통하는, 제일 핵심적인 기능은 바로 사용자가 선택한 자원을 서버에 요청하고 이를 브라우저에 표시하는 것이다. 이 기능을 가능하게 하기 위해 브라우저는 다음과 같은 구조를 가지고 있다(이건 제일 기본적인 구조이고, 브라우저마다 세부적인 구조는 다르다):
- 사용자 인터페이스: 사용자가 접근할 수 있는 영역
- 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어
- 렌더링 엔진: 요청한 콘텐츠를 HTML, CSS 등을 파싱하여 최종적으로 화면에 출력
- 통신: 네트워크 호출에 사용
- 자바스크립트 해석기: 자바스크립트 코드를 해석하고 실행
- UI 백엔드: 콤보 박스 같은 기본적인 위젯을 그리는 인터페이스
- 자료 저장소: 쿠키, Indexed DB 등 브라우저 메모리를 활용하여 자료를 저장하는 영역
렌더링 엔진의 기본
위에서도 언급했지만, 렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다. 이때 렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있다. 또한 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있다. 여러가지 렌더링 엔진이 있지만, 제일 대표적인 것 세가지는 파이어폭스가 사용하는 게코(Gecko)엔진, 크롬과 마이크로소프트 엣지가 사용하는 블링크(Blink)엔진, 사파리가 쓰는 웹킷(Webkit)엔진이 있다.
렌더링 엔진의 작동 원리
다음이 바로 렌더링 엔진의 기본적인 동작 과정이다:
안다, 이 그림만으로는 물음표를 남발할 것임을. 이에 풀어서 설명하면 다음과 같다:
- 전달받은 HTML 문서를 파싱하여 DOM 트리 구축
- 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱
- 1번에서 구축한 DOM 트리와 3번의 결과물을 합쳐 렌더 트리를 구축
- 렌터 트리의 각 노드에 데해 화면 상에서 어디에 어떻게 배치할 지를 결정
- UI 백엔드에서 렌더 트리를 그리고, 이를 우리가 볼수 있게 화면에 출력
마치며...
오늘 포스팅에서는 브라우저의 구조와 그 속에서 제일 핵심적인(?) 역할을 한다고 볼 수 있는 렌더링 엔진의 기본 작동 원리에 대해 알아보았다. 물론 아직 뼈대만을 맛봤을 뿐이고 파싱, DOM 트리, 렌더 트리 등 살펴봐야 할 것들은 많이 남았지만 이들을 깊게 파고들면 이 포스팅이 끝나질 않을 것 같기에 이들은 다음 포스팅에서 다룰 것이다. 그럼, 다음 포스팅에서~
세줄 요약:
- 브라우저는 사용자가 선택한 자원을 서버에 요청하고 이를 브라우저에 표시한다
- 브라우저 엔진은 UI, 브라우저 엔진, 렌더링 엔진, 통신, JS 해석기, UI 백엔드, 자료 저장소로 이루어져 있다
- 렌더링 엔진은 HTML과 CSS를 파싱해 얻은 결과물을 가지고 렌더 트리를 만들고, 이를 이용해 화면에 결과를 출력한다
