LEVEL 1 QUEST
웹사이트의 비밀
주소창에 URL 치면 무슨 일이 벌어질까?
🌐
웹사이트의 비밀
주소창에 URL을 입력하는 순간,
수천 km 떨어진 곳에서 정보가 날아온다고?!
수천 km 떨어진 곳에서 정보가 날아온다고?!
택배로 이해하는 웹!
📦 웹 = 초고속 택배 시스템
🏠
택배 비유
주문서 작성
💻
웹에서는
URL 입력
📋
택배 비유
물류센터 검색
🔍
웹에서는
DNS 조회
🏭
택배 비유
상품 포장
🖥️
웹에서는
서버 응답
📬
택배 비유
배송 완료!
✨
웹에서는
페이지 표시!
URL에서 화면까지 4단계
STEP 1: URL 입력
요청
주소창에 www.google.com을 입력하면,
브라우저가 "이 주소에 해당하는 웹페이지를 보여줘!"라고 요청을 시작해요.
💡 URL은 Uniform Resource Locator의 약자예요.
쉽게 말해서 인터넷에서 원하는 페이지를 찾기 위한 주소예요!
택배 주문할 때 배송지 주소를 적는 것과 같아요.
쉽게 말해서 인터넷에서 원하는 페이지를 찾기 위한 주소예요!
택배 주문할 때 배송지 주소를 적는 것과 같아요.
⬇️
STEP 2: DNS 조회
번역
DNS 서버가 "google.com = 142.250.196.110"이라고 알려줘요.
컴퓨터는 이름이 아니라 숫자(IP 주소)로 통신하거든요!
📱 DNS는 인터넷 전화번호부예요!
우리가 친구 이름으로 전화하듯이, DNS가 도메인 이름을 숫자 주소로 변환해줘요.
google.com → 142.250.196.110
naver.com → 223.130.200.104
이렇게 전 세계 모든 웹사이트의 주소를 알고 있어요!
우리가 친구 이름으로 전화하듯이, DNS가 도메인 이름을 숫자 주소로 변환해줘요.
google.com → 142.250.196.110
naver.com → 223.130.200.104
이렇게 전 세계 모든 웹사이트의 주소를 알고 있어요!
⬇️
STEP 3: 서버 응답
처리
구글 서버가 요청을 받고, 웹페이지를 구성하는 파일들을
HTML, CSS, JavaScript로 포장해서 보내줘요.
🏭 서버는 24시간 돌아가는 초고성능 컴퓨터예요.
전 세계에서 동시에 수백만 개의 요청을 처리할 수 있어요!
📦 서버가 보내주는 것들:
• HTML - 페이지의 뼈대 (글자, 이미지 위치)
• CSS - 예쁜 옷 입히기 (색상, 크기, 배치)
• JavaScript - 움직임 추가 (클릭, 애니메이션)
전 세계에서 동시에 수백만 개의 요청을 처리할 수 있어요!
📦 서버가 보내주는 것들:
• HTML - 페이지의 뼈대 (글자, 이미지 위치)
• CSS - 예쁜 옷 입히기 (색상, 크기, 배치)
• JavaScript - 움직임 추가 (클릭, 애니메이션)
⬇️
STEP 4: 브라우저 렌더링
완료
브라우저(크롬, 사파리 등)가 받은 파일들을 조합해서
예쁜 웹페이지로 화면에 그려줘요!
🎨 브라우저는 번역가 + 화가예요!
서버에서 받은 코드를 읽고, 우리 눈에 보이는 화면으로 그려줘요.
이 모든 과정이 단 0.1~2초 만에 일어나요! 🚀
서버에서 받은 코드를 읽고, 우리 눈에 보이는 화면으로 그려줘요.
이 모든 과정이 단 0.1~2초 만에 일어나요! 🚀
얼마나 빠를까?
0
밀리초 (ms) 만에 완료!
DNS 조회~20ms
서버 응답~100ms
렌더링~200ms
눈 깜짝할 사이에 전 세계 어디서든 정보를 받아와요! 👀
URL 해부해보기
🔒 https://
보안 프로토콜. 데이터를 암호화해서 안전하게!
🏠 도메인
웹사이트의 이름. 사람이 기억하기 쉬운 주소!
📁 경로
웹사이트 안에서 어떤 페이지인지 알려줘요.
❓ 쿼리
추가 정보 전달. 검색어나 필터 같은 것!
직접 확인해보기 (크롬)
🔍 개발자 도구로 확인하기
1
크롬 브라우저에서 아무 웹사이트를 열어요
2
F12 키를 눌러요 (또는 마우스 우클릭 → 검사)
3
Network 탭을 클릭하고 페이지를 새로고침해요
4
수십~수백 개의 파일이 서버에서 날아오는 것을 직접 볼 수 있어요! 📡
웹의 역사 한눈에
1991년
🌍 팀 버너스리가 최초의 웹사이트를 만들었어요. 글자만 있는 아주 단순한 페이지였어요!
1995년
☕ JavaScript가 탄생! 웹페이지에 움직임을 줄 수 있게 되었어요.
2004년
📘 페이스북 등장! SNS 시대가 시작되며 웹은 소통의 공간이 되었어요.
2007년
📱 아이폰 등장! 모바일 웹의 시대가 열렸어요.
2024년~
🤖 AI와 결합된 웹! ChatGPT, AI 검색 등 지능형 웹의 시대예요.
퀴즈 타임!
Q1
DNS의 역할은 무엇일까요?
✅ 정답: B! DNS(Domain Name System)는 인터넷의 전화번호부예요.
우리가 입력한 도메인 이름(google.com)을 컴퓨터가 이해하는 IP 주소(142.250.196.110)로 바꿔줘요!
Q2
URL에서 "https://"의 's'는 무엇을 의미할까요?
✅ 정답: B! HTTPS에서 S는 Secure(안전한)를 의미해요.
데이터를 암호화해서 해커가 중간에 훔쳐볼 수 없게 보호해줘요! 🔒
Q3
웹페이지를 화면에 그리는 역할을 하는 것은?
✅ 정답: C! 브라우저(크롬, 사파리 등)가 서버에서 받은 HTML, CSS, JavaScript를 해석해서
우리 눈에 보이는 예쁜 웹페이지로 그려줘요! 🎨
💡 알고 계셨나요?
현재 전 세계에 등록된 웹사이트는 약 20억 개 이상이에요!
하지만 실제로 활발히 운영되는 사이트는 그 중 약 4억 개 정도예요.
1초에도 수십 개의 새 웹사이트가 만들어지고 있답니다! 🌐
⚡ 필수
이 레슨의 난이도는 어땠나요?
👆 레슨 완료를 위해 난이도를 선택해주세요!
AI 학습 도우미
API 키 필요
AI 도우미를 사용하려면 API 키를 설정하세요.
Gemini는 무료로 사용 가능합니다!
피드백 & 요청사항
🧵 Threads 인증 필요