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

작은 건 직접 고치기

오타 하나, 전화번호 하나 바꾸려고 매번 AI를 부를 필요는 없어요. 파일을 열어 직접 고치는 법을 익혀요.

🎯 이번 레슨을 마치면
  • 프로젝트 파일을 열어 글자와 색을 직접 바꿀 수 있다
  • 내가 직접 고친 내용을 Codex에게 알려 줄 수 있다

연습: AI가 만든 페이지 손보기

아래는 Codex가 만들어 준 소개 페이지라고 생각하세요. 실제 프로젝트에서도 똑같이 찾아서 바꾸면 돼요.

따라 해보기
Ctrl+Enter 실행
실행 결과
▶ 실행 버튼을 누르면 여기에 결과가 나타나요
🎯 미션0 / 3
  • 한 줄 소개(tagline)를 내 이야기로 바꿔요
  • 전화번호를 다른 번호로 바꿔요 (연습용 가짜 번호로!)
  • CSS 맨 위의 --main-color 값 하나만 바꿔서 사이트 색을 통째로 바꿔요

실제 프로젝트 파일 고치는 순서

  1. 프로젝트 폴더에서 파일을 열어요. VS Code가 있으면 VS Code로, 없으면 메모장(맥은 텍스트 편집기)으로 열어도 돼요.
  2. Ctrl + F(맥은 ⌘ + F)로 바꾸고 싶은 글자를 찾아요.
  3. 따옴표 안, 태그 사이의 글자만 바꾸고 저장(Ctrl + S)해요.
  4. 브라우저를 새로고침해서 확인해요.
직접 고친 뒤 Codex에게 알려 주기 
내가 index.html에서 전화번호랑 소개 문구를 직접 고쳤어.
혹시 깨진 곳이 없는지 확인해 주고, 괜찮으면 커밋해 줘.
퀴즈

소개 문구의 오타 하나를 고치려고 해요. 어떤 파일을 열어야 할까요?

📝 정리해 볼까요?

  • 글자는 HTML 파일에서, 색·크기는 CSS 파일에서 찾아 바꿔요.
  • Ctrl + F(찾기)로 바꾸고 싶은 글자를 검색하면 금방 찾아요.
  • 직접 고친 뒤에는 Codex에게 "내가 ○○를 직접 바꿨어"라고 알려 주면 좋아요.