[WEB BASIC] 브라우저

Browser

HTML, CSS 본격적으로 공부하기 앞서 브라우저가 어떻게 구성되어있고 어떻게 "그리는지" 파악하기

1.정의

 브라우저 컴포넌트 구성 요소[1]

 1. 사용자 인터페이스 :  주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등, 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분

 2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

 3. 렌더링 엔진 : 요청한 콘텐츠를 표시. 예를들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함

 4. 통신 : HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 플랫폼 하부에서 실행됨

 5. UI 백엔드 : 콤보 박스와 창 같은 기본적인 장치를 그림, 플랫폼에서 명시하지 않는 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용

 6. 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행

 7. 자료 저장소 : 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터베이스'가 정의 되어있다.

2.정리

 저희가 중점적으로 알아야 할 것은 "렌더링 엔진"이에요, 렌더링 엔진이 저희가 작성할 HTML5, CSS3 에 크게 연관되어있기 때문이죠~

먼저 컴포넌트 구성요소를 정리해볼게요

1. 사용자 인터페이스

 브라우저가 사용자에게 제공하는 "편의기능"들을 말해요 북마크 바 라던가 새로고침 버튼이라던가 브라우저 자체 기능들을 의미 해요

2.브라우저 엔진 

 사용자 인터페이스는 그저 "텍스트"거나 "그림" 또는 "버튼"이죠 클릭 같은 액션을 취할때 어떤 결과(새로고침)를 나타내기 위해서는 기능(새로고침)이 필요해요 이러한 기능들을 실제로 제어해주는 것이 브라우저 엔진이에요

3.렌더링 엔진 

 도화지에 그림을 그리는 방법을 정의하고 실제로 그리는 역할을 하는 곳이에요 그림에도 그리는 방법이 있듯이 렌더링 엔진도 HTML, CSS, JS양식에 따라 배치, 색상 등이 변화되요

4.통신

 브라우저는 "인터넷"을 사용해요 "인터넷"을 사용하기 위해서는 통신이 필수적이죠? 모든건 이 통신을 통해 이루어진다고 볼 수 있어요

5.UI백엔드

 사용자 인터페이스, 렌더링 엔진에서 사용하는 인터페이스는 OS에따라 달라져요 왜냐하면 OS에서 제공해주는 UI를 사용하기 때문이죠!

6.자바스크립트해석기

 웹서비스를 더 좋게 제공하기위해 자바스크립트 언어를 도입했는데 이 자바스크립트 언어를 해석/실행하기 위한 도구라고 보시면 돼요!

7.자료 저장소

 웹 서비스를 사용할때 브라우저가 임시/영구 저장할 장소가 필요하죠! 이러한 장소를 말해요 예를들어 장바구니, 아이디 정보 저장 자동로그인 등등!

 

 이러한 구성요소중에서 저희가 HTML, CSS를 배우기 전에 짚고넘어가야하는 부분은 바로 렌더링 엔진이에요 바로 브라우저 도화지에 그림을 그려주는 녀석! 어떻게 그려주는 걸까? 

 우선 브라우저가 여러개 존재한다는건 그리는 방법이 여러개 존재한다는 것과 일맥상통해요 대표적으로 크롬브라우저는 Webkit 이라는 렌더링 엔진을 사용했고 파이어폭스는 Gecko라는 렌더링 엔진을 사용해서 서로 그리는 방법이 다르지만 흐름은 같아요! 도화지에 그림을 그린다.  흐름을 한번 보도록 해요

1. 통신을 통해 받은 HTML, CSS 파일을 둘로 구분하여 동시에 파싱을 시작하고 CSS스타일 규칙이라는 트리와 DOM트리라는 HTML을 구조화 한 트리를 생성해요

2. 렌더트리를 생성하기 위해 CSS스타일 규칙과 DOM트리를 합쳐요

3. 렌더트리가 생성되었다면 렌더트리를 통해 배치(reflow)가 시작되고 마지막으로 형상을 그리기(painting) 시작해요

 기초에서는 브라우저는 7가지 구성요소로 이루어져있고 HTML과 CSS가 파싱 작업을 거쳐서 트리 형태로 구성되고 그 트리들을 합친 후 렌더트리라는 최종 결과물을 만들어내며 그걸 통해 배치/그리기를 하는구나 라는 흐름을 이해하시면될 것 같아요~

3.후기

 강의를 듣고 정리한 것과 이해되지 않았던 점을 집중적으로 공부 및 정리했어요. 틀린게 있다면 지적해주시면 감사하겠습니다.

4.참고

[1] 네이버 D2 : 브라우저는 어떻게 동작하는가?