[개발 지식] 웹 브라우저에서 naver.com를 접속할 때의 과정을 알아보자

들어가며

우선 웹과 인터넷의 차이를 알 필요가 있다.

"웹은 인터넷과 동일하지 않나?"라고 생각한다면 아직 네트워크의 개념을 정확하게 익히지 못한 셈이다. (그리고 아마 당신은 바보 대장임에 틀림없다 !)

결론부터 말하자면 웹은 인터넷을 기반으로 동작하는 서비스 중 하나이다.

따라서, 웹보다 인터넷이 훨씬 더 넓고 큰 개념이다.

 

웹 vs 인터넷

그렇다면 웹과 인터넷의 차이는 뭔데?

 

어렸을 때, 종이컵에 실을 메달아서 친구와 전화기 놀이를 했던 기억이 있을 것이다.

사람의 성대에서 발생한 진동이 종이컵을 통해서 모아지고, 실이라는 매개체를 통해서 반대편의 종이컵까지 전달하는 간단한 원리가 유년 시절에 재미를 준 셈이다.

이 진동을 전자 신호로 바꾸면 네트워크 통신이 가능해지고, 그 규모가 전세계적으로 커지게 되면 인터넷이 된다.

출처: 해양수산부

 

위의 사진과 같이, 해저 광케이블이 전세계적으로 깔려있다.

따라서 우리는 미국에서 보낸 내용을 1초도 걸리지 않고 매우 빠르게 읽을 수 있는 것이다. (전자의 속도는 빛의 속도와 유사하다.)

 

이처럼 인터넷은 전 세계의 컴퓨터 네트워크를 연결하는 거대한 통신망이다.

다양한 네트워크가 상호 연결되어 데이터를 주고받을 수 있는 체계를 이루고 있으며, 인터넷은 이 네트워크들을 하나로 통합하는 역할을 한다.

반면, 웹은 인터넷을 통해 접근할 수 있는 정보의 집합체를 뜻한다.

주로 Hypertext link를 통해 연결된 문서들도 구성된다.

웹은 브라우저를 통해 접근하며, HTTP 프로토콜을 통해서 HTML 형식을 통신한다.

 

정리하자면, 인터넷은 전 세계의 네트워크를 연결하는 기술적 인프라를 뜻하며, 웹은 인터넷을 이용하여 정보를 주고받는 서비스 중 하나이다.

 

naver.com 접속 과정

그렇다면 naver 웹 사이트에 접속하면 어떤 과정이 일어날까?

우선 사용자가 직접적으로 인터넷에 접근하는 것은 상당히 어렵고 불편하기에 웹 브라우저를 사용해야한다.

사실 naver 웹 사이트는 www.naver.com로 접속하는 것이 맞지만, 사실 그렇지 않다.

네이버

이게 무슨 말장난인 것 같지만, 어떻게 보면 맞는 말인 셈이다.

인터넷에 접근하기 위해서는 실제 IP주소만이 가능하다.

하지만, 123.123.123.123:1234와 같이 실제 IP 주소를 매번 사용하기에는 가독성도 높지 않고 불편하다는 것이 큰 단점이다.

"그렇다면 가독성이 높은 영문을 사용가능하게 하고 이를 IP 주소로 변환시키는 무언가가 있으면 되지 않을까?"

그렇게 해서 탄생한 것이 naver.com과 같은 DNS 주소이고, DNS와 IP 주소를 변환하는 무언가를 DNS 서버라고 한다.

 

1. DNS 주소 -> IP 주소 변환

하지만, 사용자가 웹 브라우저를 통해서 naver의 주소를 입력했을 때, 바로 DNS 서버로 이동하는 것이 아니다.

인간은 항상 효율적인 것만을 추구해왔다.

따라서, 해당 방법이 원초적인 방법이었으나, 응답 시간을 빠르게 앞당기기 위해서 새로운 고안을 냈을 것이다.

그것이 바로 변환된 IP 주소 값을 브라우저 Cache에 저장하는 것이다.

1. DNS 쿼리가 브라우저에 입력되면, 브라우저 Cache를 통해서 해당 DNS의 기록을 확인한다.

2. 브라우저 cache에 해당 주소를 발견하지 못한다면, Systemcall을 통해서 OS가 저장하고 있는 DNS 기록 cache에 접근한다.

3. 그런데도 존재하지 않는다면, 브라우저는 DNS 기록을 caching하고 있는 router와 통신하게 되고,

4. 이 또한 존재하지 않는다면, 최종적으로 DNS 서버에 접근하게 된다.

 

2. TCP Connection

컴퓨터들끼리의 네트워크 통신은 여러 규약들이 존재하는데, 그 중에서 대표적인 protocol이 TCP이다.

브라우저가 DNS를 통해서 naver의 IP 주소를 받게 되면, 본격적으로 connection이 일어난다.

친구 집에 놀러갈 때, 젠틀하게 노크 후에 진입하는 것과 유사하다. (필자는 박력 있게 비밀번호를 따고 입장한다.)

TCP/IP의 3-way handshake 프로세스를 통해서 사용자와 naver 간의 connection이 이루어진다.

 

3. 브라우저의 request 요청

본격적으로 TCP로 연결이 되었다면, 서로 데이터를 전송할 수 있는 상태가 된다.

naver에 접속을 하면, 하얀 화면만이 뜨는 것이 아닌, 다양한 볼거리가 뜨지 않는가?

따라서, 사용자는 naver 서버에게 홈페이지에 해당하는 데이터를 달라고 요청을 한다.

이 요청을 할 때, 쿠키나 세션 등과 같이 부가적인 정보들도 함께 naver로 전달이 된다.

개발자 도구인 F12를 눌러보면 생각보다 많은 양의 데이터들이 오가는 것을 확인할 수 있을 것이다.

고작 홈 페이지를 접속했을 뿐인데 말이다.

 

4. naver의 response 전달

브라우저의 요청을 했으면, 서버는 그에 따른 데이터를 전달한다.

Request handler를 통해 사용자의 요청을 읽고 reponse(data)를 생성한다.

Request handler란, ASP.NET, PHP 등으로 작성된 프로그램으로 요청과 요청의 헤더, 쿠키 등을 읽어서 사용자의 요청이 무엇인지 파악하고 이 정보를 naver 서버에게 전달한다.

뉴스, 연애, 날씨, 실시간 게시글 등과 같이 홈페이지 화면에 필요한 데이터를 JSON, XML, HTML 등과 같이 다양한 형식으로 response를 작성한다.

 

5. 브라우저의 HTML 컨텐츠 보여주기

마지막으로 브라우저가 HTML 컨텐츠를 단계적으로 보여준다.

HTML의 스켈레톤을 렌더링하고, HTML tag들을 체크하여 추가적으로 필요한 웹페이지 요소들을 다시 naver 서버에 요청한다.

해당 요소들은 브라우저 Caching을 통해서 추후에 naver 방문 시에는 해당 과정을 생략하게 하여 속도를 향상시킨다.

비로소 naver.com의 홈 페이지가 보이는 것이다.

 

마치며

이번 시간에는 간단하게 웹 사이트로 접속할 때의 과정에 대해서 알아보았다.

다음에는 좀 더 specific하게 packet과 관련된 내용을 더해서 알아보도록 하자.