여러분이 브라우저에 'naver.com'을 입력하고 엔터를 치는 순간, 뒤에서는 어떤 일이 벌어질까요? 1초도 안 되는 시간에 수십 가지 일이 일어납니다. 이 흐름을 이해하면, AI가 만든 코드가 왜 이렇게 생겼는지, 왜 어떤 오류가 나는지 감이 생깁니다.
택배 비유로 이해하는 요청-응답
웹의 작동 원리는 택배와 똑같습니다. 여러분의 브라우저(클라이언트, client)가 주문서(요청, request)를 보내면, 서버(server)가 물건(응답, response)을 돌려줍니다. 이 한 번의 주고받기를 'HTTP 요청-응답 사이클'이라고 합니다.
URL 해부하기
주소창에 입력하는 URL(Uniform Resource Locator)에는 택배 주소처럼 정보가 담겨 있습니다. 예를 들어 'https://www.leanx.kr/courses?id=1'을 보면 각 부분이 역할을 나눠 갖습니다.
URL 구조 해부
https://www.leanx.kr/courses?id=1
https:// → 통신 규약 (HTTP Secure — 암호화된 연결)
www.leanx.kr → 도메인(domain) — 서버의 이름
/courses → 경로(path) — 서버 안에서 어떤 페이지인지
?id=1 → 쿼리 파라미터(query parameter) — 추가 조건DNS — 인터넷의 전화번호부
컴퓨터끼리 실제로 통신할 때는 'naver.com'이 아닌 숫자로 된 IP 주소(예: 125.209.222.141)를 씁니다. DNS(Domain Name System)는 사람이 읽기 쉬운 도메인 이름을 숫자 IP로 바꿔주는 전화번호부입니다. 주소창에 도메인을 치면 제일 먼저 이 변환이 일어납니다.
브라우저가 페이지를 가져오는 순서
- 1단계 DNS 조회: 브라우저가 'leanx.kr'을 DNS 서버에 물어봐 IP 주소를 얻습니다.
- 2단계 연결: 브라우저가 그 IP의 서버와 TCP 연결을 맺습니다 (HTTPS면 암호화도 설정).
- 3단계 요청 전송: 브라우저가 'GET /courses HTTP/1.1' 같은 형태로 요청을 보냅니다.
- 4단계 응답 수신: 서버가 HTML, CSS, JS 파일들을 돌려줍니다.
- 5단계 렌더링: 브라우저가 받은 파일들을 해석해 화면에 그립니다.
HTTP 상태코드 — 배달 결과 알림
서버가 응답할 때 항상 숫자 코드를 함께 보냅니다. 택배 회사가 '배달 완료', '주소 오류', '수취인 부재' 알림을 보내는 것과 같습니다.
| 코드 | 의미 | 언제 보이나 |
|---|---|---|
| 200 OK | 정상 처리됨 | 페이지가 잘 열릴 때 |
| 301 Moved | 주소가 바뀜 (영구 이동) | 도메인이 변경됐을 때 |
| 404 Not Found | 해당 페이지 없음 | 없는 URL 접근할 때 |
| 403 Forbidden | 권한 없음 | 로그인 안 하고 접근할 때 |
| 500 Internal Server Error | 서버 측 오류 | 서버 코드에 버그가 있을 때 |
크롬에서 F12(또는 Cmd+Option+I)를 눌러 개발자 도구(DevTools)를 열고 'Network' 탭을 보면, 지금 이 순간 브라우저가 어떤 요청을 보내고 어떤 응답을 받는지 실시간으로 볼 수 있습니다. AI가 만든 앱이 데이터를 안 불러올 때 가장 먼저 확인해야 하는 곳입니다.
바이브코딩할 때: AI에게 '페이지가 느리다' 또는 '데이터가 안 나온다'고 말할 때, '네트워크 탭에서 어떤 요청이 실패하나요?'라고 물어보면 원인을 훨씬 빨리 찾을 수 있습니다.