2025.09.21Network

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

브라우저에 www.pyomin.com을 입력하면…

브라우저 주소창에 www.pyomin.com을 입력하고 엔터를 치면 단순히 페이지가 열리는 것 같지만 그 뒤에서는 복잡한 과정이 순식간에 일어난다. 그 과정을 한 단계씩 따라가 보자.

1. DNS 조회

컴퓨터는 www.pyomin.com 같은 도메인을 직접 이해하지 못한다. IP 주소로 통신하기 때문인데 따라서 먼저 DNS(Domain Name System) 조회가 일어난다.

브라우저는 OS에 www.pyomin.com의 IP를 요청하고 OS는 먼저 로컬 캐시를 확인한다. 캐시에 존재하지 않는 경우 ISP(인터넷 서비스 제공 업체)의 DNS 서버로 요청을 보내고 필요한 경우 루트 DNS 서버 → TLD 서버 → 권한이 있는 네임서버까지 찾아가며 최종 IP 주소를 알아낸다.

2. TCP/IP 연결

IP 주소를 확인한 후에는 서버와 실제 통신이 이루어진다. 브라우저는 해당 IP의 서버와 TCP 3-way Handshake를 수행한다.

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

이 과정을 통해 신뢰성 있는 연결이 설정되고 이후 데이터를 안전하게 주고받을 수 있다.

3. SSL/TLS 핸드 셰이크 (HTTPS)

요즘 대부분의 웹사이트는 https:// 프로토콜을 사용한다. 이는 SSL/TLS를 통해 데이터가 암호화된 상태로 전송된다는 의미이다.

브라우저가 서버에 HTTPS 요청을 보내면 서버는 먼저 인증서(Certificate)를 전달한다. 브라우저는 이 인증서가 신뢰할 수 있는 CA(인증 기관)로부터 발급된 것인지 검증한다. 검증이 완료되면 브라우저와 서버는 세션 키(대칭키)를 안전하게 교환하고 이후 모든 통신은 이 키를 이용해 암호화되어 전송된다.

4. 요청과 응답

보안 연결까지 완료되면 이제 브라우저는 원하는 웹 페이지를 서버에 요청한다. 브라우저가 서버로 보내는 요청은 보통 다음과 같은 형태를 가진다.

plaintext

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

서버는 이러한 요청을 받고 HTML 문서뿐 아니라 CSS, JavaScript, 이미지 등 웹페이지를 구성하는 다양한 리소스를 응답으로 전송한다. 응답은 대략 다음과 같은 형태이다.

plaintext

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 데이터

5. 렌더링

브라우저는 서버로부터 받은 데이터를 해석해 실제 화면에 표시한다.

먼저 HTML을 파싱 하여 DOM(Document Object Model)을 만들고 CSS를 파싱 해 CSSOM을 생성한다. 이어서 DOM과 CSSOM을 결합해 렌더 트리(Render Tree)를 구성한 뒤 각 요소의 위치와 크기를 계산해 레이아웃(Layout)을 완성한다.

마지막으로 페인팅(Painting) 과정을 거쳐 그래픽으로 변환하고 이를 화면에 출력함으로써 우리가 보는 웹페이지가 완성된다.

2025.09.21Network

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

브라우저에 www.pyomin.com을 입력하면…

1. DNS 조회

2. TCP/IP 연결

3. SSL/TLS 핸드 셰이크 (HTTPS)

4. 요청과 응답

보안 연결까지 완료되면 이제 브라우저는 원하는 웹 페이지를 서버에 요청한다. 브라우저가 서버로 보내는 요청은 보통 다음과 같은 형태를 가진다.

plaintext

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

plaintext

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 데이터