웹 브라우저 구조와 동작 개념

웹 브라우저 동작 개념 개요

우리가 사용하는 브라우저는 사용자에게 화면을 보여주기 다음과 같은 구조를 갖고 있다.

사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 통신, 자바스크립트 인터프리터, ui 백엔드, 자료 저장소

브라우저가 각 계층에서 사용자의 화면을 그려주기 위해 어떠한 일을 하는지 간략하게 알아볼 것이다.

 

---

웹 브라우저 구조 

시작에 앞서 이번 편에서는 간략하게 각 계층에서 다루는 내용을 볼 것이며 보다 상세한 내용은 따로 포스팅 예정이다.

 

우리가 사용하는 브라우저는 다음과 같은 구조를 갖고 있다.

위의 구조는 모든 브라우저가 동일하지 않지만 비슷한 구조로 되어 있으며 크롬의 경우 조금 다른 구조를 갖는다.

브라우저의 동작 개념은 앞으로 우리가 웹 개발을 함에 있어 보다 고려해야 하는 사항을 만들어 주게 될 것이다.

 

 사용자 인터페이스

사용자가 접근할 수 있는 영역을 의미하며, 주소 표시줄 및 새로고침, 다음, 이전, 즐겨찾기 등 웹페이지를 제외한 사용자와 상호작용을 지원하는 부분을 의미한다.

브라우저 사용자 인터페이스

 

브라우저 엔진

유저 인터페이스와 렌더링 엔진을 연결하는 역할을 담당하며 자료 저장 공간(Data Storage)을 참조하여 사용자 브라우저에 데이터를 읽고 쓰기를 하며 작업을 하게 된다.
자료저장소는 Html5 부터 추가된 기능이다.

대표적인 브라우저 엔진은 다음과 같다.

브라우저별 엔진

Firefox : 모질라 재단에서 만든 파이어폭스는 모질라 재단에서 만든 레이아웃 엔진인 게코(Gecko)를 사용한다.

Chrome : 구글에서 만든 크롬은 웹키트에서 파생된 레이아웃 엔진인 블링크(Blink)를 사용한다.

Safari : 애플에서 만든 사파리는 KHTML에서 파생된 레이아웃 엔진으로 Webkit을 사용한다.

 

렌더링 엔진

서버에서 전달받은 html, css를 해석하여 사용자에게 화면을 표시하는 기능을 담당한다.

개발자는 렌더링 엔진의 동작 개념을 이해하면 사용자에게 보다 높은 서비스를 제공할 수 있다.

해당 부분은 서버에서 html, css, javascript 문서를 통신을 통해 전달받은 이후 html 파서와 css 파서에 의해 DOM, CSSOM 트리로 변환되어 렌더 트리를 결합하는 과정을 거치게 된다.

이때 자바스크립트는 렌더 트리를 형성하는 과정에서 스크립트를 만나면 제어권을 스크립트 엔진에 전달하여 실행 후 다시 렌더링을 하게 된다. 
위의 스크립트 흐름은 스크립트 태그의 속성 또는 자바스크립트의 속성으로 제어가 가능하다.

Networking

서버와 통신이 가능하도록 하는 통신은 인터넷에서 리소스를 가져오는 역할을 담당한다.

사용자 인터페이스의 주소창에 검색어를 입력하게 되면 데이터를 페칭하게 되며 우리가 주소창에 타이핑하면, 브라우저는 북마크나 검색 기록에서 의미있는 제안들을 보여줍니다.

 

자바스크립트 인터프리터

자바스크립트 코드를 실행하는 인터프리터로 크롬 브라우저의 경우 V8 엔진을 이용한다.

V8 엔진을 데스크톱에서 동작이 가능하도록 만든 것이 Node.js이다.

 

UI 백엔드

select / input 등 기본적인 위젯을 그리게 되며 OS 사용자 인터페이스 체계를 사용한다.

 

데이터 저장소

로컬 스토리지와 세션 스토리지로 구분되어 사용자의 브라우저에 데이터를 저장한다.
LocalStorage : 브라우저나 OS가 재시작을 하여도 데이터를 유지한다.

SessionStorage :  localStrorage에 비해 자주 사용되지 않는다. 기능은 Local과 비슷하게 제공하지만 제한되는 부분이 많다. 데이터가 같은 탭에서만 유지가 되며 다른 탭의 경우 데이터를 공유하지 못한다.