웹은 어떻게 동작할까 — 브라우저가 HTML을 그리는 순서

Q: 화면의 코드와 view-source:로 본 코드가 왜 다른가요?

view-source:는 서버가 보낸 원본 HTML이고, 개발자 도구의 Elements 탭은 그 HTML이 DOM이 된 모습입니다. JS가 DOM을 바꾸면 둘이 달라집니다.

한 줄 요약 — 브라우저는 서버에서 받아온 HTML 문자열을 DOM이라는 트리 구조로 바꾸고, CSS와 합쳐 화면에 그립니다. JS는 그 위에서 동작합니다.

학습 목표#

웹페이지가 화면에 나타나기까지의 큰 흐름을 한 문단으로 설명할 수 있다.
클라이언트와 서버, HTTP의 역할을 구분할 수 있다.
HTML 파일과 DOM이 어떻게 다른지 말할 수 있다.
개발자 도구의 Network 탭에서 첫 요청과 응답을 직접 본다.

오늘의 비유 — 식당에 주문서를 보내는 일#

웹은 식당과 닮았습니다. 손님(브라우저)은 카운터에 가서 메뉴 이름을 적은 주문서를 건넵니다. 주방(서버)이 그 주문을 받고, 미리 준비해둔 음식을 접시에 담아 손님에게 내어줍니다. 손님은 받은 음식을 자기 식탁(화면)에 차립니다.

브라우저가 하는 일이 거의 이와 같습니다. 우리가 주소창에 example.com을 치면, 브라우저는 그 주소를 가진 서버에 "이 페이지의 HTML을 주세요"라는 요청을 보냅니다. 서버는 HTML 파일을 응답으로 돌려주고, 브라우저는 그 글자 덩어리를 해석해서 우리가 보는 페이지로 만들어 식탁에 차립니다.

핵심 개념#

클라이언트와 서버#

클라이언트: 무언가를 요청하는 쪽. 우리가 쓰는 브라우저(크롬·사파리·엣지)가 클라이언트입니다.
서버: 요청을 받고 응답을 돌려주는 컴퓨터. 보통 24시간 켜져 있고 인터넷에 연결돼 있습니다.

이름이 거창해 보이지만, 서버도 결국은 컴퓨터입니다. 내 노트북도 설정을 바꾸면 잠깐 서버가 될 수 있습니다.

HTTP — 주문서와 응답의 약속#

이름부터 풀어보면 HTTP는 HyperText Transfer Protocol, "하이퍼텍스트를 주고받는 약속"이라는 뜻입니다. 1990년 팀 버너스리(Tim Berners-Lee)가 문서끼리 링크로 이어지는 시스템을 설계하면서, 그 문서들이 인터넷을 오갈 형식으로 정의한 것이 시작입니다.

브라우저와 서버가 주고받는 말의 형식을 HTTP라고 합니다. 사람이 식당에서 "비빔밥 하나요" 하듯, 브라우저는 서버에게 일정한 형식으로 묻습니다.

GET /index.html HTTP/1.1
Host: example.com

서버는 비슷한 형식으로 답합니다.

HTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE html>
<html>...

200은 "요청이 잘 처리됐다"는 응답 코드입니다. 404는 "그런 메뉴는 없다"는 뜻이고, 500은 "주방에 문제가 생겼다"는 뜻이라고 생각하면 편합니다.

HTML이 DOM이 되는 순간#

HTML은 HyperText Markup Language, "글을 잇는(하이퍼) 표시(마크업) 언어"입니다. 종이 위에 형광펜으로 "여긴 제목, 여긴 본문" 하고 표시하는 것처럼, 일반 글자에 <h1>·<p> 같은 표지를 둘러 의미를 입힌 텍스트입니다. HTTP와 같은 1990년대 초의 발명품으로, 둘은 함께 등장한 한 쌍입니다.

서버가 보낸 것은 글자 덩어리, 즉 HTML 문자열입니다. 브라우저는 이 문자열을 한 글자씩 읽으면서 DOM(Document Object Model)이라는 트리 구조를 만듭니다. 이 트리가 만들어진 다음에야 화면을 그릴 준비가 됩니다.

<html>
  <body>
    <h1>안녕</h1>
    <p>처음 만드는 웹페이지</p>
  </body>
</html>

이 HTML이 만들어내는 DOM은 대략 이렇게 생긴 트리입니다.

html
└── body
    ├── h1   "안녕"
    └── p    "처음 만드는 웹페이지"

화면에 보이는 결과물은 HTML 그 자체가 아니라, HTML을 해석해 만든 DOM입니다. 둘은 비슷해 보여도 다른 단계의 존재입니다.

CSS와 JS는 어디서 동작하나#

브라우저는 HTML을 받으면서 동시에 CSS도 읽어들이고, 두 정보를 합쳐 "어떤 요소가 어떻게 생겼는지"를 결정한 다음 화면에 그립니다. JavaScript는 그렇게 만들어진 DOM을 나중에 들여다보고 바꿀 수 있습니다. 본 시리즈에서는 HTML과 CSS만 다루지만, JS가 등장할 자리는 마지막의 마지막입니다.

함께 따라하기 — Network 탭으로 첫 요청·응답 직접 보기#

브라우저 안에서 위 흐름을 직접 볼 수 있습니다. 크롬 기준으로 따라해 보세요.

새 탭을 열어 https://example.com으로 이동합니다.
키보드 F12(맥은 ⌥⌘I)를 눌러 개발자 도구를 엽니다.
상단 탭에서 Network를 고릅니다.
페이지를 한 번 새로고침합니다.
목록 맨 위의 example.com 항목을 클릭합니다.

오른쪽에 Headers, Response 같은 탭이 나타납니다. Headers에서 Request URL과 Status Code: 200 OK를 확인할 수 있고, Response에서는 서버가 실제로 돌려준 HTML 글자 덩어리를 볼 수 있습니다. 이 글자 덩어리가 브라우저 안에서 DOM이 된 결과를 보고 싶다면 Elements 탭을 누르면 됩니다.

흔한 실수 3가지#

1. HTML 파일과 웹페이지를 같은 것으로 본다#

"HTML 파일을 고치면 곧 웹페이지가 바뀐다"는 말은 절반만 맞습니다. 실제로 보이는 것은 브라우저가 HTML을 해석해 만든 DOM이고, JS가 DOM을 바꾸면 원본 HTML과 화면이 다르게 보일 수 있습니다. 뷰소스(view-source:)로 본 코드와 Elements 탭의 코드가 다를 때 당황하지 않으려면 이 차이를 알아두는 게 좋습니다.

2. 서버가 매번 새 HTML을 만든다고 생각한다#

모든 사이트가 그렇지는 않습니다. 정적 사이트는 미리 만들어 둔 HTML 파일을 그대로 돌려줍니다. 동적 사이트는 요청이 올 때마다 데이터베이스에서 정보를 꺼내 새 HTML을 만들어 돌려줍니다. 본 블로그는 정적 사이트입니다. 이 차이는 속도·비용·검색 노출에 큰 영향을 줍니다.

3. DOM과 HTML이 같은 것이라고 믿는다#

HTML은 글자 덩어리, DOM은 트리 자료구조입니다. 처음에는 둘이 같아 보여도, JS가 한 번 실행되면 DOM은 HTML 원본과 달라질 수 있습니다. "원본"이 어디 있는지 헷갈리는 순간 디버깅이 어려워지니, 둘을 분리해서 머리에 두세요.

오늘 배운 것 체크리스트#

브라우저가 무엇을 받아 무엇을 만들어내는지 한 문단으로 설명할 수 있다.
HTTP의 요청과 응답을 개발자 도구에서 직접 본 적이 있다.
상태 코드 200·404·500의 의미를 안다.
HTML과 DOM이 어떻게 다른지 안다.

자주 묻는 질문#

Q. 같은 사이트가 매번 같은 모습으로 보이는데, 서버는 매번 다른 일을 하나요?

A. 정적 사이트라면 같은 파일을 매번 그대로 돌려줍니다. 동적 사이트라면 매번 다른 결과를 만들어 돌려줍니다. 우리가 만들 첫 사이트는 정적 사이트입니다.

Q. 화면의 코드와 view-source:로 본 코드가 왜 다른가요?

A. view-source:는 서버가 보낸 원본 HTML이고, 개발자 도구의 Elements 탭은 그 HTML이 DOM이 된 모습입니다. JS가 DOM을 바꾸면 둘이 달라집니다.

Q. 인터넷 없이도 HTML 파일이 동작하나요?

A. 동작합니다. 내 컴퓨터의 HTML 파일을 브라우저에 끌어다 놓으면 그대로 보입니다. 다만 외부 이미지·CSS·JS 같은 자원을 인터넷에서 가져오는 부분은 끊긴 채로 보입니다.

다음 시간 예고#

내일은 개발 환경 셋업 — VS Code, Live Server, 브라우저 개발자 도구를 다룹니다. 메모장으로 HTML을 만드는 시대는 지났습니다. 가벼운 도구 몇 개로 작업 속도가 두 배가 되는 셋업을 함께 만듭니다.