백엔드 개발자로서, 매일 사용하는 웹 브라우저가 어떻게 동작하는지 이해하는 것은 매우 중요하다고 생각합니다. 단순해 보이는 URL 입력 한 번에도 여러 복잡한 과정이 숨어있는데, 이 과정을 자세하게 살펴보려고 합니다.
1. URL 입력과 처리
브라우저는 사용자가 입력한 URL을 파싱하여 각 구성요소를 분석합니다.
https://www.google.com:443/search?q=오늘의+날씨- 프로토콜 (https://)
- 도메인 (www.google.com) : 웹 서버의 주소로 실제 IP 주소 대신 사람이 기억하기 쉬운 이름을 사용합니다.
- 포트 번호 (443)
- 경로 (/search)
- 쿼리 파라미터 (?q=오늘의+날씨)
2. 웹사이트 주소를 실제 컴퓨터 주소로 변환 (DNS 조회)
인터넷의 모든 컴퓨터는 IP 주소라는 고유한 번호를 가지고 있습니다. 하지만 “216.57.221.110”과 같은 IP 주소를 외우기는 어렵기 때문에 “www.google.com”과 같은 도메인 이름을 사용합니다.
DNS 조회 과정
브라우저는 도메인 이름을 IP 주소로 변환하기 위해 여러 단계를 거칩니다.
- DNS 캐시 확인
- 먼저 최근에 방문한 적이 있는지 확인합니다. (브라우저 캐시)
- 컴퓨터에 저장된 주소록도 확인합니다. (OS 캐시)
- DNS 서버 질의
- DNS 캐시에 없다면 인터넷의 전화번호부인 DNS 서버에 물어봅니다. 이때, DNS 조회는 계층적으로 이루어지게 됩니다.
- Root DNS (.)→ Second-level Domain (naver.com)
- → Subdomain (www.naver.com)
- → Top-level Domain (.com)
3. 웹사이트와 연결 맺기 (TCP/IP 연결)
실제 주소인 IP를 찾았다면, 서버와 대화를 시작하기 위한 연결을 설정해야 합니다. 해당 과정은 전화 통화를 시작하는 과정과 비슷합니다.
TCP 3-way Handshake 과정
TCP 연결은 신뢰성 있는 통신을 보장하기 위해 세 단계의 확인 과정을 거칩니다.
- 클라이언트의 연결 요청 (SYN)
- 클라이언트 : “안녕하세요, 통화 가능하신가요?”
- 이때 클라이언트는 자신의 시퀀스 번호를 함께 보냅니다.
- PORT 상태
- 클라이언트 : CLOSED → SYN_SENT
- 서버 : LISTEN
- 서버의 응답 (SYN + ACK)
- 서버 : “통화 가능합니다. 통화 시작하시죠!”
- 서버도 자신의 시퀀스 번호를 보내고, 클라이언트의 시퀀스 번호에 1을 도한 값을 ACK로 보냅니다.
- PORT 상태
- 클라이언트 : CLOSED
- 서버 : LISTEN → SYN_RECEIVED
- 클라이언트의 연결 확립 (ACK)
- 클라이언트 : “알겠습니다. 이제 대화 시작합시다.”
- 서버의 시퀀스 번호에 1을 더한 값을 ACK로 보냅니다.
- PORT 상태
- 클라이언트 : ESTABLISHED
- 서버 : SYN_SENT → ESTABLISHED
4. 데이터 주고받기 (HTTP 통신)
이제 실제로 데이터를 주고받을 준비가 됐으며, HTTP는 웹에서 데이터를 주고받는 표준 프로토콜입니다.
요청하기 (HTTP 요청)
GET /search?q=오늘의+날씨 HTTP/1.1
Host: www.google.com
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Cookie: (Cookie 값)- 요청 라인 : 어떤 방식 (GET/POST …) 으로 어떠한 리소스 (/saerch)를 요청하는지에 대한 정보
- 헤더 : 요청에 대한 추가 정보들
- Host : 요청하는 서버의 도메인
- User-Agent : 브라우저 정보
- Accept : 받고자 하는 데이터 형식
- Cookie : 이전 방문 정보나 세션 정보
응답받기 (HTTP 응답)
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234
Cache-Control: private, max-age=0
<!DOCTYPE html>
<html>...- 상태 라인 : 요청의 처리 결과 (200 OK)
- 헤더 : 응답에 대한 메타데이터
- Content-Type : 응답 데이터의 형식
- Content-Length : 응답 데이터의 크기
- Cache-Control : 캐싱 정책
- 본문 : 실제 데이터 (HTML, JSON 등등)
5. 화면에 그리기 (브라우저 렌더링)
마지막으로, 브라우저는 받은 데이터를 사용자가 볼 수 있는 형태로 변환해줍니다.