Week 1 · 웹이 작동하는 방식 Day 1 / 42

웹이 작동하는 방식

코드를 한 줄도 쓰지 않는 첫날 — 대신 눈으로 직접 확인합니다

42일의 큰 그림 — 이 과정은 집 한 채를 짓는 순서를 따라갑니다. Week 1~2는 터파기와 골조(웹의 원리, 컴포넌트), Week 3~4는 방 배치와 검수(레이아웃 조립, 디버깅), Week 5~6은 배관·전기와 마감(데이터 통신, 배포)입니다. 매일 나오는 개별 비유(기차, 도시락통, 진동벨 등)는 그날그날의 도구를 설명하는 것이고, 이 "집짓기" 흐름이 42일 전체가 어디로 가는지 보여주는 지도입니다.

10초 핵심 요약

주소창에 URL을 입력하면 브라우저 → 서버 요청, 서버 → 브라우저 응답이라는 왕복이 일어납니다.
브라우저가 받는 것은 결국 텍스트 파일(HTML)입니다. 화면처럼 보이지만 실체는 글자입니다.
오늘 목표는 이 흐름을 F12로 직접 확인하는 것입니다.

시작 전에, 이 세 단어만

브라우저는 크롬·사파리·엣지처럼 웹사이트를 화면에 보여주는 프로그램입니다. 서버는 인터넷 저편에서 파일을 보관하고 있다가 요청이 오면 보내주는 컴퓨터입니다. 코드는 컴퓨터에게 "이렇게 해라"를 정해진 규칙으로 적어놓은 글입니다.

URL을 입력하면 벌어지는 일

1사용자: 주소창에 URL 입력

2브라우저: "서버가 어디 있지?" → DNS 조회(도메인 이름을 실제 서버 주소(IP)로 변환)

3요청: 브라우저 → 서버 "페이지 파일 줘" (HTTP 요청)

4응답: 서버 → 브라우저 HTML 전달 (HTTP 응답)

5렌더링: 브라우저가 HTML 해석 → 화면 출력

핵심은 이겁니다 — 브라우저가 받는 것은 결국 텍스트 파일입니다. 이 텍스트를 구조(DOM)로 바꾸는 것이 브라우저의 역할입니다(Day 2에서 자세히).

완성된 텍스트를 받는 방식 vs 브라우저가 직접 그리는 방식

서버가 파일을 내려주는 방식은 크게 두 갈래로 나뉩니다. 우리가 이 42일 동안 만들 사이트는 왼쪽 방식입니다.

이미 완성된 HTML을 받음

서버(혹은 CDN)가 이미 다 만들어둔 완성품 HTML 파일을 그대로 내려줍니다. 브라우저는 받자마자 바로 화면을 그릴 수 있어 첫 화면이 빠르고, 검색엔진이 내용을 바로 읽을 수 있습니다.

텅 빈 HTML + JS를 받아 직접 그림

브라우저가 받는 첫 HTML은 거의 비어있고, 자바스크립트가 실행되면서 그때 화면 내용을 채웁니다. 인터랙션은 풍부하지만 첫 화면이 늦게 뜰 수 있습니다.

지금은 "두 방식이 있다"는 것만 기억하면 충분합니다. 우리가 만들 사이트가 어떤 방식으로, 언제 그 완성된 HTML을 만들어두는지는 Week 2에서 다룹니다.

오늘의 실습 (F12 활용)

아무 웹사이트나 열어 F12를 눌러봤다.

Elements 탭에서 제목 글자를 검색해, 태그 안에 실제 텍스트로 들어있는지 확인했다.

HTML 구조 안에서 <header>, <main> 같은 태그를 찾아봤다.

안 될 때 확인하세요 F12를 눌러도 아무것도 안 보인다면 개발자 도구 자체가 안 열린 것입니다. 화면 아무 곳이나 우클릭 → 검사(Inspect)를 눌러도 같은 창이 열립니다. 오늘은 "고쳐야 할 오류"가 없으니, 위 3개가 정상으로 보이면 그걸로 충분합니다.

스스로 설명해보기 — URL을 입력했을 때 브라우저와 서버 사이에 일어나는 5단계를 순서대로 말할 수 있나요? 막힌다면 위 02번을 다시 훑어보세요.

오늘의 용어

URL

웹에서 특정 파일/페이지의 위치를 가리키는 주소

DNS

도메인 이름을 실제 서버 주소(IP)로 바꿔주는 시스템

HTTP 요청

브라우저가 서버에 파일을 달라고 보내는 통신

HTTP 응답

서버가 브라우저에게 파일을 돌려주는 통신