2025.09.21Network

💻 DNS부터 렌더링까지: 웹페이지가 열리는 과정

1. DNS 조회

컴퓨터는 www.pyomin.com과 같은 도메인 이름을 직접 이해하지 못하고 IP 주소로 통신한다. 따라서 브라우저가 서버와 통신하기 위해서는 먼저 해당 도메인의 IP 주소를 알아내는 DNS(Domain Name System) 조회 과정이 필요하다.

브라우저가 URL을 입력받으면 다음 순서로 IP 주소를 확인한다.

1. 브라우저 DNS 캐시 확인
2. OS의 hosts 파일 확인
3. OS DNS 캐시 확인
4. ISP(인터넷 서비스 제공자)의 DNS 서버(Recursive Resolver)에 요청

로컬에 정보가 없는 경우 ISP의 DNS 서버가 대신 DNS 탐색을 수행한다. 이 과정에서 다음 서버들을 순차적으로 조회한다.

Root DNS Server
TLD DNS Server (.com, .net 등)
Authoritative Name Server

최종적으로 해당 도메인에 대응되는 IP 주소를 클라이언트에게 반환한다.

2. TCP/IP 연결 (TCP 3-way Handshake)

IP 주소를 확인하면 브라우저는 서버와 TCP 연결을 설정한다. 이때 통신 대상은 단순히 IP 주소뿐 아니라 포트 번호를 포함한다.

TCP 연결은 3-way Handshake 과정을 통해 이루어진다.

먼저 클라이언트가 서버로 SYN 패킷을 보내고 서버는 이를 확인한 뒤 SYN + ACK로 응답한다. 마지막으로 클라이언트가 서버로 ACK를 다시 보내면 총 세 번의 요청과 응답이 이루어지며 연결이 성립된다.

이 과정을 통해 클라이언트와 서버 사이에 신뢰성 있는 연결이 설정되고 이후 데이터 전송이 가능해진다.

3-way handshake.webp 또한 같은 네트워크 내의 게이트웨이로 패킷을 전달하기 위해 ARP(Address Resolution Protocol)를 통해 IP 주소에 대응되는 MAC 주소를 확인하는 과정이 발생할 수 있다.

3. TLS 핸드 셰이크 (HTTPS)

TCP 연결이 완료되면 HTTPS 사이트의 경우 TLS(Transport Layer Security) 핸드셰이크 과정이 진행된다. TLS는 기존 SSL을 발전시킨 보안 프로토콜로 데이터 전송을 암호화하기 위해 사용된다.

브라우저가 서버에 HTTPS 요청을 보내면 서버는 먼저 인증서(Certificate)를 전달한다. 브라우저는 이 인증서가 신뢰할 수 있는 CA(인증 기관)로부터 발급된 것인지 검증한다.

검증이 완료되면 브라우저와 서버는 세션 키(대칭키)를 안전하게 교환하고 이후 모든 통신은 이 키를 이용해 암호화되어 전송된다.

최근 표준인 TLS 1.3에서는 핸드셰이크 과정이 단순화되어 1-RTT(Round Trip Time) 만에 보안 연결을 수립할 수 있다.

4. HTTP 요청과 응답

보안 연결이 완료되면 브라우저는 서버에 HTTP 요청을 보낸다.

GET / HTTP/1.1
Host: www.pyomin.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ko-KR,ko;q=0.9
Connection: keep-alive

서버는 요청을 처리한 뒤 HTTP 응답을 반환한다.

HTTP/1.1 200 OK
Date: Sun, 21 Sep 2025 13:07:44 GMT
Server: nginx
Content-Type: text/html; charset=UTF-8
Content-Length: 1024

<!DOCTYPE html>
...HTML 데이터

브라우저는 먼저 HTML 문서를 수신한 뒤 이를 파싱하면서 CSS, JavaScript, 이미지 등의 외부 리소스를 발견하면 추가적인 HTTP 요청을 보내 해당 리소스를 가져온다.

또한 Connection: keep-alive 헤더를 통해 TCP 연결을 유지하여 여러 요청을 효율적으로 처리할 수 있다.

5. 브라우저 렌더링 과정

브라우저는 서버로부터 받은 데이터를 해석하여 사용자가 볼 수 있는 화면으로 렌더링한다.

렌더링 과정은 다음 단계로 이루어진다.

1) HTML 파싱 -> DOM 생성
HTML 문서를 파싱하여 DOM(Document Object Model)트리를 생성한다.

2) CSS 파싱 -> CSSOM 생성
CSS 파일을 파싱하여 CSSOM(CSS Object Model)을 생성한다.

3) Render Tree 생성
DOM과 CSSOM을 결합하여 Render Tree를 생성한다. 이 트리는 실제 화면에 표시될 요소들만 포함한다.

4) Layout (Reflow)
각 요소의 위치와 크기를 계산하여 레이아웃을 결정한다.

5) Painting
각 요소를 픽셀 단위로 화면에 그리는 과정이다.

6) Compositing
여러 개의 레이어를 GPU 등을 활용하여 합성해 최종 하면을 구성한다.

렌더링 과정 중 <script> 태그를 만나면 HTML 파싱이 일시적으로 중단되고 자바스크립트 엔진이 실행될 수 있으며 자바스크립트는 DOM이나 CSSOM을 수정할 수 있다.