사용자가 웹사이트에 처음 접근했을 때 발생하는 일련의 과정

예를들어 사용자가 www.google.com을 입력하면, 브라우저는 HTTP 프로토콜을 사용해 구글 웹 서버와 통신하려고 합니다. HTTP는 OSI 7계층 중 애플리케이션 계층에서 동작하는 프로토콜입니다.

이때 브라우저는 요청한 도메인 이름(www.google.com)에 대한 IP 주소를 알아야 하기 때문에 DNS(Domain Name System) 서버에 질의합니다. 이 질의 과정 또한 애플리케이션 계층에서 이루어지며, DNS 서버는 해당 도메인에 대한 IP 주소(예를 들어, 142.250.190.78)를 응답합니다.

IP 주소를 얻은 후, 브라우저는 구글 서버와 통신을 시작합니다. HTTP는 TCP/IP를 기반으로 작동하므로, 데이터를 주고받기 전에 TCP 3-Way Handshake 과정이 필요합니다. 이 단계는 전송 계층(4계층) 에서 이루어집니다.

TCP 연결이 성립된 후, 브라우저는 HTTP Request 메시지를 생성하여 구글 서버에 보냅니다. 예를 들어, 브라우저는 “GET / HTTP/1.1”이라는 요청을 TCP 프로토콜을 통해 80번 포트로 전송합니다. 이때 데이터는 패킷(Packet) 형태로 네트워크를 통해 전달됩니다. 네트워크를 통해 데이터를 전송하기 위해서는 네트워크 계층(3계층) 에서 IP 주소를 사용하고, 데이터 링크 계층(2계층) 에서 MAC 주소를 사용하여 패킷이 전송됩니다.

구글 서버는 클라이언트의 요청을 수신하고 이를 처리한 후, HTTP Response 메시지를 생성하여 응답합니다. 서버는 요청이 성공했음을 알리는 200 OK 상태 코드와 함께 웹 페이지 데이터를 전송합니다. 브라우저는 이 응답을 받아 HTML, CSS, 자바스크립트 등의 데이터를 해석하여 화면에 페이지를 렌더링합니다.

모든 데이터 전송이 완료되면 클라이언트와 서버는 4-Way Handshake 과정을 거쳐 TCP 연결을 종료합니다.

출처: 매일메일

1단계: 입력된 URL의 처리

URL: www.naver.com은 도메인 이름을 포함한 URL입니다.
URL 구조:
- http:// 또는 https:// → 프로토콜
- www.naver.com → 호스트(도메인 이름)
- :80, :443 → 포트(기본값: HTTP=80, HTTPS=443)
- / → 경로

2단계: DNS를 통한 도메인 이름 해석

로컬 캐시 확인:
- 먼저 호스트 파일이나 OS의 DNS 캐시에서 IP 주소가 있는지 확인합니다.
DNS 서버 질의 과정
- 웹 브라우저가 도메인 이름(www.naver.com)을 입력하면 먼저 DNS 서버에 IP 주소를 요청합니다.
- DNS 질의 과정은 다음과 같은 계층적 구조를 따릅니다:
  - 루트 DNS 서버 → TLD DNS 서버 → Authoritative DNS 서버
- 여기서 Authoritative DNS 서버는 해당 도메인의 최종 IP 주소 또는 CDN을 사용하는 경우에 CDN의 엣지 서버로 연결될 IP를 반환합니다.

3단계: TCP 3-Way Handshake

웹 브라우저는 반환된 IP 주소와 TCP 연결을 시도합니다.
3-Way Handshake 과정:
1. SYN 패킷 → 서버로 전송
2. SYN-ACK 패킷 → 서버 응답
3. ACK 패킷 → 연결 확립


1. SYN (Synchronize) - 클라이언트 -> 서버
- 클라이언트가 서버에 연결 요청
- 시퀀스 번호(seq = x) 전송

2. SYN + ACK - 서버 -> 클라이언트
- 서버가 클라이언트의 요청 수락
- 서버의 시퀀스 번호(seq = y) 전송
- 클라이언트의 시퀀스 번호에 1을 더한 값(ack = x + 1) 전송

3. ACK (Acknowledgment) - 클라이언트 -> 서버
- 클라이언트가 서버의 응답 확인
- 서버의 시퀀스 번호에 1을 더한 값(ack = y + 1) 전송

Client                      Server
   |                          |
   |------- SYN(seq=100) ---->|
   |                          |
   |<-- SYN+ACK(seq=300,      |
   |        ack=101) ---------|
   |                          |
   |------- ACK(ack=301) ---->|
   |                          |

이 과정이 완료되면 TCP 연결이 수립되고 데이터 전송이 가능해집니다.

4단계: HTTPS(SSL/TLS) 핸드셰이크

HTTPS의 경우, SSL/TLS 핸드셰이크를 통해 데이터를 암호화하는 연결을 설정합니다.
서버의 인증서를 검증하고 세션 키를 교환합니다.

Client Hello
1. 클라이언트가 서버에 SSL/TLS 지원 버전, 클라이언트가 생성한 랜덤 데이터, 암호화 알고리즘(사이퍼 스위트),세션 ID을 보냅니다.
Server Hello
1. 서버는 클라이언트의 요청을 수락하며 서버가 선택한 TLS 버전, 랜덤 데이터, 선택된 암호화 알고리즘과 서버의 인증서를 전달합니다.
서버 인증서 검증
1. 클라이언트는 서버의 인증서(공개키)를 검증합니다. (이 단계에서 신뢰할 수 있는 서버인지 확인)
Client Key Exchange (클라이언트 → 서버)
1. Pre-Master Secret 생성하고 서버의 공개키로 암호화하여 전송
- 이를 위해 대칭키와 비대칭키(공개키/개인키)가 사용됩니다.
세션키 생성 (양쪽)
- 클라이언트 랜덤값 + 서버 랜덤값 + Pre-Master Secret을 조합하여 세션키 생성

[클라이언트]                          [서버]
Pre-Master Secret 생성
     ↓
서버 공개키로 암호화 ----전송---→ 서버 개인키로 복호화
                                    ↓
                             Pre-Master Secret 획득

[양쪽 모두]
Client Random + Server Random + Pre-Master Secret
                    ↓
              세션키 생성

Finished
1. 클라이언트/서버 모두 생성된 세션키로 "Finished" 메시지 교환

5단계: HTTP 요청 및 응답

HTTP Request:
- 브라우저는 서버에 HTTP GET 요청을 보냅니다.
- 예: GET / HTTP/1.1
HTTP Response:
- 서버는 요청을 처리하고 HTML, CSS, JavaScript, 이미지 등의 데이터를 브라우저에 반환합니다.
- 상태 코드도 함께 반환됩니다(예: 200 OK, 404 Not Found).

6단계: 브라우저의 렌더링 과정

HTML 파싱:
- 브라우저는 HTML을 파싱해 DOM 트리를 생성합니다.
CSSOM 생성:
- 브라우저는 HTML 내부의 <style> 태그나 외부 CSS 파일을 파싱하여 CSSOM을 생성합니다.
JavaScript 실행:
- JavaScript를 실행하고 DOM을 조작합니다.
레이아웃 및 렌더링:
- DOM과 CSSOM을 합쳐 렌더 트리를 만들고, 레이아웃을 계산해 화면에 출력합니다.

7단계: 추가 요청 처리

웹 페이지가 완전히 로딩될 때까지 필요한 리소스(JS, CSS, 이미지)를 추가 요청하고 처리합니다.
캐싱: 브라우저는 리소스를 캐시해 성능을 최적화합니다.

왜 한 번에 처리하지 않나요?

웹 페이지가 한 번에 모든 리소스를 받아오지 않는 이유는 성능과 최적화 때문입니다. 일반적으로, 웹 페이지는 HTML을 먼저 로딩하고, 그 안에 필요한 CSS, JavaScript, 이미지 파일 등을 차례대로 요청합니다.

참고

저작자표시

아무튼, 쓰기