1. 들어가며: 우리가 매일 쓰는 '블랙박스'를 열다
우리는 하루의 시작과 끝을 웹 브라우저와 함께합니다. 주소창에 google.com을 입력하고 엔터를 치면 화면이 나타나는 것은 너무나 당연한 일상이 되었습니다. 하지만 개발자인 저에게조차 브라우저는 거대한 '블랙박스'였습니다. "요청을 보내면 응답이 오고, 브라우저가 알아서 그려준다" 정도의 추상적인 이해가 전부였죠.
한빛미디어의 『밑바닥부터 시작하는 웹 브라우저(Web Browser Engineering)』 4주 챌린지에 참여하게 된 계기는 단순했습니다. 그 블랙박스 안에서 도대체 무슨 일이 일어나는지, 내 손으로 직접 확인하고 싶었기 때문입니다.
결론부터 말하자면, 이 책은 단순히 "브라우저 만드는 법"을 알려주는 책이 아닙니다. 웹이라는 거대한 시스템을 지탱하는 엔지니어링의 정수를 파이썬이라는 언어로 밑바닥부터 톺아보는 책입니다.
2. 파이썬으로 만나는 브라우저의 민낯
이 책의 가장 큰 매력은 거창한 프레임워크나 엔진(Chromium, WebKit 등)을 가져다 쓰는 것이 아니라, 정말 '밑바닥(Scratch)'에서 시작한다는 점입니다.
첫 주차, import socket과 import ssl 단 두 줄로 시작했던 기억이 납니다. HTTP 요청 헤더를 문자열로 직접 작성하고 \r\n으로 줄바꿈을 처리하며, 서버와 핸드셰이크를 맺는 과정을 구현했습니다. 평소라면 라이브러리가 해줬을 일을 직접 처리하며 "아, 우리가 보는 웹페이지는 결국 긴 텍스트 문자열에 불과했구나"라는 사실을 새삼 깨닫게 되었습니다. 데이터가 끊겨서 들어오거나 인코딩이 안 맞아 글자가 깨지는 문제를 해결하며 네트워크 통신의 기본기를 다시 다질 수 있었습니다.
브라우저를 만들고 있다는 게 실감났던 건 터미널의 텍스트 로그를 벗어나, tkinter를 이용해 실제 윈도우 창(Canvas)에 글자를 띄웠을 때입니다. 단순히 글자를 print 하는 것과 화면 좌표(x, y)를 계산해서 draw 하는 것은 차원이 다른 문제였습니다. 폰트 크기에 따라 줄바꿈을 해야 하고(Line Breaking), 스크롤을 내리면 화면을 다시 그려야 했습니다. 특히 Chapter 2에서 디스플레이 리스트(Display List) 개념을 익히며, 브라우저가 왜 그리기 명령들을 모아두었다가 한 번에 처리하는지 성능적인 이유를 체감할 수 있었습니다.
3. 고비의 순간들: 레이아웃과 렌더링 트리
물론 모든 과정이 순탄치만은 않았습니다. 책의 중반부, HTML을 파싱 하여 DOM 트리를 만들고, 이를 바탕으로 다시 레이아웃 트리(Render Tree)를 구축하는 과정은 생각보다도 어려웠습니다.
복잡하게 중첩된 <div> 태그들을 처리하기 위해 재귀 함수를 작성하면서 무한 루프에 빠지기도 하고, 트리의 부모-자식 관계가 꼬여 화면이 엉망진창이 되기도 했습니다.
그리고 단순히 색상을 입히는 줄 알았던 CSS가, display: block이냐 inline이냐에 따라 레이아웃 계산 로직을 완전히 뒤바꿔 놓는다는 것을 구현해 보며 알았습니다. 현대 브라우저들이 이 복잡한 계산을 1/60초(16ms) 안에 끝내기 위해 얼마나 많은 최적화를 하고 있는지 경외감마저 들었습니다.
4. 이 책을 마치면 개발자의 해상도가 높아진다
이 책의 주요한 범위를 완주한 지금, 웹페이지를 바라보는 저의 시각은 완전히 달라졌습니다.
예전에는 웹페이지가 로딩될 때 "왜 이렇게 느려?"라고 불평했다면, 이제는 머릿속에 렌더링 파이프라인이 그려집니다. "아, 지금 HTML 파싱 해서 DOM 트리 만들고, CSSOM 합쳐서 렌더 트리를 구성한 다음, 레이아웃 계산하고 페인팅하고 있겠구나."
이 책은 난이도가 제법 있는 편입니다. 자료구조(트리, 리스트)에 대한 이해도 필요하고, 파이썬 문법에도 익숙해야 합니다. 하지만 그만큼 얻어가는 지식의 밀도는 상당하다고 생각합니다.
추천 대상:
- <div>와 <span>이 내부적으로 어떻게 다르게 처리되는지 궁금한 프론트엔드 개발자
- 네트워크 통신부터 GUI 렌더링까지, 애플리케이션의 End-to-End 구조를 파악하고 싶은 백엔드 개발자
- 자신만의 토이 프로젝트로 '나만의 브라우저'를 만들어보고 싶은 학생