[CS] 브라우저에 URL을 입력하고 보여지기까지의 과정

🦩 우리는 브라우저에 URL을 입력한 후의 과정을 왜 알아야 할까?

: SW 엔지니어라면 개발 과정에서 문제가 발생한 부분의 위치와 성능 파악을 위해 위의 과정을 파악해 놔야하고, 그 외에도 우리가 개발하고 있는 큰 프레임의 한 부분으로서 운영 체제, 브라우저 환경에 관련하여 전체적인 과정으로서 알아놔야하는 필수적인 CS이다.

 

🦩 웹 브라우저에 URL 입력시 과정 요약

 

1. 웹 브라우저에 URL 입력
2. 웹 브라우저가 도메인명으로 IP 주소 조회
3. 웹 브라우저가 서버와의 TCP 연결 시작
4. 웹 브라우저가 서버로 HTTP 요청 전송
5. 웹 서버가 요청을 처리한 후 웹 브라우저에 응답 전송
6. 사용자에게 웹 브라우저 보여주기 (= 웹 브라우저가 콘텐츠 렌더링)

🦩 URL 입력 후 변화과정을 살펴보자

1. 웹 브라우저에 URL 입력

EX) 검색창에 https://www.naver.com/ 라고 입력한다면

 

과정을 살펴보기에 앞서 URL의 구조를 살펴보자.

• 통신규약(Protocol) : https://

: HTTP는 Hyper Text Transfer Protocol의 약자로서 인터넷에서 HTML과 같은 문서를 사용자 컴퓨터에 설치된 웹 브라우저가 웹 서버에 요청할때의 규칙과 같은 통신 규약이다.

기본적인 80번 포트에서 서비스를 제공하며, 클라이언트(웹 브라우저)가 TCP 80포트를 사용해 연결을 요청하면 서버는 요청에 응답하여 웹 클라이언트에 데이터를 전송한다. 여기서 보안을 강화하여 제공하는 것이 HTTPS(Hyper Text Transfer Protocol Secure Socket)이다.

cf)  ftp:// 나 file:// 은 브라우저가 다른 방식으로 연결하도록 하는 프로토콜들이다.

 

• 도메인(Domain) : www.naver.com/   

: 도메인은 특정 서버의 IP 주소가 길고, 복잡하기 때문에 기억하기 쉬운 주소로 변환한 것이다.

 

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

: 브라우저가 URL을 가지고 인터넷에 연결할 서버를 찾기 위해 입력한 도메인으로 웹 사이트를 호스팅하는 서버의 IP 주소를 탐색한다. 이 작업을 위해서 DNS를 사용한다.

• DNS란?

: 도메인 이름 시스템(DNS)은 사람이 읽을 수 있는 도메인 이름(예: www.naver.com/ )을 머신이 읽을 수 있는 IP 주소(예: 192.0.2.44)로 변환합니다.  

 

DNS는 복잡하고 매우 빨라야 하기 때문에 DNS 데이터는 웹 브라우저 사이의 서로 다른 계층과 인터넷의 다양한 위치에 임시로 저장되는데 이를 캐시(Cache)라고 부릅니다. 브라우저는 네 개의 캐시를 확인하는데 고유한 브라우저 캐시, 운영 체제 캐시, 라우터 로컬 네트워크 캐시, 회사 네트워크 또는 인터넷 서비스 제공업체(ISP)의 DNS 서버 캐시를 확인합니다.

 

그렇다면 왜 네 가지나 되는 캐시를 갖고 있는걸까?

캐싱된 정보가 개인 정보 보호에는 위험할 수 있지만 캐시는 네트워크 트래픽을 규제하고 데이터 전송 시간 개선하는데 중요한 역할을 한다.

 

만약, 웹 브라우저가 캐시를 찾는 과정에서 IP주소를 찾을 수 없는 경우에는 네트워크 또는 ISP의 DNS 서버가 재귀적 DNS 조회를 수행한다. 재귀적 DNS 조회은 필요한 IP 주소를 찾기 위하여 다른 DNS 서버로 반복적인 검색을 하고, 적절한 IP 주소를 찾는 일이다.

 

3. 웹 브라우저가 서버와의 TCP 연결 시작

: 브라우저가 올바른 IP 주소를 찾는데 성공하였다면 IP 주소와 일치하는 서버와 연결해 정보를 전송한다. 브라우저는 인터넷 프로토콜(IP, Internet Protocol)을 사용하여 이 과정을 거친다.  일반적으로 HTTP 요청에서는 TCP(Transmission Control Protocol)라는 전송 제어 프로토콜을 사용한다. 

 

쉽게 말해서 인터넷 프로토콜 중 TCP와 IP가 가장 많이 쓰이는 프로토콜인데  송신자가 수신자에게 IP 주소를 사용하여 데이터를 전달하고, 그 데이터가 제대로 갔는지, 너무 빠르지는 않는지, 제대로 받았다고 연락은 오는지에 대해 이야기하는 것이다.

 

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

: 브라우저가 서버에 연결되면(3. TCP연결), HTTPS 프로토콜에 대한 통신 규약을 따른다.

웹 브라우저가 페이지의 콘텐츠 데이터를 받기 위하여 서버에 요청 메세지를 요청하는데, 이때 HTTP 통신 규약에 따라 필요한 3가지를 보낸다.

• Start Line
• Header
• Body

 

5.웹 서버에서 요청을 처리한 후 브라우저에 응답 전송

: 서버에는 웹 서버가 포함되어 있는데 웹 서버에서 위의 요청(4. HTTP 요청)을 올바르게 수신하였다면,  해당 요청 내용을 request handler에 전달하여 내용을 읽고 응답을 생성한다. Request Handler는 요청, 요청의 헤더 및 쿠키를 읽고 필요한 경우 서버의 정보를 업데이트 하는 프로그램으로서 NET, PHP, Ruby, ASP 등이 있다. 그런 다음 응답으로 보낼 데이터들을 특정 포맷(JSON, XML, HTML)으로 변환하여  브라우저에 전송한다.

 

6. 사용자에게 웹 브라우저 보여주기

: 서버로부터 받아온 response를 웹 브라우저(클라이언트)는 렌더링하여 브라우저에 보여준다.

 

서버 응답에는 요청한 웹 페이지와 함께 상태 코드(status code), 압축 유행(Content-Encoding), 페이지 캐싱(Cache-Control), 설정할 쿠키, 개인 정보 등이 포함된다.

 

 

🦩 정리

: 우리는 웹 사이트에 들어가면 불과 1초도 안되는 사이에 홈페이지의 UI를 확인할 수 있지만 보이지 않는 곳에선 네트워크가 저리 고생한다. 크게 과정에서 내용을 다뤘기 때문에 세세하게 네트워크나 OSI를 파고든다면, 더욱 심층적인 지식을 쌓을 수 있을 것 같다.

 

 

References

https://rachel-kwak.github.io/2021/03/08/HTTPS.html

HTTPS란? (동작방식, 장단점)

https://aws.amazon.com/ko/blogs/korea/what-happens-when-you-type-a-url-into-your-browser/

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

https://aws-hyoh.tistory.com/entry/TCPIP-%EC%89%BD%EA%B2%8C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

TCP/IP 쉽게 이해하기

 

https://velog.io/@khy226/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90-url%EC%9D%84-%EC%9E%85%EB%A0%A5%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EC%9D%BC%EC%9D%B4-%EB%B2%8C%EC%96%B4%EC%A7%88%EA%B9%8C