04. 동화로 이해하는 웹 브라우저의 작동 원리

프로덕트 디자이너의 개발 공부

옛날 옛적, 정보를 모아 사람들에게 보여주는 ‘브라우저 왕국’이 있었어. 이 왕국에는 세 명의 친구, HTML, CSS, 그리고 JavaScript가 살고 있었지. 하지만 이들이 단순히 정보를 보여주는 방식은 정말 마법 같았어. 그 마법 뒤에는 숨겨진 규칙과 과정들이 있었지. 오늘은 그 비밀을 엿보러 가보자.

HTML: 왕국의 설계도

브라우저 왕국에서 모든 것이 시작되는 곳은 HTML이야. HTML은 말하자면 왕국의 설계도 역할을 하지. 예를 들어, 궁전 안에 거실, 주방, 침실 같은 방들이 어떻게 배치될지를 결정하는 거야.

예를 들어, HTML이 설계한 건물의 방들은 이렇게 생겼어:

 • 거실(메인 콘텐츠): <div>

 • 침실(특별한 정보): <section>

 • 부엌(검색 창): <input>

“이 방은 제목으로 쓰일 거야!” 하고 HTML이 이렇게 외쳤어:

그런데 그냥 방만 만들어놓고 끝낼 순 없잖아?

그래서 HTML은 각각의 방에 이름표를 붙여주기로 했어. 예를 들어, 도서관 방에는 <section>이라는 이름표를, 테이블이 있는 곳엔 <table>이라는 이름표를 붙였지.

 • 이렇게 만든 설계도가 바로 DOM(Document Object Model) 트리로 변환돼.

DOM 트리는 왕국의 모든 방(요소)들이 연결된 지도를 만들어줘.

“내가 만든 설계도를 따라, 각 방을 알아볼 수 있게 만들어줄게.” HTML은 말했어.

---

CSS: 색과 스타일로 왕국을 꾸미다

하지만 HTML이 만든 방은 전부 하얀색 벽에 아무 장식도 없는 상태였어. 주민들은 말했어.

“이 방들이 너무 삭막하잖아! 조금 더 예쁘게 꾸밀 순 없나요?”

그때 CSS라는 화가가 등장했어.

CSS는 색과 디자인으로 HTML의 방을 꾸미는 일을 맡았지.

예를 들어, HTML이 만든 제목 <h1>을 이렇게 꾸몄어:

그러자 왕국의 주민들은 감탄했어.

“와! 제목이 파란색으로 바뀌었어. 게다가 더 크고 멋져졌네!”

CSS는 반복적으로 디자인을 적용할 수 있는 규칙도 만들었어. 예를 들어, 왕국의 모든 제목을 같은 스타일로 꾸미고 싶다면 이렇게 말했지:

HTML도 대답했어.

“좋아, 이제 내가 만든 제목에 이 규칙을 적용할게!”

이렇게 CSS 덕분에 왕국은 훨씬 더 화려해졌어. 하지만 여전히 문제가 있었어. 방들은 고정돼 있고, 어떤 상호작용도 없었거든. 그때 JavaScript가 나타났어.

---

JavaScript: 마법의 손길로 움직임을 더하다

JavaScript는 마법의 책을 들고 등장했어.

“이제 내가 방에 생명을 불어넣어줄게!”

HTML과 CSS만으로는 불가능했던 움직임과 상호작용을 만들어냈지. 예를 들어, JavaScript는 버튼을 클릭하면 무언가가 일어나게 만들었어.

HTML이 만든 버튼:

CSS가 버튼을 꾸몄어:

JavaScript는 이렇게 말했어:

사람들은 깜짝 놀랐어.

“버튼을 누르니 알림창이 뜨네? 이게 바로 마법이구나!”

JavaScript는 DOM 트리를 탐험하며 특정 방(요소)을 찾아내고, 그 방에 특별한 행동을 추가할 수 있었어.

“이 버튼을 클릭하면 배경색이 변하게 해줄게!”

틈새 이론 설명: 브라우저가 이 모든 것을 처리하는 법

이제 궁금하지 않아? 브라우저 왕국은 어떻게 HTML, CSS, JavaScript를 조화롭게 처리했을까?

브라우저는 세 단계를 거쳐 일을 처리해.

 1. HTML 파싱:

HTML을 읽고, DOM 트리를 생성해. 각 방(요소)의 위치와 관계를 파악하는 과정이지.

 2. CSS 파싱:

CSS를 읽어, HTML에 입힐 스타일을 계산해.

“이 방은 파란색, 저 방은 빨간색!” CSS가 이렇게 명령을 내리지.

 3. 렌더 트리 생성:

DOM과 CSSOM(CSS Object Model)을 합쳐 화면에 표시할 준비를 해.

“이제 모든 방을 꾸미고 움직일 준비가 끝났어!” 하고 브라우저가 말하는 거지.

9. 마법의 돋보기: 개발자도구의 비밀

브라우저 왕국에는 아주 특별한 마법의 돋보기가 있었어. 이 돋보기를 사용하면 다른 왕국(웹사이트)의 비밀을 훔쳐볼 수 있었지. 이 돋보기의 이름은 개발자도구였어.

개발자도구를 켜는 순간, 브라우저 왕국의 주민들은 깜짝 놀랐어.

“이 돋보기를 통해 저 궁전이 어떻게 만들어졌는지 전부 알 수 있잖아!”

돋보기는 HTML, CSS, JavaScript의 모든 작업물을 보여줬어.

 • HTML: “저기, 궁전의 설계도가 보여! 제목은 <h1>이고, 그 아래 <p> 태그로 설명을 썼네!”

 • CSS: “이 방은 파란색으로 칠했군. color: blue;라는 규칙을 썼어.”

 • JavaScript: “버튼을 클릭하면 이미지가 바뀌게 했네. addEventListener가 있잖아!”

돋보기를 활용한 예를 볼까?

예시 1: 버튼의 위치 확인

어느 날 주민들은 궁금했어. “왜 버튼이 왼쪽 구석에만 있어? 중앙으로 옮기려면 어떻게 해야 하지?”

돋보기를 통해 HTML을 살펴봤어:

그리고 CSS를 수정했지:

“됐다! 이제 버튼이 딱 중앙에 왔어!”

예시 2: 누가 내 웹사이트를 느리게 만들었나?

주민들은 웹사이트가 느리다고 느꼈어. 돋보기를 사용해 네트워크 탭을 열어봤지.

“어? 여기 큰 이미지 파일이 로딩되는데 5초나 걸리고 있잖아! 파일 크기를 줄여야겠어.”

---

틈새 이론 설명: 개발자도구의 구조

마법의 돋보기는 다양한 기능을 가지고 있어. 왕국의 주민들이 이것들을 배워두면 훨씬 효율적으로 문제를 해결할 수 있지!

 1. Elements 탭:

HTML과 CSS를 실시간으로 확인하고 수정할 수 있어. 방의 이름표를 바꾸거나, 벽 색깔을 바꿀 때 유용해.

 2. Console 탭:

JavaScript의 마법을 테스트할 수 있는 공간이야.

“여기에서 버튼 클릭 기능을 한번 실험해볼까?”

 3. Network 탭:

왕국에 들어오는 모든 자원을 추적할 수 있어. 느리게 로딩되는 방(파일)이 있으면 바로 알아낼 수 있지.

 4. Performance 탭:

왕국이 얼마나 빠르게 움직이는지 보여줘.

“이 왕국에서 마법을 너무 많이 쓰고 있는 건 아니야?” 하고 점검할 때 유용하지.

---

마무리: 왕국의 비밀을 탐구하다

개발자도구는 브라우저 왕국이 만든 가장 강력한 도구 중 하나였어. 이 도구 덕분에 주민들은 자신이 만든 궁전을 개선하거나, 다른 왕국에서 배운 걸 자신의 왕국에 적용할 수 있었지.