웹 브라우저에 URL을 입력하면 일어나는 일

www.google.com을 입력해보자

웹 브라우저 주소창에 URL을 입력하고 엔터를 누르게 되면 어떤 일이 일어날까요?

간단하게 말하면 순서는 다음과 같다고 합니다.

  1. 브라우저 주소창에 www.google.com을 입력합니다.
  2. 브라우저가 www.google.com의 IP 주소를 찾기 위해 캐시에서 DNS 기록을 확인합니다.
  3. IP주소가 확인되면 브라우저는 TCP 연결을 설정합니다. (Three-Way Handshake)
  4. 브라우저가 서버에 HTTP 요청을 전송하여 웹 페이지 리소스를 요청합니다.
  5. 서버는 요청을 처리하고 HTML, CSS, 자바스크립트 등의 리소스를 포함한 HTTP 응답을 브라우저로 보냅니다.
  6. 마지막으로, 브라우저는 받은 HTML 데이터를 렌더링하여 페이지를 화면에 표시합니다.

지금부터 하나하나 어떤 과정인지 알아보겠습니다.

1. 브라우저 주소창에 www.google.com을 입력하면 해당 URL의 IP 주소를 찾기 위해 캐시에서 DNS 기록을 확인합니다.

엔터키를 누르는 순간 IP 주소를 찾기 위해 캐시에서 DNS 기록을 확인하게 됩니다.
여기서 IP 주소, 캐시, DNS에 대해 잠깐 짚고 넘어가면,

IP 주소 - 인터넷에 연결된 장치들이 서로를 식별하고 통신할 수 있게 하는 고유한 숫자입니다.
캐시 - 캐싱은 자주 사용하는 정보를 쉽게 접근할 수 있는 장소에 임시로 저장해두는 것입니다.

DNS(Domain Name System) - 웹사이트의 IP 주소와 도메인 주소를 연결해주는 시스템으로 전화번호부와 같은 존재라고 볼 수 있습니다.

캐시를 확인하는 과정은 다음과 같습니다.

  • 브라우저는 먼저 로컬 캐시에서 해당 URL의 IP 주소가 저장되어 있는지 확인합니다.
  • 브라우저, 운영체제(OS), 또는 라우터에 DNS 캐시가 있을 수 있습니다.
  • 캐시가 있으면 바로 IP 주소를 사용하고, 캐시가 없다면 DNS 서버에 요청을 보내 해당 URL의 IP 주소를 찾습니다.

2. IP주소가 확인되면 브라우저는 TCP 연결을 설정합니다. (Three-Way Handshake)

IP 주소를 찾으면, 브라우저는 TCP/IP 프로토콜을 통해 서버와의 연결을 설정합니다.
브라우저는 인터넷 프로토콜(IP, Internet Protocol)을 사용하여 이러한 연결을 구축합니다.
사용할 수 있는 여러가지 인터넷 프로토콜이 있지만, 일반적으로 HTTP 요청에서는 TCP(Transmission Control Protocol) 라는 전송 제어 프로토콜을 사용합니다.
이때 클라이언트와 서버는 Three-Way Handshake라는 과정으로 연결을 시도합니다.

TCP/IP 프로토콜 - IP는 전송할 주소를 정해주는 역할을 하고, TCP는 데이터를 정확한 주소에 안전하게 전달하는 역할을 합니다.
Three-Way Handshake - 클라이언트(데이터를 요청하는 쪽)와 서버(데이터를 제공하는 쪽) 사이에서 안정적인 연결을 설정하기 위한 과정입니다.

  1. SYN - 클라이언트가 서버에 “나랑 연결할 준비됐니?”라고 연결 요청을 보냅니다.
  2. SYN-ACK - 서버가 “준비됐어, 너도 준비됐니?”라고 응답을 보냅니다.
  3. ACK - 클라이언트가 “나도 준비됐어”라고 확인을 보내면, 연결이 완료되고 데이터 전송이 시작됩니다.

이 과정은 위와 같이 세 단계로 이루어집니다.

TCP/IP 프로토콜은 인터넷에서 데이터를 보내는 방법과 규칙을 제공하고, Three-Way Handshake는 데이터를 주고받기 전에 안정적인 연결을 만드는 과정입니다.

3. 브라우저가 서버에 HTTP 요청을 전송하여 웹 페이지 리소스를 요청합니다.

TCP 연결이 성공적으로 설정되면, 브라우저는 서버에 HTTP 요청을 보냅니다.
이 요청에는 www.google.com에서 필요한 리소스(HTML, CSS, 자바스크립트 등)를 가져오기 위한 정보를 포함합니다.
브라우저의 종류, 원하는 데이터 형식, 그리고 브라우저가 수락할 수 있는 압축 방식 등의 정보가 들어갑니다.
이 요청은 GET 요청으로, 서버에 웹 페이지 데이터를 요청하는 가장 일반적인 방식입니다.

4. 서버는 요청을 처리하고 HTML, CSS, 자바스크립트 등의 리소스를 포함한 HTTP 응답을 브라우저로 보냅니다.

서버는 클라이언트(브라우저)로부터 받은 요청을 처리하고, 해당 웹 페이지를 렌더링하는 데 필요한 데이터를 HTTP 응답으로 돌려줍니다.
이 응답에는 요청한 리소스(HTML 파일, CSS 스타일, 자바스크립트 파일 등)가 포함되어 있으며, 브라우저는 이를 통해 웹 페이지를 구성할 수 있게 됩니다.

숫자 코드를 사용하여 HTTP 응답 결과를 다섯 가지 상태로 나타냅니다.

  • 1xx (Information Response): 정보 메시지만을 나타냅니다. 서버가 요청을 받았으며 서버에 연결된 클라이언트는 계속해서 작업을 하라는 뜻 입니다.
  • 2xx (Successful Response): 서버와의 요청이 성공하여 성공적으로 서버로부터 응답 받았다는 것을 나타냅니다.
  • 3xx (Redirection Message) : 요청 완료를 위해 추가 작업 조치가 필요함을 의미합니다.
  • 4xx (Client Error Response) : 클라이언트의 Request에 에러가 있음을 의미합니다.
  • 5xx (Server Error) : 서버 측의 오류로 request를 수행할 수 없음을 의미합니다.

따라서 오류가 발생한 경우 HTTP 응답을 확인하여 수신한 상태 코드의 유형을 통해 어떤 오류가 발생했는지 확인할 수 있습니다.

5. 마지막으로, 브라우저는 받은 HTML 데이터를 렌더링하여 페이지를 화면에 표시합니다.

브라우저는 응답받은 HTML을 화면에 단계별로 표시하게 됩니다.
HTML 골격을 먼저 렌더링 하고난 후 HTML 태그를 확인하고 이미지, CSS 스타일시트, 자바스크립트 파일 등과 같은 웹 페이지의 추가 요소에 대한 GET 요청을 보냅니다.
정적 파일(Static File)은 브라우저에서 캐싱되므로 다음에 페이지를 방문할 때 다시 가져올 필요가 없습니다.


단순해 보이는 웹 페이지 로드에 대한 이야기이지만, 찾아보고 글을 작성하며 단어 하나하나를 완벽하게 이해하지 못하고 있다는 생각이 들었습니다. 놓치고 작성한 부분이 많을 것이라고 생각하지만 해당 내용을 정리하면서 웹 브라우저 작동 원리에 대해서 조금은 배울 수 있었던 것 같습니다. 시간이 오래 걸리더라도 외우기 보단 이해하며 개발에 대한 지식을 단단하게 쌓고 싶다는 생각이 들었습니다.