[브라우저 동작 원리] 주소창에 URL을 입력하면 무슨 일이 벌어질까?

728x90

브라우저 동작 원리 

웹 브라우저의 주소창에 https://www.example.com과 같은 URL을 입력했을 때, 그 단순한 동작 뒤에는 수많은 복잡한 일이 일어납니다. 이 과정을 이해하면 HTTP, DNS, 브라우저 렌더링 등 핵심 웹 기술들의 동작 원리를 자연스럽게 익힐 수 있습니다.

이 글에서는 사용자가 주소창에 URL을 입력한 순간부터 웹사이트가 화면에 나타나기까지 어떤 일들이 발생하는지 단계별로 설명합니다.

 

---

1.  URL 분석 및 구성 요소 분해

먼저 브라우저는 사용자가 입력한 URL (Uniform Resource Locator) 을 분석합니다.

예시 URL : https://www.example.com:443/path/index.html?search=query#section

• https – 프로토콜 (어떻게 통신할 것인가)
• www.example.com – 호스트 이름 (어디로 접속할 것인가)
• :443 – 포트 번호 (통신할 포트, 생략 가능)
• /path/index.html – 경로 (서버 내부 자원의 위치)
• ?search=query – 쿼리 문자열 (요청 파라미터)
• #section – 프래그먼트 (문서 내 특정 위치, 서버에는 전송되지 않음)

 

---

2.  주소창에 URL을 입력하면?

a.  DNS 조회 - 도메인을 IP로 변환

브라우저는 도메인(www.example.com)을 실제 IP 주소로 변환해야 합니다. 이때 DNS (Domain Name System) 를 이용합니다.

1. 브라우저 캐시 → 2. 운영체제 캐시 → 3. 라우터 캐시 → 4. ISP DNS 서버 → 5. 루트/권한/권한있는 DNS 서버 순으로 캐시를 확인하거나 질의합니다.
2. 최종적으로 IP 주소를 얻습니다. 예 : 93.184.216.34

b.  TCP 연결 수립 (3-way 핸드셰이크)

브라우저는 서버와 통신하기 위해 TCP 연결을 시작합니다. 이때는 3-way 핸드셰이크가 사용됩니다.

1. 클라이언트 → 서버 : SYN
2. 서버 → 클라이언트 : SYN-ACK
3. 클라이언트 → 서버 : ACK

이 과정을 통해 안정적인 연결이 수립됩니다.

c. HTTPS일 경우 : TLS 핸드셰이크

URL이 https로 시작한다면 TLS(SSL) 핸드셰이크가 추가로 이루어집니다.

• 서버 인증서 검증
• 대칭키 생성 및 공유
• 암호화 통신 준비 완료

이후 모든 통신은 암호화됩니다.

d.  HTTP 요청 전송

연결이 수립되면 브라우저는 HTTP 요청을 보냅니다.

GET /path/index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 ...
Accept: text/html

e.  서버 처리 및 응답

서버는 요청을 받고, 해당 자원을 찾아 응답을 보냅니다.

GET /path/index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 ...
Accept: text/html

• 여기서 HTML, CSS, JS 파일 등이 함께 제공됩니다.

f.  브라우저 렌더링 과정

브라우저는 HTML을 파싱하고 다음과 같은 과정을 거칩니다:

1. HTML 파싱 → DOM 트리 생성
2. CSS 파싱 → CSSOM 트리 생성
3. DOM + CSSOM → 렌더 트리 생성
4. 레이아웃 계산 → 위치와 크기 결정
5. 페인트 → 화면에 픽셀로 렌더링

JS가 있으면 스크립트 실행 및 리렌더링도 함께 일어납니다.

g.  추가 리소스 로딩

HTML 문서에 포함된 이미지, JS, CSS 등은 별도의 HTTP 요청을 통해 추가로 로드됩니다. 브라우저는 비동기적/병렬적으로 이를 처리합니다.

 

---

3.  요약 - 전체 흐름 한눈에 보기

순서	단계	설명
1	URL 분석	URL을 구성 요소로 분해
2	DNS 조회	도메인을 IP로 변환
3	TCP 연결	3-way 핸드셰이크 수행
4	TLS 핸드셰이크	HTTPS 암호화 통신 설정
5	HTTP 요청	서버에 요청 전송
6	서버 응답	HTML 등 리소스 반환
7	렌더링	브라우저가 화면에 출력
8	추가 리소스	이미지/JS/CSS 로딩

 

---

4.  마무리

단순히 URL을 입력하는 행동 뒤에는 많은 기술들이 유기적으로 작동하고 있습니다. 이 흐름을 이해하면 웹 개발을 하면서 마주칠 수 있는 다양한 문제들(속도, 보안, 렌더링 이슈 등)을 더 깊이 있게 분석하고 해결할 수 있습니다.

함께 보면 좋은 자료

블로그 글 :

[브라우저 렌더링 과정] HTML이 화면에 보이기까지

 

---

반응형