부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 4 강의 정리

[1] 강의

웹 프로그래밍(풀스택)

1. 웹 프로그래밍 기초

4) browser의 동작-1

 

[2] 강의 정리

  이번 시간에는 브라우저의 동작에 대해서 우리가 살펴보도록 하겠습니다. 여러분들이 인터넷을 자주 하다 보면 모바일 판에서도 마찬가지고 PC에서도 브라우저, 인터넷 브라우저를 통해서 많이 접속을 한다. 인터넷 익스플로러를 많이 우리가 써왔었고 그 외에도 크롬 브라우저, 파이어폭스 등 브라우저 종류는 몇가지가 된다. 아이폰을 쓸 경우에는 사파리를 볼 수 가 있고, PC도 역시 맥 OS를 쓸 경우에는 사파리 브라우저를 볼 수가 있다. 지금 맥 컴퓨터에서 크롬 브라우저를 열겠다. 크롬 브라우저를 열었다. 브라우저에서 어떻게 문자가 그려지는지 한 번 알아볼 것이다.

  How Browsers Work라는 블로그를 들어왔다. 여러분들도 구글에서 검색을 하시면 이 사이트로 쉽게 들어오실 수 있다. 참조된 링크를 보면서 사이트를 금방 확인할 수 있다. 브라우저 웍스, 우리가 우선 페이지에 오른쪽 클릭을 해서 소스 보기 이런 내용이 나온다. 브라우저에 접속을 하면 소스 보기가 다 있다. 아직 여러분들이 HTML을 모른다면 여기 나와있는 영어로 된 그 문장들 또 어떤 기호들이 낯설 수 있다. 여기 보면 굉장히 많은 내용들이 나와있다. 그냥 문장은 아니고 어떤 패턴이 있다. 이런 것들이 쭉 나온다. 알 수 없는 내용들이 굉장히 복잡하게 많이 나와있는데 그런 것들이 결국에는 브라우저에서 이렇게 해석돼서 화면에 보이게 된다. 브라우저의 동작 방식에 대해서는 사실 개발자들도 잘 알 수필요가 없다고 생각해왔다. 왜냐면 브라우저들이 알아서 해결해주었기 때문에. 하지만 이제 브라우저 동작에 대해서 조금씩 궁금증을 갖게 된 이유는 브라우저의 동작이 대게 숨겨져있고 내가 이렇게 개발을 해서 이런 코드를 만들었는데 브라우저가 좀 다르게 해석을 해서 보여주는 것 같다.

  조금 더 우리 코드가, 소스 코드가 브라우저에서 빨리 실행되게 하려면 어떻게 해야 될까? 그런 것들을 관심을 갖게 되었다. 그러다보니 브라우저의 동작에 대해서 조금 더 알고 싶게 됬고, 6,7년 전부터 브라우저가 어떻게 동작하는지에 대한 글들이 조금씩 소개가 되기 시작했다. 몇 가지 좋은 글들 중에 예제가 있기 때문에 그림도 있고 그래서 제가 그 부분을 직접 인용을 하기로 했다. 이 사이트에 있는 내용을 한번 알아보도록 하겠다.. 테이블에 콘텐츠 항목에 이제 왼쪽에 목차이다. 우리가 처음에 볼거는 브라우저가 어떻게 구성됐느냐라는 것부터 볼 거다. 주로 그림 위주로 한번 살펴보겠다. Browser components라고 나와있다. 브라우저 컴포넌트, 브라우저가 브라우저 컴포넌트로 구성되어 있다고 볼 수 있다. UI, 이런 보이는 화면에 이런 것들이 있다. 이런 것들이 다 UI이다. 좌측, 왼쪽으로 가는 내비게이션 X 버튼 이런 것들이 OS 레벨에서 설치되어 있는 소프트이다. 이런 것들도 다 하나의 UI 덩어리이다. 그 다음에 브라우저 엔진이 있다. 브라우저 엔진 아까 봤던 소스 코드를 실행해서 화면에 보여줄 수 있는 엔진. 렌더링 엔진, 그 화면에 직접 어떤 위치를 잡고 색칠을 해주는 그래서 픽셀 단위로 어떤 것들이 그려져서 우리가 이렇게 눈으로 다양한 형태를 볼 수 있다.

  여기서 말하는 브라우저 엔진은 그렇게 얘기를 해야 한다. 이 브라우저 소프트웨어를 동작 시켜주는 핵심 엔진이라고 생각하면 된다. 브라우저도 일부의 데이터를 캐시를 하고 저장을 한다. 그런 것들은 이제 데이터 관리하는 영역이 있다. 그 다음에 서버와 통신을 하고 브라우저가 바로 HTTP를 통해서 웹서버, 특정 인터넷 주소를 해석을 한 다음에 그 주소로 통신이 필요하다. 그래서 네트워킹 모듈이 있고 또 하나는 자바스크립트 인터프리터라고 해서 JavaScript 코드를 해석을 할 수 있는 것 그 다음에 UI 영역을 처리할 수 있는 백엔드 영역이 있다. 이렇게 브라우저의 구성 요소가 몇 가지로 나누어져 있다고 생각을 하면 된다. 이 부분을 한번 읽어보면 좋다.

  쭉쭉 내려서 한번 렌더링 엔진을 알아보도록 하겠다. 렌더링 엔진은 이런 것들이라고 할 수 있다. 예를 들어서 파이어폭스의 Gecko, 사파리의 WebKIt, 크롬과 오페라는 Blink 이런 것들이 있다. 지금 이제 Chromium 이런 것들로 좀 바뀌었다. 크롬 같은 경우에는 렌더링 엔진을 어쨋든 브라우저 별로 가지고 있는 내용이라고 할 수 있다. 모두 다 다르다. 브라우저 엔진의 메인 플로(main flow)를 한번 보자. HTML은 우리가 봤던 HTML을 먼저 파싱을 하게 되어 있다. 파싱을 한다는 건 뭐나? 문자 단위로 다 하나하나 해석을 해서 이 내용이 가진 의미들을 파악하는 것이다. 그것들을 어떤 데이터 객체로 구조화시키는 것이다. Parsing HTML to construct the DOM tree 라고 한다. DOM 트리 DOM은 뭐냐면 Document Object Model이라고 한다. HTML은 대게 구조화된 정보이기 때문에 그런 것들을 해석을 해서 일종의 트리 구조의 형태로 데이터들을 다시 가지고 있게 된다. HTML 태그들을 Render tree construction, 바로 이게 렌더 트리를 만든다. Layout of the render tree, 렌더 트리를 기준으로 CSS 합친 것이다. 스타일 정보와 구조를 합쳐서 매칭을 하게 된다. 그래서 어떻게 화면에 배치할지 즉, 서 번째 div 태그는 왼쪽 위. 다섯 번째 li는 오른쪽에 몇 픽셀 떨어진 어느 위치에 그린다. 그런 것들을 다 결정하게 된다. 그런 것들이 결정이 되면 화면에 직접 그림을 그리게 된다. 그래서 아주 추상화된 정보인데 뒤에 또 자세한 내용들이 나온다. 이 그림을 한 번 살펴보도록 하겠다. 위의 그림과 이 그림은 이제 2011년에 아주 오래 전이긴 하지만 지금의 모든 브라우저들도 이와 유사한 형태로 레이아웃을 하고 있다. 위 그림과 아래 그림 중에 위 그림을 선택해서 WebKit 메인 플로라고 한다. HTML 코드를 받고 HTML 파싱을 한다. 그 다음에 DOM 트리라는 어떤 계층을 만든다.

  어떤 크기로 어떤 색깔이 표현되야 되기 때문에 CSS 코드가 필요하다. CSS 파일을 파싱을 하게 돼있다. CSS 코드는 어떻게 생겼는지 한번 잠깐 살펴보도록 하자. 우리가 이렇게 소스 보기를 한 상태로 link에 스타일 코드가 있다. 이런 코드가 굉장히 보기 어렵다 지금은 공백과 줄바꿈을 모두 없애서 한 줄로 표현한다. 예를 들면 다음과 같다. header라는 HTML 태그는 display:none 화면에 보이지 말라는 것이다. 반면에 padder라는 클래스를 가진 어떤 엘리먼트(element)는 높이가 140 픽셀, 140 화소라고 할 수 있다. 픽셀이 1화소를 얘기하는 것이기 때문에 140만큼의 크기라는 것이다. 그 외에 어떤 것들은 또 백그라운드 색깔이 16진수로 표현됐는데, 이렇게 표현된다고 할 수 있다. 여기서 크기, 색깔 들을 CSS가 표현해주고 있다. 여러분들이 지금은 CSS에 대한 정보를 이해를 잘 못해도 상관은 없다. 그럼 어떤 위치나 색깔을 표시하고 있는 CSS 정보를 받아서 두 가지를 이렇게 합치게 되어 있다.

  Attachment, 두 가지를 합쳐서 어떤 엘리먼트에 어떤 스타일을 부여하는 작업을 하고 렌더 트리를 그린다. 그래서 각각의 DOM 트리별로 어떤 스타일 정보를 가지고 있는지 렌더 트리를 다시 한번 객체화시켜서 실제로 소프트웨어의 어떤 객체 모델인 key와 value로 된 구주로 만드는 것이 일반적인 방법이다. 그 다음에 레이아웃을 결정한다. 그래서 각각이 어디에 배치될지 크기는 얼마만큼인지가 모두 결정된다. 그 다음엔은 그거에 따라서 화면에 실제로 페인팅 작업을 그려주는 작업을 실시하게 된다. 그래서 화면에 표현이 이렇게 된다. 일단은 렌더 트리까지 표현을 한 다음에 페인팅, 디스플레이, 이 과정 DOM을 파싱하고 렌더 트리를 그리고 화면에 표시한다는 게 일반적인 메인 플로이다. 여기까지 알아보고 다음 영상을 또 이어서 다음 편에 보여드리도록 하겠다.