URL 입력부터 화면에 웹 사이트가 나타나기까지의 과정은 어떻게 되나요?

아래에 더 자세히 서술하겠지만 핵심 과정만 요약해보면 다음과 같다.

1. 웹 브라우저에 URL을 입력한다.
2. 웹 브라우저가 도메인 명으로 IP 주소를 조회한다.
3. 웹 브라우저가 웹 서버와 TCP 연결을 설정한다.
4. 웹 브라우저가 웹 서버로 HTTP 요청을 전송한다.
5. 웹 서버가 요청을 처리하고 웹 브라우저로 응답을 전송한다.
6. 웹 브라우저가 전송 받은 콘텐츠를 렌더링한다.

 

1. 웹 브라우저에 URL을 입력한다.

 

사용자는 웹 브라우저에 접속하고자 하는 웹 사이트의 URL을 입력한다.

 

이때 URL은 프로토콜과 도메인으로 구분할 수 있는데

 

프로토콜은 컴퓨터 내부 또는 컴퓨터 사이에서의 데이터 교환 방식을 정의한 규약을,

 

도메인은 컴퓨터의 IP 주소에 매핑되는 텍스트 문자열을 나타낸다.

 

예를 들어 https://ihnim.tistory.com에서 https://는 프로토콜, ihnim.tistory.com은 도메인에 해당한다.

 

2. 웹 브라우저가 도메인 명으로 IP 주소를 조회한다.

 

앞서 사용자가 입력한 URL은 프로토콜과 도메인으로 구분할 수 있고,

 

이때 도메인이란 컴퓨터의 IP 주소에 매핑되는 텍스트 문자열이라고 했다.

 

즉 도메인과 IP 주소 모두 특정 컴퓨터의 주소를 나타내는데,

 

이때 도메인은 인간 친화적인 특징을 가지므로 사용자가 서로의 컴퓨터를 보다 쉽게 식별할 수 있도록 하고

 

실제로 컴퓨터가 서로의 컴퓨터를 식별할 때는 IP 주소가 사용된다.

 

따라서 특정 컴퓨터와 통신하기 위해서는 사용자가 입력한 도메인을 해당 컴퓨터의 IP 주소로 변환하는 과정이 필요하고

 

이 과정은 DNS에 의해 이루어진다.

 

3. 웹 브라우저가 웹 서버와 TCP 연결을 설정한다.

 

웹 브라우저는 DNS를 통해 알아낸 웹 서버의 IP 주소로 요청 패킷을 전송한다.

 

웹 브라우저의 요청 패킷은 일반적으로 TCP/IP 프로토콜에 대한 통신 규칙을 따르며,

 

요청 패킷이 라우팅 테이블을 따라 이동하다가 웹 서버에 도착하면 웹 브라우저와 웹 서버는 TCP 연결을 설정한다.

 

참고) TCP/IP 4계층 모델

 

4. 웹 브라우저가 HTTP 요청을 웹 서버로 전송한다.

 

웹 브라우저와 웹 서버의 TCP 연결이 설정되면 웹 브라우저는 웹 서버로 페이지의 콘텐츠를 요청한다.

 

이때 요청은 HTTP(S) 프로토콜에 대한 통신 규칙을 따르며,

 

특히 HTTPS를 사용하는 경우 TLS handshake를 통해 통신을 암호화할 수 있다.

 

참고) HTTP

 

5. 웹 서버가 요청을 처리하고 응답을 전송한다.

 

웹 서버는 웹 브라우저로부터 받은 요청을 처리하고 응답을 전송한다.

 

이때 응답에는 DOM 트리와 CSSOM 트리를 생성할 수 있는 페이지 정보가 포함된다.

 

6. 웹 브라우저가 전송 받은 콘텐츠를 렌더링한다.

웹 브라우저는 웹 서버로부터 전송 받은 DOM 트리, CSSOM 트리를 결합해 렌더트리를 생성한다.

 

렌더트리 생성 후 웹 브라우저는 레이아웃을 계산하고 이를 기반으로 렌더트리의 각 노드를 픽셀로 변환해 화면에 출력한다.

 

이 과정은 여러 번 반복될 수도, 병렬로 처리될 수도 있다.

• DOM 트리: HTML 요소를 노드로 가지는 트리로, 자바스크립트를 통해 동적으로 수정될 수 있으며 웹 페이지의 구조적인 측면을 나타낸다. 웹 브라우저는 웹 서버로부터 받은 HTML 문서를 해석해 DOM 트리를 생성한다.
• CSSOM 트리: 웹 브라우저는 웹 서버로부터 받은 CSS 파일, HTML 문서의 <style> 태그, HTML 요소의 style 속성에서 스타일 정보를 해석해 CSSOM 트리를 생성한다.
• 렌더트리: 페이지를 렌더링 하는 데 필요한 노드들로만 구성된 트리

 

더 자세히 파고들려면 훨씬 더 자세히 파고들 수 있지만 전부 완벽히 이해하긴 어려워서 이번엔 핵심만 정리해보았다.

 

CS 지식 더 쌓고 나중에 다시 심화시켜 공부해보자!

 

 

 

 

 

---

다음 자료를 공부하여 정리한 글로, 아직 많이 부족해 틀린 내용이 있을 수도 있습니다.

 

혹시 있다면 댓글로 알려주세요. 수정하고 더 공부해나가겠습니다-

 

웹 브라우저에 URL을 입력하면 어떤 일이 생기나요?