웹 페이지 요청부터 렌더링까지의 흐름

1. 서론

웹 브라우저에 google.com을 입력하고 Enter를 누르면 구글 페이지가 나타납니다. 이 짧은 순간에는 네트워크, 보안, 렌더링 기술이 유기적으로 작동하고 있습니다. 이 글에서는 사용자가 google.com을 입력했을 때 브라우저 내부에서 어떤 일이 순차적으로 일어나는지 DNS 조회부터 렌더링까지 단계별로 살펴보겠습니다.

https://velog.io/@fulmoon/RequestResponse

---

2. google.com 입력부터 화면 출력까지

2.1. DNS 조회

브라우저는 먼저 google.com의 IP 주소를 알아내야 합니다. 이 과정은 다음 순서로 이루어집니다.

1. 브라우저 캐시 → OS 캐시 → 라우터 캐시 → ISP의 DNS 캐시를 차례로 확인합니다.
2. 캐시에 없다면 DNS 리졸버가 루트 서버부터 도메인을 재귀적으로 질의하여 IP를 찾습니다.
3. 최종적으로 얻은 IP 주소는 TTL(Time To Live)에 따라 일정 시간 동안 캐싱됩니다.

https://www.fixrunner.com/what-is-dns/

2.2. TCP 및 TLS 연결 수립

IP 주소를 확인한 브라우저는 구글 서버와 TCP 연결을 수행합니다. TCP 3-way 핸드셰이크를 통해 연결이 안정적으로 성립되며, 이후 HTTPS 통신을 위해 TLS 핸드셰이크가 이어집니다.

TLS 핸드셰이크에서는 다음과 같은 인증 절차가 포함됩니다.

• 서버는 공개키가 포함된 SSL 인증서를 클라이언트에 전달합니다.
• 클라이언트는 이를 검증하여 신뢰할 수 있는 서버인지 판단합니다 (CA 서명, 도메인 일치, 유효기간 등).

이로써 클라이언트와 서버 간의 암호화된 통신 경로가 확보됩니다.

2.3. HTTP 요청 전송

보안 연결이 완료되면 브라우저는 다음과 같은 HTTP 요청을 서버에 전송합니다:

      

      

      

    
    

      <code />
    
GET / HTTP/2
Host: www.google.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Language: ko-KR,ko;q=0.9
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Cookie: (세션 또는 사용자 상태 관련 쿠키)

이 요청은 HTTP/2 프로토콜로 전송되며, 다음과 같은 정보를 포함합니다:

• User-Agent: 사용 중인 브라우저 및 운영체제 정보
• Accept: 수신 가능한 콘텐츠 타입 지정
• Accept-Encoding: 지원하는 압축 방식 (예: gzip)
• Accept-Language: 선호하는 언어
• Connection: 연결 방식 유지 여부
• Cookie: 세션 유지 또는 사용자 식별에 사용되는 정보

이러한 헤더들은 구글 서버가 응답을 맞춤화하거나 최적화하는 데 사용됩니다. 브라우저 종류, 언어 설정, 쿠키 등이 함께 포함됩니다.

2.4. 서버 응답 수신

구글 서버는 요청을 수신한 뒤 사용자의 지역, 설정, 브라우저 정보를 고려하여 동적으로 HTML 문서를 생성하고 응답합니다. 이 응답에는 다음과 같은 리소스가 포함될 수 있습니다:

• HTML 문서
• 외부 CSS, JS 파일 경로
• 초기 렌더링에 필요한 이미지나 폰트 링크

2.5. 브라우저 렌더링 파이프라인

https://cresumerjang.github.io/2019/06/24/critical-rendering-path/

1. HTML 파싱 및 DOM 트리 생성
   • 서버로부터 받은 HTML은 바이트 스트림(byte stream) 형태로 도착하며, 브라우저가 이를 디코딩합니다.
   • 디코딩 시 HTTP 응답 헤더의 Content-Type이나 <meta charset="utf-8"> 정보를 참고해 인코딩 방식을 결정합니다.
   • 디코딩된 문자열은 토큰화(tokenization) 과정에 들어갑니다. 이 과정에서 HTML 텍스트는 시작 태그, 종료 태그, 텍스트 노드, 주석 등의 토큰으로 분해됩니다.
   • 이어서 트리 생성 단계에서는 생성된 토큰을 바탕으로 노드들이 계층적으로 연결되며 DOM 트리가 구성됩니다.
2. CSS 파싱 및 CSSOM 생성
   • <style> 또는 <link> 태그로 로딩된 CSS 파일은 병렬로 다운로드되어 파싱됩니다.
   • 파서가 CSS를 선택자와 선언 블록으로 분리해 CSSOM(CSS Object Model) 을 구성합니다.
3. 자바스크립트 실행
   • <script> 태그가 등장하면 브라우저는 기본적으로 파싱을 일시 중단하고 JS 파일을 실행합니다.
   • async, defer 속성을 사용하면 병렬 로딩이 가능하며, 렌더링 차단을 피할 수 있습니다.
4. 렌더 트리 생성
   • DOM과 CSSOM을 결합해 렌더 트리를 생성합니다.
   • 이 트리는 실제 화면에 표시될 요소만 포함하며, display: none인 요소는 제외됩니다.
   • 각 렌더 노드는 텍스트, 색상, 테두리, 폰트 등 시각적 속성을 가집니다.
5. 레이아웃 계산 (Reflow)
   
   • 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산합니다.
   • 부모-자식 관계, 박스 모델, 폰트 크기 등 다양한 요소가 레이아웃에 영향을 줍니다.
6. 페인팅(Paint)
   • 레이아웃 정보를 바탕으로 요소의 스타일을 픽셀 단위로 변환해 화면에 그립니다.
   • 텍스트, 배경, 테두리, 이미지 등 모든 시각 요소가 이 과정에서 처리됩니다.
7. 컴포지팅(Compositing)
   • 여러 레이어를 올바른 순서로 합성하여 최종 화면을 구성합니다.
   • GPU 가속을 통해 빠르게 렌더링되며, 애니메이션과 스크롤 최적화를 위해 레이어 분리도 이루어질 수 있습니다.

이 모든 렌더링 과정은 브라우저 엔진(Blink, Gecko 등)에 의해 처리됩니다.

---

3. 개발자 도구 활용 팁

• Network 탭: DNS, TCP, TLS 시간 확인 및 요청/응답 헤더 분석 가능
• Performance 탭: 렌더링 과정 시각화 (Recalculate Style, Reflow 등)
• Elements 탭: 최종 DOM 구조 확인 및 요소 수정