브라우저

The Web is the platform.

— 넷스케이프 시절부터 현대에 이르기까지 웹 브라우저 진영이 늘 가슴에 품어온 원대한 이상향.

HTML, CSS, JS라는 세 가지 기괴한 언어들을 강제로 우겨넣어 어떻게든 화면에 글자와 그림을 그려내는 초거대 거미줄 런타임. ~~그리고 탭을 몇 개만 열어도 내 소중한 RAM을 기가바이트 단위로 갈아 마시는 메모리 하마~~

1. 개요

브라우저(Web Browser)는 인터넷상에서 정보를 탐색하고 표현하는 데 사용하는 클라이언트 측 응용 프로그램이다. HTML, CSS, JavaScript 등으로 이루어진 정적/동적 리소스를 서버로부터 다운로드하여, 사용자에게 미려하고 인터랙티브한 웹 화면으로 렌더링하는 중차대한 역할을 수행한다.

단순히 문서를 읽는 뷰어로 출발했으나, 현재는 각종 DOM API, 하드웨어 가속, WebGL, 심지어 브라우저 내 가상 머신(WebAssembly)까지 구동하는 사실상의 경량 운영체제(OS)로 진화했다. 이로 인해 현대 프론트엔드 개발자들의 모든 고뇌와 환희, 분노는 이 브라우저라는 제한적인 환경 안에서 탄생한다.(...)

2. 역사적 난장판: 브라우저 전쟁

2.1. 제1차 브라우저 전쟁 (넷스케이프 vs 인터넷 익스플로러)

웹의 대중화를 이끈 것은 넷스케이프 내비게이터(Netscape Navigator)였다. 그러나 윈도우 95의 독점적 지위를 이용해 인터넷 익스플로러(IE)를 끼워 팔기 시작한 마이크로소프트의 파상공세에 넷스케이프는 장렬히 침몰했다. 이 전쟁의 상흔으로 자바스크립트라는 악마의 재능이 급하게 탄생했다.

2.2. 제2차 브라우저 전쟁과 구글 크롬의 패권

IE가 승리 후 기술 개발을 방치하며 6.0 버전에 안주하는 동안, 오픈소스를 앞세운 파이어폭스(Firefox)와 구글의 Chrome이 등장해 판을 완전히 흔들었다. 특히 구글이 2008년 자체 개발한 초고속 자바스크립트 V8 엔진을 탑재한 크롬을 내놓자, 웹 생태계는 순식간에 크롬 중심으로 재편되었다. 현재는 IE의 공식 퇴출과 함께 라이벌이었던 마이크로소프트마저 크롬의 뼈대인 크로미움(Chromium)을 바탕으로 Edge 브라우저를 만드는 굴욕적인 평화가 이어지고 있다.(...)

2.3. 신기류: 사파리, 독자 노선인가 새로운 IE인가?

크로미움 천하 속에서 애플의 Safari는 독자적인 WebKit 엔진을 고수하며 분전하고 있다. 그러나 애플이 iOS 생태계 내에서 타사 브라우저 엔진의 사용을 철저히 금지하고 오직 웹킷만을 강제하는 정책을 쓰면서, 웹 개발자들 사이에서는 "애플이 사파리를 인질 삼아 모바일 웹 기술의 발전을 저해하고 앱스토어 수수료 독점을 지키려 한다"며 사파리를 '현대판 IE(Internet Explorer)'라고 부르며 지탄하고 있다.¹

3. 브라우저의 핵심 동작 메커니즘

3.1. 파싱부터 페인팅까지의 렌더링 파이프라인

브라우저가 웹페이지를 그리는 과정은 매우 치열하며, 이를 크리티컬 렌더링 패스(Critical Rendering Path)라 부른다.

DOM 및 CSSOM 트리 생성: HTML을 파싱해 DOM(Document Object Model) 트리를 만들고, CSS를 파싱해 CSSOM(CSS Object Model) 트리를 구축한다.
렌더 트리(Render Tree) 생성: 두 트리를 결합하여 실제로 화면에 보일 노드들만 골라낸 렌더 트리를 만든다. 이때 display: none이 설정된 요소는 제외된다.
레이아웃(Layout / Reflow): 기기의 뷰포트 크기에 맞춰 각 요소가 화면의 어느 좌표에 어떤 크기로 놓여야 하는지 정확한 기하학적 계산을 수행한다.
페인트(Paint / Repaint): 계산된 좌표 위에 배경색, 테두리, 그림자 등 실제 픽셀을 그린다.
합성(Composite): 레이어들을 최종적으로 조합하여 화면에 표시한다.

이 과정에서 애니메이션이나 스타일 수정 등으로 인해 레이아웃이 다시 계산되는 Reflow가 빈번하게 일어나면, 웹페이지가 사정없이 버벅거린다. 프론트엔드 최적화의 절반 이상이 바로 이 Reflow를 피하는 눈물겨운 발버둥이다.²

4. 브라우저 관련 드립

4.1. 메모리 식인종 크롬

크롬은 멀티 프로세스 아키텍처를 적용하여 탭 하나가 뻗어도 브라우저 전체가 죽지 않도록 설계되었다. 문제는 이로 인해 탭을 열 때마다 독립된 메모리 공간을 차지해 소중한 램(RAM)을 미친 듯이 갈아먹는다는 점이다. 인터넷에는 크롬 아이콘이 램을 맛있게 냠냠 먹어 치우는 짤방이 넘쳐나며, '램 다익선(램은 다다익선)' 교리를 전파하는 1등 공신이 되었다.

4.2. 사라진 익스플로러의 유산 (ActiveX)

과거 한국 웹 생태계를 식물인간으로 만들어버린 주범인 ActiveX와 공인인증서 대환장 파티 역시 IE의 기괴한 독점 환경이 남긴 유산이다. IE가 2022년 완전히 사망 선고를 받았을 때, 전 세계 수많은 웹 개발자들은 '마침내 악마가 지옥으로 돌아갔다'며 축배를 들었다. 그러나 여전히 정부 및 구형 인트라넷 시스템 유지 보수 담당자들은 구형 브라우저 모드를 붙잡고 울부짖고 있다.

5. 여담

세계 최초의 브라우저: 팀 버너스리가 1990년 개발한 최초의 웹 브라우저 이름은 놀랍게도 'WorldWideWeb'이었다. 이후 우리가 아는 공간의 명칭인 WWW와 구분을 위해 'Nexus'로 개명했다.
유저 에이전트(User-Agent)의 족보 파괴: 브라우저가 서버에 요청을 보낼 때 자신을 소개하는 User-Agent 헤더값은 끔찍하게 복잡하다. 크롬의 User-Agent를 까보면 Mozilla/5.0... Safari/537.36 Chrome/...과 같이 경쟁사 이름이 온통 뒤섞여 있다. 이는 과거 웹 서버들이 특정 브라우저만 가려 받자, 브라우저들이 이를 우회하기 위해 서로의 이름을 사칭하며 도둑질을 해오다 굳어버린 유구한 역사적 편법의 증거이다.
피자 주문을 한 브라우저: 1994년 출시된 넷스케이프 1.0은 암호화 프로토콜인 SSL을 최초로 도입했다. 이를 기념해 개발진이 최초로 안전한 신용카드 결제를 통해 주문한 음식이 피자였다. 오늘날 우리가 브라우저로 온갖 배달 앱과 쇼핑을 편하게 부릴 수 있게 된 영광의 첫 삽이었다.

6. 관련 문서

애플은 웹 기술이 너무 발전해 네이티브 앱을 대체하는 프로그레시브 웹 앱(PWA)이 활성화되면, 자신들의 30% 앱스토어 통행세 수익이 위태로워지기 때문에 사파리의 웹 스펙 업데이트를 의도적으로 늦추고 있다는 저격성 분석이 지배적이다. ↩
과거 프론트엔드 최적화를 위해 CSS 규칙을 단순화하고 DOM 구조를 얕게 짜기 위해 매일 밤 코드를 깎던 개발자들의 피와 땀은 현대 브라우저 엔진의 미친듯한 JIT 컴파일러 발전으로 조금은 보상받고 있다.(...) ↩