1부 · 웹이란 무엇인가
← 목차로 | 다음: 2부 · 도메인과 DNS →
인터넷과 웹은 같은 말이 아니다
많은 분이 "인터넷 = 웹"이라고 생각하지만, 둘은 다릅니다.
- 인터넷(internet): 전 세계 컴퓨터를 연결하는 거대한 도로망입니다. 케이블, 와이파이, 통신사 장비 등 물리적·논리적 연결의 총합이에요.
- 웹(Web, 정식 명칭 World Wide Web): 그 도로 위를 달리는 자동차 한 종류입니다. 웹페이지를 주고받는 하나의 서비스죠.
같은 도로(인터넷) 위에는 웹 말고도 이메일, 영상 통화, 게임 데이터, 앱 동기화 같은 다른 자동차들도 함께 달립니다. 이 안내서는 그중 웹이라는 자동차에 집중합니다.
비유: 인터넷은 전기 배선이고, 웹은 그 전기로 켜지는 전등 하나입니다. 같은 배선에 냉장고(이메일)도, TV(영상)도 물려 있죠.
웹의 두 주인공: 클라이언트와 서버
웹에서 일어나는 거의 모든 일은 두 역할 사이의 대화입니다.
- 클라이언트(client): 요청하는 쪽. 보통 여러분의 브라우저입니다. "이 페이지 주세요"라고 부탁합니다.
- 서버(server): 응답하는 쪽. 어딘가에 항상 켜져 있는 컴퓨터로, 요청을 받으면 해당하는 자료를 돌려줍니다.
flowchart LR
C["클라이언트<br/>(내 브라우저)"]:::user
S["서버<br/>(항상 켜진 컴퓨터)"]:::server
C -->|"① 이 페이지 주세요 (요청)"| S
S -->|"② 여기 있습니다 (응답)"| C
classDef user fill:#fff3b0,stroke:#d4a017,color:#000
classDef server fill:#e9d8fd,stroke:#6b46c1,color:#000
이 단순한 "요청 → 응답" 한 쌍이 웹의 심장입니다. 페이스북을 열든, 유튜브를 보든, 쇼핑을 하든, 그 바닥에는 이 주고받음이 수없이 반복되고 있을 뿐입니다.
식당 비유가 가장 잘 맞습니다. 여러분(클라이언트)이 메뉴를 주문하면, 주방(서버)이 요리해서 내옵니다. 여러분은 주방이 어떻게 생겼는지 몰라도 음식을 받을 수 있죠. 웹도 똑같습니다.
그래서 "웹페이지"란 무엇인가
여러분이 보는 웹페이지는 사실 글로 적힌 설명서입니다. 서버가 보내주는 것은 완성된 그림이 아니라, "이렇게 그려라"라고 적힌 텍스트 파일들이에요. 크게 세 종류가 한 팀입니다.
| 파일 종류 | 역할 | 비유 |
|---|---|---|
| HTML | 내용과 구조 (제목, 문단, 이미지 자리) | 집의 뼈대 |
| CSS | 모양과 디자인 (색, 글꼴, 배치) | 집의 인테리어 |
| JavaScript | 동작과 상호작용 (버튼 클릭, 반응) | 집의 전기·배관 |
브라우저는 이 설명서를 받아 여러분 컴퓨터에서 실제 화면으로 조립합니다. 이게 핵심입니다 — 그림은 서버가 아니라 브라우저가 그립니다. (자세한 건 6부에서.)
잠깐, URL은 무엇으로 이루어졌나
웹페이지를 가리키는 주소를 URL(Uniform Resource Locator, 자원 위치 지정자)이라고 합니다. 그냥 "웹 주소"라고 생각하면 됩니다. 그런데 이 주소는 사실 여러 정보가 한 줄에 압축된 것입니다. 앞으로 나올 개념들이 여기 다 숨어 있으니 미리 해부해 두면 좋습니다.
https://www.example.com:443/blog/post?id=42#section2 └─┬─┘ └──────┬──────┘ └┬┘└───┬────┘└──┬──┘└───┬──┘ 프로토콜 호스트(도메인) 포트 경로 질의(쿼리) 프래그먼트 (어떻게) (어디로) (문) (무엇을) (옵션) (그 안 위치)
| 부분 | 뜻 | 어디서 다루나 |
|---|---|---|
https | 프로토콜 — 어떤 규칙으로 통신할지 | 3부 (HTTP) |
www.example.com | 호스트 — 어느 서버인지(이름) | 2부 (DNS) |
:443 | 포트 — 서버의 어느 '문'으로 들어갈지 (보통 생략) | 3부 |
/blog/post | 경로 — 서버 안에서 어떤 자원인지 | 3부 |
?id=42 | 질의 문자열 — 추가 조건 전달 (예: 글 번호 42) | 3부 |
#section2 | 프래그먼트 — 페이지 안에서 특정 위치로 점프 | (브라우저 처리) |
대부분의 경우 우리는 https://example.com 정도만 칩니다. 나머지는 생략되거나 자동으로 채워집니다. 하지만 검색 결과나 공유 링크에서 ?나 #가 붙은 긴 주소를 보면, 이제 그게 무슨 뜻인지 알 수 있습니다.
비유: URL은 택배 송장 한 장입니다. 어떻게 보낼지(프로토콜), 어느 건물로(호스트), 몇 호로(포트), 그 집 어느 방의 무엇을(경로·질의) 원하는지가 한 줄에 다 적혀 있죠.
주소창에 엔터를 누르면: 전체 여정 미리보기
이 안내서가 풀어 갈 전체 흐름입니다. 지금은 이름만 눈에 익혀 두세요. 각 단계는 뒤에서 한 부씩 자세히 다룹니다.
flowchart TD
U["주소창에 입력<br/>google.com"]:::user
DNS["① 이름을 주소로 바꾸기<br/>(DNS) — 2부"]:::net
CONN["② 서버와 연결하기<br/>(TCP/TLS) — 3부"]:::net
REQ["③ 요청 보내기<br/>(HTTP 요청) — 3부"]:::net
SRV["④ 서버가 처리"]:::server
RES["⑤ 응답 받기<br/>(HTML·CSS·JS) — 3·4·5부"]:::net
REN["⑥ 화면 그리기<br/>(렌더링) — 6부"]:::render
U --> DNS --> CONN --> REQ --> SRV --> RES --> REN
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
놀라운 점은, 이 모든 일이 보통 1초 안에 끝난다는 것입니다.
이 부에서 기억할 것
- 인터넷은 도로망, 웹은 그 위를 달리는 한 서비스다.
- 웹의 모든 일은 클라이언트(요청) ↔ 서버(응답)의 대화다.
- 웹페이지는 완성된 그림이 아니라 HTML·CSS·JS라는 설명서이고, 브라우저가 그걸 조립해 화면을 만든다.
- URL은 프로토콜·호스트·경로 등 여러 정보가 한 줄에 압축된 주소다.
- 주소창 엔터 한 번 뒤에는 6단계 파이프라인이 숨어 있다.
다음 부에서는 이 여정의 첫 단계 — google.com 같은 이름이 어떻게 컴퓨터가 찾아갈 수 있는 주소로 바뀌는지 봅니다.