웹 브라우저에서 URL을 입력하고 엔터를 누르면 다양한 과정이 순차적으로 진행된다.
이 과정은 DNS 조회, 서버와의 연결, 요청 및 응답 처리, 브라우저 렌더링으로 구성된다.
1. DNS 조회 (도메인 네임 시스템)
📌 DNS(Domain Name System)는 도메인 이름을 IP 주소로 변환하는 역할을 한다.
📌 브라우저는 DNS 조회를 수행하기 전 캐시(Cache)에서 먼저 확인한다.
✅ DNS 캐시 확인 순서
1️⃣ 브라우저 캐시 – 최근 방문한 사이트의 DNS 정보
2️⃣ OS 캐시 (hosts 파일 포함) – 운영체제에 저장된 DNS 정보
3️⃣ 라우터 캐시 – 사용 중인 네트워크 장비(공유기 등)에서 저장된 정보
4️⃣ ISP(인터넷 서비스 제공자) DNS 서버 – ISP가 관리하는 DNS 서버
5️⃣ 최종적으로 DNS 루트 서버, TLD 서버, 권한 있는 네임 서버에서 조회
✅ DNS 조회 후 결과
브라우저는 도메인에 해당하는 IP 주소를 얻고, 해당 IP 주소로 요청을 보낼 준비를 한다.
2. TCP 연결 (3-Way Handshake)
📌 클라이언트(브라우저)와 서버는 안정적인 데이터 전송을 위해 TCP 연결을 설정해야 한다.
📌 이를 위해 3-Way Handshake 과정을 거친다.
✅ TCP 3-Way Handshake 과정
1️⃣ 클라이언트 → 서버 : SYN (연결 요청)
2️⃣ 서버 → 클라이언트 : SYN + ACK (요청 승인)
3️⃣ 클라이언트 → 서버 : ACK (연결 확립)
💡 HTTPS 사용 시 추가 과정
만약 HTTPS(SSL/TLS 암호화)를 사용한다면, TCP 연결 후 TLS Handshake가 수행되어 보안 연결을 확립한다.
3. HTTP 요청 (Request)
📌 브라우저는 설정된 IP 주소로 HTTP 요청을 보낸다.
📌 요청에는 여러 가지 정보가 포함된다.
✅ HTTP 요청 구조
GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: text/html
✅ 주요 요청 정보
- HTTP 메서드 (GET, POST, PUT, DELETE 등)
- 요청 URL (경로 및 쿼리 파라미터 포함)
- 헤더 정보 (User-Agent, Accept, Cookie 등)
- 바디 데이터 (POST 요청일 경우)
4. 서버 응답 (Response)
📌 서버는 요청을 처리한 후 HTTP 응답을 보낸다.
✅ HTTP 응답 구조
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
✅ 주요 응답 정보
- 상태 코드 (200, 404, 500 등)
- 헤더 정보 (Content-Type, Cache-Control 등)
- 응답 바디 (HTML, JSON, 파일 등)
💡 CDN(Content Delivery Network) 캐시 적용
자주 요청되는 정적 리소스(이미지, CSS, JS)는 CDN을 통해 제공되어 더 빠르게 로딩 가능하다.
5. 브라우저 렌더링 (Rendering)
📌 서버로부터 HTML, CSS, JavaScript를 받아 화면을 그리는 과정
✅ 렌더링 과정
1️⃣ HTML 파싱 → DOM(Document Object Model) 생성
2️⃣ CSS 파싱 → CSSOM(CSS Object Model) 생성
3️⃣ DOM + CSSOM 결합 → 렌더 트리(Render Tree) 생성
4️⃣ 레이아웃(Layout) 계산 → 각 요소의 위치 및 크기 결정
5️⃣ 페인트(Paint) 및 컴포지팅(Compositing) → 최종적으로 화면에 표시
💡 최적화 기법
- CSS, JS 파일을 압축 및 최소화 (
minification) - 불필요한 JavaScript 실행 최소화 (
DOMContentLoaded이벤트 활용) - Lazy Loading 적용 (이미지 및 동적 콘텐츠 최적화)
최종 정리
📌 브라우저 주소창에 URL을 입력했을 때 일어나는 과정
1️⃣ DNS 조회 → 도메인명을 IP 주소로 변환
2️⃣ TCP 연결 → 서버와 통신할 준비 (3-Way Handshake)
3️⃣ HTTP 요청 전송 → 서버로 데이터 요청
4️⃣ 서버 응답 처리 → HTML, CSS, JS 등의 리소스 반환
5️⃣ 브라우저 렌더링 → 화면에 페이지 표시
📌 이 과정을 이해하면 다음과 같은 최적화가 가능하다
- DNS 캐싱 활용으로 빠른 도메인 조회
- CDN 사용으로 정적 리소스 빠르게 로드
- 비효율적인 렌더링 최소화 (Lazy Loading, Code Splitting 활용)
- 네트워크 최적화 (압축, Keep-Alive 설정)
