프롬프트 한 방으로 블로그 뼈대 세우기

입문 네 시즌을 마쳤다면, 지금 손에는 페이지가 하나 있어요. 인터넷에 올라가 있고, 규칙 파일이 있고, 스킬도 두어 개 있죠.

그런데 그 페이지, 겉이에요. 글을 하나 더 올리려면 코드를 고쳐야 하고, 방문자는 아무것도 남길 수 없어요. 쇼윈도에 놓인 모형 음식 같은 거예요. 보기엔 완성인데 주방이 없죠.

시즌 5는 주방을 만드는 시즌이에요. 새로고침해도 남는 글, 나만 쓸 수 있는 글쓰기, 방문자가 남기는 댓글. 다섯 강 뒤에는 진짜 주소로 개업합니다.

오늘은 그 첫날이고, 시작이 좀 달라요. 하나씩 쌓지 않아요. 한 방에 세웁니다.

오늘 만들 것

프롬프트 하나로 만들어지는 블로그 뼈대. 홈, 글 목록, 글 상세, 소개 페이지까지 — 디자인이 된 채로요.

그리고 이 시즌의 진짜 기술 하나: "멋지게 만들어 줘"가 아니라 완결된 명세로 말하는 법.

준비물

• 입문 시즌 1~4를 마친 상태 (설치·계획 모드·git이 손에 있어요)
• 40분
• 새 프로젝트를 시작할 마음 — my-page는 오늘 안 씁니다

미리 말해둘게요. 중급이라 한 강이 입문보다 조금 길어요. 대신 단계는 똑같이 잘게 쪼갰어요.

따라 하기

1. 새 가게 자리부터

my-page 옆에 새 폴더를 만들어요. 이름은 my-blog.

바탕화면에 my-blog 라는 새 폴더를 만들어 줘. 그리고 그 폴더를
VS Code로 열어 줘. my-page는 건드리지 마.

입문에서 만든 my-page는 그대로 둡니다. 이번 시즌은 완전히 새 프로젝트예요. 배운 것은 가져오지만, 파일은 안 가져와요.

2. 한 방 프롬프트

아래 프롬프트가 오늘의 핵심이에요. [대괄호] 부분만 내 것으로 바꾸고, 통째로 복사해서 붙여넣으세요.

입문에서는 "큰 글씨로 인사말"처럼 짧게 시켰죠. 오늘은 사이트 하나의 명세를 통째로 넘깁니다. 페이지 구성, 디자인, 모바일, 글이 없을 때 화면까지 전부요.

새 블로그 프로젝트를 시작할 거야. 아래 명세대로 한 번에 만들어 줘.

[기본 정보]
- 블로그 이름: [내 블로그 이름]
- 부제(한 줄 소개): [어떤 이야기를 쓰는 곳인지 한 문장]
- 주로 쓸 글 주제: [예: 요리, 육아, 공부 기록, 여행]

[파일 구성 — 이 구조를 정확히 지켜 줘]
- index.html : 홈. 위에 블로그 이름과 부제, 아래에 글 목록(최신순)
- post.html : 글 상세. 주소의 ?id= 값으로 data.js에서 글을 찾아 보여준다
- about.html : 소개 페이지. 짧은 자기소개 자리만 잡아 둬
- style.css : 모든 페이지가 함께 쓰는 스타일
- data.js : 글 데이터. 지금은 posts 배열로 하드코딩한다.
  글 하나의 형식: { id, title, summary, content, created_at }
- 순수 HTML/CSS/JS로만. 프레임워크, 빌드 도구, npm 금지.
  html 파일을 브라우저에서 바로 열어도 전부 동작해야 해.

[디자인]
- 읽기가 전부인 디자인. 본문 최대 폭 720px, 가운데 정렬, 여백 넉넉히
- 배경은 거의 흰색, 글자는 진회색, 포인트 색은 [원하는 색 하나, 예: 짙은 초록]만
- 글 목록은 카드 말고 "제목 + 날짜 + 요약" 줄로 담백하게
- 글꼴은 시스템 폰트만(웹폰트 금지), 제목은 굵게·본문은 행간 1.7
- 모바일(480px 이하)에서 글자 크기와 여백이 자연스럽게 줄 것
- 화려한 장식·애니메이션 금지

[상태 처리 — 빠뜨리지 말 것]
- 글이 0편일 때 홈: "아직 글이 없어요. 첫 글을 준비 중이에요."
- post.html에 없는 id로 들어오면: "글을 찾을 수 없어요" + 홈으로 가는 링크
- 이미지가 하나도 없어도 깨지지 않는 레이아웃

[데모 데이터]
- [주제]에 어울리는 데모 글 3편을 data.js에 넣어 줘.
  제목·요약·본문(3~4문단)을 그럴듯하게, 날짜는 서로 다르게.

다 만들면 파일 구조를 보여주고, index.html을 브라우저에서 여는 법을
알려 줘. 코드 설명은 길게 안 해도 돼.

엔터를 누르고 잠깐 기다리세요.

3. 오늘의 순간

index.html을 브라우저로 여세요.

블로그가 있어요. 이름이 붙어 있고, 글이 세 편 있고, 제목을 누르면 본문이 열리고, 폰 크기로 줄여도 안 깨져요.

입문 1강에서 문장 몇 줄로 페이지 하나를 만들었을 때를 기억하나요. 오늘은 한 문단으로 사이트 하나가 나왔어요. 달라진 건 에이전트가 아니라 주문서예요. 명세가 완결되면 결과도 완결됩니다.

다른 페이지도 확인해요. 글 세 편을 다 열어보고, 소개 페이지도 열어보세요.

4. 프롬프트를 다시 읽어요

결과를 봤으니, 이제 프롬프트로 돌아가서 왜 이렇게 썼는지 봐요. 세 가지가 핵심이에요.

파일 구성을 지정했어요. 특히 data.js요. 글 데이터를 화면(html)과 일부러 떼어놨어요. 왜 그랬는지는 다음 강의에서 알게 돼요. 지금은 하나만 기억하세요 — 겉과 데이터는 처음부터 분리.

"하지 마"를 적었어요. 프레임워크 금지, 웹폰트 금지, 애니메이션 금지. 금지가 없으면 에이전트는 종종 과하게 만들어요. 원하지 않는 걸 말하는 것도 명세예요.

없을 때를 적었어요. 글이 0편일 때, 없는 주소로 들어왔을 때. 잘 될 때만 생각하고 만든 것과 안 될 때까지 생각하고 만든 것의 차이가 "동작하는 수준"과 "쓸 만한 수준"의 차이예요.

5. 다듬기는 계획 모드로

뼈대는 한 방이었지만, 다듬기는 입문에서 배운 리듬 그대로 갑니다.

계획 모드로: 포인트 색을 [바꾸고 싶은 색]으로 바꾸면 어떤 파일의
어디가 바뀌는지 계획만 먼저 보여 줘.

계획을 읽고, 승인하고, 결과를 눈으로 확인하세요. 소개 페이지도 채워요.

about.html의 자기소개를 이 내용으로 바꿔 줘: [나를 소개하는 두세 문장]

뼈대는 한 방, 다듬기는 계획-승인-확인. 이 리듬이 시즌 내내 반복돼요.

6. 저장점

시즌 1에서 배운 그대로요.

git 저장점을 만들어 줘. 이름은 "블로그 뼈대 완성".

막혔을 때

결과가 완성 예시와 달라요. 정상이에요. 에이전트는 실행할 때마다 조금씩 다르게 만들어요. 명세(파일 구성, 상태 처리)만 지켜졌으면 그게 성공이에요. 색과 분위기가 다른 건 개성이고요.

파일이 명세와 다르게 나왔어요. 예를 들어 data.js 없이 html 안에 글을 박아놨다면, 이렇게 시키세요: "명세대로 글 데이터를 data.js의 posts 배열로 분리해 줘." 명세를 준 덕분에 "명세대로"라고 말할 수 있는 거예요.

글을 눌러도 본문이 안 나와요. 브라우저 주소창이 post.html?id=...인지 확인하세요. 에이전트에게 화면에 뜬 그대로 말해도 돼요: "post.html에서 글이 안 보여. 원인을 찾아서 고쳐 줘."

한글이 깨져요. 입문에서 본 그 문제예요. "모든 html 파일에 UTF-8 인코딩 설정이 있는지 확인해 줘."

my-page가 열려 있어서 헷갈려요. VS Code 창을 다 닫고 my-blog 폴더만 다시 여세요. 프로젝트 하나에 창 하나가 안 헷갈려요.

마무리 체크

나가기 전에 하나씩 확인해요:

• my-blog 폴더를 새로 만들었어요 (my-page는 그대로)
• 한 방 프롬프트로 블로그 뼈대가 통째로 나왔어요 ← 오늘의 순간
• 홈·글 상세·소개 페이지를 전부 열어봤어요
• 없는 주소(post.html?id=999)에서 안내문이 뜨는 걸 확인했어요
• 계획 모드로 색 하나를 바꿔봤어요
• git 저장점 "블로그 뼈대 완성"을 만들었어요

멋진 블로그가 생겼어요. 그런데 새 글을 쓰려면 어떻게 해야 하죠? ...코드를 고쳐야 해요. data.js를 열어서, 배열에, 손으로.

뭔가 이상하죠. 블로그인데 글쓰기가 없다니. 다음 강의에서 이 어색함을 풉니다. 글이 코드 밖으로 이사 가요.