1강. 웹이 돌아가는 큰 그림¶

핵심 질문: 주소창에 주소를 치고 엔터를 누르면, 0.5초 동안 무슨 일이 일어나나? 이 한 줄기를 알면 프론트엔드/백엔드/서버/DB가 전부 한 지도 위에 꽂힌다.

1. 식당 비유 - 등장인물 전원 소개¶

웹 서비스 하나 = 식당 하나라고 보면 등장인물이 딱 맞아떨어진다.

등장인물	식당에서	웹에서	내 프로젝트 실물
손님	밥 먹으러 온 사람	클라이언트 (브라우저, 폰)	수강생의 크롬, 카톡 인앱 브라우저
가게 이름	"스토리위너식당" 간판	도메인	storywinner.co.kr
네비게이션	가게 이름 → 실제 주소 변환	DNS	(눈에 안 보이지만 매번 작동)
건물	24시간 영업하는 매장	서버	Cloudflare의 컴퓨터들
홀 (테이블, 메뉴판, 인테리어)	손님이 보고 만지는 모든 것	프론트엔드	프롬프트 사이트의 화면, 버튼, 복사 기능
주방 (안 보이는 조리 공간)	주문을 실제로 처리	백엔드	Pages Functions (업로드 API)
장부	주문 기록, 손님 명단	데이터베이스(DB)	D1 (lecture-board)
창고	식자재 보관	파일 저장소	R2 (board-images)
주문서	"김치찌개 하나요"	요청 (request)	버튼 클릭 → API 호출
서빙	음식이 나옴	응답 (response)	갤러리에 카드가 뜸

한 줄 정리: 프론트엔드 = 손님이 보는 홀, 백엔드 = 안 보이는 주방, 서버 = 그 식당이 들어 있는 건물.

2. 주소창에 엔터 → 화면까지 (6단계)¶

ai-prompt-lecture.pages.dev에 수강생이 접속하는 순간을 따라가 보자.

[1] 주소 입력   수강생이 폰에서 QR 찍음 → 브라우저가 주소를 받음
[2] DNS 조회    "ai-prompt-lecture.pages.dev가 어디 있지?"
                → 인터넷 주소록(DNS)이 실제 서버 주소(IP)를 알려줌
[3] 요청 발송   브라우저가 그 서버에 편지를 보냄: "그 페이지 주세요" (HTTP 요청)
[4] 서버 응답   Cloudflare 서버가 파일 묶음을 보내줌: HTML + CSS + JS
[5] 화면 조립   브라우저가 받은 파일로 화면을 조립
                HTML = 뼈대(글, 버튼)  /  CSS = 옷(색, 배치)  /  JS = 움직임(클릭하면 복사)
[6] 추가 대화   이후 버튼을 누를 때마다 서버와 짧은 대화(API)를 주고받음

여기까지가 "사이트가 뜬다"의 전부다. 어떤 웹 서비스든 이 6단계를 벗어나지 않는다.

3. 실물 해부 - 수강생이 결과물을 업로드하는 순간¶

이번엔 우리 프롬프트 사이트 board에서 수강생이 "업로드" 버튼을 누르는 순간:

수강생 폰 (클라이언트)
  │  "이 이미지랑 제목 저장해주세요" ← POST 요청 (주문서)
  ▼
Pages Functions (백엔드 = 주방)
  │  ① 이미지 파일은 → R2 창고에 넣고
  │  ② 제목·작성자·시간은 → D1 장부에 적는다
  ▼
"저장 완료" 응답 (JSON이라는 메모 형식)
  │
  ▼
수강생 화면(프론트엔드)이 갤러리를 새로고침 → 방금 올린 카드가 보임

여기서 중요한 분업: 이미지(무거운 파일)는 창고(R2), 글자 정보(가볍고 검색해야 하는 것)는 장부(D1). 6강에서 왜 이렇게 나누는지 자세히 본다.

4. 그래서 "정적 사이트"는 뭔가?¶

프롬프트 사이트의 강의 페이지들은 미리 다 만들어둔 완성품(HTML 파일)을 그냥 건네주기만 한다 → 정적(static). 빠르고, 서버가 일할 게 없어서 공짜에 가깝다.
반면 board처럼 사용자마다·순간마다 내용이 달라지는 부분은 주방(백엔드)이 매번 일해야 한다 → 동적(dynamic).
우리 사이트 구조 = "정적 전단지 + 뒤에 붙은 접수 창구(Functions)". 비용은 정적 수준인데 게시판 기능까지 되는 이유.

하이메이트로 만든 행정사무감사.html을 더블클릭으로 여는 건? 서버가 아예 없는 상태다. 파일이 내 컴퓨터 안에만 있으니 나만 볼 수 있다. 남에게 링크로 주려면 서버가 있는 곳에 올려야 하고, 그게 배포다 (9강).

5. 강의용 한 줄 정리 (수강생에게 설명한다면)¶

"여러분이 보는 화면은 홀, 데이터를 처리하는 곳은 주방입니다. 바이브코딩으로 html 파일 하나를 만들면 '홀만 있는 식당'을 만든 거예요. 그래서 챗봇도 계산기도 되지만, 손님 명단을 기억하는 일(DB)은 주방이 필요합니다."
가장 자주 나올 질문: "제가 만든 html을 카톡으로 보내면 친구도 쓸 수 있나요?" → 파일을 보내면 친구 컴퓨터에서도 열린다(파일 자체가 홀이니까). 단, 링크로 공유하려면 배포가 필요하다.

6. 퀴즈¶

풀고 나서 정답을 펼쳐 확인. 더 풀고 싶으면 Claude에게 "1강 퀴즈 더 내줘".

Q1. 수강생이 ai-prompt-lecture.pages.dev를 입력했을 때, 이 이름을 실제 서버 주소(IP)로 바꿔주는 것은?

정답 보기

DNS (인터넷 주소록). 가게 이름을 네비에 찍으면 실제 주소로 안내해주는 것과 같다.

Q2. 프롬프트 사이트에서 수강생이 결과물을 올릴 때, 이미지가 저장되는 곳과 제목·작성자가 저장되는 곳은 각각?

정답 보기

이미지 = R2 (창고), 제목·작성자·시간 = D1 (장부). 무거운 파일과 검색할 글자 정보를 분리한다.

Q3. 프론트엔드와 백엔드를 가르는 기준 한 가지는?

정답 보기

어디서 실행되느냐. 사용자의 브라우저 안에서 돌아가면 프론트엔드, 서버에서 돌아가면 백엔드. (예쁘냐 아니냐가 아니라 "실행 장소"가 기준)

Q4. 하이메이트로 만든 html 파일을 더블클릭해서 열었다. 이때 서버는 어디에 있나?

정답 보기

없다. 파일이 내 컴퓨터에서 직접 열린 것. 그래서 인터넷 없이도 열리고, 대신 남이 링크로 접속할 수 없다. 링크를 만들려면 배포(서버에 올리기)가 필요하다.

Q5. JSON을 비유 하나로 설명하면?

정답 보기

프로그램끼리 주고받는 표준 양식의 메모지. "제목: ○○, 작성자: ○○" 처럼 누가 봐도 같은 규칙으로 적어서, 어떤 프로그램이든 읽을 수 있다.

다음 강¶

→ 2강: 프론트엔드 3총사 (HTML/CSS/JS). 시작하려면 "웹기초 2강 만들어줘". 막히는 용어는 용어사전에서.