학습 목표
- 클라이언트와 서버가 무엇인지 자기 말로 설명할 수 있다
- 요청과 응답의 흐름을 그림으로 그릴 수 있다
- F12 개발자 도구로 실제 요청·응답을 직접 볼 수 있다
핵심 용어 정리
| 용어 |
설명 |
비유 |
클라이언트 (Client) |
먼저 요청을 보내는 쪽. 브라우저, 배달 앱, 게임 등이 모두 클라이언트. |
카페에서 "아메리카노 주세요"라고 먼저 말하는 손님. |
서버 (Server) |
요청을 기다리다 응답하는 쪽. 24시간 켜져 있음. |
주문을 받아 커피를 만들어 주는 바리스타. |
요청 (Request) |
클라이언트가 서버에 보내는 부탁. |
손님이 가게에 보내는 주문서. |
응답 (Response) |
서버가 클라이언트에 돌려주는 결과(HTML, 이미지 등). |
가게가 손님에게 내주는 커피 한 잔. |
네트워크 (Network) |
통신 장비들이 그물망처럼 엮여 있는 구조. |
손님과 가게가 대화할 수 있는 도로망. |
1. 매일 보는 풍경
주소창에 naver.com 을 치면 1초 만에 화면이 뜹니다. 그 1초 동안 컴퓨터들 사이에서 요청과 응답이 주고받아집니다. 이 흐름을 모르면 코드가 안 될 때 어디서 막혔는지 짐작할 수가 없습니다.
핵심 비유: 웹사이트의 모든 동작은 카페에서 커피 시키는 일과 똑같이 생겼습니다. 손님(클라이언트)이 부탁하면, 가게(서버)가 결과를 돌려줍니다.
2. 클라이언트와 서버
클라이언트
- 먼저 "이거 주세요"라고 말을 거는 쪽 (카페의 손님에 해당)
- 크롬·사파리·엣지 같은 웹 브라우저
- 배달 앱, 카카오톡 앱, 게임도 모두 클라이언트
서버
- 요청을 묵묵히 기다리는 쪽 (카페의 바리스타에 해당)
- 언제 사용자가 올지 모르므로 24시간 켜져 있어야 함
- 네이버·유튜브·은행 모두 「서버 컴퓨터」를 두고 운영함
중요: 서버는 먼저 말을 걸지 않습니다. 인터넷에서는 항상 클라이언트가 먼저입니다.
3. 요청과 응답 — 두 단계의 반복
① 손님 → 가게: "아메리카노 주세요" ← 요청 (Request)
② 가게 → 손님: "여기 있습니다 ☕" ← 응답 (Response)
웹의 모든 일은 결국 이 두 단계의 반복입니다. 페이지를 띄우는 것도, 로그인하는 것도, 글을 쓰는 것도 모두 요청 + 응답입니다.
4. 네이버 화면이 뜨는 1초
① 주소창에 naver.com 입력
② 브라우저가 네이버 서버에 요청
③ 네이버 서버가 HTML 을 응답
④ 브라우저가 HTML 을 해석해 그림
⑤ 화면이 보임
5. 직접 확인 — F12
크롬에서 F12 를 누르고 Network 탭을 켠 뒤 새로고침하면, 한 페이지를 띄우는 데 사실은 수십 번의 요청·응답이 일어난다는 걸 직접 볼 수 있습니다.
6. Before / After
전 차시까지
(없음 — 우리 과정의 첫 차시)
이번 차시 끝
웹 = 클라이언트 ↔ 서버의 요청·응답이라는 그림이 머릿속에 박혔다.
학습 확인 체크리스트
- 「클라이언트」와 「서버」가 무엇인지 한 문장으로 설명할 수 있다
- 「요청」과 「응답」의 흐름을 화살표로 그릴 수 있다
- F12 → Network 탭에서 실제 요청·응답을 볼 수 있다
- 네이버에 접속할 때 일어나는 5단계 흐름을 순서대로 말할 수 있다
- "서버는 먼저 말을 걸지 않는다"는 이유를 설명할 수 있다