URL 입력부터 페이지 렌더링까지

 

웹 브라우저에서 https://www.google.com/을 입력하거나 클릭하면, 단순해 보이는 행동 속에서 다양한 기술들이 순차적으로 동작한다.

 

과정을 알아보자.

 

 

1. 입력 또는 클릭 이벤트 발생

사용자가 브라우저에 주소를 입력하거나 링크를 클릭하면, 브라우저는 해당 URL을 통해 요청을 보낼 준비를 시작함.

해당 동작은 응용 계층 (Layer 7)에 해당함.

 

 

2. URL 분석

입력된 URL은 다음과 같은 구성 요소로 파싱됨:

https://www.google.com/

 

프로토콜 :// 도메인(호스트 이름)

 

• https: 보안 통신을 위한 프로토콜 (Secure HTTP 프로토콜)
  • 프로토콜이란? : 통신을 위한 규칙과 약속의 집합. HTTP, HTTPS, FTP 등이 있음.
• www.google.com: 접속 대상 도메인 (요청 보내는 주소)

이 단계 역시 응용 계층 (Layer 7)에 해당됨.

 

 

3. DNS 조회

브라우저는 도메인 이름 www.google.com을 실제 통신 가능한 IP 주소로 변환하기 위해 DNS(Domain Name System) 조회를 수행함.

DNS 조회 상세 과정:

1. 브라우저 DNS 캐시 확인
   • 같은 도메인을 이전에 방문했다면, 브라우저 내부 캐시에 저장되어 있음
2. 운영체제(OS)의 DNS 캐시 확인
   • 브라우저에 없으면 OS 차원의 캐시 확인
3. 로컬 네트워크의 DNS 서버로 질의 전송
   • 일반적으로 ISP(InternetServiceProvider)에서 제공하는 DNS 서버 사용
4. 계층적 질의 진행
   • 예시 흐름:
     사용자 → 로컬 DNS 서버 → 루트 서버 → .com TLD 서버 → google.com 권한 서버 → IP 응답(주소 반환)

예시 응답:
www.google.com → 142.250.196.36

DNS는 OSI 모델 중 응용 계층 (Layer 7)에 해당하지만, 실제 전송은 전송 계층 (UDP 포트 53)을 통해 이뤄짐.
※ 일반적으로 DNS는 전송 계층의 UDP 포트 53을 사용하지만, 응답 데이터가 크거나 재전송이 필요한 경우 TCP도 사용함.

 

 

4. HTTPS 연결 수립 (TLS Handshake)

브라우저는 HTTPS 요청을 위해 TLS(Transport Layer Security) 핸드셰이크를 수행함.

TLS Handshake 주요 과정:

• 서버의 인증서(Public Key) 수신 및 검증
• 클라이언트와 서버 간 대칭 키 생성 (세션 키)
• 암호화된 통신 채널 수립

이 과정이 끝나야 실제 HTTP 요청이 가능함.

TLS는 표현 계층 (Layer 6)과 세션 계층 (Layer 5)에서 동작하고 실제 전송은 전송 계층 (TCP)과 인터넷 계층 (IP)을 사용.
TLS는 OSI 모델 기준으로는 표현 계층(L6)과 세션 계층(L5) 역할을 수행한다고 분류되기도 하지만, 실제 구현에서는 응용 계층과 전송 계층 사이에서 동작함.

 

 

5. HTTP 요청 전송

TLS 연결이 완료되면, 브라우저는 다음과 같은 형식으로 HTTP 요청을 보냄:

 

GET / HTTP/1.1

Host: www.google.com

User-Agent: Mozilla/5.0 ...

 

요청에는 브라우저 정보, 요청 경로, 쿠키, 인증정보 등이 포함됨.

요청 확인 방법: 브라우저 개발자 도구(F12) → Network 탭 → 해당 요청 클릭
HTTP는 응용 계층 (Layer 7)

 

 

6. 서버 처리

Google 웹 서버는 요청을 수신하고 내부 로직에 따라 처리함.

• 요청된 리소스 확인
• 사용자 위치, 언어, 로그인 여부 등 판단
• HTML/CSS/JS 등의 정적 또는 동적 리소스 생성

이러한 백엔드 로직은 서버 내부의 애플리케이션 계층에서 처리됨.
서버는 TCP/IP 계층을 통해 요청을 수신하고, 응용 계층(HTTP)에서 이를 처리함.

 

 

7. HTTP 응답 수신

서버는 HTTP 응답을 브라우저로 반환함:

HTTP/1.1 200 OK

Content-Type: text/html

...

[HTML 본문]

 

응답 확인 방법: 개발자 도구(F12) → Network → 응답 탭에서 Response 확인
HTTP 응답은 응용 계층 (Layer 7), 실제 전송은 TCP/IP 계층

 

 

 

8. 브라우저 렌더링

브라우저는 받은 HTML 문서를 파싱하고 다음과 같은 렌더링 과정을 수행함:

1. HTML → DOM 트리 구성
2. CSS → 스타일 트리 구성
3. DOM + CSSOM → 렌더 트리 구성
4. Layout 계산 및 Paint 처리
5. 자바스크립트 실행 및 추가 리소스 요청 (JS, 이미지 등)

결과적으로 사용자가 보는 Google 메인 화면이 표시됨.

이 과정은 브라우저 내부 렌더링 엔진에서 수행되며, OSI 7 계층 중 네트워크 계층과 직접적인 연관은 없음.
하지만 JavaScript나 `<img>` 등의 리소스 요청은 다시 HTTP 요청을 발생시켜, 응용 계층부터 하위 계층까지 통신이 다시 발생함.

 

 

전체 흐름과 OSI 7계층 연결 요약

단계	설명	관련 OSI 계층
URL 입력	사용자 입력 이벤트	응용 계층 (7)
URL 분석	프로토콜 및 도메인 파싱	응용 계층 (7)
DNS 조회	도메인 → IP 변환	응용 계층 (7), 전송 계층 (4, UDP/TCP)
TLS Handshake	암호화 연결 설정	응용전송 계층 사이 (56 역할 포함)
HTTP 요청	요청 메시지 전송	응용 계층 (7), 전송 계층 (4, TCP)
패킷 전송	데이터 전송	전송 계층 (4), 네트워크 계층 (3), 데이터링크/물리 계층 (2/1)
HTTP 응답 수신	응답 수신 및 해석	응용 계층 (7), 전송 계층 (4, TCP)
브라우저 렌더링	화면 구성 및 동작 처리	네트워크 계층과 직접 관련 없음 (렌더링 엔진 내부 처리)