개발 공부/WEB의 심연

브라우저는 어떻게 작동하는가? (브라우저의 프로세스)

susong 2022. 12. 5. 18:06
728x90

모든 프로그램은 프로세스를 가지고 있다

프로세스는 여러가지를 담고있는 식판같은 친구다(메모리 코드 등)

모든 프로그램은 프로세스를 가지고 있다.

Linux를 깔면 당연하게 나오는 CLI의 Shell 조차도 프로세스다.

 

그렇다면, 웹 브라우저도 프로그램이니 프로세스를 가지고 있을텐데 이 녀석의 아키텍처는 어떻게 될까?

 

하나의 프로그램이니까 하나의 프로세스만 가지고 있을까? 혹은 두개?

사실 브라우저가 몇 개의 프로세스를 사용하는지는 알 수가 없다.

 

왜냐하면, 이것은 브라우저마다 작성하기 나름이기 때문이다.

하나의 표준으로 만들어진 아키텍처는 없고, 각각의 브러우저들은 각기 다른 아키텍처를 가지고 있다.

 

어떤 웹 브라우저는 스레드를 많이 사용하는 프로세스 조금으로 만들어져있기도 하고, 어떤 녀석은 스레드를 조금 만들고 프로세스를 많이 만들어 IPC로 통신하며 작동하기도 한다. 브라우저마다 구현하는 방법의 차이이기 때문에 어떤 녀석이 이렇다!라고 할 수는 없다.

 

하지만, 그렇게만 넘어가면 아쉽기 때문에, 이 글에서는 크롬을 기준으로 설명하려한다.

크롬의 아키텍처를 살펴보기 전에 브라우저의 구성요소부터 살펴보자


브라우저의 구성요소 

출처 : d2.naver.com/helloworld/59361

브라우저는 총 7가지로 구성되어있다.

 

오른쪽 사진에 보이는 그 7가지가 모두 모여 상호작용하면서 우리가 아는 이 브라우저의 역할을 해내는데, 그 역할을 하나하나 나열하면 아래와 같다.

 

 

1. 사용자 인터페이스 : 이 블로그로 들어올 수 있게 하는 주소 표시줄 그리고 이전 사이트로 돌아갈 수 있는 이전 / 다음 메뉴, 북마크 등등 요청한 사이트를 보여주는 곳을 제외한 기능할 하는 구성요소이다.

 

2. 브라우저 엔진 : 브라우저 엔진은 사용자 인터페이스와 렌더링 엔징 사이에서 중재자 역할을 한다. 사용자 인터페이스에서 들어온 명령(예 : 새로고침)을 이해하고 렌더링 엔진에게 명령하는 존재이다.

 

3. 렌더링 엔진 : 렌더링 엔진은 HTML CSS JS를 읽고 그 결과물을 토대로 사용자가 보는 페이지를 그려내는 역할을 한다. 크롬의 경우 원래는 Safari의 Webkit를 이용했었고 현재는 Webkit을 기반으로 제작한 Blink를 이용한다. 구체적으로 렌더링 엔진의 작동방법은 이후에 따로 설명할 예정이다.

 

4. 통신 : 통신 레이어는 HTTP, HTTPS 프로토콜을 통해 리소스를 가지고 올 때 사용된다.

 

5. 자바스크립트 해석기 : 페이지에 작성된 JS를 해석하고 실행하는 역할을 한다. 크롬의 경우 V8이 탑재되어있다.

 

6. UI 백엔드 : 브라우저가 작동하고 있는 운영체제의 인터페이스를 따르는 UI를 처리하는 역할을 한다.

 

7. 자료 저장소 : 쿠키, 세션과 같이 로컬에 저장이 필요한 자원들을 하드 디스크에 저장하는 역할을 한다.


브라우저의 프로세스들

출처 : developer.chrome.com/blog/inside-browser-part1/

위의 구조를 바탕으로 브라우저는 크게 4개의 프로세스로 구성되게 된다.

 

1. 브라우저 프로세스 : 사용자 인터페이스, 통신, 자료 저장소 등이 하는 역할을 진행한다. 사용자가 읽고싶어서 들어간 페이지를 제외한 다른 부분에 대한 역할을 전반적으로 진행하는데, 그 내용으로는 주소 표시줄, 앞 그리고 뒤로 가기 등등 우리가 사용하는 브라우저 위쪽에서 제공하는 기능들을 포함한다.

 

2. 렌더러 프로세스 : 브라우저의 탭 내부에 표시되는 부분에 대해서 제어한다. 크롬은 각각의 탭마다 프로세스를 둠으로써 하나의 탭이 고장났을 때 다른 탭들이 기능을 멈추는 것을 방지했다.

 

3. 플로그인 프로세스 : 웹 사이트에서 사용하는 플러그인들을 제어한다.(캡쳐 플러그인,OneTab 등등)

 

4. GPU프로세스 : GPU 작업을 다른 프로세스와 격리해서 처리한다. 여러 탭에 있는 렌더러들이 GPU를 통해 렌더링을 부탁하기 때문에 별도 프로세스로 분리되어 있다. 우리가 '하드웨어 가속'이라고 부르는 것은 이렇게 CPU가 아닌 자원 예컨데(GPU)를 이용하여 프로그램 성능을 높이는 방법이고, GPU 프로세스는 이런 것들을 위해 존재한다.


크롬은 하나지만, 프로세스는 여러개다

프로그래밍 과제를 하다보면 Fork하며 여러 프로세스로 만드는 경우도 있지만, 대부분은 단일 프로세스로 처리되는 일들이 많다.(특히 C언어와 같은 절차형 프로그램들은 더더욱!) 그렇다보니 크롬도 당연히 하나의 프로세스로 구성되어 있을 것이라고 생각했지만, 오히려 수많은 프로세스로 구성되어있다는 것에 충격을 받았다. 

 

크롬은 탭마다 프로세스를 만든다는 것을 보며 웹브라우저가 여러 프로세스라고 해봤자 한 두개만 만들고 안에서 다중 쓰레드로 돌릴 것이라고 생각했던 내 예상이 크게 어긋났음을 알았다. 우리에게 대중적으로 서비스되는 프로그램들이 얼마나 깊은 고민을 한 결과물임을 알 수 있는 대목이다. 

 

다음글(브라우저에 엔터를 누르면 일어나는 일)에서 계속

728x90