[FE] 📚 브라우저란?

728x90

🤗 오늘의 위클리 페이퍼는

브라우저가 어떻게 동작하는지에 대한 토픽입니다.

📝 브라우저란?

브라우저는 인터넷을 사용할 때 우리가 화면에 보는 모든 것을 표시해 주는 프로그램입니다.

웹 페이지를 보거나 검색을 하거나 온라인 비디오를 시청할 때

사용하는 소프트웨어로 생각할 수 있습니다.
(Chrome, Safari, Edge, Firefox etc..)

이제 간단하게 브라우저가 어떻게 작용하는지 알아보겠습니다.

📗 브라우저의 구성 요소 & 구조

브라우저는 주로 다음과 같은 요소로 구성되어 있습니다.

사용자 인터페이스 (UI) 👉 주소 표시줄, 뒤로/앞으로 가기 버튼, 즐겨찾기 메뉴 등 요청한 페이지를 보여주는 영역을 제외한 나머지 모든 부분이 사용자 인터페이스에 해당합니다.
브라우저엔진 👉 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어해주는 엔진입니다. 자료 저장소를 참조하며 로컬에 데이터를 읽기/쓰기 하면서 다양한 작업을 합니다.
렌더링 엔진 👉 HTML 및 CSS를 해석하고 웹 페이지를 화면에 표시하는 역할을 담당합니다.
통신 👉 HTTP 요청과 같은 네트워크 호출에 사용됩니다.
JavaScript 해석기 (엔진) 👉 JavaScript 코드를 해석하고 실행하여 웹 페이지의 동적인 기능을 구현합니다. 예를 들어 사용자와 상호작용하거나 웹 페이지를 업데이트할 때 사용됩니다.
데이터 저장소 👉 쿠키, 로컬 스토리지, 세션 스토리지 등을 통해 사용자 데이터를 저장하고 관리합니다.

📙 통신 과정

사용자가 주소창에 URL을 입력하면, DNS 조회를 해서 요청한 페이지의 자원이 어디에 위치하는지 찾습니다. https://google.com을 주소창에 입력한다면, DNS조회를 통해 HTML페이지가 있는 IP 주소 50.123.123.12를 알아냅니다.

IP 주소를 알고난 뒤, 브라우저는 서버와 TCP 핸드셰이크를 통해 연결을 설정합니다. HTTPS를 이용한 보안성 있는 연결을 위해서는 TLS 협상도 필요합니다.

웹서버로 한 번 연결이 성립되고 나면, 이제 브라우저는 HTTP GET request를 보냅니다. 브라우저가 데이터 덩어리를 받으면, 수신된 정보를 분석하고 화면에 보여주기까지 렌더링 과정을 거칩니다.

📖 브라우저의 동작 과정

사용자가 브라우저에 URL을 입력하거나 링크를 클릭하면, 브라우저는 다음과 같은 과정을 거쳐 웹 페이지를 표시합니다

URL 해석 👉 입력된 URL을 해석하여 웹 서버의 주소와 요청된 리소스를 파악합니다.
서버 요청 👉 브라우저는 해당 URL에 대한 요청을 웹 서버에 보냅니다.
서버 응답 수신 👉 웹 서버는 요청에 대한 응답을 보내고, 이에 따라 HTML, CSS, JavaScript 등의 리소스를 브라우저에 전송합니다.
HTML 파싱 👉 브라우저는 받은 HTML 문서를 해석하고 DOM(Document Object Model) 트리를 구축합니다.
CSS 파싱 및 렌더링 트리 구축 👉 브라우저는 CSS 스타일 시트를 해석하여 렌더링 트리(Render Tree)를 구성합니다. 이 트리는 화면에 표시될 요소들의 구조와 스타일 정보를 담고 있습니다
렌더링 👉 렌더링 엔진이 렌더링 트리를 사용하여 화면에 요소들을 배치하고 스타일을 적용하여 실제 화면에 웹 페이지를 그립니다.
JavaScript 해석 및 실행 👉 HTML 파싱 중에 JavaScript 코드를 만나면 JavaScript 엔진이 이를 해석하고 실행합니다. 이를 통해 웹 페이지에 동적인 기능을 부여할 수 있습니다.
이벤트 처리 👉 사용자의 동작(클릭, 입력 등)에 대한 이벤트를 감지하고 처리하여 웹 페이지의 상호작용성을 구현합니다.
페이지 로딩 완료 👉 모든 리소스의 로딩이 완료되면 사용자는 완전한 형태의 웹 페이지를 볼 수 있습니다.

📘 랜더링 과정

아래는 Webkit의 동작 과정입니다.

1. DOM(Document Object Model), CSSOM(CSS Object Model) 생성

서버로부터 받은 HTML, CSS를 다운로드 받습니다. 이때 HTML, CSS 파일은 단순한 텍스트이므로 연산과 관리를 위해 Parser를 통해 Object Model로 만듭니다. HTML은 DOM Tree로 CSS는 CSSOM으로 만듭니다.

2. Render Tree 생성

Render Tree에는 스타일 정보가 설정되어 있으며, 실제 화면에 표현되는 노드들로만 구성됩니다.

3. Layout

Render Tree 노드들이 가지고 있는 스타일과 속성에 따라서

브라우저 화면의 어느 위치에 어떤 크기로 출력할지 계산합니다.

4. Paint

Layout 계산이 완료되면 요소들을 실제 화면에 그립니다. 이전 단계에서 요소들의 위치와 크기, 스타일 계산이 완료된 Render Tree를 이용해 실제 값을 채워 넣습니다. 이때 텍스트, 색, 이미지, 그림자 효과 등을 모두 처리해 그립니다.

✅ 요약

브라우저는 사용자가 웹을 탐색할 때 중요한 역할을 하는 프로그램으로, HTML, CSS, JavaScript 등의 웹 리소스를 해석하여 화면에 표시합니다. 브라우저의 구성 요소와 동작 과정을 이해하면 웹 개발에 대한 전반적인 이해도가 높아지며, 웹 페이지의 동작 방식을 파악할 수 있습니다.