브라우저(Browser)에는 여러가지 종류가 있다.
최근 가장 많이 쓰이고 있는 크롬, 파이어폭스, 사파리, 크롬 엔진을 사용하고 있는 브레이브, 네이버웨일, 여러모로 모두의 관심을 받고 있는 MS사의 IE, 최근에 추가 된 엣지 외에도 굉장히 많은 수의 브라우저가 있다.
아마 인터넷을 사용한다고 하면 거의 필수적으로 한번쯤 거쳐 갈 이 브라우저.
하지만 우리는 정작 이 브라우저가 어떻게 움직이는지, 어떤 방법으로 인터넷을 이용하여 우리에게 웹을 표시해 주는지, 우리는 잘 모른다.
컴퓨터와 인터넷이 마법을 부리는걸까?
아쉽게도 그렇지 않다. 브라우저, 컴퓨터, 인터넷 모두 제대로 된 작동 원리가 있으며, 우리는 그 원리에 따라 처리 된 내용을 보고 있는 것이다.
그렇다면 그 중에서 이 브라우저는 어떤 방식으로 우리 컴퓨터에서 작동 할까?
우리는 개발자이며, 웹을 만드는 사람들이다. 때문에, 우리는 이러한 브라우저가 어떻게 작동하는지, 작동 원리를 알아야할 필요가 있을 것이다.
브라우저의 동작
브라우저란?
브라우저의 동작원리에 앞서, 이 브라우저라는 것이 뭔지 먼저 알아보도록 하자.
위키백과에서 발췌 하자면,
웹 브라우저(영어: web browser) 또는 웹 탐색기(web探索機, 문화어: 열람기)는 웹 서버에서 이동하며(navigate) 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어이다. 웹 브라우저는 대표적인 HTTP 사용자 에이전트의 하나이기도 하다. - 위키백과
과 같이 찾을 수 있는데, 요약하자면 쌍방향으로 통신(HTTP)하고 HTML문서 혹은 파일등을 우리가 볼 수 있게 출력하는 프로그램이라는 의미이다.
이때 쌍방향으로 통신하는 통신규약이 바로 HTTP이며, 바로 이 브라우저를 통해서 request & response를 주고 받는 것이다.
브라우저의 기능
상술했듯이 브라우저는 사용자가 선택한 자원을 우리가 볼 수 있게 만들어 주는 역할을 한다.
여기서 자원이란 HTML문서가 될 수도 있겠지만, PDF 혹은 Image도 자원이 될 수 있다.
또한 해당 자원의 주소는 URI(Uniform Resource Identifier)에 의해 결정 된다.
이 URI는 흔히 아는 URL과는 다르다!
자세히 다루게 되면 이야기가 길어져 생략하겠으나, 간단히 이야기 하고 넘어가자면 URI는 인터넷상에서 어떤 리소스(자원)를 식별하기 위한 식별자(Identifier)이고, URL은 해당 리소스가 어디에 존재하는지를 알려주기 위한 주소(Locator)이다.
일반적으로 HTML문서는 HTML, CSS명세에 따라 해석 되며, 해당 명세는 웹 표준화 기구(W3C)에서 정해진다.
이렇게 하나의 명세를 따르는 이유는 각 브라우저가 독립적인 방향성을 가지고 개발 되었을때, 각 브라우저간의 심각한 호환성 문제가 발생하기 때문이다.
이러한 문제때문에 하나의 명세에 따라 개발 된 결과, 브라우저는 서로 비슷비슷한 인터페이스를 가지게 되었는데,
- 주소 표시줄
- 이전버튼, 다음버튼
- 새로고침 버튼
- 북마크
- 홈버튼
이 바로 그것이다.
브라우저의 구성
하나하나 살펴보자면,
- 사용자 인터페이스 : 상술한 브라우저의 인터페이스, 사용자가 사용하는 서비스를 칭한다.
- 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진의 동작을 제어한다.
- 렌더링 엔진 : 사용자가 요청한 컨텐츠를 표시하는 엔진이다.
- 통신 : HTTP를 이용한 네트워크 통신을 칭한다.
- UI 백엔드 : 플랫폼에서 명시하지 않은 일반적인 인터페이스를 칭한다.
- 자바스크립트 해석기 : 자바스크립트를 해석하고 작동시킨다.
- 자료저장소 : 쿠키, 웹스토리지등 자료를 저장하기 위한 장소를 칭한다.
렌더링이란?
렌더링(rendering)은 웹개발을 진행하다보면 자주 보는 단어이다.
렌더링이란 요청 하고, 응답을 받은 데이터를 가지고 화면에 그려내는 것이라 이해 하면 될것이다.
이를 수행 하는 장치가 바로 렌더링 엔진이고, 기본적으로 HTML, XML등의 문서를 표시 할 수 있으나, 추가 플러그인등을 사용하여 PDF등 다른 유형의 파일도 표시가 가능하다.
이 렌더링 엔진의 종류는 대표적으로
- Webkit : 크롬, 사파리등에서 사용
- Gekko : 파이어폭스에서 사용
가 있다.
렌더링 과정
우선 DOM에 대해 설명 하자면,
DOM(Document Object Model)은 자바스크립트를 다루면서 많이 마주쳤던 그 DOM이 맞다.
즉 HTML을 자바스크립트로 다룰 수 있도록 변환시킨 문서 객체(Document Object)이며,
브라우저가 HTML문서를 인식하는 방법인것이다.
렌더링은 그림과 같이 4단계로 나뉘는데,
- 먼저 HTML을 파싱, 태그들을 모두 DOM노드로 변한 하고, css등 스타일 요소를 파싱한다.
- 파싱된 정보를 가지고 렌더 트리를 구축한다.
- 구축 된 렌더트리는 정해진 순서대로 노드가 화면에 배치된다.
- 배치 된 노드들을 UI백엔드에서 그려낸다.
와 같은 단계로 컨텐츠를 그려내게 된다.
이때, 모든 요소에 대해서의 단계 진행을 기다리지 않고, 먼저 단계를 완료하고 생성 된 순서대로 화면을 그리게 된다.
때문에 우리가 봤을때는 화면에 요소가 하나씩 나타나는것 처럼 보이는 것이다.
웹킷의 동작구조
여기서 어태치먼트란 파싱 된 DOM트리와 스타일 정보를 연결하여 합치는 과정이다.
어태치먼트를 거쳐서 합쳐진 DOM트리와 스타일 정보는 렌더트리가 된다.
파싱과 DOM트리 구축
파싱(parsing)이란 브라우저가 코드를 이해 할 수 있는 구조로 변환하는 과정을 말한다.
쉽게 이야기하자면 번역 과정인데, 전송 된 HTML코드의 맞춤법을 검사하고, 맞춤법에 맞는 태그들만 통과시켜서 만들어진 노드들로 1차적으로 파서트리라는것을 구성하게 된다.
이후 다시 기계어로 번역하는 과정이 추가 되고, 그것이 끝나게 되면 파싱은 종료되게 된다.
하지만 이렇게 맞춤법(규칙)을 검사하는것은 굉장히 복잡한 작업이고, 최적화 시키기 힘든 작업이기에 일반적으로는 flex, bison이라 하는 파서 생성기를 사용하게 된다.
여기서 생성된 파서가 우리가 만든 문서를 돌면서 실수로 빠트린 태그가 있더라도 파서가 추가 시켜주는것이다.
정리
우리가 웹페이지에서 정보를 확인하기 위해 서버에 HTTP를 이용해 요청을 보내면, 서버는 데이터를 담아 응답을 한다.
이때 우리가 받은 정보는 HTML, CSS, JS등으로 우리에게 전송 되어 오는데, 우리가 사용하는 브라우저는 전송 받은 자원을 컴퓨터가 이해할 수 있도록 파싱하고, 이를 이용해 웹페이지를 그릴 수 있도록 트리를 구성하며, JS를 컴파일하여 각종 인터렉션이 가능하게 만든다.
