브라우저란 뭘까요?#

정식 명칭은 웹 브라우저(Web browser)라고 부르지만 보통 브라우저라고 많이들 불러요.
브라우저는 GUI 기반의 응용 소프트웨어로 웹 서버와 쌍방향으로 통신하고 HTML 문서나 파일을 출력해요. 제가 컴퓨터에서 가장 오래 사용하는 프로그램이에요. 같은 이유로 구글은 대부분의 사용자가 브라우저 위에서 컴퓨터를 하는 시간이 많다고 판단해 크롬 OS를 만들었다고 했어요. 24년 기준으로 대부분의 브라우저들은 Chromium을 사용하고 있어요.

브라우저를 사용하면 웹의 어느 곳이든 갈 수 있어요. 어느 곳의 데이터를 요청하면 HTTP를 사용해 데이터를 주고받아요.
예전에는 이런 브라우저 프로그램은 여러 나라와 회사에서 각기 다르게 만들었어요. 그래서 어떤 브라우저에서는 어느 곳에서 개발한 화면과 기능이 잘 되는데 어떤 브라우저에서는 잘 안되기도 했어요. 같은 콘텐츠가 브라우저마다 다르게 보이지 않고 일관되게 보일 수 있도록 웹 표준이란 게 만들어졌어요.
옛날 국내 SI 프로젝트에선 공무원들은 대체로 IE(Internet Explorer)를 썼기 때문에 IE에서 잘 보이는 것이 중요했어요. 그런데 개발자들은 크롬에서 개발을 테스트하다 보니 잘 되어서 넘겼는데 안 되는 경우("제 컴퓨터에서는 되는데요?")가 발생하기도 했어요.

웹은 뭘까요?
웹은 월드 와이드 웹(WWW)의 줄임말이에요. 웹은 인터넷상의 정보입니다. 웹은 하이퍼텍스트 문서와 링크로 구성된 정보 공유 시스템이에요. 인터넷상에는 많은 서비스들이 있지만 그중에서 가장 인기 있는 서비스가 웹이에요. 브라우저를 사용하는 모든 경우를 웹으로 사용하고 있다고 말할 수 있어요. 웹 서비스에서 할 수 있는 게 많아지면서 웹상에서 온라인 쇼핑, 뱅킹, SNS, 게임 등을 할 수 있게 되었어요. 인터넷을 사용하는 웹이 아닌 다른 서비스들로는 이메일, 파일 전송, 채팅, 원격 접속, 온라인 게임, P2P, VoIP 등이 있어요.

인터넷은 뭘까요?
인터넷은 전 세계에 걸쳐 원거리 접속이나 파일 전송, 전자 메일 등의 데이터 통신 서비스를 받을 수 있는 컴퓨터 네트워크의 시스템이에요. 인터넷은 실수로 월드 와이드 웹이라고 하지만 인터넷은 전 세계의 컴퓨터와 전선의 물리적 연결일 뿐이에요.

브라우저 동작 단계#

브라우저는 웹 페이지를 탐색하고 표시하기 위한 소프트웨어 애플리케이션이에요. 사용자가 원하는 사이트의 도메인 이름을 주소창에 입력하거나 검색 사이트에서 키워드를 넣고 요청을 보낸 결과에서 링크를 누르게 되면 해당 웹 페이지를 렌더링해요.

1. URL 해석 및 요청
사용자가 URL을 입력하면 브라우저는 다음 과정을 거쳐요.

• URL 파싱: URL을 해석해 프로토콜, 도메인, 경로, 쿼리, 매개변수 등을 분리해요
• DNS 조회: 도메인 이름을 IP 주소로 변환하기 위해 DNS 서버에 쿼리를 보내요
• HTTP 요청: 변환된 IP 주소로 HTTP/HTTPS 요청을 보내요. 이 요청에는 메소드(GET, POST 등), 헤더, 쿠키 등이 포함돼요

2. 서버 응답 처리
서버는 받은 HTTP/HTTPS 요청을 처리하고 응답을 보내요.
응답에는 상태 코드, 헤더, 본문이 포함되어 있어요.

• 상태 코드(Status Code): 200(성공), 404(Not found), 500(서버 오류) 등 처리 결과를 알려줘요
• 헤더(Headers): 콘텐츠 타입, 캐시 지침, 쿠키 등 다양한 메타 데이터를 담아요
• 본문(Body): HTML, CSS, JavaScript, 이미지 등 웹 페이지를 구성하는 실제 데이터

3. HTML 파싱 및 DOM 생성
서버에서 받은 HTML을 파싱해서 DOM(Document Object Model) 트리를 생성해요.
DOM을 만들 땐 토큰화와 트리를 구성하는 과정을 거쳐요.

• 토큰화: HTML 텍스트를 토큰으로 분리해요
• 트리 구성: 토큰을 기반으로 DOM 노드를 생성해요. 트리 구조로 구성해요

4. CSS 파싱 및 렌더 트리 생성
HTML처럼 CSS도 파싱해서 스타일 규칙을 적용할 수 있는 렌더 트리를 만들어요.

• CSSOM 생성: CSS도 파싱해서 CSSOM(CSS Object Model)을 생성해요
• 렌더 트리 생성: DOM과 CSSOM을 결합해서 렌더 트리를 만들어요. 이 트리는 화면에 실제로 표시될 요소만 포함해요

5. 레이아웃 계산
렌더 트리를 기반으로 각 요소의 위치와 크기를 계산해요.

• 블록 및 인라인 레이아웃: 각 요소의 박스 모델을 계산해서 화면 어디로 배치될지 결정해요

6. 페인트 및 컴포지팅
계산된 레이아웃을 실제 픽셀로 변환해요

• 페인트: 배경, 텍스트, 이미지 등을 포함해서 각 요소를 페인트 레이어로 그려요
• 컴포지팅: 여러 페인트 레이어를 결합해서 최종 화면을 구성해요

7. 자바스크립트 실행
웹 페이지에 포함된 JavaScript 코드를 실행해요

• 파싱 및 컴파일: JavaScript 코드를 파싱해서 바이트코드로 컴파일해요
• 실행: 바이트코드를 실행해서 DOM 조작, 이벤트 처리, AJAX 요청 등을 수행해요

8. 렌더링 업데이트
JavaScript 코드가 DOM이나 CSSOM을 변경하면 렌더 트리를 업데이트하고 필요한 부분을 다시 그려요

• 리플로우: 레이아웃이 변경되면 다시 계산해요
• 리페인트: 스타일이 변경되면 해당 요소를 다시 그려요

브라우저는 기본 기능 외에도 다양한 부가 기능을 제공해요

• 캐싱: 자주 사용하는 리소스를 캐시해서 성능을 향상해요
• 쿠키 및 로컬 스토리지: 사용자 데이터를 로컬에 저장해서 상태를 유지해요
• 보안: HTTPS를 통한 안전한 통신, XSS 및 CSRF 방지, 콘텐츠 보안 정책(CSP) 등을 통해 보안을 강화해요
• 플러그인 및 확장 기능: 사용자 맞춤 기능을 추가할 수 있는 플러그인과 확장 기능을 지원해요

브라우저의 구조#

이번 글에서는 표면적인 수준으로만 작성했어요. 브라우저에 관한 더 자세한 설명은 아랫글을 참고해 보세요!

• The Chromium Projects - Multi-process Architecture
• Google Docs - How Blink works
• Life of a Pixel - Google Slides / YouTube
• The Chromium Projects - How Chromium Displays Web Pages
• MDN - How browsers work
• Quastor - The Architecture of Web Browsers

브라우저의 핵심은 렌더링이에요. 사용자가 보고 싶은 콘텐츠를 가져와서 사용자가 볼 수 있도록 화면을 만드는 것이 목적이에요.

User interface#

브라우저의 UI는 주소창, 뒤로 가기, 북마크, 새로 고침 등을 표시해서 사용자와 상호작용을 하는 인터페이스예요. 사용자가 브라우저를 사용하는 접점이라고 생각하시면 될 것 같아요.

크롬 브라우저의 UI가 표준은 아니지만 대다수의 브라우저들은 같은 기능들을 수행하는 UI를 제공하고 있어요.

Browser engine#

브라우저 엔진은 브라우저의 사용자 인터페이스와 브라우저 렌더링 간 작업을 할 수 있도록 안내하는 중간 역할을 해요.
수행해야 할 일을 브라우저 GUI로 표시할 수 있도록 렌더링 엔진에게 통신해요.

Rendering engine#

Chromium에서는 렌더링 엔진으로 Blink를 사용하고 있어요.

렌더링 엔진은 요청된 콘텐츠를 표시하는 역할을 담당해요. 렌더링 엔진은 네트워크 계층으로부터 요청된 문서의 내용을 가져오는 것으로 시작해요.
HTML 코드를 가져오고 구문 분석을 DOM(Document Object Model) 트리를 만들어요. 그런 다음 렌더링 엔진은 CCS를 구문 분석해서 CSSOM(CSS Object Model) 트리를 만들어요. CSSOM은 DOM과 비슷하지만, HTML용이 아닌 CSS용이에요.
CSS가 구문 분석되면서 CSSOM이 생성되는 동안 브라우저는 네트워크 계층을 통해 JavaScript 파일과 같은 다른 애셋들을 다운로드해요.
렌더링 엔진은 JavaScript 인터프리터와 통신해서 JavaScript 코드를 실행하고 DOM과 CSSOM을 조작해요. 그런 다음 렌더링 엔진은 DOM과 CSSOM을 가져오고 둘을 결합해 렌더 트리를 만들어요.
렌더링 엔진은 UI 백엔드를 사용해서 웹 사이트를 화면에 배치하고 마지막으로 픽셀을 화면에 그려요.
렌더링 엔진이 거치는 전체 프로세스를 Critical Rendering Path라고 해요.

Networking#

네트워킹 계층은 리소스를 가져오기 위해 네트워크 호출을 수행하는 역할을 담당해요. 연결 제한, 요청 형식, 프록시 처리, 캐싱 등을 해요.

JavaScript interpreter#

자바스크립트 인터프리터는 DOM이나 CSSOM에서 JavaScript 코드를 구문 분석하고 실행하는 데 사용돼요. JavaScript 코드는 웹 서버에서 제공되거나 웹 브라우저, 브라우저 확장에서 제공될 수 있어요.
최신 브라우저는 JavaScript 인터프리터 대신 JIT(Just In Time) 컴파일을 사용해요. 크롬은 V8이라는 JavaScript 엔진을 사용해요.

UI backend#

UI 백엔드는 선택 상자나 입력 필드, 창과 같은 기본 위젯을 그리는 역할을 담당해요. UI 백엔드는 운영 체제 UI 메서드를 사용해요.
렌더링 엔진은 레이아웃 및 페인팅 단계에서 UI 백엔드 레이어를 사용해서 브라우저에 웹페이지를 표시해요.

Data persistence#

브라우저는 필요한 데이터를 로컬(쿠키, 캐시 등)에 저장해요.
최신 브라우저는 localStorage, IndexedDB 및 FileSystem과 같은 기능을 지원해요.

왜 브라우저에서는 Java를 쓸 수 없고 JavaScript 언어만 사용할까요?#

JavaScript 언어는 1995년에 Netscape사의 Brendan Eich에 의해 브라우저에서 동작하는 클라이언트 측 스크립팅 언어로 개발되었어요. JavaScript는 웹 페이지의 동적인 동작과 사용자 상호작용을 위해 설계되었어요. 여러 브라우저에서 사용하는 다른 스크립트 언어도 있었지만, 결국 JavaScript가 표준이 되면서 많은 사람들이 이 언어를 쓰게 되었고 크게 확산됐어요.

주요 브라우저에는 기본적으로 스크립팅 언어인 JavaScript가 내장되어 있어서 사용자는 JavaScript를 별도로 설치하지 않아도 실행할 수 있어요. 그렇지만 시스템 리소스에 접근하지 못하고 브라우저에서는 웹 페이지 내에서만 동작해요. Java는 클라이언트 측보다는 서버 측에 더 적합한 언어예요.

스크립팅은 스크립트 언어로 코딩하는 것을 말해요. 스크립트는 주로 단일 범위 또는 제한된 범위의 태스크를 수행하는데 사용돼요. JavaScript가 브라우저내에서만 쓰이다가 그 범위가 넓어진 것으로 생각하면 돼요.

Do not wait; the time will never be 'just right.' Start where you stand, and work with whatever tools you may have at your command, and better tools will be found as you go along.

— George Herbert