🌐 레슨

URL 해부 — 주소창의 모든 부분

https부터 ?뒤의 글자까지, 주소창 한 줄에 담긴 의미를 다 읽을 수 있게 돼요.

① 오늘의 미스터리

"이 주소, 무슨 뜻이지?"

지난 레슨에서 우리는 가게 홈페이지를 인터넷에 올렸어요. 이제 손님이 이런 주소로 찾아옵니다 — https://banchan.shop/menu?sort=popular

평생 주소를 클릭만 해왔지만, 개발자는 주소를 읽을 줄 알아야 해요. 오늘은 이 한 줄을 부위별로 해부해서, 주소만 보고 어떤 페이지인지 맞히는 눈을 기릅니다.

설명을 따라 진행하면, 여기서 직접 쳐보게 돼요 👇

~/my-shop

$ _

📚 「URL 해부 — 주소창의 모든 부분」 레슨 내용 전체 텍스트로 훑어보기

"이 주소, 무슨 뜻이지?"

지난 레슨에서 우리는 가게 홈페이지를 인터넷에 올렸어요. 이제 손님이 이런 주소로 찾아옵니다 — https://banchan.shop/menu?sort=popular

URL(주소)을 가게로 보내는 우편봉투라고 생각하면 한 번에 잡혀요.

봉투에 적힌 것들

· 프로토콜 = 배송 방법 (항공 vs 일반)
· 도메인(호스트) = 가게의 거리 주소
· 경로(path) = 가게 안 몇 호실 / 어느 진열대인지
· 쿼리스트링 = 봉투에 붙인 포스트잇 ("인기순으로 보여줘")

주소의 모든 조각엔 이름과 역할이 있어요. 하나씩 뜯어볼게요.

주소 맨 앞 https:// — 이건 무엇을 정하는 부분일까요?

맞아요. https는 프로토콜 — 브라우저와 서버가 어떤 규칙으로 대화할지 정하는 부분이에요. 끝의 s는 secure(암호화)라는 뜻. 손님 주문이 오갈 가게라면 https가 기본이에요.

https:// 다음에 오는 banchan.shop 이 부분이 도메인(호스트)이에요. 인터넷 어디에 우리 가게가 있는지 알려주는 거리 주소죠.

한 도메인, 수많은 방

같은 banchan.shop 한 곳에 /menu, /order, /about 처럼 수많은 페이지(경로)가 들어 있어요. 건물 하나에 호실이 여러 개인 것과 똑같아요.

주소 https://banchan.shop/menu 에서 /menu 부분(경로)은 무엇을 가리킬까요?

정답. 경로(path)는 그 가게 안에서 어떤 페이지(자원)를 달라는지 가리켜요. /menu는 메뉴 진열대, /order/42 라면 '주문 중 42번 주문' 처럼 읽혀요. 슬래시로 점점 좁혀 들어가는 거예요.

주소가 헷갈리면 Claude에게 통째로 해부를 부탁하면 돼요. 가게 폴더에서 Claude를 켜고 우리 주소를 그대로 붙여 물어봐요.

https://banchan.shop/menu?sort=popular 이 주소를 프로토콜·도메인·경로·쿼리스트링으로 나눠서 각각 무슨 뜻인지 알려줘

— 우리 가게 주소를 부위별로 갈라달라고 해요

이렇게 모르는 주소가 나올 때마다 통째로 던져 해부를 부탁할 수 있어요. 그래도 직접 읽는 눈을 기르면 훨씬 빨라요 — 계속 가봅시다.

이제 마지막 조각, ?sort=popular. ? 뒤에 붙는 이 부분이 쿼리스트링이에요.

쿼리스트링 읽는 법

· ? 로 시작해요 (여기서부터 옵션이라는 신호)
· key=value 짝이에요 — sort=popular 는 '정렬=인기순'
· 같은 페이지(/menu)를 어떻게 보여줄지만 바꾸는 옵션이에요

/menu 는 그대로 메뉴 페이지인데, 포스트잇만 갈아 끼워 정렬·필터를 바꾸는 거죠.

메뉴를 인기순으로 보면서 채소 반찬만 거르고 싶어요. 옵션 두 개를 한 주소에 붙이려면, ?sort=popular 와 category=veggie 사이에 어떤 기호를 넣을까요?

정답! & 예요. 첫 옵션은 ? 로 시작하고, 둘째부터는 & 로 이어 붙여요. 그래서 ?sort=popular&category=veggie = "인기순으로, 채소 반찬만" 이 되는 거예요.

이제 두 주소를 나란히 놓고, 클릭하기 전에 어떤 페이지일지 추측해봐요.

🅰️ banchan.shop/order/42: 경로가 /order/42 — 주문 목록 중 42번 주문 상세 페이지일 거예요. 숫자는 보통 '몇 번 항목'을 뜻해요.

🅱️ banchan.shop/menu?category=kids: 경로는 /menu (메뉴 페이지 그대로), 포스트잇이 category=kids — 같은 메뉴를 아이 반찬만 걸러 보여줄 거예요.

손님이 주소 끝의 ?sort=popular 를 ?sort=newest 로 바꿔 들어왔어요. 무엇이 달라질까요?

맞아요. 도메인·경로는 그대로라 같은 메뉴 페이지예요. 바뀐 건 포스트잇(쿼리)뿐 — 정렬이 인기순 → 신상품순으로 달라져요. 단, key 이름(sort)은 서버가 정한 것이라 아무거나 지어내면 무시돼요.

마지막으로 추측 실력을 Claude로 점검해봐요. 주소 하나를 주고 "무슨 페이지일 것 같아?" 라고 거꾸로 물어보는 거예요.

banchan.shop/menu?category=veggie&sort=newest 이 주소면 손님은 어떤 화면을 보게 될까? — 주소만 보고 페이지를 추측하게 시켜봐요

이제 주소를 보면 가게 → 진열대 → 보여주는 방식이 한눈에 읽히죠? 이게 개발자의 눈이에요.

한 줄로

주소는 프로토콜(방식)·도메인(가게)·경로(진열대)·쿼리스트링(포스트잇 옵션) 네 조각으로 뜯어 읽어요. 도메인·경로가 어디를 정하고, 쿼리(?key=value&…)가 어떻게 보여줄지를 바꿔요.

다음 레슨에서

그런데 손님이 주소를 입력하면, 가게 서버와는 정확히 어떤 말이 오가는 걸까요? 다음 "HTTP — 요청과 응답의 대화"에서 그 대화를 직접 엿봅니다. 가게는 계속 자랍니다. 🌱