브라우저에 주소를 입력하면 어떤 일이 일어날까?
1️⃣ 사용자가 주소창에 URL 입력
사용자가 주소창에 URL을 입력한다. 예를 들어 https://www.example.com을 입력한다고 하면
브라우저는 이 문자열이 단순한 검색어인지, 웹 주소인지 먼저 판단한다.
https://가 붙어 있다면 명확하게 URL로 인식하고, 바로 네트워크 요청 절차를 시작한다.
URL은 아래와 같은 구조를 가진다.
https(프로토콜)://www.example.com(도메인):443(포트, 생략되면 https는 기본 443, http는 80)/about(경로)
2️⃣ DNS 조회 (도메인을 IP 주소로 변환)
🤔 이게 왜 필요할까?
브라우저나 운영체제는 문자열 주소(example.com)를 알지만, 실제 네트워크 통신은 IP 주소로 이뤄지기 때문에
브라우저는 example.com의 실제 서버 IP 주소를 알아야 요청을 보낼 수 있다.
이를 위해 DNS (Domain Name System) 를 사용한다.
DNS란?
DNS는 도메인 이름으로 IP 주소를 찾을 수 있는 전화번호부이다.
우리는 보통 지인에게 전화를 할때 번호를 입력해서 전화를 하는 사람은 많지 않을 것이다. 이유는 번호를 외우기가 쉽지 않기 때문이다. 그렇기 때문에 번호와 함께 쉽게 외울 수 있는 지인의 이름이나 별명을 저장한다. 이름은 도메인 이름과 같고, 번호는 DNS와 같다. 그저 사용자가 쉽게 브라우저 주소에 접근 가능하게 하기 위함이다.
DNS 조회 순서
- 브라우저 캐시 확인 (가장 빠름)
- OS 캐시
- 로컬 DNS 서버(보통 통신사 제공)
- 권한 있는 DNS 서버까지 단계적으로 탐색
예: example.com → 93.184.216.34
3️⃣ 서버에 TCP 연결 (3-way Handshake)
이제 IP 주소를 얻었다면 실제 데이터를 주고받기 위해 연결을 해야한다.
웹은 기본적으로 TCP라는 프로토콜을 통해 통신하며, 신뢰성 있는 데이터 전달을 보장한다.
TCP란?
인터넷은 기본적으로 "데이터를 조각내서" 보낸다. 이때 조각이 순서가 뒤섞이거나, 유실될 수 있다.
TCP는 이런 문제를 자동으로 해결해주는 우체부 역할을 한다.
연결 과정
- 클라이언트 → 서버: SYN (연결 요청)
- 서버 → 클라이언트: SYN + ACK (수락 + 응답)
- 클라이언트 → 서버: ACK (응답 완료)
우리는 위의 과정을 3-Way-handshake 라고 한다.
클라이언트에서 연결을 요청하고, 서버에서 연결 요청을 수락, 그리고 연결한다.
4️⃣ HTTPS라면 TLS 핸드셰이크 진행(보안 연결)
https://를 사용했다면, TLS(SSL) 암호화 과정도 진행된다.
이건 보안을 위해 아주 중요하다.
진행 과정
1. 서버는 SSL 인증서를 보냄
2. 브라우저는 인증서를 검증(신뢰 기관인지 확인)
3. 양쪽에서 암호화 키를 생성 및 교환
4. 이후 모든 통신은 암호화된 상태로 진행
🔐 이 과정이 진행 된다면 패킷이 중간에서 탈취되더라도 내용을 알아볼수 없다.
5️⃣ HTTP 요청 전송
이제 브라우저가 서버에 HTTP 요청을 보낸다.
GET / HTTP/1.1
Host: www.example.com
User-Agent: Chrome/123.0
Accept: text/html- GET : 리소스 요청
- HOST : 어떤 도메인을 요청하는지
- User-Agent : 어떤 브라우저인지 정보 제공
- Accept : 어떤 타입의 리소스를 원하는지
6️⃣ 서버가 응답
서버는 요청을 받고, HTML 파일을 생성해서 응답한다.
HTTP 상태코드가 포함되어 있고, (200OK, 404 Not Found 등)
HTML 외에도 이미지,JS, CSS 등 여러 리소스가 포함되어 있을 수 있다.
7️⃣ 브라우저가 응답 렌더링
이제 받은 HTML을 바탕으로 브라우저는 화면에 그리기 시작한다.
렌더링 과정
1. HTML 파싱 -> DOM 트리 생성
2. CSS 파싱 -> CSSOM 생성
3. DOM + CSSOM -> 렌더 트리 생성
4. 렌더 트리에서 레이아웃을 실행하여 각 노드의 정확한 크기와 위치를 계산
5. 픽셀로 그리기
6. 레이어 조합해서 최종 화면 출력