[CS] 브라우저의 동작 원리

들어가며

컴퓨터를 사용해 본 적이 있다면 필수적으로 따라오는 소프트웨어이지만 브라우저가 어떻게 동작하는 지는 크게 관심이 없다. 하지만 모름지기 웹 개발자라면 내가 개발한 웹이 돌아가는 소프트웨어가 동작하는 원리는 알고 있어야 하지 않을까.

 

 

내가 만든 웹페이지의 도메인을 브라우저 주소창에 입력했을 때 어떤 과정을 거쳐 화면에 보이는지 알아보자.

 

---

브라우저

우리가 사용하는 브라우저들

 

브라우저의 주요 기능

브라우저의 주요 기능은 우리가 원하는 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 여기서 자원이란 HTML문서, PDF 혹은 이미지 혹은 또 다른 형태를 말한다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다.

 

일반적으로 브라우저의 생김새는 다음과 같이 생겼다.

 

맥 os에서의 크롬

주소 표시 줄, 이전/다음 버튼, 북마크, 새로고침 버튼 등을 브라우저는 대부분 비슷한 요소를 가지고 있다. 브라우저의 사용자 인터페이스는 표준 명세가 없음에도 불구하고 대부분 서로 닮아있다. 물론 특정 브라우저는 자기만의 특별한 기능을 추가하는 경우도 있다.

 

 

브라우저의 기본 구조

브라우저의 주요 구성 요소는 다음과 같다.

 

• 사용자 인터페이스
  위에서 잠깐 살펴본 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
• 렌더링 엔진
  요청한 콘텐츠를 표시한다. 예를들어 HTML을 요청하면 HTML과 CSS를 해석해서 화면에 표시한다.
  
  
• 브라우저 엔진
  사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
  
  
• 통신
  HTTP 요청과 같은 네트워크 호출에 사용된다.
  
  
• UI 백엔드
  기본적인 사용자 인터페이스(UI)를 구동하게 한다.
  
  
• 자바스크립트 엔진
  HTML에 넣은 자바스크립트 코드를 해석하고 실행시킨다.
  
  
• 자료 저장소
  이름처럼 자료를 저장하는 기능을 한다. 쿠키 같은 데이터를 저장하는 영역이다.

 

 

브라우저의 동작 원리를 알기 위해 필요한 부분은 우리가 요청한 콘텐츠를 표시해주는 렌더링 엔진이다. 브라우저의 렌더링 과정을 살펴봄으로써 브라우저가 어떻게 동작하는 지 알 수 있다.

 

대부분의 글에서는 아주 깊이있게 내용을 다루지만 이 포스팅에서는 어떤 과정으로 진행되는지만 간단하게 알아보도록 하자

 

 

브라우저의 렌더링 과정

 

렌더링 엔진의 기본적인 동작 과정

 

 

렌더링 과정을 요약하자면 다음과 같다.

 

1. HTML과 CSS를 파싱(해석)하여 DOM(Document Object Model) 트리와 CSSOM(CSS Object Model) 트리를 생성한다.
2. DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다.
3. script 태그를 만나면 자바스크립트 엔진이 자바스크립트를 파싱하고 다시 DOM과 CSSOM을 결합하여 렌더 트리 생성을 계속한다.
4. 렌더 트리를 배치하고 화면에 그려준다.

 

 

말은 어렵게 적혀있지만 크게 흐름을 보면 이해가 어렵지 않다.

 

 

브라우저는 우리가 정한 주소에 맞는 HTML을 가져와서 해석을 쭉 한다. 그러다가 CSS 태그 (link나 style같은 애들)을 만나면 HTML 해석을 잠깐 멈추고 CSS를 가져와서 해석을 한다.

 

CSS 해석이 끝나면 HTML 해석을 다시 재개하는데, 이때 자바스크립트 태그인 script를 만나면 렌더링 엔진이 아니라 자바스크립트 엔진이 권한을 넘겨받아 자바스크립트를 해석하고 실행시킨다. CSS와 마찬가지로 자바스크립트의 해석이 끝나면 다시 HTML 해석을 재개한다.

 

모든 해석이 끝나면 해석된 모든 파일들을 결합해서 브라우저 화면에 뿌릴 수 있는 형태로 만들어주고, 브라우저에 맞게 레이아웃을 짠 다음 화면에 그려준다.

 

 

 

이렇게 보면 머리 속으로 대충 생각하고 있던 내용과 크게 다르지 않다. 물론 위에서 말한 것처럼 대부분의 글들은 훨씬 자세하게 이 내용들을 다루고 있지만 이 흐름만 알고 있다면 이제 알아야하는 것은 DOM이 무엇인지 같은 용어에 관련된 내용이다.

 

 

추가적인 내용들은 출처 및 참고자료를 확인하길 바란다!

 

---

마치며

이 내용들을 깊이 다룰까 고민했는데 흐름만 잡고 가기로 했다. 너무 깊이 들어가려다가 지쳐서 미룰 바에는 이렇게 훑고 나중에 자세히 알게 되었을 때 다시 정리하는게 동기&비동기 때처럼 계속 미루는 일을 반복하지 않는 방법이라는 판단이 들었기 때문에... 그리고 이렇게 간단히 정리한다고 누가 뭐라고 하는거 아니니까 내 페이스대로 달리기로 했다.

 

---

출처 및 참고

 

브라우저는 어떻게 동작하는가?

 

브라우저는 어떻게 동작하는가

 

브라우저 동작 원리

 

[IT 기술] 웹브라우저 동작원리