[Web] 브라우저에 URL을 입력하면 무슨 일이 일어날까요?

[Web] 브라우저에 URL을 입력하면 무슨 일이 일어날까요?

📖 들어가며

브라우저 주소창에 url을 입력하면 생기는 과정들에 대해서 알아보겠습니다.

DNS 레코드 확인

첫 번째로, 브라우저는 DNS(Domain Name Server) 레코드의 캐시를 확인하여 해당 URL의 IP 주소를 찾게 됩니다.

DNS(Domain Name Server)란?
DNS는 분산 데이터베이스 시스템입니다. DNS는 도메인 이름과 IP 주소를 매핑해주는 서버로, 브라우저가 인터넷 자원을 로드할 수 있도록 도와줍니다.
즉, DNS는 전화번호부와 같은 역할을 합니다. 사람들이 이름으로 다른 사람을 찾듯이, 컴퓨터는 DNS를 사용하여 웹사이트의 도메인 이름을 해당 IP 주소로 변환합니다.

해당 과정에서 아래의 순서로 확인을 하게 됩니다.

1. 브라우저 캐시 확인: 브라우저는 이전에 방문한 웹사이트에 대해 고정된 기간 동안 DNS 레코드 저장소를 유지 관리합니다. 따라서 첫 번째 과정으로 브라우저 캐시를 먼저 확인합니다.
2. OS 캐시 확인: 브라우저 캐시에 없는 경우, OS는 DNS 레코드 캐시도 유지하므로 브라우저는 기본 컴퓨터 OS에 시스템 호출(예: Windows의 경우 gethostname )을 보내 레코드를 가져옵니다.
3. 라우터 캐시 확인: 컴퓨터에 없으면 브라우저는 자체 DNS 레코드 캐시를 유지 관리하는 라우터와 통신하여 확인합니다.
4. ISP(인터넷 서비스 제공 업체) 캐시 확인: ISP는 DNS 레코드 캐시를 포함하는 자체 DNS 서버를 유지 관리합니다. 이전 단계에서 찾지 못했다면 마지막으로 ISP 캐시를 확인합니다.

ISP의 DNS 서버의 DNS 쿼리 시작

요청한 URL의 DNS 레코드 캐시 대해 ISP 캐시에도 없다면 ISP의 DNS 서버는 DNS 쿼리를 시작하여 해당 url을 호스팅하는 서버의 IP 주소를 찾습니다.

maps.google.com을 예시로 살펴보겠습니다.

1. maps.google.com의 경우 먼저 DNS recursor가 Root name 서버에 접속합니다.
2.  Root domain 서버는 이를 .com domain name 서버로 리다이렉션 합니다. 
3. com name 서버는 이를 google.com name서버 로 리다이렉션합니다 
4. google.com name 서버는 DNS 레코드에서 maps.google.com과 일치하는 IP 주소를 찾아 이를 DNS recursor에게 반환하고, DNS recursor는 이를 사용자의 브라우저로 다시 보냅니다.

루트 네임서버부터 시작하여 TLD(최상위 도메인) 네임서버, 그리고 실제 도메인을 관리하는 네임서버까지 재귀적으로 진행되고, 필요한 IP 주소를 찾거나 찾을 수 없다는 오류 응답을 반환할 때까지 진행됩니다.

서버와의 TCP 연결 시작

브라우저는 찾은 IP 주소에 대해 TCP 연결을 시작합니다.

이 과정은 TCP의 3-way handshake 과정을 통해 이루어집니다.

1. SYN(Synchronize) 단계 : 브라우저가 서버에게 SYN 패킷을 보내 연결을 요청. 브라우저가 서버와의 연결을 시작하고자 한다는 것을 알리는 신호
2. SYN-ACK(Synchronize-Acknowledge) 단계: 서버가 SYN 패킷을 받으면, 클라이언트에게 연결 요청을 수락한다는 의미의 SYN-ACK 패킷을 전송
3. ACK(Acknowledge) 단계:마지막으로, 클라이언트는 서버에게 ACK 패킷을 보내 연결을 확정

연결의 종료는 4-way handshake 과정을 통해 종료됩니다.

(현재 과정에서 연결 종료는 되지 않습니다.)

1. FIN(Finish) 패킷 전송: 클라이언트가 먼저 서버에게 FIN(Finish) 패킷을 보내 연결 종료를 요청합니다. 이 패킷은 클라이언트가 더 이상 전송할 데이터가 없음을 서버에 알리는 신호입니다.
2. ACK(Acknowledge) 패킷 응답: 서버는 클라이언트의 FIN 패킷을 받고, 이를 확인했음을 알리는 ACK(Acknowledge) 패킷을 클라이언트에게 보냅니다.
3. 서버의 FIN 패킷 전송: 서버가 클라이언트에게 보낼 모든 데이터를 전송 완료하면, 서버 역시 클라이언트에게 FIN 패킷을 보냅니다.
4. 클라이언트의 ACK 패킷 응답: 마지막으로, 클라이언트는 서버의 FIN 패킷을 받고 ACK 패킷을 보내 연결 종료를 확정합니다.

HTTP 요청 전송

TCP 연결이 성공적으로 이루어지면, 브라우저는 해당 url의 웹 페이지에 대한 HTTP 요청을 웹 서버에게 보내게 됩니다.

해당 과정에서 요청은 주로 GET 요청이 발생합니다.

서버 응답 처리

응답 예시

웹 서버는 요청을 처리하고 HTTP 응답을 브라우저에게 보냅니다.
응답에는 요청한 웹 페이지 뿐만 아니라 상태 코드,페이지 캐시 방법( Cache-Control ), 설정할 쿠키, 개인정보 정보 등이 포함됩니다.

브라우저 렌더링

마지막으로, 브라우저는 응답 받은 HTML을 렌더링 하여 사용자에게 표시합니다. 이 과정은 크리티컬 렌더링 패스(Critical Rendering Path)를 통해 이루어집니다.

• DOM 생성: 브라우저는 HTML을 받아서 Document Object Model(DOM) 트리를 생성합니다. 이 단계에서는 HTML 태그들이 트리 구조로 구성되며, 웹페이지의 구조를 정의합니다.
• CSSOM 생성: 브라우저는 CSS를 받아서 CSS Object Model(CSSOM) 트리를 생성합니다. CSSOM은 웹페이지의 각 요소에 대한 스타일 정보를 담고 있습니다.
• 렌더 트리 생성: DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다. 렌더 트리는 실제로 화면에 그려질 요소들과 그 요소들의 스타일을 담고 있습니다.
• 레이아웃: 렌더 트리를 바탕으로 브라우저는 각 요소의 크기와 위치를 계산합니다. 이 단계를 통해 웹페이지의 레이아웃이 결정됩니다.
• 페인트: 마지막으로, 브라우저는 레이아웃 정보를 바탕으로 각 요소를 화면에 그립니다.
• 추가적으로, JavaScript는 DOM 트리나 CSSOM 트리를 변경할 수 있으며, 이런 변경이 발생하면 브라우저는 렌더 트리를 다시 계산(Reflow)하고 화면을 다시 그려야(Repaint) 할 수 있습니다. 

 

이러한 과정을 통해 최종적인 웹페이지가 사용자에게 완성되어 표시됩니다!

📕 마치며

평소 이용할 때는 몰랐지만 짧은 시간 안에 많은 일들이 일어나는 것에 대해서 흥미로운 것 같습니다😊

 

참고 문헌:

• https://wonism.github.io/critical-rendering-path/
• https://aws.amazon.com/ko/blogs/korea/what-happens-when-you-type-a-url-into-your-browser/
• https://medium.com/@maneesa/what-happens-when-you-type-an-url-in-the-browser-and-press-enter-bb0aa2449c1a