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

작은 건 직접 고치기

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

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

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

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

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

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

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

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

📝 정리해 볼까요?

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