AI와 제대로 대화하는 법을 익히고, 브라우저에서 열리는 첫 결과물을 완성합니다.
만든 것을 세상에 공개하는 경험까지 — 이 모듈이 끝나면 시작이 두렵지 않아집니다.
이 모듈에서 배울 것
Module 0에서 만든 첫 결과물, 기억하나요? 이번엔 같은 결과물을 훨씬 좋게 만들어봅니다. 비결은 프롬프트 딱 하나 — "역할 + 맥락 + 원하는 형식"을 갖추는 것입니다. 좋은 프롬프트와 나쁜 프롬프트를 직접 비교하면 차이가 바로 보입니다.
핵심 포인트 — "역할 + 맥락 + 결과물 형식" 3요소가 갖춰진 프롬프트는 첫 시도 성공률이 크게 올라갑니다. 틀려도 괜찮습니다 — 수정 요청도 기술입니다.
Module 0에서 소개 페이지를 만들었다면 이 프롬프트를 사용하세요
너는 경험 많은 프론트엔드 개발자야. 나는 [직업/역할]이고, Module 0에서 만든 내 소개 페이지를 훨씬 좋게 만들고 싶어. 지금 결과물이 너무 단순한데, 더 전문적이고 세련된 디자인으로 전면 개편해줘. HTML 파일 하나로, CSS 포함해서 만들어줘.
Module 0에서 내 아이디어로 시작했다면 이 프롬프트를 사용하세요
너는 경험 많은 프론트엔드 개발자야. 나는 [직업/역할]이고, [내 아이디어/결과물]을 더 잘 만들고 싶어. 지금 [현재 아쉬운 부분]인데, [원하는 방향]으로 개선해줘. [형식: 코드 / 설명 / 단계별 가이드]로 알려줘.
1-1에서 업그레이드한 프롬프트를 Claude Code 터미널에 직접 입력합니다. Module 0의 거친 첫 결과물이 30분 안에 완전히 달라집니다. 말하고 → 확인하고 → 고치는 사이클을 반복하면서 바이브 코딩의 진짜 흐름을 몸으로 익힙니다.
핵심 포인트 — 완벽한 첫 결과물은 없습니다. "일단 돌아가는" 것이 목표입니다. 어설퍼 보여도 괜찮습니다 — 그게 시작입니다.
1-1에서 완성한 프롬프트를 Claude Code에 붙여넣으세요
너는 경험 많은 프론트엔드 개발자야. 나는 [직업/역할]이고, 내 소개 페이지를 전면 개편하고 싶어. 아래 내용을 담아줘: 이름: [이름], 직업: [직업], 한 줄 소개: [소개] 원하는 섹션: [예: 소개, 하는 일, 연락처] 디자인: [원하는 분위기 — 예: 다크 배경, 보라색 포인트, 미니멀] HTML 파일 하나로, CSS 포함해서 만들어줘.
1-1에서 완성한 프롬프트를 Claude Code에 붙여넣으세요
너는 경험 많은 프론트엔드 개발자야. 나는 [직업/역할]이고, [내 아이디어]를 만들고 있어. 지금까지 만든 결과물에서 [개선할 부분]을 고쳐줘. 추가로 [넣고 싶은 기능이나 내용]도 넣어줘. HTML 파일 하나로, CSS 포함해서 만들어줘.
결과물이 마음에 들 때까지 계속 말을 걸어보세요.
한 번에 완벽할 필요 없습니다 — 대화가 쌓일수록 결과물이 좋아집니다. 🎉
Track A든 Track B든, 이제 만든 결과물을 세상에 공개할 시간입니다. GitHub Pages로 무료 배포하면 실제 URL이 생깁니다. 링크 하나로 누구에게나 보여줄 수 있고, 받은 피드백을 AI와 함께 바로 반영하는 사이클을 경험합니다.
핵심 포인트 — 공개 → 피드백 → 수정 사이클이 바이브 코딩의 성장 엔진입니다. 완벽해질 때까지 기다리면 영원히 공개하지 못합니다.
Track A/B 모두 동일한 과정입니다. claude.ai 에서 새 대화를 열고 붙여넣으세요
내가 만든 HTML 파일을 GitHub Pages로 배포하고 싶어. GitHub 계정은 있는데 Pages는 처음이야. 저장소 만들기부터 URL 공유까지 전체 과정을 터미널 초보자 기준으로 순서대로 알려줘.