기초 원리 · L0 입문 · 약 7분

웹사이트 주소를 치면 벌어지는 일

엔터 한 번 누르는 1초 사이에 일어나는 배달 대작전

한 줄로 말하면

주소를 치면 브라우저가 서버를 찾아가서 "이 페이지 줘"라고 요청하고, 받은 재료로 화면을 그려줘.

이 과정이 보통 1초도 안 걸려서 그냥 "켜지는" 것처럼 느껴지는 거야. 이번 레슨에서는 그 1초를 슬로모션으로 쪼개서 볼 거야.

주소(URL) 뜯어보기

주소창에 치는 그 긴 글자를 URL이라고 해. 아무렇게나 생긴 것 같지만 사실 조각마다 역할이 정해져 있어. 예를 들어 https://shop.example.com/products/42?color=red를 쪼개보자.

https:// → 어떤 규칙(프로토콜)으로 대화할지. https는 "암호화해서 안전하게"라는 뜻이야.
shop.example.com → 어느 가게(서버)로 갈지. 이게 도메인이야.
/products/42 → 가게 안에서 어떤 물건(페이지)을 달라는지. 경로라고 불러.
?color=red → 추가 주문 사항. 쿼리라고 하고, 검색어나 필터를 담을 때 써.

엔터를 누르면: 4단계 배달 대작전

① 주소 찾기 — DNS에게 "shop.example.com이 어디야?" → IP 주소를 받음
② 연결하기 — 그 IP의 서버와 연결하고, https면 암호화 약속까지 맺음
③ 요청과 응답 — "이 페이지 줘" → 서버가 HTML 등을 보내줌
④ 화면 그리기 — 브라우저가 받은 재료를 조립해서 화면에 표시

한 번이 아니라 수십 번 오가

서버가 처음 보내주는 건 HTML이라는 "설계도"야. 브라우저가 설계도를 읽다가 "어, 이미지가 필요하네", "디자인 파일(CSS)이 필요하네", "동작 코드(JavaScript)가 필요하네" 하면서 필요한 재료를 계속 추가로 요청해. 그래서 페이지 하나를 여는 데도 요청과 응답이 수십 번 오가는 게 보통이야.

HTML: 뼈대. "여기 제목, 여기 버튼"
CSS: 옷. 색깔, 크기, 배치
JavaScript: 근육. 버튼 누르면 움직이게
이미지·폰트: 장식품

바이브 코더에게 이게 왜 중요해?

이 4단계를 알면 "사이트가 안 떠요"를 어느 단계에서 막혔는지로 바꿔서 생각할 수 있어. 그게 바로 디버깅의 시작이야.

페이지가 안 뜰 때 AI한테 이렇게 물어봐

내 사이트 [주소]를 열면 [하얀 화면 / 무한 로딩 / 에러 페이지]가 나와.
크롬 개발자 도구 Network 탭에서 빨간색으로 실패한 요청은 이거야: [요청 이름과 상태 숫자 붙여넣기]
Console 탭의 빨간 메시지는 이거야: [메시지 붙여넣기]
주소 찾기(DNS) → 연결 → 요청·응답 → 화면 그리기 중 어느 단계 문제인지 먼저 판단하고, 확인 순서를 알려줘.

단계를 같이 알려주면 AI가 "코드를 전부 다시 짜자" 같은 큰 공사 대신, 막힌 지점부터 좁혀 들어가.

확인 퀴즈

Q. https://shop.example.com/products/42?color=red에서 "어느 서버로 갈지"를 나타내는 부분은?

https://
shop.example.com
/products/42
?color=red

정답 보기

2번. shop.example.com이 도메인이야. 이 이름을 DNS로 IP 주소로 바꿔서 서버를 찾아가.

Q. 페이지 하나를 열 때 요청은 보통 몇 번 일어날까?

딱 한 번
HTML 받을 때와 끝날 때 두 번
이미지·CSS·JS 등 재료마다 여러 번
요청 없이 서버가 알아서 보내준다

정답 보기

3번. HTML을 받은 뒤 필요한 재료마다 추가 요청을 보내서, 보통 수십 번 오가.

Q. 사이트를 고쳐서 배포했는데 내 브라우저에선 옛날 화면이 보여. 먼저 해볼 일은?

코드를 처음부터 다시 짠다
강력 새로고침이나 시크릿 창으로 확인한다
도메인을 새로 산다
서버 컴퓨터를 바꾼다

정답 보기

2번. 브라우저가 예전 재료를 캐시해 둔 걸 수 있어. 캐시 없이 새로 받아보는 게 가장 먼저야.

바코친 앱에서 퀴즈 풀고 AI한테 물어보기

무료 · 카카오로 바로 시작 · 레슨 243개