◇ PART · WEB
클라이언트와 서버
웹의 동작 원리 — 요청과 응답
학습 목표
- 클라이언트와 서버가 무엇인지 자기 말로 설명할 수 있다
- 웹사이트에서 일어나는 요청과 응답의 흐름을 그릴 수 있다
- 실제 브라우저에서 이 흐름이 일어나는 순간을 직접 확인할 수 있다
⚠️ 왜 이걸 알아야 할까요?
우리가 매일 만나는 풍경
주소창에 naver.com 을 치면 — 1초 만에 화면이 뜹니다.
그 1초 동안 컴퓨터 사이에서는 무슨 일이 일어났을까요?
이걸 모르면 나중에 코드가 안 될 때 어디서 막혔는지 짐작할 수가 없습니다.
🛠️ 카페에서 일어나는 일
웹 = 카페
웹사이트의 모든 동작은 카페에서 커피를 시키는 것과 똑같이 생겼습니다.
┌─────────────┐ ┌──────────────┐
│ │ "아메리카노" │ │
│ 손님 │ ──────────────→ │ 바리스타 │
│ (Client) │ │ (Server) │
│ │ ←────────────── │ │
│ │ ☕ 한 잔 │ │
└─────────────┘ └──────────────┘
손님 — 클라이언트 (Client)
- 먼저 "이거 주세요" 라고 말을 거는 쪽
- 우리가 매일 쓰는 크롬, 사파리
- 배달 앱, 게임, 쇼핑 앱도 전부 클라이언트
💡 한 줄 정리
"먼저 부탁하는 쪽" 이면 모두 클라이언트.
바리스타 — 서버 (Server)
- 손님의 요청을 묵묵히 기다리는 쪽
- 언제 손님이 올지 모르므로 24시간 켜져 있어야 함
- 네이버 서버, 유튜브 서버, 카카오톡 서버 ...
⏰ 중요한 차이
서버는 먼저 말을 걸지 않습니다.
항상 손님이 먼저입니다.
요청과 응답 (Request / Response)
1. 손님 → 가게: "아메리카노 한 잔 주세요" ← 요청 (Request)
2. 가게 → 손님: "여기 있습니다 ☕" ← 응답 (Response)
웹에서 우리가 하는 모든 일은 이 두 단계의 반복입니다.
🎯 외워둘 것
웹 = 요청(Request) + 응답(Response). 끝.
네이버 화면이 뜨는 그 1초
주소창에 naver.com 입력
│
▼
┌─────────────┐ ┌──────────────┐
│ 브라우저 │ "네이버 줘" │ 네이버 서버 │
│ (크롬) │ ─────────────────→ │ │
│ │ │ │
│ │ ←───────────────── │ │
│ │ HTML, 이미지 등 │ │
└─────────────┘ └──────────────┘
│
▼
화면을 그려서 보여줌
💻 진짜로 일어나는지 보고 싶다면
크롬을 열고 — F12 를 눌러보세요.
스크린샷
크롬에서 네이버에 접속한 뒤 F12 → Network 탭. 수십 개의 요청·응답이 줄지어 보임
한 페이지를 띄우는 데 사실은 수십 번의 요청·응답이 오갑니다.
📊 한 그림 정리
이번 차시의 데이터 흐름
브라우저
⇄
서버
● 첫 박스 두 개가 등장했습니다 — 앞으로 이 사이가 점점 채워집니다
오늘은 그저 둘이 대화하는 사이임을 봤습니다.
다음 차시부터 사이에 박스가 하나씩 추가됩니다.
정리
오늘 들고 가는 것
- 클라이언트 = 먼저 부탁하는 쪽 (손님, 브라우저)
- 서버 = 묵묵히 기다리는 쪽 (바리스타, 24시간 켜진 컴퓨터)
- 웹의 모든 일 = 요청 + 응답의 반복
다음 차시: HTTP 해부 — 요청·응답 안에 어떤 글자가 들어있는지 F12 로 직접 뜯어봅니다.