바이브 코딩으로 첫 페이지 만들기

1강은 "My kitchen is open"이라고 인사하는 페이지로 끝났어요. 틀린 말은 아니었지만, 그건 연습용이었죠. 간직할 만한 건 아니에요. 오늘은 정말 간직할 만한 걸 만들어요. 나를 소개하는 원페이지 사이트예요.

그리고 밋밋한 결과물을 받는 사람과 자기만의 결과물을 받는 사람을 가르는 프롬프트 기술을 하나 배워요. 마법 같은 비법은 아니고, 에이전트가 먼저 질문하게 만드는 것이에요.

오늘 만들 것

index.html 파일 하나가 생겨요. 이름(또는 별명), 어떤 사람인지, 아끼는 링크들이 원하던 모습 그대로 담겨요. 만들기 전에 에이전트가 인터뷰를 했으니까요. 이 파일은 6강에서 진짜 인터넷에 공개돼요. 버릴 물건을 만드는 게 아니에요.

준비물

1강에서 만든 first-kitchen 폴더
약 30분

따라 하기

1. 작업 공간 열기

VS Code로 first-kitchen 폴더를 열고, 터미널을 열고, claude를 입력하세요. 지난번과 똑같아요. 이 여는 동작은 4강쯤 되면 손이 먼저 기억할 거예요.

2. 만들기 전에 인터뷰부터 시키기

이게 오늘의 한 수예요. 처음엔 다들 어렴풋이 묘사하고 밋밋한 결과를 돌려받아요. 해결책은 질문까지 에이전트에게 맡기는 거예요. 이걸 붙여넣으세요:

원페이지 개인 사이트를 만들 거야: 내가 누구인지, 무슨 일을 하는지
한 줄, 아끼는 링크 몇 개, 그리고 요즘 배우고 있는 것 섹션.

무엇이든 만들기 전에, 먼저 나를 인터뷰해 줘 — 내용과 분위기
(색감, 진지한지 발랄한지, 차분한지 시끌벅적한지)를 정하기 위한
짧은 질문을 한 번에 하나씩, 최대 다섯 개까지 해 줘. 그다음
index.html이라는 파일 하나로 만들어서 내 브라우저로 열어 줘.

3. 사람에게 말하듯 답하기

헤더에 뭐라고 쓸까요?, 따뜻한 톤이 좋을까요, 차가운 톤이 좋을까요? 같은 질문이 올 거예요. 평소 말투로 답하면 돼요. 여기서는 "따뜻하게, 빵집 느낌으로"도 훌륭한 디자인 지시가 되거든요. 답하면서 두 가지만 기억하세요:

인터넷에 실명을 올릴 의무는 없어요. 별명도 괜찮아요. 이 파일은 오늘은 내 컴퓨터에만 있지만 6강에서 공개돼요. 모르는 사람들이 읽는다고 생각하고 정하세요. 실제로 읽게 될 테니까요.
너무 고민하지 마세요. 어떤 답이든 나중에 한 문장으로 바꿀 수 있어요. 그게 1강의 핵심이었잖아요.

4. 결과를 보고, 다듬기

권한을 승인하고, 만들게 두고, 브라우저에 열리는 걸 보세요. 아마 80%쯤 마음에 들 거예요. 첫 시도로는 정상이고, 오히려 바람직한 결과예요. 가장 거슬리는 것 하나를 골라 수정을 요청하세요:

링크가 밋밋한 목록처럼 보여 — 누르고 싶어지는 버튼 느낌으로
바꿔 줘. 그리고 브라우저에서 새로고침해 줘.

80%에서 시작해 조금씩 다듬는 이 리듬은 임시방편이 아니라 그 자체로 기술이에요. 다음 레슨에서 제대로 훈련해요.

막혔을 때

그래도 밋밋해 보여요 — 분위기 답변이 추상적이었을 가능성이 커요("괜찮게, 모던하게" 같은 답). 질감이 느껴지게 다시 요청하세요. "따뜻한 크림색 배경, 굵은 포인트 컬러 하나, 크고 친근한 글씨." 구체적으로 넣으면 구체적으로 나와요.
파일을 하나가 아니라 세 개 만들었어요 — 이렇게 말하세요. "전부 index.html 하나로 합쳐 줘. 이 프로젝트는 파일 하나만 쓰는 거야, 기억해 줘." (예고: 4강에서 진짜로 기억하게 만들어요.)
나에 대한 글이 너무 길어요 — "모든 섹션을 최대 두 문장으로 줄여 줘. 대단해 보이는 것보다 간결한 게 좋아."라고 요청하세요.
브라우저에 옛날 페이지가 보여요 — 새로고침하세요. 그래도 그대로면 강력 새로고침이에요: Ctrl+F5 (Windows) / Cmd+Shift+R (Mac).

마무리 체크

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

□ first-kitchen 폴더에 index.html이 존재한다
□ 페이지에 '내' 콘텐츠가, 내가 고른 분위기로 담겨 있다
□ 에이전트가 만들기 전에 나에게 질문했다
□ 결과를 보고 나서 최소 한 번은 수정을 요청했다

오늘 익힌 진짜 기술은 이거예요. 뭘 지정해야 할지 혼자 추측하는 대신, 에이전트가 끌어내게 만들었다. 이 인터뷰 기법은 어디에나 통해요. 사이트, 도구, 여행 계획, 그리고 이 강의에서 만드는 모든 것에요.

다음 레슨 — 03 다시 시키면서 원하는 대로 고치기. 이 페이지에 의도적인 변경 다섯 번을 해 봐요. 일부러 내는 사고 한 번과 되돌리기 연습도 포함이에요. 자신감을 기르는 레슨이에요.

막힌 단계가 있나요? 아래 질문 상자에 남겨 주세요. 헤맨 단계가 있다면 그건 레슨에 난 구멍이지, 읽는 사람 잘못이 아니에요. 질문 하나가 다음 사람의 길을 메워 줘요.