[브라우저 공부] 브라우저에서의 HTML+CSS 작동 방식 공부하기 (1)

※ 필자는 초초초초보입니다. 틀린 내용이나 피드백은 언제든지 환영합니다.

 

 

한번도 브라우저에서 HTML, CSS, JavaScript가 동작하는 방법에 대해서 공부해본 적이 없다.

 

웹 프론트엔드를 공부하고 있으면서 웹 브라우저에서 언어가 어떻게 동작하는지도 모른다니..

음계도 모르고 건반으로 연주하는 격이다. (물론 그게 가능한 천재도 있겠지만, 일단 그 천재가 난 아니다)

 

그래서

HTML과 CSS에 대해서 공부하다보면 한번쯤 궁금해지는 그 내용에 대해서 공부해보려고 한다.

과연 브라우저에서 HTML과 CSS는 어떻게 작동되는 것일까.

 

 

✅ '웹 브라우저' 구성 요소

---

HTML, CSS, JavaScript를 작동시켜주는 웹 브라우저에 대해 먼저 이해 해야할 것 같다.

 

브라우저(Browser)의 종류는 참 다양하다. 파이어폭스, 크롬, IE(젠장), 엣지, 사파리, 오페라 등등.

보기에는 작고 아담한(?) 아이콘일 뿐이지만 브라우저는 큰 기능을 하고 있다.

네이버 D2에 따르면 브라우저의 주요 기능은 '사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것'이라고 한다.

또한 브라우저의 기본 구조는 다음과 같다고 설명하고 있다.

1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어(역할)
3. 렌더링 엔진 - 요청한 콘텐츠를 표시함 (e.g. HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함)
4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨
5. UI 백엔드 - 콤보 박스, 창과 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용
6. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행함
7. 자료 저장소 - 자료를 저장하는 계층임. 쿠키를 저장하듯이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있음. HTML5 명세에는 브라우저가 지원하는 '웹 데이터베이스'가 정의되어 있음 

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

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

 

일단 용어를 이해도 못했다. 그래서 하나하나 차근히 찾아보려고 한다.

 

❖ 사용자 인터페이스(UI)

인터페이스(interface)의 뜻은 "중앙 처리 장치와 그 주변 장치를 서로 잇는 부분" 혹은 "사람과 컴퓨터를 연결하는 장치"이다.

즉, 인터페이스(interface)라는 단어는 [다른 두 개의 어떤 것을 연결]한다는 느낌이 강하다.

그냥 연결하는 것도 아니고 서로 [소통]을 하기 위해서 연결하는 느낌이다.

 

이 느낌을 생각하면 사용자 인터페이스(User Interface; UI)도 그렇게 어려운 개념은 아닌 것 같다.

사용자 인터페이스(UI)란 "사람과 시스템, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체"를 의미한다. (출처: 위키백과)

화면에 보이는 모든 것들(클릭할 수 있는 것, 입력할 수 있는 것, 레이아웃 등등)이 사용자와 시스템(컴퓨터 프로그램) 사이에서 의사소통을 하기 위한 매개체(=UI)이다.

 

❖ 브라우저 엔진

위에 나와있는 것과 같이 사용자 인터페이스(UI)와 렌더링 엔진 사이의 동작을 제어한다.

 

❖ 렌더링 엔진

요청한 콘텐츠를 표시하는 역할을 한다.

렌더(render)라는 것은 기본적으로 "무엇인가를 지금과는 다른 어떤 상태로 만든다"는 뜻이라고 한다. (=어떤 상태가 되게 만들다)

쉽게 정리해보면 웹 브라우저(browser)에서 렌더링(rendering)이란
"HTML, CSS, JS 등을 읽어서 적절한 규칙에 따라 분석/가공하고(파싱) 사용자가 볼 수 있는 (웹사이트 화면 등) 상태로 만드는 것"이라고 할 수 있을 것 같다. 그 렌더링을 해주는 소프트웨어(엔진)가 렌더링 엔진이다.

 

‣ 렌더링 엔진은 HTML 및 XML 문서, 이미지를 표시할 수 있고 플러그인/브라우저 확장 기능을 이용하면 PDF와 같은 유형도 표시할 수 있다고 한다.

‣ 파이어폭스는 게코(Gecko) 엔진을 사용, 사파리와 크롬은 웹킷(Webkit) 엔진을 사용한다고 한다.

 

❓ 브라우저 엔진 vs 렌더링 엔진

별첨1 참고

 

 

❖통신

HTTP 요청을 받아서 서버에게 요청(request)하고, 응답(response)을 받아 렌더링 엔진에게 전달해준다.

 

❖ UI 백엔드

렌더 트리를 브라우저에 그리는 역할을 한다. 뒤에서 자세히 보도록 하자.

 

❖자바스크립트 해석기

대표적으로크롬의 V8 등이 있다. 자바스크립트 코드를 해석하고 실행하는 역할을 한다.

 

❖ 자료저장소

쿠키 등이 저장되어 있다.

아마 캐시나 키 값도 다 이 저장소에 있지 않을까싶다.

 

우선 용어부터 정리를 했다. 자세한 동작 과정은 다음 글에서 정리해야겠다.

 

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

출처2 : https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/How_CSS_works

 

---

⚠️ 별첨1. 브라우저 엔진 vs 렌더링 엔진

위에서 브라우저 엔진과 렌더링 엔진의 용어를 대충 설명하고 지나간데는 사실 이유가 있다.

공부하면서 두 개념을 이해하기 위해 여러 글을 찾아봤는데... 브라우저 엔진이나 렌더링 엔진이나 그게 그거 같아보였다. 전혀 차이점을 모르겠다.

특히나 많이 섞여서 사용되는 용어가 아래 세 가지였다.

"레이아웃 엔진, 렌더링 엔진, 브라우저 엔진"

 

레이아웃 엔진과 렌더링 엔진은 어느정도 이해할 수 있었다.

레이아웃과 렌더링을 담당하는 엔진을 별도로 관리할 수도 있는데, 그게 바로 레이아웃 엔진과 렌더링 엔진이라고 한다.

 

하지만 브라우저 엔진과 렌더링 엔진은 잘 이해가 되지 않았다.

그래서 스택오버플로우를 검색해봤고, 유사한 질문을 찾아냈다.

https://stackoverflow.com/questions/46169376/whats-the-difference-between-a-browser-engine-and-rendering-engine

What's the difference between a browser engine and rendering engine?

 

이 질문의 답변을 읽어보면 "질문자가 말하는 브라우저 엔진은 브라우저 프로세스를 의미"하는 것 같다고 이야기 하고 있다.

왜냐하면, 브라우저 프로세스의 기능이 주로 렌더(render) 프로세스들을 관리하고 UI를 보여주는 것이기 때문이라고..

또한 렌더링 엔진은 렌더링 프로세스에서 중요한 부분이라고도 말해주고 있다.

(스택오버플로우의 답변글들을 읽어보고 어림짐작 해보자면,

본래 렌더링 엔진이라는 개념만 있었는데 구글에서 chromium 프로젝트를 하면서 브라우저 엔진이라는 개념을 만든게 아닐까 싶다)

 

결국 이 내용을 이해하려면 브라우저 프로세스와 렌더링 프로세스에 대해서 이해해야 할 것이라고 이야기 하고있다.

 

번역엔 자신이 없어서 정확하게 이해한 것인지는 잘 모르겠지만..

얕은 번역 실력으로 이해해보면 아마도 이런 내용인 듯 하다. (자세한 내용은 원문을 꼭 읽어보자)

 

과거, 악성 웹 콘텐츠 때문에 브라우저가 호스트 시스템(사용자 PC를 말하는 듯함)을 위험하게 하거나(손상을 입히거나) 충돌을 일으킨 적이 있었던 것 같다. 그래서 이를 방지 하기 위해서 방법을 고안해냈고, 그 방법으로 제시된 게

"별도의(분리된) 프로세스가 각각의 요청(request)에 대해서 웹 콘텐츠를 핸들링하도록 한 것" 같다.

 

그러니까 쉽게 말해서, 가장 큰 권한을 갖고 있는 관리자는 1명(=브라우저 프로세스 하나)이 있고

각 웹 페이지에 대한 요청(HTML, CSS 구문 파싱 등)을 처리하는 사람을 여러명(=렌더링 프로세스 여러 개) 두었다는 이야기 같다.

 

렌더링 프로세스는 User privilege가 없으므로(=액세스가 제한됨) HTML, CSS의 구문 분석 등의 일만 할 수 있고

모든 렌더링 프로세스를 관리하고, 파일시스템/네트워크 등에 액세스 하거나,

User privile가 필요한 일(네트워크 통신, IPC 통신 등)은 브라우저 프로세스가 처리하는 것 같다.

 

정리하자면

1) 사용자가 클릭 등을 통해 웹사이트 요청을 보내면

2) 렌더링 프로세스는 그 요청을 브라우저 프로세스에게 전달한다

3) 요청을 받은 브라우저 프로세스는 네트워크 호출(network call)을 통해 웹 콘텐츠를 (응답) 받는다

4) 웹 콘텐츠를 받은 브라우저 프로세스는 해당 콘텐츠를 렌더링 프로세스에게 전송한다

5) 렌더링 프로세스는 HTML, CSS 파일을 파싱하고 DOM을 준비하고, JS 런타임(크롬의 V8 엔진 등)을 유지하고, (UI를 보여주기 위해) 콘텐츠를 비트맵 형식으로 브라우저 프로세스에게 전달한다

6) 브라우저 프로세스가 사용자 인터페이스로 전송한다

위와 같은 순서로 렌더링 프로세스와 브라우저 프로세스가 요청과 응답을 처리하는 것으로 보인다.

 

 

다만 이건 과거의 동작 방식이고,

현재는 브라우저 엔진 대신에 네트워크 호출을 '통신'이 담당하고,

JS 런타임 유지는 '자바스크립트 해석기'가 대신 담당하고 있지 않을까. 물론 100% 추측이다.