안녕하세요 웹 OB 박희선입니다 ╹◡╹
여러분은 구글.com을 검색엔진에 입력했을 때 어떤 일이 일어나는지 알고 계시나요? 웹 개발을 공부하다 보면, 자연스럽게 HTML, CSS, JavaScript 같은 스택에 집중하게 되는데요. 다양한 스택을 다루는 것도 물론 중요하지만, 사용자의 입력이 실제 화면에 어떻게 도달하는지 이해하는 능력은 웹 개발자로서의 깊이를 결정짓는 핵심요소라고 생각됩니다.
그래서 이번 1주차 공유과제 주제를 '브라우저에 http://www.google.com을 입력하면 어떤 일이 일어날까?'로 선정하게 되었습니다!
완벽하게 이해하기 위해, 알고 넘어가야 할 몇가지 용어들이 있습니다!
- 도메인 이름(naver.com, google.com 등)과 IP 주소(142.250.xxx.xx 등)를 서로 매핑해주는 시스템입니다. 우리는 웹사이트에 접속할 때 긴 숫자로 된 IP 주소를 외우기보다, 'naver', 'google', 'daum'처럼 기억하기 쉬운 이름을 사용하죠! 이처럼 DNS는 사용자가 입력한 도메인 이름을 해당 웹사이트의 IP 주소로 변환해, 올바른 서버로 연결될 수 있도록 도와주는 일종의 전화번호부와 같은 역할을 수행합니다.
⚙️ 프로토콜
- 통신하기 위한 약속들을 정의해둔 것
⚙️ HTTP
- TCP 기반의 클라이언트와 서버 사이에 이루어지는 요청/응답 프로토콜입니다. 클라이언트가 요청을 보내면 반드시 응답을 받아야하고, 응답을 받아야 다음 요청(request)을 보낼 수 있습니다.
⚙️ TCP (Transmission Control Protocol)
- 쉽게 말해, 데이터 안전배송 서비스입니다. TCP는 인터넷 상에서 데이터를 안전하게 전달하는 규칙이에요, 순서대로 도착하고 빠짐없이 전달되도록 책임지는 역할로, 신뢰성과 순서를 보장합니다.
⚙️ IP (Internet Protocol)
- TCP가 신뢰성과 순서를 보장해 데이터를 보내면, IP는 그걸 어디로 보낼지 경로를 정하는 역할을 수행합니다. 그러나 IP는 보내기만 할 뿐, 도착 여부는 확인하지 않아요
⚙️ response (HTTP 응답)
- 서버의 답장입니다. 이 페이지를 보여줘! 라고 요청하면 서버는 HTML 등 요청한 내용을 보내줘요
⚙️ 파싱 (Parsing)
- 사람이 글을 읽고 문자를 이해하듯, 브라우저도 HTML, CSS, JS 파일을 받아와서 일고 분석하는 작업이 필요합니다. 이를 파싱이라고 해요. 문서의 내용을 토큰으로 분석하고, 문법적 의미와 구조를 반영한 parse tree를 생성하는 과정입니다,
준비가 되었으니, 이제 검색엔진에 google.com을 입력해보겠습니다.
1. 먼저 URL 중 도메인 이름(google.com)을 IP 주소로 바꿔야 합니다.
도메인은 우리가 이해하기 쉬운 이름이지만, 컴퓨터는 IP 주소를 통해 통신하기 때문입니다. 이때 사용하는 시스템이 바로 DNS입니다!
하지만 단순히 바로 DNS로 이동하지는 않는데요, 실제로는 여러 단개의 캐시를 먼저 확인해 빠르게 처리하려고 시도합니다.
- 브라우저 캐시: 예전에 google.com에 접속한 적이 있다면, 브라우저는 그 기록을 기억하고 바로 불러옵니다.
- 운영체제(OS) 캐시: 브라우저 캐시에서 찾지 못하면, 운영체제 내부의 기록을 system call로 확인합니다.
- 라우터 캐시: 집에서 쓰는 공유기에도 DNS 기록이 저장되어 있을 수 있습니다.
- ISP 캐시: 인터넷 제공(sk, kt, lg 등) 수준에서 유지되는 캐시입니다.
바로 DNS 서버에 요청하기 전, 캐시에 저장된 정보가 있는지 먼저 확인함으로써 불필요한 요청을 줄이고, 인터넷 속도를 훨씬 빠르게 만들 수 있습니다.
2. 캐시에도 없으면? 이제 진짜 DNS 서버에 물어봅니다.
이때, ISP(like 통신사)의 DNS Recursor가 "google,com IP를 알려줘"하며 찾습니다. 이 과정을 재귀 탐색으로 수행해요
- Root DNS 서버: ".com" 같은 최상위 도메인은 어디서 찾나요?
- TLD (Top Level Domain): .com 도메인을 관리하는 서버는 여기에 물어보세요
- Authoritative DNS 서버: google.com의 진짜 IP 주소는 142.250.189.238입니다.
마지막으로 전달된 정확한 IP 주소는 다시 사용자에게 전달되어, 브라우저는 그 주소로 구글 서버에 접속할 수 있게 됩니다.
3. 이제 서버와 연결합니다. (TCP/IP 연결)
도메인의 진짜 IP 주소를 찾았으면, 브라우저는 서버에 연결해서 데이터를 요청해야 합니다. 이때 바로 TCP/IP 프로토콜이 사용됩니다🧐 TCP는 데이터가 순서대로 안전하게 전달되도록, IP는 정확한 주소로 보내주는 역할을 수행하는데요 !
서버와 연결 전, 준비를 확인하기 위한 방법을 🤝 3-Way Handshake 라고 해요!
- 클라이언트 → 서버: "연결할래요!" (SYN)
- 서버 → 클라이언트: "좋아요, 준비됐어요!" (SYN + ACK)
- 클라이언트 → 서버: "그럼 시작할게요!" (ACK)
의 과정이라고 이해하시면 편할 것 같습니다 ╹◡╹ . 이제 진짜 데이터를 주고받을 수 있는 통신이 시작되겠네요.
3-1. 서버와 연결되는 중간에, 보안을 위한 장치들도 작동합니다.
Firewall: 해커나 이상한 트래픽을 막기 위해 특정 IP나 지역에서 오는 요청을 차단합니다.
HTTPS/SSL: 내 정보가 중간에서 도청당하지 않게 브라우저와 서버만 아는 암호로 주고받으며 암호화합니다.
3-2. Load Balancer - 서버 트래픽 분산
60억 지구.... 도 아니고 이제 80억 지구인들이 다같이 google을 검색하면 엄청난 트래픽이 발생하겠죠? 따라서 구글 같은 대형 서비스는 서버가 한 대가 아닌 수천 대입니다. Load Balancer은 트래픽을 고르게 분산시켜주는 역할을 수행합니다. 이로인해 지연 없이 빠르게 서비스를 받을 수 있어요.
4. 웹 서버가 응답을 생성합니다.
🖥️ 이제 연결된 서버는, 브라우저 요청에 대한 응답을 생성하고, HTML과 데이터, 이미지 주소등을 담아 response를 만들어 브라우저로 전송합니다. 여기엔 상태 코드(200 OK, 404 Not Found)도 함께 들어있어요 !
5. HTML 파싱 & 렌더링을 수행합니다.
브라우저가 서버로부터 response를 받으면, 이제 진짜 화면에 페이지를 보여주는 작업을 시작합니다.
- HTML 문서를 파싱(parse)해서 구조를 이해하고,
- 필요한 이미지, CSS, JS 파일들을 추가로 요청해 불러오고,
- 모든 요소들이 준비되면 **렌더링(Rendering)**을 통해 화면에 보여줍니다.
→ 이 과정이 아주 빠르게 일어나며, 우리가 보는 구글 홈 화면이 등장하는 거예요!
우리가 단순히 google.com을 검색하는 그 순간, 사실은 수많은 과정과 기술들이 계속 작동하고 있었습니다.
웹 개발자로서 이 흐름을 파악하기 전과 후는, 많이 다를 것이라고 생각해요! 이해하고 나면 서버, 네트워크, 브라우저가 얼마나 유기적으로 연결되어 있는지도 보이니까요 😄
이제는 단순한 검색조차도... 왠지 더 의미있어 보이지 않나요? ㅎㅎ 😎 😎
참고문헌
- https://aws.amazon.com/ko/route53/what-is-dns/
- https://developer.mozilla.org/ko/docs/Web/HTTP/Guides/Overview
'1주차' 카테고리의 다른 글
| Utility-First-CSS (0) | 2025.04.11 |
|---|---|
| 웹 스토리지 (Web Storage) (0) | 2025.04.11 |
| 자바스크립트 이벤트 루프 (1) | 2025.04.10 |
| 웹접근성과 웹 표준 [시맨틱 태그, SEO] (0) | 2025.04.10 |
| 웹 브라우저의 작동 원리 (0) | 2025.04.09 |
