3-2 바이브 코딩 프로젝트 ⏱ 약 12분

Codex에게 첫 페이지 맡기기

기획서를 바탕으로 Codex에게 웹사이트를 만들어 달라고 해요. 그리고 결과를 꼼꼼히 확인해요.

🎯 이번 레슨을 마치면
  • 기획서를 바탕으로 웹사이트 제작을 요청할 수 있다
  • 만들어진 파일 구성을 이해할 수 있다
  • 브라우저에서 결과를 확인하고 점검할 수 있다

1단계: 계획 먼저 받기

첫 요청
plan.md에 정리한 기획서대로 나만의 소개 웹사이트를 만들고 싶어.
코드를 쓰기 전에 먼저
1) 어떤 파일을 만들지
2) 화면이 위에서부터 어떤 순서로 구성될지
를 간단히 보여 줘. 내가 확인하면 그때 만들어 줘.

👉 plan.md가 없다면 기획서 내용을 직접 붙여 넣어도 돼요.

계획을 읽어 보고, 마음에 안 드는 부분이 있으면 지금 말하세요. 만들고 나서 고치는 것보다 계획 단계에서 고치는 게 훨씬 쉬워요.

계획이 괜찮으면
좋아, 그 계획대로 만들어 줘. 사진은 아직 없으니 임시 그림 자리로 비워 두고,
나중에 내가 사진 파일을 넣으면 바꾸기 쉽게 해 줘.

2단계: 만들어진 파일 살펴보기

보통 이런 파일들이 생겨요.

my-site/
├─ index.html     ← 내용과 뼈대 (HTML)
├─ style.css      ← 색, 글꼴, 배치 (CSS)
├─ script.js      ← 버튼 같은 동작 (JavaScript)
└─ images/        ← 사진 폴더

3단계: 직접 열어서 확인하기

index.html을 더블클릭하면 브라우저에서 열려요. (Codex에게 “미리보기로 보여 줘”라고 하면 바로 띄워 주기도 해요.)

4단계: 마음에 들면 저장!

AI 코딩 도구에게 이렇게 말해 보세요
첫 버전이 마음에 들어. "첫 버전 완성"이라는 메시지로 커밋해 줘.
퀴즈

웹사이트에 처음 들어왔을 때 서버가 가장 먼저 보여 주는 파일 이름은?

📝 정리해 볼까요?

  • 기획서(plan.md)를 보여 주고 "계획 먼저 → 만들기" 순서로 요청했어요.
  • 결과물은 보통 index.html(내용), style.css(꾸밈), script.js(동작) 파일로 나뉘어요.
  • PC와 휴대폰 화면 모두에서 확인하고, 잘 되면 커밋해요.

📖 새로 나온 용어

HTML
웹페이지의 뼈대와 내용을 적는 언어예요. "여기는 제목, 여기는 문단"처럼 표시해요. 비유: 집의 뼈대
CSS
웹페이지의 색, 크기, 글꼴, 배치를 꾸미는 언어예요. 비유: 집의 인테리어
JavaScript
웹페이지가 움직이고 반응하게 만드는 프로그래밍 언어예요. 비유: 집의 전기와 수도
용어 사전 전체 보기 →