한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다.

브라우저는 프론트엔드 개발자가 일상을 보내는 ‘작업 공간’이지만, 그 내부 구조와 원리에 대해 깊이 고민해볼 기회는 드물었습니다. 「밑바닥부터 시작하는 웹 브라우저」는 평소 당연하게 써왔던 브라우저가 실제로 어떻게 동작하는지를 ‘파이썬 코드로 직접 만들며’ 경험하게 하는 특별한 책입니다.
 

책의 큰 장점은 이론을 넘어 직접 구현 중심이라는 점입니다. HTML 파싱, 텍스트 렌더링, 스크롤, 애니메이션, GPU 가속 등의 과정을 따라가며, 단순히 브라우저 엔진의 원리를 배우는 것이 아니라, 내가 직접 그 엔진의 일부를 만드는 짜릿한 경험을 할 수 있습니다. 평소 UI·UX 성능 이슈나 CSS 렌더링 버그에 직면했을 때, 왜 그런 상황이 생겼는지 근본부터 분석할 수 있는 눈이 생겼습니다.
 

실무에서 깊이 있는 최적화가 필요한 순간, “브라우저는 어떻게 파싱하고, 어떤 식으로 그리나?”라는 질문이 들곤 합니다. 이 책을 읽으면서 실제 내부 원리를 따라가며, 평소 쉽게 지나쳤던 렌더링, 레이아웃, 페인팅 등 다양한 프로세스의 실체를 자연스럽게 이해하게 됩니다. 또한 직접 실습해보니 코드의 작은 결정이 전체 브라우저 동작에 미치는 영향을 몸소 느낄 수 있어, 실무적인 감각도 크게 높아졌습니다.
 

특히 이 책은 단순한 개발 기술을 넘어, 브라우저가 어떻게 성장해왔고 앞으로 어떻게 발전할 수 있는지, 기술적·철학적 배경까지 고민하게 만듭니다. 신기술이나 프레임워크의 홍수 속에서도 “근본적인 원리와 구조의 이해가 왜 중요한가”를 깨닫게 해줍니다. 초보자는 물론이고, 저처럼 현업에서 꽤 오래 개발을 한 분에게도 시야 확장과 통찰력을 동시에 제공하는 책입니다.
 

총평하자면, 「밑바닥부터 시작하는 웹 브라우저」는 웹 개발자라면 반드시 한 번은 경험해야 할 ‘엔진 탐구 입문서’입니다. 웹의 근본을 알고 싶은 개발자, 실무에서 브라우저의 깊은 구조를 이해하고 싶은 분들께 적극 추천합니다. 직접 구현을 통해 얻는 깨달음이 실무와 학습 모두에 깊은 울림을 남깁니다.
 

  한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

밑바닥부터 시작하는 웹 브라우저(한빛미디어, 2025)

책 소개

저자 : 파벨 판체카(Pavel Panchekha), 크리스 헤럴슨(Chris Harrelson)

역자 : 이형욱, 최병운

제목 : 밑바닥부터 시작하는 웹 브라우저

출판사 : 한빛미디어

출간 연도 : 2025.09. 

원서명 : Web Browser Engineering(OUP Oxford, 2025)

페이지 : 632쪽

밑바닥부터 시작하는 웹 브라우저 - 예스24

웹 브라우저! 쌓고, 뜯고, 이해하라하나씩 이해하는 웹의 작동 원리크롬, 파이어폭스, 브레이브, 웨일 같은 웹 브라우저는 겉으로는 단순해 보이지만, 그 밑에는 무려 1천만 줄에 달하는 코드가

www.yes24.com

https://www.yes24.com/product/goods/153499985

 웹, 홈페이지, 인터넷 브라우저. 과거 인터넷 브라우저를 처음 만났던 기억은 파란색 알파뱃 E에 노란 곡선의 줄이 함께였던 'internet explorer' 를 통한 웹 접근이다. 이후 컴퓨터에 관심이 생기면서(정확히는 온라인 게임) url의 개념을 배우고, 시간이 흘러 웹 페이지를 구성하는 HTML을 알게되고, F12를 통한 관리자 페이지를 알게되고...

최근에는 파이썬을 통한 크롤링 작업시 '크롬 브라우저'와 '크롬 드라이버'를 사용한 것이 '브라우저'에 대한 접점이었다. 웹 브라우저는 어떻게 구성되었고 작동하는지를 언젠가 궁금해 했지만 it 계열에 큰 관심이 없었거나 it 업무를 하지만 직군이 다른(dba) 상태라, 이번 '한빛미디어 - 나는 리뷰어다'의 10월 리뷰 신청에 이 책을 신청하게 되었다. 파이썬으로 구현하는 웹 브라우저를 통해 내부원리를 '밑바닥부터' 알아가보자. 

책은 총 12개의 챕터로 구성되어 있다.

PART 1 페이지 로딩
CHAPTER 1 웹페이지 다운로드
CHAPTER 2 화면에 그리기
CHAPTER 3 텍스트 포맷팅하기

PART 2 문서 표시
CHAPTER 4 문서 트리 구축하기
CHAPTER 5 페이지 레이아웃
CHAPTER 6 개발자 스타일 적용하기
CHAPTER 7 버튼과 링크 처리하기

PART 3 애플리케이션 실행
CHAPTER 8 서버로 정보 보내기
CHAPTER 9 대화형 스크립트 실행하기
CHAPTER 10 사용자 데이터 보호하기

PART 4 모던 브라우저 기능
CHAPTER 11 시각적 효과
CHAPTER 12 태스크와 스레드 스케줄링
CHAPTER 13 애니메이션과 컴포지팅
CHAPTER 14 콘텐츠 접근성 향상
CHAPTER 15 삽입된 콘텐츠 지원
CHAPTER 16 이전 결과 재사용
CHAPTER 17 이 책에서 다루지 않은 내용

책은 파이썬을 통한 웹 브라우저 생성 및 기능 설명을 안내한다. 파트 1에서 브라우저의 GUI 및 텍스트 설정을 하고, 파트 2에서 HTML과 CSS의 역할을 파이썬으로 구현하면서 트리구조와 레이아웃에 대한 이해를 할 수 있다. 파트 3에서는 폼(form) 구성을 통한 서버로의 정보 송신과 대화형 스크립트 실행, 데이터 보안을 다루며, 마지막 파트 4에서는 시각화와 기능 최적화를 다룬다.

현재 우리가 사용하는 브라우저의 기능을 하나씩 구현하며 실행 가능한 웹 브라우저를 만드는 책은 브라우저 동작에 대한 개념을 명확하게 이해하도록 코드로 설명하고 웹 작동 원리를 이해하도록 안내한다. 특히 재밌는 것은 파이썬 코드로 HTML, CSS, 자바스크립트 등 웹 브라우저를 구성하고 작동하는 다양한 프로그래밍 기능을 대체하면서 브라우저 기술에 대한 이해와 동시에 해당 프로그래밍 언어에 대한 이해가 같이 이루어지는 점이다. 또한, 브라우저의 성능과 관련된 최적화나 웹 GUI와 같은 사용자 편의성에 대해서도 생각해 볼 요인을 제공한다.

웹이 어떻게 동작하는지 궁금한 분 혹은 나만의 '웹 브라우저' 구현에 관심이 있는 분들, 마지막으로 프론트엔드 개발에 흥미가 있는 분들께 책을 추천한다.

  한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다.

《밑바닥부터 시작하는 웹 브라우저》

​

안녕하세요?

야근에 치여서 책을 읽거나 운동하기도 힘들어하고 있는 지친 개발자, 품격 있는 직장인 부자입니다.

​

오랜만에 아주 두꺼운 IT 벽돌책(?)을 살펴보고 있습니다. 한빛미디어의 신작 책 《밑바닥부터 시작하는 웹 브라우저》입니다. 이렇게 특정 분야에 대한 기본 구조와 원리 및 동작에 대해서 공부하는 책은 정말 오랜만입니다. 대학교 새내기가 된 기분이네요!

​

​

책 《밑바닥부터 시작하는 웹 브라우저》는 총 4개의 큰 챕터로 나눠져 있습니다. 페이지 로딩부터 문서 및 시각적 효과 그리고 사용자 상호작용과 그래픽까지 직접 나만의 웹 브라우저를 만들어 보면서 내부 구조를 이해해 볼 수 있답니다. 저도 항상 쓰기만 썼지 내부를 생각해 볼 생각은 잘 안 했네요.

​

​

웹에 대한 사전 지식과 파이썬, HTML, CSS 등에 대한 기초가 있다면 조금 더 쉽게 책을 읽을 수 있습니다. 그렇지 않더라도 자세하게 설명하고 있기 때문에 금방 따라올 수 있을 것 같긴 해요. 《밑바닥부터 시작하는 웹 브라우저》은 프로그래밍 초보자나 입문자도 충분히 시간을 들이면 볼 수 있는 책입니다.

​

​

어떤 웹 브라우저를 주로 사용하시나요? 저는 아직 크롬을 사용합니다. 얼마 전에는 오픈AI가 아틀라스라는 브라우저를 출시하기도 했죠. 크롬뿐만 아니라 파이어폭스, 웨일, 엣지 등 다양한 브라우저들은 겉보기에는 아주 단순해 보이지만 실제로는 수천만 라인의 코드로 구현된 소프트웨어입니다.

​

책 《밑바닥부터 시작하는 웹 브라우저》는 유타 대학교 교수이자 웹 브라우저 연구자인 파벨 판체카, 구글 크롬의 렌더링 엔진 리더 크리스 해럴슨이 직접 경험한 내용들을 담아 우리에게 설명하는 아주 귀중한 지혜가 담겨있어요.

​

​

프런트엔드를 공부해 본 사람이라면 보통 HTML, CSS, 자바스크립트 등을 가장 먼저 시작하게 됩니다. 웹서버를 공부하는 사람들은 REST API 등을 공부하면서 HTTP와 관련된 깊은 내용들도 다루게 되죠. 이후 다양한 프레임워크들을 사용하면서 우리는 쓸만한 아이템들을 개발하게 됩니다. 이 모든 내용들이 돌아가는 웹 브라우저라는 것은 도대체 어떻게 구현되어 왔을까요?

​

​

책 《밑바닥부터 시작하는 웹 브라우저》를 하나씩 따라가다 보면 HTTP에 대한 깊은 내용은 물론 사용자 인터렉션과 렌더링 등 다양한 최신 브라우저의 고급 기능들도 배우게 됩니다. 아주 쉽게 설명하고 가볍게 구현하면서도 충분히 브라우저의 전체 구조와 동작 원리를 이해할 수 있는 것 같습니다. 개인적으로 이런 종류의 책을 시간 내서 읽고 나면 세상을 보는 눈이 많이 달라진다고 생각합니다.

​

​

《밑바닥부터 시작하는 웹 브라우저》는 자바스크립트의 실행이나 텍스트와 그래픽 렌더링, 보안이나 캐싱 그리고 UI에 대해서는 자세히 다루지 않습니다. 이 책의 목적은 어디까지나 웹 브라우저의 동작 원리를 배우는 것이기 때문입니다. 그러나 모르더라도 책을 따라가는 데는 큰 문제는 없어 보입니다. 알고 있다면 더 깊은 이해를 할 수 있겠죠?

​

파이썬을 이용해서 나만의 브라우저를 만들면서 기본 원리를 배우는 책 《밑바닥부터 시작하는 웹 브라우저》은 성능 향상에 관심이 있는 웹 프런트엔드 개발자에게도 추천하며, 파이썬 초심자들의 토이 프로젝트로도 시작할 수 있는 계기를 줄 수 있는 쉽고 재밌지만 깊은 내용이 담긴 책입니다.

​

저도 주로 사용하는 언어는 파이썬이 아니기 때문에 아주 초심자의 마음으로 이 책을 읽어 보고 있어요. 눈으로 읽고 있는데 이제는 손이 움직여야 할 때인 것 같습니다.

​

공부하러 갑시다!!

《밑바닥부터 시작하는 웹 브라우저》 북 리뷰 끝.

​

"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."

책을 읽고나서

이 책을 통해 브라우저를 직접 구현해보며, 그동안 이론으로 대충 알고 있던 브라우저의 동작 원리를 이해할 수 있었습니다.

Q. 브라우저 렌더링 원리에 대해 설명해주세요.

개발자 면접에서 자주 듣게 되는 질문입니다. 저 역시 이 답변을 달달 외우며 공부했던 기억이 납니다.

이 책은 이론을 단순히 설명하기 보다는, 직접 브라우저를 만드는 실습을 통해 이론을 이해하도록 돕습니다.

HTML 문서를 파싱해 트리로 구성하고, 그 트리를 기반으로 width, height, 브라우저 내 위치, 폰트 스타일, 속성 등을 계산하는 일련의 과정을 직접 구현해보게 됩니다. 정말 제목처럼 ‘밑바닥부터’ 브라우저가 화면을 만들어내는 전 과정을 따라갑니다.

각 챕터의 끝에는 연습문제가 수록되어 있어, 이를 직접 풀다 보면 마치 브라우저 엔지니어가 된 듯한 기분이 듭니다.

실습 언어는 파이썬이라 코드 읽기가 어렵지 않았습니다. 실습을 하다 보니 “언젠가 크로미움 같은 브라우저 오픈소스도 읽어보고 싶다”는 생각이 들었습니다. 단, C++로 되어 있어, 언어를 공부한 뒤 도전해볼 계획입니다.

책 한 줄로 표현하기

브라우저를 직접 구현하며 브라우저의 원리를 이해시켜 주는 책!

“한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.”

웹 개발자라면 한 번쯤 “브라우저는 내부에서 어떤 과정을 거쳐 페이지를 띄우는 걸까?”라는 궁금증을 가져보셨을 겁니다. 저도 브라우저를 언젠가 더 공부해봐야지 생각하고 있었는데 마침 그럴 기회가 생겼습니다. 밑바닥부터 시작하는 웹 브라우저는 단순히 원리를 설명하는 데 그치지 않고, 브라우저의 핵심 기능을 직접 구현해보며 동작 원리를 체득하는 과정에 초점을 맞춥니다. 무언가를 배우는 가장 좋은 방법은 직접 해보는 것이라는 말이 있는 것처럼 이 책을 통해 브라우저의 동작 원리를 직접 구현해보며 이해할 수 있었습니다.

챕터별 내용 요약

PROLOGUE 브라우저와 나

브라우저의 기본 개념과 이 책에서 구현할 브라우저의 전체적인 구조를 소개합니다.

PART 1 페이지 로딩

CHAPTER 1 웹페이지 다운로드

HTTP 프로토콜을 통한 서버 연결과 데이터 다운로드 과정을 구현합니다. TCP 소켓 연결, HTTP 요청/응답 처리, HTTPS 암호화 연결까지 다룹니다.

CHAPTER 2 화면에 그리기

tkinter를 이용해 브라우저 창을 만들고 기본적인 그래픽 렌더링을 구현합니다. 텍스트 배치, 스크롤 기능, 렌더링 최적화 기법을 학습합니다.

CHAPTER 3 텍스트 포맷팅하기

폰트의 기본 개념부터 시작해 텍스트 측정, 스타일링, 레이아웃 객체 설계까지 텍스트 렌더링의 모든 과정을 구현합니다.

PART 2 문서 표시

CHAPTER 4 문서 트리 구축하기

HTML 파싱을 통해 DOM 트리를 구축하는 과정을 구현합니다. 파서 디버깅, 셀프 클로징 태그 처리, 오류 처리까지 다룹니다.

CHAPTER 5 페이지 레이아웃

렌더 트리와 레이아웃 계산 과정을 구현합니다. 블록 레이아웃, 크기/위치 계산, 재귀 페인팅, 배경 그리기까지 다룹니다.

CHAPTER 6 개발자 스타일 적용하기

CSS 파싱과 스타일 적용 과정을 구현합니다. 셀렉터 매칭, 캐스케이딩, 스타일 상속, 폰트 프로퍼티 처리까지 다룹니다.

CHAPTER 7 버튼과 링크 처리하기

인터랙티브 요소들의 처리 방법을 구현합니다. 링크 처리, 클릭 이벤트, 탭 브라우징, 히스토리 탐색, URL 입력까지 다룹니다.

PART 3 애플리케이션 실행

CHAPTER 8 서버로 정보 보내기

HTML 폼의 동작 원리와 서버로 데이터를 전송하는 과정을 구현합니다. 폼 요소 렌더링, 상호작용, POST 요청 처리까지 다룹니다.

CHAPTER 9 대화형 스크립트 실행하기

DukPy 자바스크립트 엔진을 이용해 JS 코드 실행 환경을 구현합니다. 브라우저 API 노출, 이벤트 처리, DOM 조작까지 다룹니다.

CHAPTER 10 사용자 데이터 보호하기

웹 보안의 핵심 개념들을 구현합니다. 쿠키, 인증 시스템, CORS, Same-Origin Policy, CSRF/XSS 방어, CSP까지 다룹니다.

PART 4 모던 브라우저 기능

CHAPTER 11 시각적 효과

Skia와 SDL을 이용한 하드웨어 가속 그래픽 렌더링을 구현합니다. 컴포지팅, 투명도, 블렌딩, 마스킹까지 다룹니다.

CHAPTER 12 태스크와 스레드 스케줄링

비동기 작업 관리와 멀티스레딩을 구현합니다. 태스크 큐, 타이머, 렌더링 주기, 성능 최적화까지 다룹니다.

CHAPTER 13 애니메이션과 컴포지팅

GPU 가속 애니메이션과 컴포지팅을 구현합니다. JS 애니메이션, CSS 트랜지션, 컴포지팅 최적화까지 다룹니다.

CHAPTER 14 콘텐츠 접근성 향상

웹 접근성 기능들을 구현합니다. 줌, 다크 모드, 키보드 내비게이션, 스크린 리더 지원까지 다룹니다.

CHAPTER 15 삽입된 콘텐츠 지원

이미지와 iframe 등 복잡한 콘텐츠를 처리합니다. 이미지 렌더링, iframe 통신, 보안 고려사항까지 다룹니다.

CHAPTER 16 이전 결과 재사용

렌더링 성능 최적화를 위한 캐싱과 무효화 전략을 구현합니다. 의존성 관리, 캐시 무효화, 불필요한 재계산 방지까지 다룹니다.

CHAPTER 17 이 책에서 다루지 않은 내용

현대 브라우저의 고급 기능들과 향후 학습 방향을 제시합니다.

EPILOGUE 변화하는 환경

웹 기술의 발전과 브라우저의 미래에 대한 전망을 다룹니다.

입력에서 렌더링까지, 브라우저의 모든 여정

이 책은 사용자가 주소창에 URL을 입력한 순간부터 화면에 결과가 그려지기까지의 전체 과정을 코드와 함께 따라갑니다.

• Part 1에서는 DNS, HTTP, TLS 등 네트워크 단계에서 실제 요청과 응답이 어떻게 이루어지는지를 다룹니다.
• Part 2에서는 HTML 파싱, DOM 트리 생성, CSS 스타일 적용, 레이아웃 계산과 같은 렌더링 파이프라인을 구현합니다.
• Part 3~4에서는 자바스크립트 실행, 이벤트 처리, 폼 제출, 스레드 및 GPU 가속 등 현대 브라우저의 복잡한 동작까지 확장합니다.

직접 만드는 브라우저 – 실습 중심 학습

이 책의 가장 큰 매력은 파이썬으로 브라우저를 한 줄씩 구현해 나가는 구성입니다. 단순히 설명을 읽는 것이 아니라, 직접 코드를 작성해 실행하면서 “내가 만든 프로그램이 웹페이지를 띄운다”는 감각을 얻을 수 있습니다.

특히 프론트엔드 개발자에게는 “렌더링 과정의 원리”를 실감나게 이해할 수 있는 실습 경험이 될 것입니다. 렌더링 속도나 레이아웃 변화 같은 현상을 단순히 ‘느낌’으로 접근하는 대신, 그 근거를 브라우저 내부 구조에서 찾아볼 수 있게 됩니다.

처음엔 간단한 글자들을 렌더링하는 것부터 렌더 트리를 구축하고 레이아웃, 스타일을 적용하는 등 점진적으로 브라우저의 기능들을 하나씩 구현해 나가는 구성이 좋았습니다. 이 과정을 직접 구현해보며, “웹 브라우저가 화면을 만드는 과정이 얼마나 세밀한 설계 위에 있는지”를 몸소 경험할 수 있습니다.

그리고 연습 문제를 통해서 책에서 구현한 부분에서 더 나아가 도전적인 기능들을 구현해 볼 수 있는 기회를 제공합니다.

"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."

로딩 시간이 1초에서 3초로 늘어나면 사용자 이탈률이 32% 증가한다고 합니다. Pinterest는 로딩 시간을 40% 줄여 가입자를 15% 늘렸고, 반대로 Walmart는 로딩 시간이 느려지자, 전환율이 떨어졌다고 합니다. 개발하다 보면 분명 잘 작성한 코드인데 브라우저에서 원하는 대로 동작하지 않거나, 특정 브라우저에서만 느려지는 경험을 한 번쯤 했을 겁니다. 그때마다 “대체 브라우저 안에서 무슨 일이 일어나는 거지?" 하는 의문이 들었는데요. 그러던 중 브라우저에 대한 정보를 찾던 중 밑바닥부터 시작하는 웹 브라우저 책을 만났습니다. 

밑바닥부터 시작하는 웹 브라우저는 유타 대학교 교수이자 웹 브라우저 연구자 파벨 판체카와 구글 크롬 렌더링 엔진 리더 크리스 해럴슨의 실제 브라우저를 설계한 경험과 통찰이 담겨 있는 저서입니다. 이 책의 가장 큰 매력은 직접 파이썬으로 브라우저를 만들면서 브라우저에 대해 알아갈 수 있습니다. 1~3부에서 약 1,000줄짜리 브라우저를 만들고 4부에서 고급 기능을 추가하면 최종 3,000줄 실습 과정을 경험할 수 있습니다. 이 책은 단순한 지식 전달이 아니라 문제 해결 능력을 키울 수 있게 도와줍니다.

사용자 데이터 보호 부분은 평소 당연하게 사용하던 쿠키와 토큰이 얼마나 정교한 방식으로 작동하는지 알려줍니다. 브라우저가 서버와 주고받는 Set-Cookie 헤더와 Cookie 헤더의 흐름 그리고 사용자가 입력한 개인정보를 어떤 방식으로 보호하는지 파이썬 코드로 직접 구현해 보면서 배우게 됩니다. 로그인 시스템 하나를 만들기 위해 토큰 생성, 쿠키 저장, 세션 관리라는 여러 계층의 보안 메커니즘이 필요하다는 사실까지 체감하게 되는데요. 이런 깨달음은 사용자의 데이터를 다룰 때 왜 보안이 중요한지, 어떤 원리로 안전하게 보호되는지 근본적인 개념 이해를 할 수 있는 좋은 시간이었습니다.

밑바닥부터 시작하는 웹 브라우저를 통해 웹 브라우저의 핵심 구성요소와 동작 원리를 실습 중심으로 다루는 이 책은 단순히 기술을 배우는 데 그치지 않고 웹이라는 거대한 시스템을 이해하는 눈을 길러줍니다. 평소 당연하게 여겼던 인터넷의 작동 방식을 직접 구현해 보며 “웹이 정말 이렇게 흘러가는구나”라는 깨달음을 얻게 됩니다. 개발자라면 브라우저의 동작을 이해하는 일은 곧 사용자 경험을 이해하는 일이라고 생각합니다. 실제로 작동하는 브라우저를 만들어보는 과정 안에서, 웹의 원리와 구조를 한층 더 깊이 이해하고 싶은 모든 개발자에게 꼭 권하고 싶은 책입니다.

한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다.

프론트엔드 개발자인 내게 브라우저는 익숙해져야 하는 존재였다. 웹서비스는 결국 브라우저를 기반으로 제공되는 것과 동시에, 개발하는 시점에도 브라우저 위에서 어떻게 렌더링되고 있는지 지속적으로 확인하면서 작업하기 때문이다. 각각의 브라우저는 개발자 도구를 제공하고 있고, 처음엔 이 개발자 도구를 어떻게 쓰는지도, 각각의 탭이 어떤 역할을 하는지도 몰라서 이리저리 눌러봤던 기억이 난다. 이젠 개발자 도구를 통해 렌더링되는 요소들을 확인하거나 네트워크를 통해 어떻게 핸드쉐이킹을 하는지 확인하며 개발하는 건 일상이 되었다.

그만큼 브라우저는 가까이에 있어 왔고, 이런 이유로 V8 엔진이니, 주소창에 URL을 때려 넣고 난 이후의 순서니, 브라우저의 근간이 되는 기술에 대해 읽어가며 익히기도 했다. 달리 말해 그런 과정이 피상적으로 느껴지기도 했던 건 읽을 때는 이해가 되지만 시간이 지나면 금세 잊곤 했기 때문이다. 이 책은 그 점에서 명확히 다르다. ‘브라우저를 직접 만들어본다’는 경험 자체가 추상적인 개념을 직접 체화할 수 있도록 만든다. 개발자가 되고 싶다면 자기가 만들고 싶은 걸 만들어보라는 말처럼, 이건 단순히 글로 접하는 피상적인 지식이 아니라 그 근간을 파헤쳐 보고 전체 흐름을 몸으로 익혀보라는 의미처럼 느껴졌다.

처음엔 텔넷을 통해 웹서버와 간단한 통신을 시도해 보게 된다. 이를 바탕으로 직접 GET 요청을 보내보고, HTTP 응답 헤더와 바디가 어떤 구조로 전달되는지 확인한다. 브라우저가 하는 첫 단계가 결국 문서를 요청하고 문자열을 받는 일이라는 것을, 아주 원초적이고 투명한 방식으로 확인하게 된다.

(base)  ✘ ~  nc -v google.com 80
Connection to google.com port 80 [tcp/http] succeeded!

GET /index.html HTTP/1.0
Host: google.com

HTTP/1.0 301 Moved Permanently
Location: <http://www.google.com/index.html>
Content-Type: text/html; charset=UTF-8
Content-Security-Policy-Report-Only: object-src 'none';base-uri 'self';script-src 'nonce-ZZdfYRYG5H89BXUzpPCZnQ' 'strict-dynamic' 'report-sample' 'unsafe-eval' 'unsafe-inline' https: http:;report-uri <https://csp.withgoogle.com/csp/gws/other-hp>
Date: Wed, 22 Oct 2025 22:48:45 GMT
Expires: Fri, 21 Nov 2025 22:48:45 GMT
Cache-Control: public, max-age=2592000
Server: gws
Content-Length: 229
X-XSS-Protection: 0
X-Frame-Options: SAMEORIGIN

<HTML><HEAD><meta http-equiv="content-type" content="text/html;charset=utf-8">
<TITLE>301 Moved</TITLE></HEAD><BODY>
<H1>301 Moved</H1>
The document has moved
<A HREF="<http://www.google.com/index.html>">here</A>.
</BODY></HTML>

이를 통해 결국 HTTP 프로토콜은 문서를 주고받는 행위라는 걸 다시 한번 인지하게 된다. HTML을 왜 문서라 부르고 작성하는지 다시 한번 느끼게 되는 대목이었다. 이 과정에서 어떤 요청과 응답을 주고받는지 가볍게 인지하고, 몇 가지 파이썬 코드를 통해 어떤 방식으로 구성되는지 설명을 이어 간다.

def show(body):
		in tag = False
		for c in body:
				if c == "<":
						in_tag = True
				elif c == ">":
						in_tag = False
				elif not in_tag:
						print(c, end="")

이 간단한 파이썬 코드가 주는 의미가 남다르게 느껴졌다. 익숙하게 써왔던 태그의 <, >가 단순 문자열이 아니라 파싱의 기준이 되고, 왜 태그의 쌍 중 하나를 잊으면 에러를 뱉는지 와닿는 느낌이었다. 이후에는 DOM 트리가 쌓여가고, 노드를 순회하며 렌더링하는 과정이 더해지는데, 이 흐름은 실제 브라우저가 하는 일과 닮아 있었다.

화면을 그려내는 챕터에 들어서는 특히 Canvas API를 다뤄본 사람이라면 익숙하게 느낄 수 있는데, 축에 대한 정보를 주고 그려내는 방식이 꽤나 닮아 있었다. 파서를 만들어 문서 트리를 구축하고, 이를 통해 노드 트리를 사용하는 과정을 보면서, 웹에디터와 같은 기능을 구현하는 도메인의 회사라면 이 책이 특히 도움이 될 것 같다는 생각이 들었다.

block과 Inline 요소를 특정 조건문을 통해 나누고, 좌표를 통해 레이아웃을 그려내는데, 꽤나 고려해야 할 것이 많았다. 하나만 언급하자면 객체의 세로 위치는 이전 형제 노드가 있는지에 따라 달라질 수 있고, 높이는 당연하게도 모든 자식을 포함할 수 있을 만큼 충분히 커야 한다. 뿐만 아니라 텍스트 줄바꿈을 위한 LineLayout, Inline 요소 배치를 위한 word 단위 측정, 새 줄 생성, background 페인팅까지 이어진다. 여기서부터 브라우저가 단순히 HTML을 읽는 데에 그치는 것이 아니라 레이아웃 엔진을 통해 화면을 구성해 내는 존재라는 것이 온몸으로 느껴졌다.

사용자의 스타일을 적용하는 것도 파싱의 연속이다.

def pair(self):
		prop = self.word()
		self.whitespace()
		self.literal(":")
		self.whitespace()
		val = self.word()
		return prop.casefold(), val

def body(self):
		pairs = {}
		while self.i < len(self.s):
				prop, val = self.pair()
				pairs[prop.casefold()] = val
				self.whitespace()
				self.literal(";")
				self.whitespace()
		return pairs

대략적으로 보면 알 수 있듯이 인라인 스타일을 파싱하는 코드다. property를 파싱하는 함수, 그리고 각각의 property를 구분해 내는 함수로 이해할 수 있다. 이 과정에서 CSS 상속, 캐스케이딩 등의 규칙까지 직접 다뤄보게 된다. 보다 보니 !important가 궁금해졌다. 당연히 한 쌍의 property를 파싱해서 !important라는 문자가 존재하는 경우 우선순위를 높게 잡으면 되지 않을까 싶긴 했는데, 10000만큼 높은 우선순위를 부여하라고 하라는 팁으로 간단히 언급되어 있었다.

자바스크립트 코드를 실행하는 것도 크게 다르진 않다. 예컨대 querySelectorAll 같은 DOM API의 구현을 위해 함수를 정의하여 export 하고, 그 함수를 통해 셀렉터와 매칭되는 모든 노드를 찾아낸다. 여기에 더해 Task Queue, Event Loop, setTimeout, XHR, Same-Origin Policy, postMessage, iframe 통신 등 실제 브라우저 동작에 가까운 이벤트 흐름까지 구현해 보게 된다.

모던 브라우저의 시각적 효과 구현으로 넘어와서는 opacity나 mix-blend-mode, transform과 같은 시각 효과를 적용하기 위해 어떤 과정이 필요한지 Skia와 SDL을 통해 다루고 있다. 레이어를 나누고 합성하고, 어떤 요소는 GPU에서 처리하여 부드러운 애니메이션을 제공하는지 간단히 살펴보게 된다. WebGL, WebGPU, Canvas 같은 그래픽스 API가 왜 중요한지 자연스럽게 연결되는 지점이었다.

접근성에 대한 부분도 후반부에 언급하고 있는데, 줌 기능을 통해 컨텐츠의 글자를 키웠을 때 줄바꿈이 새롭게 바뀌는 건 평소 당연히 받아들이던 일이었지만, 브라우저 개발 관점에서 보면 결국 텍스트 영역의 크기를 다시 계산해 줘야 한다는, 즉 렌더링을 새롭게 해야 한다는 관점에서 접근해야 한다. 키보드 네비게이션이나 포커스 또한 접근과 처리 형식으로 보자면 크게 다르지 않다. 스크린 리더를 위한 Accessibility Tree 구성, 포커스 이동 규칙, aria 속성 처리 등 평소엔 깊이 생각하지 않던 접근성의 내부 구조를 직접 구현하게 되면서, 접근성은 별도의 기능이 아니라 브라우저의 근본적인 기능임을 다시 느끼게 되었다.

그리고 후반부에서 무효화와 점진적 성능의 원칙 등을 다루는 챕터는 특히 흥미로운 대목이었다. 사용자가 입력할 때마다 전체 레이아웃을 다시 계산하면 느릴 수밖에 없다. 이를 해결하기 위해 레이아웃 트리를 캐시하고, 변경된 부분만 다시 계산하는 보호된 필드 기반의 무효화 전략을 이야기하고 있다. 더티 플래그, 종속성 그래프, 멱등성과 결합된 부분 렌더링은 대규모 웹앱 성능 최적화의 근간이 되는 내용이었다. 책의 서두에 브라우저를 만든다는 건 꽤나 복잡한 일이라고 언급한 부분이 있었는데, 이 대목을 보면서 정말 세밀하게 접근해야 될 일이구나 싶은 생각이 들었다.

이 책은 특히 웹 프론트엔드 개발자에게 추천하고 싶은 책이다. 앞서 말했던 것처럼 글로서 접하는 지식이 아니라 구현을 통해 체득하는 경험을 할 수 있기 때문이다. 모던 웹 개발 환경에서는 React나 Vue 기반에서 작업을 하고, 이미 구현된 훌륭한 라이브러리 위에서 작업을 하는 경우가 대부분일 텐데, 이 책의 제목처럼 ‘그 밑바닥’을 훑어보는 경험을 직접 하기에 적절한 책이라는 생각이 든다. 단순히 기술 지식을 얻는 것을 넘어, 이제는 없어서는 안 될 웹이라는 거대한 플랫폼이 어떤 철학과 구조 위에 세워져 있는지를 느낄 수 있는 경험이었다.

브라우저는 1천만 줄의 코드가 있기에 움직인다고 한다. 우리는 브라우저를 너무 당연하게 사용했고, 개발할 때 당연한 기능, 응당 있어야할 기능이라고 받아들인다. 브라우저가 없어져봐야 브라우저의 고생을 알지 않을까? 마치 자취를 처음하고 빨래와 청소가 자동이 아니라 어머니의 노력이었음을 알게되는 것과 같다.

밑바닥부터 시작하는 웹 브라우저

"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."

시작에 앞서

프론트엔드, 웹을 다루다보면 브라우저에 대한 이해가 필요해진다. JavaScript Deepdive라는 책에서도 꽤 많은 분량을 할애해서 브라우저에 대해 다룬다. 브라우저 안에서 JS 엔진이 돌아가고 있기에 뗄 수 없는 관계다. 따라서 브라우저를 이해하면 더 멋진 개발자가 될 수 있다. (?)

브라우저를 이해하는 일이 필요하다면 브라우저를 직접 만들어보면 될 일, 프로그래밍쪽은 이런 책들이 꽤나 많다. 인터프리터를 만들어보기는 책, SICP 같은 책들도 그런 느낌이다. 아무튼 이 책은 브라우저를 최소한의 기능으로 만들어보면서 배우는 책이다.

난이도

아무튼 난 어려웠다.

이 책의 예제는 파이썬으로 진행된다. 많은 사람들이 사용하는 언어이고 어려운 문법을 사용하지 않기 때문에 언어적인 문제는 없다.

그렇지만 책에서 얘기하는 '프로그래밍 경험이 많지 않아도 핵심 원리를 이해하면서 웹페이지 로딩 과정 확인하기'는 쉽지 않다.

내용도 많고 누구나 쉽게 이해하면서 할 순 없다. (일단 나는 그랬다.) 이해가 안되도 일단 해보고 다시 보면서 추가 공부를 하면 된다. 좋은 기반이 될 책이다.

만들면서 배우기

이 책의 목차는 브라우저의 동작 순서랑 비슷하게 진행된다. 초반엔 서버에서 HTTP로 또는 HTTPS로 웹 페이지를 받아와서 Python thinker를 통해 텍스트를 뿌려보는 일을 한다. 나는 이 과정에서 겉핥기로 알았던 네트워크 지식의 밑바닥을 봤다. 계층과 프로토콜로 추상화된 네트워크 동작 원리를 일단 해보면서 알 수 있었다.

텍스트를 뿌리고, 텍스트가 많아지니 스크롤 기능을 시작으로 여러 브라우저 인터렉션을 구현한다. HTML을 파싱해서 DOM 트리, CSS 스타일링을 하기도 하고, 후반에는 폼, JS 실행, 쿠키 등도 다룬다.
우리가 당연하게 여겼던 브라우저의 기능을 직접 만들어보며 브라우저에게 감사하는 마음을 갖게 해주는 책이다.

마무리

이 책은 컴퓨터 공학을 공부하는 학생이라면 누구나 봐도 도움이 될 책같다. 주니어 개발자도 보면서 지식을 쌓기 정말 좋아보인다.
개발자의 시각에서 브라우저 성능, 구조를 전체적으로 톺아보는 책이고, CS의 관점에서 파싱, 레이아웃 만들기, 이벤트 등에 대해 다시 공부할만한 소스가 되어줄 좋은 시발점이다.

"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."

이미 웹 프론트에 대해 알고 계신 분들 중에서는 성능 개선, 기본 원리에 관심이 있는 분들께 추천드립니다. 하지만 책 이름이 '밑바닥부터 시작하는' 인 만큼 초보 개발자분들도 파이썬을 이용해 실습하면서 배워갈 수 있다는 장점이 있기도 합니다. '밑바닥부터 시작하는 웹 브라우저'는 기본적인 프론트엔드 지식이 있으면 좀 더 이해하기 쉬울 것 같습니다. 특히 웹프론트 프로젝트 경험이 없거나, 경험을 더 쌓고 싶을 때 도움이 많이 될 것 같아요 ㅎㅎ

한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬받아 작성된 서평입니다.

웹 브라우저는 현대인의 삶과 떼려야 뗄 수 없는 존재입니다. 스마트폰이나 PC 앞에 앉으면 가장 먼저 마주하는 것이 바로 브라우저이며, 우리는 매일 수십, 수백 개의 웹 페이지를 탐색하며 일상과 업무, 학습을 이어갑니다. 하지만, 이렇게 익숙한 브라우저의 ‘내부 원리’에 대해 알고 있는 사람은 많지 않습니다. 바로 이 궁금증의 심장을 파고드는 책이 “밑바닥부터 시작하는 웹 브라우저”입니다.

이 책은 웹 브라우저의 탄생 배경, 그리고 월드와이드웹의 기본 개념부터 출발합니다. 초반에는 인터넷 역사의 단면, 웹 브라우저와 그 작동 원리에 대한 저자의 경험담과 브라우저의 발전을 통해 ‘브라우저’와 ‘웹’이라는 기술이 우리 삶과 어떻게 연결되어 왔는지 풀어나갑니다. 저자인 파벨 판체카(유타대학교 교수, 웹 브라우저 연구자)와 크리스 해럴슨(구글 크롬 렌더링 엔진 팀 리더)은 실무적 연구와 오랜 경험을 바탕으로 초보자의 눈높이에서 복잡한 원리를 쉽고 친근하게 해설합니다.

책의 가장 독보적인 특징은 실제로 파이썬 코드로 직접 브라우저의 각 기능을 구현해볼 수 있도록 안내한다는 점입니다. HTTP, DNS 요청이 브라우저에서 어떻게 시작되는지, HTML이 어떻게 파싱되고 트리 구조로 조직되는지, 그리고 텍스트나 이미지가 화면에 렌더링되는 과정까지 단계별로 실제 브라우저를 만들어가면서 원리를 몸으로 느낄 수 있게 구성되어 있습니다. 단순히 이론적 개념을 나열하는 것이 아니라, 개발자가 직접 실습하며 체험할 수 있도록 ‘실전 중심 학습서’로 접근합니다.

각 장에서는 다음과 같이 주요 기술적 요소들을 집중적으로 다룹니다.

• 브라우저의 요청/응답 구조: 사용자가 URL을 입력하면 DNS와 HTTP 프로토콜을 통해 서버와 연결되고, 응답이 도착하기까지의 과정을 상세히 보여줍니다.
• HTML 파싱 및 DOM 트리 변환: 텍스트 형태의 HTML이 어떻게 파싱되어 메모리 내 트리가 되고, 여기서 각 요소별 스타일, 속성 적용 과정까지 파헤칩니다.
• 화면 렌더링과 JavaScript·CSS의 역할: 브라우저가 어떻게 화면을 조작하고, 동적인 UI는 JavaScript, CSS와 어떤 상호작용을 거쳐 실현되는지 코드 레벨에서 살펴봅니다.
• 유저 인터랙션, 이벤트 핸들링: 마우스 클릭, 스크롤, 입력 등의 사용자 인터페이스 반응이 코어 엔진에서 어떻게 처리되는지 흐름을 그려줍니다.
• 최신 브라우저의 고급 기능과 네트워크 최적화: 최신 웹 브라우저에 적용되는 고속 렌더링, 병렬 처리, 웹 표준 대응, 확장 기능 개발 등 실전 팁도 담고 있습니다.

이 책의 묘미는, 웹 브라우저라는 거대한 시스템이 사실상 1천만 줄이 넘는 코드로 이루어진 복잡한 유기체임을 하나하나 뜯어보면서, 그 아래에서 동작하는 각각의 알고리즘과 기술적 매커니즘을 눈으로 확인할 수 있다는 점입니다. 평소에는 너무나도 익숙해서 무심히 지나쳤던 ‘페이지 로딩’, ‘스크롤’, ‘렌더링’ 등이 어떻게 작동하는지, 개발자로서 직접 만들어볼 수 있기 때문에 웹에 대한 감각과 통찰력을 키울 수 있습니다.

초심자부터 중급 개발자까지, 이론적 지식이 부족해도 나만의 브라우저를 만들어보는 실습 과정을 따라갈 수 있도록 구성되어 프로그래밍 경험이 많지 않아도 도전할 수 있습니다. 실제 웹 서비스를 개발하거나, 성능 최적화 혹은 프런트엔드의 기술적 토대를 이해하고 싶은 사람들에게 충분한 영감을 전달해줍니다.

또한 이 책은 단순 학습서가 아닌, 웹 기술의 역동성, 그 안에서 작동하는 다양한 프로토콜의 긴밀한 협력, 그리고 개발자들이 느끼는 도전과 성장의 순간을 생생하게 그려냅니다. 직접 브라우저를 만드는 과정에서 각 기능의 구현 원리를 천천히 이해함으로써, 오늘날의 크롬, 파이어폭스, 브레이브 등 다수의 웹 브라우저가 어떻게 탄생되고 발전했는지, 실전적 통찰을 얻게 됩니다.

마지막으로, 이 책은 기술서이자 탐험기입니다. 웹이라는 거대한 생태계, 브라우저라는 복잡한 도구의 심장부를 파고들며, 독자로 하여금 웹을 단순히 사용하는 데서 벗어나 그 원리와 구조를 온전히 이해하도록 돕습니다. 기존에 웹을 기술적으로만 접근했다면, 이 책은 직접 코드를 써가며 하나씩 쌓아 올리는 사이에, 웹에 대한 시야를 더욱 확장시켜 줄 것입니다.

총평
밑바닥부터 시작하는 웹 브라우저는 웹 개발의 핵심 원리, 브라우저의 내부 동작, 그리고 그 구성요소에 대한 통찰을 쉽고 흥미롭게 풀어낸 책입니다. 직접 브라우저를 만들어보는 실습과정과 실무자의 경험이 어우러져 있어, 웹·소프트웨어 엔지니어는 물론 학생, 초보 개발자에게도 가치 있는 탐험이 될 것입니다.

웹의 작동 원리에 대해 궁금함이 있다면, 웹의 미래를 내 손으로 파고들어보고 싶다면, 반드시 한번 읽어볼 가치가 충분한 책입니다.

"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."

웹 브라우저. 우리가 매일 사용하는 가장 익숙한 도구이지만, 정작 그 속이 어떻게 작동하는지는 생각보다 잘 알지 못한다.

이번에 읽은 "밑바닥부터 시작하는 웹 브라우저"는 그런 궁금증의 심장을 직접 열어보는 책이다.

1천만 줄이 넘는 코드로 이루어진 거대한 시스템 속으로, 한 줄 한 줄 따라가며 그 구조를 이해하게 만든다.
 

이 책은 이론서는 아니지만 월드와이드웹(WWW)과 웹 브라우저의 태동부터 개념적인 부분을 먼저 소개하고 있다. 파이썬으로 직접 브라우저를 구현하면서, 우리가 평소 무심히 지나치던 웹의 작동 원리를 손끝으로 체험하게 한다. 각 과정을 통해 HTML을 다운로드하고 텍스트를 그려보고 스크롤을 구현하며, 점차 “브라우저”라는 유기체가 만들어지는 과정을 밟아간다.

웹 브라우저는 HTML 태그, 지시어, JavaScript, CSS 등으로 구성된 요소들을 해석해 화면에 렌더링한다. 이 과정에서 서버와 클라이언트 간의 요청과 응답, 이벤트 처리, 값의 변화를 연결하며 기술적 상호작용을 완성한다.
 

Part 1 페이지 로딩에서는 서버에 연결하고 데이터를 받아오는 흐름을 다룬다. DNS, HTTP 요청, 그리고 암호화된 연결까지 — 평소 개발자가 한 줄의 코드로 호출하던 네트워크 동작의 밑바탕을 낱낱이 보여준다. 이후 "화면에 그리기"와 "텍스트 포맷팅"에서는 창을 띄우고 글자를 배치하며, 눈에 보이는 렌더링의 첫 걸음을 체험한다.

Part 2 문서 표시로 넘어가면 본격적으로 브라우저의 엔진이 등장한다.
 

DOM 트리를 구축하고, CSS 스타일을 적용하며, 페이지를 그려내는 과정이 세밀하게 펼쳐진다. 마치 브라우저의 뼈와 근육, 그리고 피부가 하나씩 덧입혀지는 듯한 느낌이다. 과거에 웹 페이지를 크롤링하고 데이터를 추출하는 과정에서 알게 된 DOM 트리에 대한 내용을 이번 기회에 제대로 알 수 있었다.

Part 3 애플리케이션 실행은 웹이 살아 움직이는 순간을 보여준다.

폼(form) 데이터 전송, 자바스크립트 실행, 이벤트 처리, 쿠키와 보안정책 등 브라우저와 서버의 관계가 한층 더 입체적으로 다가온다. 읽다 보면 우리가 매일 누르는 ‘로그인’ 버튼 하나에도 얼마나 많은 동작이 숨어 있는지 깨닫게 된다.

마지막 Part 4 모던 브라우저 기능에서는 GPU 가속, 애니메이션, 접근성, iframe, 스레드 기반 렌더링 등 현대적인 브라우저의 복잡한 구조가 이어진다. 단순히 결과물을 보여주는 데 그치지 않고, 어떻게 최적화되고 어떤 철학으로 작동하는지까지 함께 탐색한다.

이 책을 읽으며 느낀 것은 단 하나였다.

“브라우저를 이해하는 순간, 웹이 완전히 다르게 보인다.”

단순히 HTML과 CSS를 다루는 개발자를 넘어, 웹이라는 공간을 구성하는 거대한 시스템의 질서와 아름다움을 엿볼 수 있었다. "밑바닥부터 시작하는 웹 브라우저"는 단순한 프로그래밍 학습서가 아니다. 브라우저라는 세계의 구조를 하나씩 조립하며, 기술 속에 숨어 있는 논리와 예술성을 동시에 발견하게 한다.

웹의 근본을 이해하고 싶은 개발자, 혹은 “작동하는 원리를 알고 싶다”는 순수한 호기심을 가진 독자라면 꼭 읽어보길 권한다. 지식보다는 깨달음이 남는 책이다.

한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다.

표지는 레고 피규어 한 명이 의자에 앉아 컴퓨터를 사용하는 모습입니다.ㅎㅎ 키보드를 두드리고 있고 컴퓨터 본체와 벽, 바닥 역시 레고 블록으로 구성되어 있습니다.

먼저 목차입니다.

들어가며

웹 개발을 하다 보면 브라우저라는 도구가 너무나 당연하게 곁에 있습니다. 하지만 정작 "브라우저는 내부에서 어떻게 동작할까?"라는 질문에는 쉽게 답하지 못했습니다. 단순히 주소창에 URL을 입력하면 페이지가 뜬다는 사실만 알 뿐, 그 사이에 어떤 일이 일어나는지는 늘 미스터리였지요. 그래서 이번에 접한 『밑바닥부터 시작하는 웹 브라우저』는 제게 큰 호기심을 불러일으켰습니다. 단순한 이론서가 아니라, 실제로 파이썬으로 브라우저를 하나씩 구현하며 구조를 이해할 수 있다는 점이 매력적이었습니다.

책 개요

이 책은 Jonathan Engelsma가 집필하고, 한빛미디어에서 출간된 책입니다. 제목 그대로 웹 브라우저의 페이지 로딩부터 렌더링, 보안, 접근성, 성능 최적화까지 브라우저 내부의 전 과정을 다룹니다. 구글 크롬이나 파이어폭스 같은 대형 브라우저의 코드를 직접 볼 수는 없지만, 이 책은 그 복잡한 원리를 작은 단위로 쪼개어 설명하며 "나만의 브라우저 만들기"를 실습할 수 있게 안내합니다.

인상 깊었던 부분

책은 크게 네 부분으로 나뉩니다.

Part 1

페이지 로딩에서는 서버와 연결하고, 요청과 응답을 주고받으며, HTML을 읽어 화면에 그리는 기본 과정을 다룹니다. 이 과정을 따라가다 보니, 평소 당연하게만 보던 브라우저의 첫 화면 출력이 얼마나 많은 단계를 거치는지 깨달을 수 있었습니다.
Part 2

문서 표시에서는 DOM 트리 구축, 레이아웃 계산, 스타일 적용 등 "보이는 웹페이지"가 만들어지는 과정을 설명합니다. 특히 CSS의 상속과 캐스케이딩 규칙을 직접 코드로 적용해보는 부분이 흥미로웠습니다. 단순히 개념이 아니라 "왜 이런 규칙이 필요한지" 이해할 수 있었습니다.

Part 3

애플리케이션 실행은 자바스크립트 실행, 폼 제출, 이벤트 처리 등을 다룹니다. 개인적으로 이 부분이 가장 인상 깊었는데, 제가 그동안 ‘브라우저가 그냥 알아서 해주겠지’ 하고 넘겼던 로직들이 실제로는 얼마나 세밀한 메커니즘 위에서 동작하는지 알게 되었습니다.

Part 4

모던 브라우저 기능에서는 GPU 가속, 애니메이션, 접근성, iframe 처리 등 최신 브라우저들이 제공하는 고급 기능까지 다룹니다. 특히 접근성 챕터는 기술 구현뿐 아니라 사용자를 배려하는 관점에서 읽히는 부분이어서, 앞으로 웹을 만들 때 제가 놓치고 있던 시선을 떠올리게 했습니다.

추천 독자

이 책은 단순히 웹 개발자가 아니라, 브라우저를 깊이 이해하고 싶은 모든 분께 유익합니다.

프론트엔드 개발자

내가 짠 코드가 브라우저 내부에서 어떤 과정을 거쳐 실행되는지 알고 싶을 때.

컴퓨터 과학 전공자나 학생

운영체제, 네트워크, 그래픽스가 한 데 어우러진 복합 시스템으로서 브라우저를 탐구하고 싶을 때.

호기심 많은 개발자

단순히 API를 사용하는 수준을 넘어 "그 밑단"을 알고 싶은 분.

마무리

『밑바닥부터 시작하는 웹 브라우저』는 단순한 학습서가 아니라, "보이지 않던 세계를 보이게 해주는 안내서"였습니다. 읽으면서 저 역시 앞으로 코드를 작성할 때 더 근본적인 질문을 던지고, 브라우저의 동작을 의식하며 효율적인 개발을 하고 싶다는 다짐을 하게 되었습니다.

이 책은 이런 분들께 추천합니다.

웹 브라우저의 내부 구조를 깊이 이해하고 싶은 개발자
단순히 웹을 ‘사용’하는 수준을 넘어, 그 원리를 알고 싶은 전공자·학생
성능, 보안, 접근성까지 고려한 진짜 ‘웹 기술자’로 성장하고 싶은 분