www.google.com을 입력하면 일어나는 일 🌐
인터넷 브라우저 주소창에 'www.google.com'을 입력하고 엔터키를 누르는 순간, 눈 깜짝할 사이에 구글 홈페이지가 화면에 나타납니다. 하지만 이 짧은 순간 동안 컴퓨터와 인터넷 세계에서는 어떤 일들이 일어날까요? 마법처럼 느껴지는 이 과정을 함께 살펴봅시다! 🔍
1. DNS 조회: 이름을 주소로 바꾸기 🔤➡️🔢
우리가 'www.google.com'이라는 도메인 이름을 입력하면, 브라우저는 이 이름을 컴퓨터가 이해할 수 있는 IP 주소로 변환해야 합니다.
DNS 조회 과정 📚
- 브라우저 캐시 확인 🧠
브라우저는 먼저 "최근에 이 주소를 방문한 적이 있나?" 확인합니다. - 운영체제 캐시 확인 💻
브라우저에 없다면, 컴퓨터의 운영체제에 저장된 DNS 캐시를 확인합니다. - 라우터 캐시 확인 📶
여기서도 못 찾으면, 집이나 사무실의 라우터에게 물어봅니다. - ISP의 DNS 서버에 질의 🏢
라우터도 모른다면, 인터넷 서비스 제공업체(KT, SKT, LG U+ 등)의 DNS 서버에 물어봅니다. - 재귀적 DNS 조회 🌍
ISP의 DNS 서버는 전 세계 DNS 서버들에게 차례로 물어보며 주소를 찾습니다. - DNS 서버: "안녕, .com 서버야? google.com의 주소를 알고 있니?" .com 서버: "나는 정확한 주소는 모르지만, google.com 담당 서버를 알아!" DNS 서버: "안녕, google.com 서버야? www.google.com의 주소를 알려줄래?" google.com 서버: "응! www.google.com의 IP 주소는 142.250.196.68이야."
- 답변 반환 및 캐싱 ✅
찾은 IP 주소(예: 142.250.196.68)를 브라우저에게 알려주고, 나중을 위해 캐시에 저장합니다.
2. TCP 연결 수립: 안전한 대화 시작하기 🤝
IP 주소를 알게 되면, 브라우저는 해당 서버와 안정적인 연결을 맺어야 합니다.
TCP 3-way 핸드셰이크 🔄
브라우저: "안녕! 나랑 대화할 준비 됐어?" (SYN)
서버: "응, 준비 됐어! 너도 준비 됐니?" (SYN-ACK)
브라우저: "응, 나도 준비 완료! 대화 시작하자!" (ACK)
이 과정은 마치 전화 통화를 시작하기 전에 서로 "여보세요?"라고 확인하는 것과 비슷합니다! 📞
3. HTTPS/SSL 핸드셰이크: 비밀 대화 준비하기 🔒
요즘 대부분의 웹사이트는 HTTPS를 사용합니다. 구글도 마찬가지죠! 이 과정에서는 암호화된 안전한 연결을 설정합니다.
SSL/TLS 핸드셰이크 🔐
- 암호화 방식 협상
브라우저와 서버가 "어떤 암호화 방식을 사용할까?"라고 상의합니다. - 인증서 검증
서버가 "나 진짜 구글이야!"라는 디지털 인증서를 보여주고, 브라우저가 확인합니다. - 비밀키 교환
안전하게 데이터를 주고받기 위한 암호 키를 만들어 교환합니다.
이 과정은 마치 비밀 대화를 나누기 전에 서로 암호를 정하는 것과 같습니다! 🕵️♀️
4. HTTP 요청: 정보 요청하기 📝
안전한 연결이 수립되면, 브라우저는 서버에게 웹페이지를 요청합니다.
HTTP 요청 예시 📨
GET / HTTP/1.1
Host: www.google.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html,application/xhtml+xml
Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8
Connection: keep-alive
이것은 "안녕하세요, 구글! 당신의 메인 페이지를 보여주세요!"라고 말하는 것과 같습니다. 📮
5. 서버 처리 및 응답: 정보 받기 📥
구글 서버는 요청을 받고, 적절한 웹페이지를 만들어서 보내줍니다.
HTTP 응답 예시 📬
HTTP/1.1 200 OK
Date: Mon, 07 Apr 2025 12:00:00 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 45673
Connection: keep-alive
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Google</title>
<!-- 이하 HTML 내용 -->
서버가 "여기 구글 메인 페이지가 있어요!"라고 대답하는 것과 같습니다. 📦
6. 브라우저 렌더링: 화면에 그리기 🎨
브라우저는 받은 HTML, CSS, JavaScript 등을 해석하여 화면에 웹페이지를 그립니다.
렌더링 파이프라인 🖌️
- HTML 파싱 & DOM 트리 생성 📑
HTML 코드를 브라우저가 이해하는 구조(DOM)로 변환합니다. - CSS 파싱 & CSSOM 생성 🎭
CSS 코드를 해석하여 스타일 정보를 구성합니다. - 자바스크립트 실행 ⚙️
페이지의 동작을 담당하는 자바스크립트 코드가 실행됩니다. - 렌더 트리 구성 🌳
DOM과 CSSOM을 합쳐서 "무엇을 어떻게 그릴지"를 정합니다. - 레이아웃(리플로우) 📏
각 요소의 크기와 위치를 계산합니다. - 페인트 🖼️
실제로 화면에 픽셀을 그립니다. - 컴포지팅 ✨
여러 레이어를 합성하여 최종 화면을 만듭니다.
이 과정은 마치 건축가가 설계도(HTML)와 인테리어 계획(CSS)을 가지고 실제 건물을 짓는 것과 비슷합니다! 🏗️
요약: 놀라운 여정의 끝 🏁
브라우저 주소창에 'www.google.com'을 입력하고 엔터키를 누른 후, 0.5초도 안 되는 시간 동안 위의 모든 과정이 일어납니다. 이것이 현대 웹 기술의 놀라운 점이죠!
- DNS로 이름을 주소로 변환 🔤➡️🔢
- TCP로 안정적인 연결 수립 🤝
- HTTPS로 암호화된 보안 연결 구성 🔒
- HTTP 요청으로 웹페이지 요청 📝
- 서버가 요청을 처리하고 응답 전송 📬
- 브라우저가 받은 데이터를 해석하고 렌더링 🎨
인터넷이 마법처럼 느껴질 때가 있지만, 사실은 이렇게 정교하고 복잡한 과정들이 순식간에 이루어지는 것입니다. 기술의 발전과 표준화 덕분에 전 세계 어디서나 동일한 웹페이지를 볼 수 있게 되었죠! 🌍✨
인터넷 창에 www.google.com를 입력하면 무슨 일이 일어나는지 설명해주세요.
첫번째로 DNS 조회가 일어납니다. 사용자가 www.google.com을 입력하면, 브라우저는 먼저 이 도메인 이름을 IP 주소로 변환해야 합니다. 이 과정을 DNS 조회(DNS Lookup)라고 합니다. 브라우저는 캐시된 DNS 기록을 먼저 확인하고, 없으면 로컬 DNS 서버에 요청하여 www.google.com에 해당하는 IP 주소를 얻습니다.
두번째로 TCP 연결 수립입니다. IP 주소가 확인되면, 브라우저는 서버와 TCP 연결을 수립합니다. TCP(Transmission Control Protocol)는 데이터를 신뢰성 있게 전달하기 위한 프로토콜입니다. 이 과정에서 브라우저는 서버와 3-way handshake를 수행합니다. 즉, 브라우저가 SYN 패킷을 보내고, 서버가 SYN-ACK 패킷을 보내며, 다시 브라우저가 ACK 패킷을 보내는 과정입니다.
세번째로 HTTP 요청입니다. TCP 연결이 수립되면, 브라우저는 HTTP 또는 HTTPS 요청을 보냅니다. 이 요청은 "GET / HTTP/1.1" 같은 형식으로, 웹 페이지를 요청하는 메시지입니다. 만약 HTTPS를 사용할 경우, 이 단계 이전에 SSL/TLS 핸드셰이크도 수행됩니다. 이 과정에서는 브라우저와 서버가 암호화된 연결을 설정하기 위해 보안 인증서를 교환하고, 암호화 키를 협상합니다.
네번째로 서버의 응답을 받습니다. 서버는 요청을 받고, 해당 리소스(HTML, CSS, JavaScript, 이미지 등)를 브라우저에게 응답으로 보냅니다. 이 응답은 HTTP 응답 코드(예: 200 OK)와 함께 전달됩니다.
마지막으로 받은 리소스들을 바탕으로 브라우저 렌더링 파이프라인을 진행합니다. DOM과 CSSOM을 생성하고, 렌더 트리를 구성한 뒤, 레이아웃과 페인트 단계를 통해 웹 페이지가 화면에 표시됩니다.
'1일 1CS(Computer Science)' 카테고리의 다른 글
| 리액트의 Render Phase와 Commit Phase (0) | 2025.04.08 |
|---|---|
| 리액트의 Strict Mode에 대해서 설명해주세요. (0) | 2025.04.07 |
| 자바스크립트의 얕은 복사와 깊은 복사 이해하기 (0) | 2025.04.07 |
| 트랜잭션 격리수준은 무엇인가요? (0) | 2025.04.07 |
| 브라우저 렌더링 파이프라인에 대해서 설명해주세요. (0) | 2025.04.04 |
