검색창에 구글 쳤을때 일어나는일

제목을 영어로 하면 'what happens when type google'이다. 

실제로, 이 문장을 검색을 하면 관련된 깃허브 문서가 나온다. 

이번 주제를 정리해보려고 (원문을 보는 습관을 지키기 위해서) 해당 원문도 읽어보려고 시도했지만 용어와 내용이 나에게 버거웠다. CS 지식의 부족함을 느끼고 다른 글을 찾다가, NAVER D2, '최신 브라우저의 내부 살펴보기'라고 구글 개발자가 적어놓은 글을 가져온 내용을 보았는데, 이 글은 설명이 잘 되어 있어서 이해가 될 뻔하다가(?) 이해가 안 되기 시작해서 이것도 포기했다.

(CS공부도 꾸준히 빡세게 공부하는 수밖에 없다! 대신, 급하게 생각하지 말자!!)

 

 

결국, 다시 돌아와 처음 언급한 'what happens when type google'의 번역글과 MDN의 여러 글(출처 표기)을 참고로 이번 주제에 대한 글을 적어보겠다. 

 

 

---

 

 

오늘의 주제는 검색창에 "구글"을 쳤을 때 일어나는 일에 대해 정리해본다. 

여기서 짚고 넘어가야 되는건, 방금 말한 검색창은 '주소 표시줄'이라고 생각하자.

정리하면, 주소 표시줄에 구글이라는 키워드를 입력 후 엔터를 눌렀을 때 발생하는 브라우저의 동작에 대해서 이야기해보자는 것이다. 원문의 특성상 내용이 구체적일 수밖에 없는 점 참고하시길 바란다.

 

1. 키워드 입력

영어로 "google"이나 한글로 "구글"이라고 입력을 할 때, 키를 누를 때 발생하는 이벤트가 브라우저에 전달된다. 

전달된 키워드는 포커싱이 된 주소표시줄에서 나타난다. 자음 글자부터 모음 글자가 입력될 때마다, 브라우저는 자체 알고리즘과 개인/익명 모드를 사용하는지에 따라 자동검색어가 URL 창 밑에 나타난다. (참고로, 자동 검색어 알고리즘은 검색 기록이나 즐겨찾기에 기반한다고 한다) 

 

 

2. 키워드 입력 후, "엔터" 입력

키보드를 눌렀을 때, 해당 키에 할당된 전기 회로가 닫히게 됩니다. 

닫힌 키의 전기회로는 키보드의 동작 방식에 의해서, 신호를 키코드 정수로 변환 후 다시 인코딩하여 컴퓨터로 전달합니다. 

(하드웨어 관련 내용을 잘 모르지만, 해당 문서를 보면 키보드의 종류에 따라 동작 방식이 조금씩 다른 것 같습니다)

 

 

3. URL 파싱과 문자열 변환

브라우저는 이제 사용자가 입력한 텍스트 정보를 가지고 있게 됩니다. 

그렇지만, 이 텍스트 정보가 검색어일지 아니면 URL일지는 모르기 때문에 파악을 해야 합니다.

왜냐하면, 브라우저는 프로토콜이나 유효한 도메인 이름이 주어지지 않으면, 브라우저는 주소창에 놓인 텍스트 정보를 브라우저의 기본 웹 검색엔진에 넘겨줍니다. 

 

 

---

 

여기서 잠깐, URL에 대해 간단히 집고 넘어가자!

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

 

• http://은 프로토콜
• www.example.com은  도메인 네임
• :80은 포트 번호
• /path/to/myfile.html은 파일 경로
• ?key1=value1&key2=value2는 파라미터로 & 기호로 키/값을 짝을 이루는 리스트
• #SomewhereInTheDocument는 anchor(닻)으로 자원 자체의 다른 부분 (북마크 역할)으로 지정된 위치 나타냄

---

 

 

브라우저는 호스트명이 a-z, A-Z, 0-9, -, . 이 아닌 문자를 확인합니다. (왜 그럴까요?) 

(찾아보니) 그 이유는 DNS 이름은 허용되는 글자로만 만들 수 있기 때문입니다. [참고]

그리고, 호스트명에 유니코드가 있을 땐 퓨니코드로 인코딩한다고 합니다 (흠,, 잘 모르겠네요)

 

퓨니코드 : 도메인 이름에 쓸 수 있는 문자만으로 다른 유니코드 문자를 표기하기 위해 만들어진 인코딩 방식
ex) %ED%93% 

 

 

4. HSTS 리스트 점검

HSTS는 "HTTP Strict Transport Security)"의 약자로 HTTPS로만 연결되도록 요청한 웹사이트 목록입니다.

브라우저는 미리 불러드린 HSTS 리스트를 확인합니다. 목록에 있다면, 브라우저는 요청을 HTTPS로 보내며, 그렇지 않으면 HTTP로 보내집니다. 

 

 

5. DNS 검색

DNS: Domain Name System Servers (도메인 이름 시스템 서버)는 웹사이트를 위한 주소록과 같습니다. 여러분이 브라우저에 웹 주소를 입력할 때, 브라우저는 그 웹사이트를 검색하기 전에 DNS를 살펴봅니다.

 

브라우저는 도메인이 캐시에 들어있는지 확인합니다. 

만약 있다면, DNS 서버에 대해 ARP 프로세스를 거치게 되며,

만약 없다면, 로컬 라우터나 인터넷 공급자의 캐시 DNS 서버로 보내집니다.

 

 

6. ARP 프로세스

ARP는 Address Resolution Protocol의 약자로 주소 결정 프로토콜이라고 합니다. 

ARP를 보내기 위해서는 IP의 주소와 MAC 주소를 알아야 합니다.

ARP 캐시가 목적지 IP의 ARP 항목을 가지고 있는지 점검합니다. 

 

 

7. 소켓 열기

브라우저가 목적지 서버의 IP주소를 받으면, 호스트명과 포트 번호를 이용해 TCP 소켓 스트림을 요청합니다.

이 요청으로 TCP 세그먼트가 제작되는 Transport 레이어로 전달 후 Network 레이어로 보내져 패킷을 만들어, 패킷은 Link 레이어에 도착합니다. 

 

---

패킷이란?

기본적으로, 데이터가 웹을 거쳐서 전송될 때, 수천 개의 작은 덩어리들로 전송됩니다. 그래서 다양한 웹 사용자들은 동시에 같은 웹 사이트를 다운로드할 수 있게 됩니다. 만약 웹 사이트가 하나의 큰 덩어리들로 전송된다면, 오직 한 번에 하나의 사용자만 다운로드 할 수 있을 것입니다. 이는 분명 웹을 매우 비효율적이고, 사용하기에 재미없게 만들 것입니다.

---

 

 

이 지점에서 패킷은 이더넷 / 와이파이 / 무선 통신 네트워크 중 하나로 전송될 준비를 마칩니다. 

패킷은 라우터에 도착하여 일정 라우터와 시스템을 거쳐 목적지 서버까지 전송됩니다. 

 

 

8. TLS handshake

클라이언트가 자신의 TLS(Transport Layer Security) 버전 등이 담긴 정보를 메시지에 담아 서버로 보냅니다.

서버도 TLS 버전, CA(Certificate Authority)가 인정한 공개 인증서 등이 담긴 정보를 메시지에 담아 클라이언트로 보냅니다. 

클라이언트는 인증서의 유효 구분은 CA 목록을 통해 확인하며, 확인이 되었다면 서버의 공개키를 암호화하여 대칭키를 만듭니다.

서버도 자기 개인키를 복호화해 대칭 마스터키 생성합니다. 

클라이언트가 끝났다는 메시지와 대칭키를 담아 보냅니다.

서버는 클라이언트가 보낸 대칭키와 서버의 대칭키와 일치하는지 확인하며, 확인이 되었다면 클라이언트에 끝났다라는 메시지를 보냅니다.

이제 TLS 세션이 대칭키로 암호화된 애플리케이션(HTTP) 데이터를 전송합니다. 

 

 

 

 

mdn

 

 

 

 

9. HTTPS 서버의 요청 처리

HTTPD 서버는 HTTP Demon의 약자로, 서버 측에서 요청/응답을 처리합니다. (Apache, nginx, lls)

서버는 요청을 다음의 파라미터로 쪼갭니다.

- HTTP 요청 메서드(GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, 혹은 TRACE 중 하나)

- 도메인

- 요청된 경로/페이지 (여기서, 경로/페이지가 없으면 /가 기본 경로)

 

위와 같은 처리를 포함한 임의의 과정을 거치고 나서, 결과물을 클라이언트에게 보냅니다.

 

 

 

10. 브라우저

서버가 브라우저에 자원(HTML, CSS, JS, Image...)을 제공하면 브라우저는 HTML, CSS, JS를 파싱 하며 렌더링 합니다. 

렌더링은 "DOM 트리 생성 -> 트리 렌더링 생성 -> 트리 배치 -> 트리 색칠" 하는 과정을 거칩니다.

 

이처럼 브라우저가 파싱 하고 렌더링 하는 방식은 W3C라는 웹 표준화 기구에서 만든 스펙을 기준으로 하고 있습니다. 

여기서, 렌더링은 브라우저 화면에 보이도록 하는 작업을 뜻합니다.

 

 

 

"브라우저에 웹 주소를 입력할 때" - 더 간단한 버전 (mdn)

 

 

1. 브라우저는 DNS 서버로 가서 웹사이트가 있는 서버의 진짜 주소를 찾습니다 (여러분이 상점의 주소를 찾습니다).
2. 그다음 브라우저는 서버에게 웹사이트의 사본을 클라이언트에게 보내달라는 HTTP 요청 메시지를 서버로 전송합니다.(상점으로 가서 상품을 주문합니다.) 이 메세지, 그리고 클라이언트와 서버 사이에 전송된 모든 데이터는 TCP/IP 연결을 통해서 전송됩니다.
3. 이 메세지를 받은 서버는 클라이언트의 요청을 승인하고, "200 OK" 메세지를 클라이언트에게 전송합니다. "200 OK"는 "물론이죠. 당신은 웹 사이트를 볼 수 있어요! 여기 있어요"라는 의미입니다. 그다음 서버는 웹사이트의 파일들을 데이터 패킷이라 불리는 작은 일련의 덩어리들로 브라우저에 전송하기 시작합니다.(상점은 여러분이 주문한 상품을 전달하고, 여러분은 그것을 집으로 가져갑니다.)
4. 브라우저는 이 작은 덩어리들을 완전한 웹 사이트로 조립하고, 당신에게 보여줍니다. (상품이 당신의 문에 도착합니다. — 새 것이죠, 멋져요!)

 

 

 

[레퍼런스]

what-happens-when-KR | https://bit.ly/3v1tSPW

what is a URL | https://mzl.la/3bFDzvA

웹의 동작 방식 | https://mzl.la/3hBKo5b

인터넷은 어떻게 동작하는가? | https://mzl.la/2Sb2Hnm

브라우저는 호스트명이 a-z, A-Z, 0-9, -, . 이 아닌 문자를 확인 이유 | https://bit.ly/3eWRX4P

아스키코드와 유니코드 | https://bit.ly/33SGahE

 

[읽어보면 좋을만한 레퍼런스]

브라우저는 어떻게 동작하는가? | https://bit.ly/3ymCx1p

최신 브라우저의 내부 살펴보기 | https://bit.ly/3hCMCBi