3-1 바이브 코딩 프로젝트 ⏱ 약 8분

만들기 전에 한 장으로 정리하기

AI에게 일을 맡기기 전, 무엇을 만들지 한 장으로 정리해요. 이 한 장이 결과물의 품질을 결정해요.

🎯 이번 레슨을 마치면
  • 웹사이트 기획서(한 장)를 쓸 수 있다
  • 페이지 구성과 꼭 필요한 내용을 정할 수 있다

기획서 한 장 양식

아래 질문에 답을 적어 보세요. 메모장이나 종이에 써도 좋아요.

질문예시 (민지의 소개 사이트)
🎯 왜 만드나요?나를 소개하고, 그동안 만든 그림을 보여 주고 싶어서
👥 누가 보나요?취업 담당자, 친구들. 주로 휴대폰으로 볼 것 같아
📄 페이지는?홈 하나에 [소개 / 작품 / 연락처] 구역
🎨 분위기는?깔끔하고 밝게. 하얀 배경에 보라색 포인트
🧩 꼭 들어갈 내용은?이름, 한 줄 소개, 사진, 작품 사진 6개, 이메일, 인스타그램 링크
🚫 하지 말 것은?너무 화려한 움직임, 작은 글씨

기획서를 Codex와 함께 다듬기

아이디어가 막연하다면 Codex에게 질문을 받아도 돼요.

AI 코딩 도구에게 이렇게 말해 보세요 
나만의 소개 웹사이트를 만들고 싶어. 아직 코드는 쓰지 말고,
기획서를 함께 정리하고 싶어. 나에게 필요한 질문을 하나씩 해 줘.
다 정리되면 plan.md 파일로 저장해 줘.

👉 질문에 하나씩 답하다 보면 기획서가 완성돼요. plan.md는 프로젝트 폴더에 저장돼서 다음 레슨에서 바로 써요.

퀴즈

AI에게 맡기기 전에 기획서를 쓰는 가장 큰 이유는?

📝 정리해 볼까요?

  • 기획서에는 목적, 보는 사람, 페이지 구성, 분위기, 꼭 들어갈 내용을 적어요.
  • 처음에는 작게! 페이지 1~3개로 시작하고 나중에 늘려요.
  • 기획서를 프로젝트 폴더에 저장해 두면 Codex가 언제든 참고할 수 있어요.