1-1 브라우저 실습 ⏱ 약 7분

웹사이트는 어떻게 내 화면에 올까?

주소를 입력하고 화면이 뜨기까지 1초. 그 사이에 일어나는 일을 식당 주문에 빗대어 알아봐요.

🎯 이번 레슨을 마치면
  • 브라우저, 서버, 주소(URL), DNS가 각각 무슨 일을 하는지 안다
  • 요청과 응답, 상태 코드(200·404·500)의 뜻을 안다

식당에서 주문하는 것과 똑같아요

1. 주소 입력 www.example.com
2. DNS 이름 → 숫자 주소 찾기
3. 요청 "이 페이지 주세요"
4. 서버 파일을 찾아 보내 줌
5. 브라우저 받은 코드로 화면 그리기
등장인물식당으로 치면하는 일
브라우저브라우저 (Browser)웹페이지를 받아서 화면에 그려 주는 프로그램이에요. 크롬, 엣지, 사파리 등이 있어요. (크롬, 엣지)손님주문하고, 받은 음식(코드)을 화면으로 차려 냄
서버서버 (Server)요청을 받으면 필요한 것을 만들어 돌려주는 컴퓨터(또는 프로그램)예요.주방주문을 받아 웹페이지 파일을 보내 줌
URLURL인터넷에 있는 자원(웹페이지, 이미지 등)의 정확한 위치를 나타내는 주소예요. (주소)가게 주소 + 메뉴 이름어느 가게의 어떤 페이지인지
DNSDNS도메인 이름을 실제 컴퓨터 주소(IP 주소)로 바꿔 주는 시스템이에요.전화번호부example.com을 숫자 주소 203.0.113.10으로 바꿔 줌

직접 주문해 보세요

버튼 세 개를 모두 눌러 보고, 서버의 응답응답 (Response)서버가 요청을 받고 돌려주는 결과예요.이 어떻게 다른지 비교해 보세요.

체험요청과 응답 — 브라우저와 서버의 대화
브라우저손님 (클라이언트)
서버주방

위 버튼을 눌러 브라우저가 서버에게 요청을 보내 보세요.

보낸 요청 (Request)

아직 보내지 않았어요

받은 응답 (Response)

기다리는 중…

주소(URL)도 살짝 쪼개 볼까요?

체험URL 분해기 — 주소를 입력해 보세요
https://shop.example.co.kr:8080/products/shoes?color=red&size=260#review
프로토콜https://

어떤 규칙으로 대화할지 정해요. https는 내용을 암호화하는 안전한 방식이에요. (s = secure)

서브도메인shop.

한 사이트 안의 구역 이름이에요. www, shop, blog처럼 나눠 쓸 수 있어요.

도메인 이름example

사이트의 고유한 이름이에요. 도메인 회사에 돈을 내고 1년 단위로 빌려 써요.

최상위 도메인.co.kr

가장 큰 분류예요. .com(회사), .kr(한국), .org(단체), .co.kr(한국 회사) 등이 있어요.

포트:8080

한 컴퓨터 안의 "방 번호"예요. https는 443, http는 80번을 기본으로 써서 보통 생략해요.

경로/products/shoes

사이트 안에서 어떤 페이지(파일)를 원하는지 알려 줘요. 폴더 구조와 비슷해요.

쿼리 (검색 조건)?color=red&size=260

페이지에 추가 조건을 전달해요. ?로 시작하고 이름=값을 &로 이어 붙여요.

· color = red· size = 260

해시 (책갈피)#review

페이지 안의 특정 위치로 바로 이동해요. 이 부분은 서버로 보내지지 않아요.
퀴즈

주소를 잘못 입력해서 '없는 페이지'에 들어갔을 때 서버가 보내는 상태 코드는?
퀴즈

DNS가 하는 일은?

📝 정리해 볼까요?

  • 브라우저(손님)가 서버(주방)에 요청하면, 서버가 HTML·CSS·JavaScript를 응답으로 보내 줘요.
  • DNS는 example.com 같은 이름을 컴퓨터의 숫자 주소(IP)로 바꿔 주는 전화번호부예요.
  • 상태 코드 200은 성공, 404는 없음, 500은 서버 고장이에요.

📖 새로 나온 용어

브라우저 Browser
웹페이지를 받아서 화면에 그려 주는 프로그램이에요. 크롬, 엣지, 사파리 등이 있어요. 비유: 웹 세상을 보는 창문
서버 Server
요청을 받으면 필요한 것을 만들어 돌려주는 컴퓨터(또는 프로그램)예요. 비유: 식당 주방
URL
인터넷에 있는 자원(웹페이지, 이미지 등)의 정확한 위치를 나타내는 주소예요. 비유: 도로명 주소 + 호수
DNS
도메인 이름을 실제 컴퓨터 주소(IP 주소)로 바꿔 주는 시스템이에요. 비유: 이름으로 번호를 찾는 전화번호부
요청 Request
브라우저가 서버에게 "이것 좀 주세요" 하고 보내는 메시지예요. 비유: 손님의 주문
응답 Response
서버가 요청을 받고 돌려주는 결과예요. 비유: 주방에서 나온 음식
상태 코드 Status Code
응답이 어떻게 처리됐는지 알려 주는 숫자예요. 200은 성공, 404는 없음, 500은 서버 오류예요. 비유: 주문 결과 안내: "나왔습니다 / 없는 메뉴예요 / 주방 고장"
용어 사전 전체 보기 →