웹 통신 흐름
웹 브라우저에 입력한 URL이 페이지로 렌더링되기까지의 흐름
웹 통신 흐름 순서
웹에서 사용자가 특정 URL을 입력했을 때 화면에 웹페이지가 표시되기까지 (1) 요청 준비 및 전송, (2) 서버 처리, (3) 응답 수신 및 해석, (4) 페이지 렌더링 단계를 거친다.
요청 준비 및 전송 단계
URL 파싱 및 DNS 조회(도메인 이름 해결)
사용자가 브라우저 주소창에 https://www.google.com과 같은 URL을 입력하면 브라우저는 이 URL을 파싱해 프로토콜(https), 호스트명(www.google.com), 경로 등을 파악한다.
- DNS 조회: 웹사이트에 접속하려면 해당 도메인 이름에 해당하는 IP 주소를 알아야 한다. 브라우저는 DNS(Domain Name System) 서버에 질의하여 도메인 이름에 해당하는 IP 주소를 얻는다. 이 과정은 브라우저 캐시 → OS 캐시 → 로컬 DNS 서버 → 루트/TLD/권한 있는 네임 서버 순으로 진행되며, 최종적으로 서버의 IP 주소를 확보한다.
TCP 연결 설정(3-Way Handshake)
IP 주소를 얻은 브라우저는 해당 서버와 데이터를 주고받기 위해 TCP(Transmission Control Protocol) 연결을 설정한다.
- 3-Way Handshake: 클라이언트와 서버는 신뢰성 있는 데이터 전송을 보장하기 위해 3단계의 초기화 과정을 거친다.
- SYN: 클라이언트가 서버에 접속 요청 패킷을 보낸다.
- SYN-ACK: 서버가 요청을 수락한다는 패킷과 함께 클라이언트에게 ACK 패킷을 보낸다.
- ACK: 클라이언트가 최종 확인 응답을 보냄으로써 연결이 확립된다.
HTTP 요청 메시지 생성 및 전송(TLS/SSL Handshake)
TCP 연결이 성공하면 HTTP 요청 메시지를 생성하여 전송한다.
HTTPS(TLS/SSL Handshake): 만약 프로토콜이 HTTPS라면 TCP 연결 후 데이터 암호화를 위해 TLS/SSL Handshake 과정을 추가로 거친다. 이 과정에서 서버의 인증서 확인과 암호화 키 교환이 이루어진다.
요청 생성: 브라우저는 HTTP 메서드(GET, POST, PUT, DELETE), 요청 URI, HTTP 버전, 각종 헤더(
Host,User-Agent,Accept) 및 필요한 경우 바디를 포함하는 HTTP 요청 메시지를 구성한다.1 2 3 4
GET /posts/1 HTTP/1.1 Host: www.google.com User-Agent: Mozilla/5.0 Accept: text/html
전송: 이 요청 메시지는 설정된 TCP/TLS 연결을 통해 서버로 전송된다.
서버 처리 단계
요청 수신 및 처리
서버는 클라이언트로부터 전송된 HTTP 요청 메시지를 수신하면 이를 파싱하여 요청 내용(메서드, 경로, 헤더)을 분석한다.
- 라우팅: 서버는 요청된 URI를 기반으로 어떤 내부 핸들러가 이 요청을 처리해야 할지 결정한다.
- 비즈니스 로직 실행: 서버는 요청된 데이터베이스 조회, 파일 접근, 계산 등의 비즈니스 로직을 실행한다. 예를 들어 블로그 게시글을 요청했다면 데이터베이스에서 해당 게시글을 가져오는 작업을 수행한다.
HTTP 응답 메시지 생성
비즈니스 로직 실행 결과에 따라 서버는 클라이언트에게 보낼 HTTP 응답 메시지를 생성한다.
상태 코드 결정: 요청 처리 상태를 나타내는 상태 코드(200 OK, 404 Not Found)를 결정한다.
응답 메시지 구성: 상태 코드와 응답 구문, HTTP 버전, 응답 헤더(
Content-Type,Cache-Control) 및 클라이언트에게 전송할 실제 리소스 데이터인 응답 바디를 포함하여 응답 메시지를 구성한다.1 2 3 4 5 6 7 8
HTTP/1.1 200 OK Content-Type: application/json Content-Length: 58 { "id": 1, "title": "Welcome", "content": "Hello World!" }
응답 수신 및 해석 단계
응답 수신 및 연결 종료
서버는 생성된 HTTP 응답 메시지를 TCP/TLS 연결을 통해 클라이언트(브라우저)로 전송한다.
- 응답 수신: 브라우저는 서버로부터 응답 메시지를 수신한다.
- TCP 연결 종료: HTTP/1.1의 경우 헤더의
Connection: close에 따라 연결이 종료되거나, 지속 연결(Persistent Connection)이 유지되어 후속 요청에 재사용될 수 있다.
응답 해석 및 캐싱
브라우저는 수신된 응답 메시지를 해석한다.
- 상태 코드 확인: 상태 코드를 확인해 요청이 성공했는지, 리디렉션이 필요한지, 오류가 발생했는지 등을 판단한다.
- 헤더 분석:
Content-Type을 확인해 응답 바디가 HTML, 이미지, JSON 등 어떤 형식인지 파악하고,Cache-Control헤더를 분석하여 리소스를 캐시에 저장할지 여부를 결정한다. - 리디렉션 처리: 상태 코드가 301, 302 등 리디렉션을 나타내는 경우 브라우저는 응답 헤더의
Location에 지정된 새 URL로 다시 요청을 시작한다.
페이지 렌더링 단계
응답 바디에 HTML 데이터가 포함되어 있다면 브라우저는 웹페이지를 화면에 표시하는 렌더링 과정을 시작한다.
DOM 및 CSSOM 트리 구축
- HTML 파싱(DOM 구축): 브라우저는 수신된 HTML 코드를 한 줄씩 읽어 DOM(Document Object Model) 트리를 구축한다. DOM 트리는 HTML 요소들의 논리적 구조를 나타낸다.
- CSS 파싱(CSSOM 구축):
<link>태그 등으로 포함된 CSS 파일을 다운로드하고 파싱하여 CSSOM(CSS Object Model) 트리를 구축한다. CSSOM 트리는 각 요소의 스타일 정보를 담는다.
렌더 트리 생성 및 레이아웃
- 렌더 트리(Render Tree) 생성: DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다. 렌더 트리는 실제로 화면에 표시되는 요소들(
display: none으로 설정된 요소는 제외)만을 포함한다. - 레이아웃(Layout): 렌더 트리를 기반으로 각 요소의 정확한 위치와 크기를 계산한다. 이 과정을 리플로우(Reflow) 라고 부른다.
페인팅 및 표시
- 페인팅(Painting): 계산된 위치와 크기에 따라 렌더 트리의 각 요소를 화소(픽셀)로 변환해 화면에 그리는 작업을 수행한다.
- 스크립트 실행: 실행 중
<script>태그를 만나면 JavaScript 코드를 파싱하고 실행한다. JavaScript는 DOM이나 CSSOM을 조작하여 페이지의 구조나 스타일을 변경할 수 있으며 이 경우 레이아웃과 페인팅 과정이 다시 발생할 수 있다.
이 모든 과정을 거쳐 최종적으로 사용자가 웹페이지를 확인할 수 있게된다.
웹 통신 흐름 요약
단계별 요약
URL 입력 및 요청 발생
사용자가 브라우저에 URL(
www.google.com)을 입력하거나 클릭하면 웹 페이지 요청이 시작된다.DNS 조회
브라우저는 DNS 서버에 도메인 이름을 질의하여 해당 도메인의 IP 주소(
172.217.31.174)를 얻는다.HTTP 요청 전송
브라우저는 확보한 IP 주소를 이용해 웹 서버에 HTTP 요청을 보낸다. 요청 방식으로는 주로 GET, POST, PUT, DELETE 등이 사용된다.
서버 처리 및 응답 생성
웹 서버는 요청을 분석하고 처리하며 필요에 따라 데이터베이스를 조회한다. 동적 콘텐츠는 HTML로 생성되며 이와 함께 CSS, JavaScript 등의 리소스를 포함한 HTTP 응답을 브라우저에 전송한다.
브라우저 렌더링(Rendering)
브라우저는 서버 응답으로 받은 리소스를 처리하여 화면에 표시한다. HTML로 DOM을, CSS로 CSSOM을 생성한 후, 둘을 합쳐 렌더 트리를 구축한다. 이 렌더 트리를 바탕으로 레이아웃을 계산하고 화면에 그리는(Paint) 과정을 거쳐 사용자에게 웹 페이지를 보여준다.
최종 표시
완성된 웹 페이지가 사용자에게 표시되며 JavaScript가 실행되어 동적 기능이 활성화된다.
최종 요약
사용자가 URL을 입력하면, 브라우저는 DNS 조회로 IP 주소를 얻어 웹 서버에 HTTP 요청을 보낸다. 서버는 요청을 분석하고 처리한 뒤, HTML, CSS, JavaScript 등의 리소스를 포함한 HTTP 응답을 다시 보낸다. 브라우저는 이 응답을 파싱하여 DOM과 CSSOM을 만들고, 이를 결합해 렌더링을 거쳐 페이지를 화면에 표시하며, JavaScript로 동적인 기능을 활성화한다.