웹은 어떻게 작동하는가

챕터

개요

주소창에 google.com을 치고 엔터를 누르면, 화면에 페이지가 뜨기까지 무슨 일이 벌어질까요?
이 안내서는 그 1초 남짓한 시간 안에 일어나는 일을 하나하나 풀어냅니다.

누구를 위한 안내서인가

• 웹/프로그래밍을 처음 접하는 분
• 코드는 짜 봤지만 "브라우저 뒤에서 뭐가 도는지" 막연한 분
• HTML은 써 봤지만 HTTP·DNS·서버가 어떻게 엮이는지 모르는 분

필요한 사전지식: 거의 없습니다. 컴퓨터로 웹사이트를 열어 본 경험이면 충분합니다.

실습은 브라우저와 메모장(또는 코드 에디터)만 있으면 따라올 수 있습니다. 일부 장에서 아주 간단한 명령어를 쓰지만, 안 해도 이해에는 지장 없습니다.

전체 그림: 웹 요청 한 번의 여정

웹사이트를 여는 일은 사실 여러 단계의 파이프라인입니다. 이 안내서 전체가 아래 그림 한 장을 풀어 설명하는 것이라고 봐도 됩니다. 각 부에서 "지금 어느 단계를 다루는지" 이 그림 위에 표시해 드립니다.

flowchart LR
    U["사용자<br/>주소 입력"]:::user
    DNS["① DNS 조회<br/>이름 → 주소"]:::net
    TCP["② 연결 수립<br/>TCP / TLS"]:::net
    REQ["③ HTTP 요청<br/>이거 주세요"]:::net
    SRV["④ 서버 처리<br/>응답 만들기"]:::server
    RES["⑤ HTTP 응답<br/>HTML·CSS·JS"]:::net
    REN["⑥ 브라우저 렌더링<br/>화면 그리기"]:::render

    U --> DNS --> TCP --> REQ --> SRV --> RES --> REN
    REN -.->|추가 파일 요청| REQ

    classDef user fill:#fff3b0,stroke:#d4a017,color:#000
    classDef net fill:#cfe8ff,stroke:#2b6cb0,color:#000
    classDef server fill:#e9d8fd,stroke:#6b46c1,color:#000
    classDef render fill:#c6f6d5,stroke:#276749,color:#000

색상 약속: 사용자 입력 = 노랑, 네트워크 단계 = 파랑, 서버 = 보라, 화면 그리기 = 초록. 안내서 내내 같은 색을 씁니다.

부별 구성

이 안내서로 만드는 것 (실습 프로젝트)

안내서 전체를 관통하는 하나의 누적 프로젝트가 있습니다: "나를 소개하는 작은 웹페이지".

• 4부에서 HTML로 뼈대를 세우고
• 5부에서 CSS로 꾸미고 JavaScript로 버튼을 동작시키고
• 6부에서 브라우저가 그것을 어떻게 그리는지 이해하고
• 7부에서 이 페이지가 인터넷에 올라가 남에게 보이기까지의 전체 흐름을 다시 봅니다.

각 부의 코드는 복사해서 바로 돌아갑니다. 메모장에 붙여 넣고 .html로 저장한 뒤 브라우저로 열면 끝입니다. 별도 설치가 필요 없습니다.

학습법 추천

1. 순서대로 읽으세요. 뒤 장은 앞 장의 개념 위에 쌓입니다.
2. 실습 코드는 눈으로만 읽지 말고 직접 저장해서 열어 보세요. "내가 친 게 화면에 뜨는" 경험이 가장 강력한 동기입니다.
3. 모르는 용어가 나오면 멈추지 말고 일단 넘어가세요 — 대부분 그 자리나 다음 장에서 풀어 설명합니다.
4. 다이어그램의 색과 번호(①~⑥)를 따라가면 "지금 전체에서 어디쯤인지" 길을 잃지 않습니다.

자, 시작합니다. → 1부 · 웹이란 무엇인가