패스트캠퍼스 환급챌린지 52일차: 데이터엔지니어링 초격차 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

 

웹사이트 접속의 숨겨진 과정 🗺️: URL 입력부터 화면 표시까지의 상세 분석!

안녕하세요, 여러분! 🚀

 

지난 시간에는 서버와 클라이언트가 서로 '어떻게' 대화하는지, 그 비밀스러운 '대본'이자 '약속'인 API에 대해 깊이 있게 알아보았습니다. 마치 잘 짜인 연극의 배우들이 각자의 대사를 주고받는 것 같았죠? 🎭 오늘은 그 연극의 무대가 되는 '인터넷'이라는 거대한 공간에서, 우리가 특정 웹사이트 주소를 입력했을 때 과연 어떤 정교한 일들이 순식간에 벌어지는지, 그 과정을 컴퓨터 공학적인 시선으로 상세히 분석해 보겠습니다! 🕵️‍♀️

 

매일같이 하는 행동이지만, 그 뒤에는 정말 놀랍고도 체계적인 기술들이 숨어있답니다. 오늘 강의도 힘차게 시작해 볼까요? 출발! 🚦

 

오늘 우리가 함께 학습할 핵심 내용은 다음과 같습니다:

• 인터넷 통신의 기본 설계도: OSI 7계층이란? (핵심 원리 🏗️)
• OSI 7계층, 왜 중요할까요? (존재 이유 🤔)
• 한눈에 보는 OSI 7계층 요약 (각 층별 역할 🏢)
• 웹사이트 접속 상세 과정! 단계별 분석 (URL 입력부터 화면 표시까지! 💻➡️🌐➡️💻)
  • 사용자 액션: 주소창에 URL 입력!
  • DNS: "이름 알려줘!" IP 주소 탐색 과정 🗺️
  • TCP/IP: "연결하자!" 신뢰의 악수 🤝
  • HTTP/HTTPS: "페이지 보여줘!" 요청과 응답 📜
  • 서버의 처리: 요청 분석 및 데이터 준비 🧑‍🍳
  • 브라우저 렌더링: "화면에 그려줘!" 화면 구성 단계 ✨

자, 그럼 지금부터 웹사이트 접속의 복잡하고 흥미로운 세계로 함께 들어가 봅시다!

 

---

인터넷 통신의 기본 설계도: OSI 7계층이란? (핵심 원리 🏗️)

우리가 웹사이트에 접속한다는 것은, 내 컴퓨터(클라이언트)가 저 멀리 어딘가에 있는 웹사이트 정보가 담긴 컴퓨터(서버)와 '통신'을 한다는 의미입니다. 이 통신 과정은 생각보다 복잡한데요, 마치 잘 규정된 프로토콜 스택을 통해 데이터가 이동하는 것과 같습니다.

OSI 7계층(OSI 7 Layer Model)은 이러한 네트워크 통신 과정을 7개의 논리적인 단계로 나누어 설명하는 표준 모델입니다. 'Open Systems Interconnection Reference Model'의 약자로, 국제표준화기구(ISO)에서 개발했죠. 각 계층은 특정 기능을 수행하며, 바로 아래 계층의 서비스를 이용하고, 바로 위 계층에게 서비스를 제공하는 방식으로 작동합니다.

 

OSI 7계층, 왜 중요할까요? (존재 이유 🤔)

"굳이 이렇게 복잡하게 7단계로 나눌 필요가 있나요?" 라고 생각할 수 있습니다. 하지만 이렇게 계층을 나눔으로써 얻는 이점이 매우 큽니다!

1. 표준화 및 호환성 증대: 제조사가 다르더라도, 각 계층의 표준만 지키면 서로 통신이 가능해집니다. 마치 전 세계 어디서나 같은 규격의 USB를 사용할 수 있는 것처럼요!
2. 문제 해결 용이: 통신 중 문제가 발생했을 때, 어느 계층에서 문제가 발생했는지 파악하기 쉬워집니다. 특정 계층만 점검하고 수정하면 되니 효율적이죠.
3. 학습 및 이해 용이: 복잡한 통신 과정을 단계별로 나누어 이해하기 쉽게 도와줍니다.
4. 개발 용이성: 각 계층은 독립적으로 개발하고 개선할 수 있어, 전체 시스템에 영향을 주지 않고 특정 기능만 업그레이드하기 용이합니다.

 

한눈에 보는 OSI 7계층 요약 (각 층별 역할 🏢)

데이터가 사용자로부터 출발해 네트워크를 통해 다른 사용자에게 전달될 때, 발신 측에서는 7계층부터 1계층 순서로 내려가며 각 계층의 정보(헤더)가 추가되고(캡슐화), 수신 측에서는 1계층부터 7계층 순서로 올라오며 각 계층의 정보를 해석하고 제거합니다(디캡슐화).

• 제 7계층: 응용 계층 (Application Layer) 🧑‍💻
  • 사용자와 가장 가까운 계층으로, 우리가 사용하는 프로그램(웹 브라우저, 이메일 클라이언트 등)을 통해 데이터 통신을 시작하는 지점입니다.
  • 주요 프로토콜: HTTP, HTTPS, FTP, SMTP, DNS 등
  • 예: 웹 브라우저에 URL을 입력하면, HTTP 프로토콜을 통해 웹 서버에 요청을 보냅니다.
• 제 6계층: 표현 계층 (Presentation Layer) 🎨
  • 데이터의 형식(Format)을 결정하고, 암호화(Encryption)/복호화(Decryption), 압축(Compression)/압축 해제 등을 담당합니다.
  • 예: HTTPS 사용 시, 데이터를 안전하게 주고받기 위해 암호화/복호화하는 과정이 이 계층에서 일어납니다.
• 제 5계층: 세션 계층 (Session Layer) 🗣️
  • 두 컴퓨터 간의 통신 세션(연결)을 만들고, 유지하고, 종료하는 역할을 합니다. 통신 방식(단방향, 양방향)도 결정합니다.
  • 예: "이제부터 너랑 나랑 대화 시작! 대화 끝!" 하고 약속하는 과정입니다.
• 제 4계층: 전송 계층 (Transport Layer) 📦
  • 신뢰할 수 있는 데이터 전송을 책임집니다. 데이터를 적절한 크기로 나누고(세그먼테이션), 오류 검출 및 복구, 흐름 제어 등을 수행합니다.
  • 주요 프로토콜: TCP (신뢰성, 연결 지향), UDP (비신뢰성, 비연결 지향, 속도 빠름)
  • 예: TCP는 "데이터 잘 받았니? 빠진 거 없니?" 확인하며 보내고, UDP는 "일단 보내고 볼게!" 하는 스타일입니다. 웹사이트 접속에는 주로 TCP가 사용됩니다. 포트 번호를 사용하여 특정 애플리케이션으로 데이터를 전달합니다 (예: HTTP는 80번, HTTPS는 443번 포트).
• 제 3계층: 네트워크 계층 (Network Layer) 🗺️
  • 데이터를 목적지까지 가장 안전하고 빠르게 전달하는 경로(라우팅)를 결정합니다. IP 주소를 사용하여 논리적인 주소 체계를 관리합니다.
  • 주요 프로토콜: IP, ICMP, ARP
  • 예: 편지에 적힌 주소를 보고, 어떤 길로 가야 가장 빨리 도착할지 결정하는 우체부 아저씨 역할입니다.
• 제 2계층: 데이터 링크 계층 (Data Link Layer) 🔗
  • 물리적으로 직접 연결된 두 장치 간의 신뢰성 있는 정보 전송을 담당합니다. MAC 주소(물리적 주소)를 사용하여 통신하며, 오류 검출 및 재전송 기능을 수행합니다. 데이터를 프레임(Frame) 단위로 처리합니다.
  • 예: 바로 옆집에 편지를 전달하는 과정과 비슷합니다.
• 제 1계층: 물리 계층 (Physical Layer) 🔌
  • 데이터를 전기적 신호(0과 1)로 변환하여 케이블, 무선 신호 등을 통해 실제로 전송하는 역할을 합니다.
  • 예: 전선, 광케이블, Wi-Fi 신호 등 데이터를 실어 나르는 물리적인 매체입니다.

마치 7층짜리 빌딩에서 각 층이 맡은 일이 다르지만, 결국 하나의 목표(데이터 전달)를 위해 협력하는 모습과 같죠!

---

웹사이트 접속 상세 과정! 단계별 분석 💻➡️🌐➡️💻

자, 이제 우리가 브라우저 주소창에 www.google.com 같은 주소를 입력하고 엔터를 '땅!' 치는 순간부터 웹페이지가 화면에 '짠!'하고 나타나기까지, OSI 7계층의 원리가 녹아있는 이 정교한 과정을 단계별로 따라가 봅시다!

 

1. 사용자 액션: 주소창에 URL 입력! ⌨️
모든 것은 사용자의 간단한 행동에서 시작됩니다. 웹 브라우저 주소창에 원하는 웹사이트의 주소(URL, Uniform Resource Locator)를 입력하고 엔터 키를 누릅니다.

• OSI 계층 관련: 이 작업은 사용자가 응용 계층(7계층)의 프로그램인 웹 브라우저와 상호작용하는 것입니다.

2. DNS (Domain Name System): "이름 알려줘!" IP 주소 탐색 과정 🗺️
컴퓨터는 사람이 이해하기 쉬운 www.google.com 같은 도메인 이름 대신, 숫자로 이루어진 IP 주소(예: 172.217.160.142)를 사용해 서로 통신합니다. 마치 사람 이름 대신 주민등록번호로 신원을 확인하는 것과 같죠.
브라우저는 먼저 이 도메인 이름에 해당하는 IP 주소를 알아내야 합니다. 이 과정을 DNS 조회를 통해 수행합니다.

• DNS 조회 과정 (간략히):
  1. 브라우저 캐시 확인: 이전에 방문한 적 있다면 브라우저에 IP 주소가 저장되어 있을 수 있습니다.
  2. OS 캐시 확인 (hosts 파일 등): 운영체제 수준에서도 IP 주소를 저장해둡니다.
  3. 라우터 캐시 확인: 공유기가 IP 주소를 기억하고 있을 수도 있습니다.
  4. ISP의 DNS 서버에 요청: 위의 과정에서 찾지 못하면, 인터넷 서비스 제공업체(KT, SKT, LGU+ 등)의 DNS 서버에 물어봅니다.
  5. 루트 DNS 서버부터 시작하는 재귀적(Recursive) 질의: ISP DNS 서버에도 없다면, 전 세계에 흩어져 있는 루트 DNS 서버부터 시작해 .com을 관리하는 TLD(Top-Level Domain) DNS 서버, 그리고 최종적으로 google.com의 정보를 가진 Authoritative DNS 서버까지 차례로 물어봐서 IP 주소를 알아냅니다.
• OSI 계층 관련: DNS 프로토콜은 주로 응용 계층(7계층)에서 동작하며, 전송 계층(4계층)의 UDP 프로토콜을 사용하는 경우가 많습니다 (빠른 응답이 중요하므로).

3. TCP/IP: "연결하자!" 신뢰의 악수 🤝 (TCP 3-Way Handshake)
IP 주소를 알게 되면, 이제 웹 서버와 실제로 데이터를 주고받기 위한 '연결 통로'를 만들어야 합니다. 웹사이트 접속에는 대부분 신뢰성 있는 데이터 전송을 보장하는 TCP 프로토콜이 사용됩니다. TCP 연결은 '3-Way Handshake'라는 과정을 통해 이루어집니다.

1. SYN (Synchronize Sequence Numbers): 클라이언트(내 컴퓨터)가 서버에게 "안녕? 나랑 통신할 준비됐니? 시작 번호는 이거야!" (SYN 패킷 전송)
2. SYN-ACK (Synchronize-Acknowledge): 서버가 "응, 준비됐어! 너의 요청 잘 받았고, 내 시작 번호는 이거야!" (SYN-ACK 패킷 전송)
3. ACK (Acknowledge): 클라이언트가 "알겠어! 이제 진짜 통신 시작하자!" (ACK 패킷 전송)

이 과정을 통해 클라이언트와 서버 간에 신뢰할 수 있는 양방향 통신 채널이 열립니다.

• OSI 계층 관련: TCP는 전송 계층(4계층) 프로토콜입니다. 이 과정에서 IP 주소(네트워크 계층, 3계층)와 포트 번호(전송 계층, 4계층 - HTTP는 80, HTTPS는 443)가 사용됩니다.

4. HTTP/HTTPS: "페이지 보여줘!" 요청과 응답 📜
TCP 연결이 성공적으로 수립되면, 드디어 클라이언트(웹 브라우저)는 서버에게 웹페이지를 달라는 HTTP(HyperText Transfer Protocol) 요청 메시지를 보냅니다.

• HTTP 요청 메시지 예시 (주요 내용):
  • GET / HTTP/1.1 (루트 디렉토리의 문서를 HTTP/1.1 버전으로 요청)
  • Host: www.google.com (어떤 호스트에게 요청하는지)
  • User-Agent: Chrome/… (어떤 브라우저에서 요청했는지)
  • Accept-Language: ko-KR (선호하는 언어)
• 만약 HTTPS(HTTP Secure)라면? 🔒
  HTTPS는 HTTP 요청/응답을 보내기 전에 TLS/SSL 핸드셰이크 과정을 통해 통신 채널을 암호화합니다. 이는 마치 주고받는 편지를 암호 봉투에 넣어 보내는 것과 같아서, 중간에 누가 훔쳐보더라도 내용을 알 수 없게 만듭니다. (표현 계층, 6계층의 역할과 관련)
• OSI 계층 관련: HTTP/HTTPS는 응용 계층(7계층) 프로토콜입니다.

5. 서버의 처리: 요청 분석 및 데이터 준비 🧑‍🍳
웹 서버(예: Apache, Nginx)는 클라이언트로부터 받은 HTTP 요청을 분석합니다.

• 요청된 리소스(HTML 파일, 이미지, CSS, JavaScript 등)가 정적 파일이면 바로 찾아 응답합니다.
• 만약 동적인 콘텐츠(예: 로그인 결과, 검색 결과)를 요청했다면, 웹 서버는 WAS(Web Application Server)나 백엔드 애플리케이션에 처리를 요청합니다. 이 과정에서 데이터베이스 조회 등이 일어날 수 있습니다.
• 모든 처리가 끝나면, 서버는 클라이언트에게 보낼 HTTP 응답 메시지를 준비합니다.

6. HTTP/HTTPS 응답: "자, 여기 있어!" 📦
서버는 클라이언트에게 HTTP 응답 메시지를 보냅니다.

• HTTP 응답 메시지 예시 (주요 내용):
  • HTTP/1.1 200 OK (요청 성공! 상태 코드 200)
  • Content-Type: text/html; charset=UTF-8 (보내는 데이터는 HTML 문서이고, UTF-8 인코딩 사용)
  • Content-Length: 12345 (데이터의 크기)
  • (빈 줄)
  • <html>…</html> (실제 HTML 문서 내용)
• HTTPS라면 이 응답 역시 암호화되어 전송됩니다.

7. 브라우저 렌더링: "화면에 그려줘!" 화면 구성 단계 ✨
클라이언트(웹 브라우저)는 서버로부터 받은 HTTP 응답 메시지를 해석합니다.

1. HTML 파싱: HTML 코드를 읽어들여 DOM(Document Object Model) 트리를 만듭니다. 웹페이지의 뼈대 구조가 만들어지는 거죠.
2. CSS 파싱: CSS 코드를 읽어들여 CSSOM(CSS Object Model) 트리를 만듭니다. 웹페이지의 스타일 정보입니다.
3. 렌더 트리 구축: DOM 트리와 CSSOM 트리를 결합하여 실제로 화면에 표시될 요소들로 구성된 렌더 트리를 만듭니다.
4. 레이아웃 (Reflow): 렌더 트리를 기반으로 각 요소들이 화면 어디에, 어떤 크기로 배치될지 계산합니다.
5. 페인팅 (Painting): 계산된 레이아웃에 따라 실제 픽셀들을 화면에 그립니다. 🎨

HTML 문서를 읽다가 이미지, CSS 파일, JavaScript 파일 등에 대한 링크를 발견하면, 브라우저는 다시 서버에 해당 파일들을 요청하고(2~6단계 반복) 받아와서 화면을 완성해 나갑니다. 이 모든 과정이 눈 깜짝할 사이에 일어나 우리가 아름다운 웹페이지를 볼 수 있게 되는 것이죠!

---

 

정리하며 📝

와! 우리가 매일 아무렇지 않게 웹사이트에 접속하는 그 짧은 순간 뒤에는 이렇게나 복잡하고 정교한 과정들이 숨어있었습니다! 🤯

• OSI 7계층 🏗️: 데이터 통신의 표준화된 약속! 각 계층이 자기 역할을 충실히 수행하며 데이터를 안전하고 정확하게 전달합니다.
• 웹사이트 접속 과정 🗺️:
  1. DNS 조회로 IP 주소를 찾고,
  2. TCP 3-Way Handshake로 신뢰할 수 있는 연결을 맺고,
  3. HTTP/HTTPS 요청으로 원하는 정보를 달라고 하고,
  4. 서버는 요청을 처리하여 정보를 준비해 HTTP/HTTPS 응답으로 보내주고,
  5. 브라우저는 이 정보를 받아 멋지게 화면에 그려줍니다! ✨

 

마치 잘 짜인 오케스트라처럼 각 기술 요소들이 조화롭게 작동하여 우리에게 편리한 인터넷 세상을 선물하는 것이죠. 🎶

오늘도 이 깊고 넓은 IT 지식을 함께 학습하시느라 정말 수고 많으셨습니다! 💪

 

이제 웹사이트에 접속할 때마다, 그 뒤에서 벌어지는 이 멋진 기술들의 상호작용을 떠올리며 더욱 흥미롭게 인터넷을 즐기실 수 있을 거예요! 다음 시간에는 또 어떤 흥미로운 이야기로 여러분을 찾아뵐지 기대해주세요! 😉

https://abit.ly/lisbva