주소를 입력하면 웹페이지가 열리는 과정을 주문 배달처럼 이해하기

웹서비스를 만들다 보면 서버, 요청, 응답, DNS 같은 말이 한꺼번에 등장합니다. 단어부터 외우려고 하면 금방 복잡해집니다. 먼저 브라우저가 가게에 주문을 보내고 결과를 받아 화면에 차리는 과정이라고 생각하면 흐름이 보입니다.

이 과정은 바이브코딩에서도 중요합니다. AI가 코드를 고쳐 줬는데 화면에 404나 500이 보일 때, 어느 구간에서 문제가 생겼는지 짐작할 수 있기 때문입니다.

브라우저는 주문하는 손님이고 서버는 준비하는 가게다

Chrome이나 Safari 같은 브라우저는 사용자를 대신해 요청을 보내는 프로그램입니다. 서버는 웹페이지 파일이나 데이터를 보관하고 있다가 요청에 맞는 결과를 돌려주는 컴퓨터 또는 프로그램입니다.

브라우저가 항상 단순한 파일만 받는 것은 아닙니다. 쇼핑몰 상품 페이지라면 서버가 데이터베이스에서 상품 이름과 재고를 읽고, 로그인 상태를 확인한 뒤, 그 순간에 맞는 응답을 만들 수 있습니다. 같은 주소를 열어도 사용자에 따라 결과가 달라지는 이유입니다.

URL은 목적지와 주문 내용을 함께 적은 주소다

https://www.example.com/products/42를 나눠 보면 역할이 보입니다. https는 통신 방식, www.example.com은 찾아갈 도메인, /products/42는 서버 안에서 원하는 자원의 경로입니다.

사람은 도메인 이름을 기억하기 쉽지만 컴퓨터는 IP 주소로 통신합니다. DNS는 도메인 이름을 실제 서버 주소로 찾아주는 전화번호부 같은 역할을 합니다. 브라우저는 먼저 DNS에 목적지를 묻고, 알아낸 주소로 요청을 보냅니다.

• 프로토콜은 어떤 규칙으로 통신할지 정합니다.
• 도메인은 어느 서비스로 갈지 알려 줍니다.
• 경로는 서비스 안에서 어떤 페이지나 데이터를 원하는지 가리킵니다.
• 물음표 뒤의 쿼리 문자열은 검색어처럼 추가 조건을 전달합니다.

HTTP 요청에는 무엇을 원하는지가 들어 있다

웹에서 브라우저와 서버는 HTTP라는 약속을 주로 사용합니다. 요청에는 주소뿐 아니라 무엇을 할지 나타내는 메서드, 부가 설명인 헤더, 필요할 때 보내는 본문이 들어갑니다.

GET은 보통 자료를 읽을 때 씁니다. POST는 새 주문이나 회원가입처럼 데이터를 보낼 때 자주 씁니다. 이름만 보고 모든 동작을 단정할 수는 없지만, 오류를 읽을 때 첫 단서가 됩니다.

GET /products/42 HTTP/1.1
Host: www.example.com

이 요청은 example.com 서버에 42번 상품 자료를 달라고 말하는 아주 간단한 형태입니다. 실제 요청에는 언어, 쿠키, 지원하는 파일 형식 등 더 많은 정보가 붙을 수 있습니다.

응답 상태 코드는 결과표의 첫 줄이다

서버는 상태 코드와 헤더, 본문을 응답합니다. 200이면 요청이 정상 처리됐다는 뜻입니다. 404는 해당 자원을 찾지 못했다는 뜻이고, 500 계열은 서버가 처리 중 문제를 만났다는 뜻입니다.

자주 만나는 코드는 다음 정도부터 기억하면 충분합니다.

1. 200은 성공입니다.
2. 301이나 308은 주소가 영구적으로 옮겨졌다는 뜻입니다.
3. 400은 요청 형식이나 값이 잘못됐을 가능성이 큽니다.
4. 401은 로그인이 필요하거나 인증 정보가 맞지 않는 경우가 많습니다.
5. 403은 신원을 알아도 권한이 없어 거절된 경우가 많습니다.
6. 404는 주소나 자원을 찾지 못한 상태입니다.
7. 500은 서버 내부 처리에서 문제가 난 상태입니다.

상태 코드는 원인 전체를 설명하지 않습니다. 다만 브라우저에서 요청을 잘못 만들었는지, 서버가 거절했는지, 서버 내부가 실패했는지 조사 범위를 줄여 줍니다.

화면은 한 번의 응답이 아니라 여러 자원의 조합이다

HTML 문서 하나를 받은 뒤에도 브라우저는 CSS, JavaScript, 이미지, 글꼴을 추가로 요청합니다. 그래서 페이지 주소는 열리는데 디자인이 깨지거나 버튼만 작동하지 않는 일이 생깁니다. HTML은 왔지만 CSS나 JavaScript 요청이 실패했을 수 있습니다.

브라우저 개발자 도구의 Network 탭을 열면 이 흐름을 직접 볼 수 있습니다. 새로고침한 뒤 이름, 상태 코드, 종류, 걸린 시간을 확인해 보세요. 빨간 요청 하나가 문제의 출발점일 때가 많습니다.

오늘 바로 해볼 작은 실습

1. 자주 쓰는 웹사이트 한 곳을 엽니다.
2. 개발자 도구에서 Network 탭을 선택합니다.
3. 페이지를 새로고침하고 가장 위의 문서 요청을 찾습니다.
4. 상태 코드가 200인지, 요청 URL이 무엇인지 확인합니다.
5. 이미지나 스크립트 요청 하나를 눌러 응답 헤더를 봅니다.

처음에는 모든 항목을 이해할 필요가 없습니다. 브라우저가 여러 번 주문하고 서버가 각각 답한다는 흐름만 눈으로 확인해도 충분합니다. 다음에 오류가 생기면 화면만 다시 만들기보다 어떤 요청이 어떤 답을 받았는지부터 볼 수 있게 됩니다.