브라우저(Browser) 동작 방법

 

 

 

 

 

 

웹 서핑을 하다 보면 여러 URL을 통해 다양한 사이트를 방문하게 됩니다. 그렇다면 우리가 브라우저 주소창에 URL을 입력했을 때, 어떤 과정을 거쳐 원하는 페이지가 화면에 표시될까요?

이는 웹의 기본적인 개념이지만, 막상 설명하려면 "렌더링", "파싱" 등 복잡한 용어들이 등장해 난감할 수 있습니다. 크롬, 파이어폭스, 사파리와 같은 오픈소스 브라우저를 기준으로, 브라우저가 동작하는 과정을 알아보겠습니다.

---

브라우저의 주요 기능

브라우저는 사용자가 요청한 자원을 서버에서 받아와 화면에 표시합니다. 이 자원은 HTML 문서, PDF, 이미지 등 다양한 형태일 수 있으며, 자원의 위치는 URI(Uniform Resource Identifier)에 의해 결정됩니다.

브라우저는 HTML과 CSS 명세를 따라 HTML 파일을 해석하고 화면에 표시합니다. 이 명세는 W3C(World Wide Web Consortium)에서 정의하며, 초기 브라우저들은 명세를 일부만 구현하거나 독자적인 방식을 사용해 호환성 문제가 발생하기도 했습니다. 하지만 현대 브라우저들은 대부분 표준 명세를 준수합니다.

브라우저의 인터페이스는 아래와 같은 요소로 구성되어 있습니다:

• 주소 표시줄 (URI 입력)
• 이전/다음 버튼
• 북마크(즐겨찾기)
• 새로 고침 버튼
• 홈 버튼

---

브라우저 기본 구조

브라우저는 다음과 같은 주요 구성 요소로 이루어져 있습니다:

1. 사용자 인터페이스: 주소 표시줄, 이전/다음 버튼, 북마크 등 사용자가 직접 이용하는 요소.
2. 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 간의 동작을 제어.
3. 렌더링 엔진: 요청한 콘텐츠를 표시 (HTML과 CSS를 파싱하여 화면에 출력).
4. 통신 모듈: HTTP 요청 및 네트워크 통신 처리.
5. UI 백엔드: 콤보 박스, 창 등 기본 장치를 그림.
6. 자바스크립트 해석기: 자바스크립트 코드를 실행.
7. 자료 저장소: 쿠키 등 데이터를 하드디스크에 저장.

---

렌더링 엔진의 동작 과정

렌더링 엔진은 요청받은 내용을 브라우저 화면에 표시합니다. HTML, XML 문서 및 이미지를 기본적으로 처리하며, PDF와 같은 형식은 플러그인이나 브라우저 확장 기능을 통해 지원합니다.

1. HTML 문서 파싱:
   • HTML 태그를 DOM(Document Object Model) 노드로 변환.
2. CSS 파싱:
   • 외부 CSS 파일과 문서 내 스타일 정보를 파싱하여 스타일 규칙 생성.
3. 렌더 트리 생성:
   • DOM 트리와 스타일 정보를 결합하여 렌더 트리를 생성.
4. 배치 (Layout):
   • 렌더 트리의 각 노드가 화면의 어느 위치에 표시될지 계산.
5. 그리기 (Painting):
   • UI 백엔드에서 렌더 트리를 기반으로 화면에 그래픽 요소를 그림.

렌더링 엔진은 모든 HTML을 파싱한 후 작업을 시작하지 않습니다. 전송받은 데이터를 기다리면서, 가능한 부분부터 화면에 점진적으로 표시합니다. 우리가 웹페이지를 볼 때 화면이 점차 완성되는 이유가 바로 이것입니다.

---

DOM이란?

DOM(Document Object Model)은 브라우저가 HTML 문서를 구조화하여 이해하는 방식을 의미합니다. HTML 문서의 태그(, 등)는 DOM 트리 구조로 변환되며, 자바스크립트를 통해 이 구조를 동적으로 조작할 수 있습니다.

DOM 트리 생성 과정

• HTML 파싱 → 태그를 DOM 노드로 변환.
• 스타일 정보와 DOM 노드를 결합해 렌더 트리 생성.
• 렌더 트리를 기반으로 화면에 표시.

---

파싱(Parsing)이란?

파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 과정입니다. 이 과정은 문서를 어휘 분석 및 구문 분석하여 파싱 트리를 구축하는 단계로 이루어집니다.

1. 어휘 분석:
   • 문서의 텍스트를 언어의 구문 규칙에 따라 분석.
2. 구문 분석:
   • 구문 규칙과 일치하는 노드를 파싱 트리에 추가.
3. 파싱 트리 생성 후 DOM 트리 변환:
   • 브라우저가 사용 가능한 형태로 변환.

---

1. URL 입력: 브라우저 주소창에 URL을 입력하고 Enter.
2. 서버 요청: 해당 URL로 HTTP 요청 전송.
3. 자원 수신: HTML, CSS, 이미지 등 페이지 자원 수신.
4. HTML 파싱: HTML을 분석하여 DOM 트리 생성.
5. CSS 파싱: 스타일 정보를 파싱하여 스타일 구조체 생성.
6. 렌더 트리 생성: DOM과 스타일 정보를 결합하여 렌더 트리 생성.
7. 화면 표시: 렌더 트리를 기반으로 화면에 출력.