주소창에 google.com을 입력해서 결과를 보기까지의 과정들 🌐

주소창에 google.com을 입력하면 1-2초 후면 페이지가 로딩되어 눈에 보여지는데 여기까지 어마어마한 과정들이 있다.

 

1. URL 입력 및 처리

• 사용자가 브라우저 주소창에 google.com을 입력하고 Enter를 누르면, 브라우저는 URL로 인식한다.
• 입력값이 명확하지 않거나 .com이 생략된 경우 브라우저는 검색어로 간주/자동완성을 시도한다.

2. DNS 조회 (Domain Name System)

• 브라우저는 먼저 google.com의 IP 주소를 알아야 하므로 DNS 요청을 보낸다.
• 캐시를 먼저 확인한다. (브라우저 ⇨ OS ⇨ 라우터 ⇨ ISP순)
• 최종적으로 google.com의 IP 주소(142.250.206.14)를 획득한다.

DNS는 인터넷의 전화번호부 역할을 한다. 우리가 도메인 이름 (google.com)을 실제 통신하는 IP (142.250.206.14)로 변환해주는 시스템

3. TCP 연결 생성

• 브라우저는 해당 IP 주소에 대해 TCP 연결을 시작한다. (기본적으로 포트 80(HTTP) 또는 443(HTTPS))
• 이 과정은 3-way handshake라고 불린다.

4. TLS 핸드셰이크 (HTTPS인 경우)

• https://google.com은 보안 연결을 사용하므로 TLS(SSL) 핸드셰이크가 이루어진다.

TLS(SSL) 핸드셰이크란 HTTPS를 사용하는 경우에 수행되는데 클라이언트와 서버가 암호화 방식, 세션 키, 인증서 검증 등을 교환해서 서버는 SSL 인증서를 제공하고, 브라우저는 실뢰할 수 있는 기관에서 발급되었는가를 체크한다.

5. HTTP 요청 전송 

• 브라우저는 이제 실제로 HTTP 요청을 보낸다.

6. 서버 처리

• 구글의 웹 서버는 요청을 수신하고 적절한 응답을 생성한다.
• 예: index.html, 검색 페이지 UI 등

7. HTTP 응답 수신

• 서버는 브라우저에게 HTML 문서와 함께 응답을 준다.
  
• 브라우저는 이 HTML을 파싱하여 화면에 보여줄 준비를 시작한다.

 

728x90

 

8. 브라우저 렌더링 엔진 작동

1. HTML 파싱 - DOM 트리(Document Object Model)를 생성
2. CSS 파싱 - CSSOM 생성 후 스타일 계산
3. JavaScript 실행 - <script> 태그 실행
4. 레이아웃 계산 - 각 요소의 크기, 위치를 계산
5. 페인팅 & 렌더링 - 픽셀 단위로 화면에 그리기

9. 추가 리소스 요청

• HTML 내 포함된 이미지, JS, CSS, 폰트, 광고 등을 별도로 요청하고 받아온다.
• 병렬적으로 다수의 요청이 이루어진다.

10. 최종 사용자 화면 표시

• 전체 페이지가 사용자에게 보이기까지 수 ms ~ 수 초 소요
• 비소로 사용자는 구글 검색창과 로고, 버튼 등을 보게 된다!

 

추가 고려 요소

• 성능 최적화: 캐시 재활용, lay loading 등 속도를 높일 수 있다.
• Service Worker: PWA라면 오프라인 캐시 또는 백그라운드 동기화 가능하다.
• 프리페치/프리로드: 브라우저가 예상되는 리소스를 미리 받아두기도 한다.
• 보안: HTTPS는 암호화를 통해 사용자 정보와 웹페이지의 데이터를 안전하게 보호한다.