바이브 코딩 교실 dododong.dev
HOW TO ASK

3부잘 시키는 법

같은 도구라도 어떻게 시키느냐에 따라 결과가 달라져요. 실패를 줄이는 주문 습관 여섯 가지를 익혀요.

만드는 것내 프로젝트용 요구사항 카드와 규칙 파일(AGENTS.md)

AI 에이전트는 시킨 대로 일해요. 문제는 내가 머릿속으로만 생각하고 말하지 않은 것까지는 알 수 없다는 점이에요. 이번 부의 여섯 가지 습관은 모두 "생각한 걸 빠짐없이, 순서 있게 전하는 법"이에요.

#3-1. 원하는 걸 한 장에 적기 (요구사항 카드)

주문하기 전에 아래 네 칸을 먼저 채워 보세요. 칸이 비어 있으면 AI가 대신 상상해서 채우는데, 그 상상이 내 생각과 다를 때 결과가 엉뚱해져요.

칸물어볼 것예: 동아리 회비 계산기
누가 쓰나누가, 어디서(휴대폰·PC) 쓰나요?동아리 총무가 휴대폰으로
무엇을 하나가장 중요한 기능 한두 가지는?총액과 인원을 넣으면 1인당 금액
어떤 화면분위기, 색, 글자 크기는?큰 글씨, 밝은 초록, 버튼 하나
완성 기준무엇이 되면 "다 됐다"인가요?10원 단위 올림, 결과를 복사할 수 있음
요구사항 카드 주문 틀
아래 요구사항으로 index.html 하나짜리 웹 도구를 만들어 줘.

- 누가 쓰나: {동아리 총무가 휴대폰으로}
- 무엇을 하나: {총액과 인원을 넣으면 1인당 금액을 보여 줌}
- 어떤 화면: {큰 글씨, 밝은 초록, 버튼 하나}
- 완성 기준: {10원 단위로 올림, 결과 옆에 복사 버튼}

만들기 전에 이해한 내용을 세 줄로 먼저 요약해 주고, 내가 "좋아"라고 하면 만들어 줘.

#3-2. 작게 쪼개서 시키기

한 번에 많이 시키면 AI도 사람처럼 놓치는 게 생기고, 어디서 틀렸는지 찾기도 어려워져요. 한 번에 한 가지, 확인하고 다음이 기본이에요.

한 번에 다 시키기작게 쪼개 시키기
"회원가입, 게시판, 댓글, 알림, 관리자 화면까지 다 있는 동호회 사이트 만들어 줘"① "동호회 소개 한 장짜리 페이지부터 만들어 줘" → 확인
② "일정 표를 추가해 줘" → 확인
③ "일정마다 참석 버튼을 넣어 줘" → 확인

큰 일을 시킬 땐 도구의 계획 모드를 먼저 써 보세요. 파일은 건드리지 않고 계획만 보여 주니, 계획을 읽고 순서를 조정한 다음 시작하면 돼요.

입력창 아래 권한 모드에서 Plan 을 고르면 계획만 세워요.

#3-3. 그림 보여 주고 고치기

"좀 더 예쁘게"는 사람마다 뜻이 달라요. 말로 설명하기 어려운 모양은 그림을 보여 주는 게 가장 정확해요.

  • 지금 화면을 캡처해서 보여 주며 "여기 이 버튼"처럼 짚어 주기 (윈도우 Win + Shift + S, 맥 Cmd + Shift + 4)
  • 종이에 대충 그린 배치를 사진 찍어 보여 주기
  • 원하는 분위기의 그림을 보여 주며 "이런 느낌으로"

그림은 대부분의 도구에서 입력창에 끌어다 놓거나 붙여 넣으면(Ctrl + V) 함께 보낼 수 있어요.

그림과 함께 보내는 주문
첨부한 그림은 지금 화면이야. 빨간 동그라미 친 버튼이 너무 작아.
버튼을 두 배로 키우고, 글자도 더 굵게 해 줘. 다른 곳은 건드리지 마.

#3-4. 에러 메시지 그대로 붙여 넣기

빨간 글씨가 나오거나 화면이 하얗게 나와도 당황하지 마세요. 에러 메시지는 고칠 곳을 알려 주는 단서예요. 내 말로 바꾸지 말고 통째로 복사해서 보여 주는 게 가장 빨라요.

에러를 찾는 곳

  • 도구 화면에 빨갛게 나온 글 → 그대로 복사
  • 웹페이지가 이상할 때 → 브라우저에서 F12 를 누르고 Console(콘솔) 탭의 빨간 줄을 복사
  • 아무 에러도 안 보이는데 이상할 때 → 화면을 캡처해서 보여 주기
에러 주문 틀
이런 에러가 나:
{에러 메시지를 여기에 그대로 붙여 넣기}

내가 한 일: {추가 버튼을 눌렀어}
기대한 결과: {목록에 할 일이 하나 생겨야 해}
실제 결과: {아무 일도 안 일어나}

고치기 전에 원인이 뭔지 먼저 쉬운 말로 설명해 줘.

#3-5. 규칙 파일로 내 취향 기억시키기

대화를 새로 시작하면 AI는 지난번에 한 말을 잊어요. 매번 "존댓말로 설명해 줘", "파일 하나로 만들어 줘"라고 말하기 번거롭다면 규칙 파일에 적어 두세요. 작업 폴더 맨 위에 두면 도구가 일을 시작할 때마다 먼저 읽어요.

도구읽는 규칙 파일
Claude CodeCLAUDE.md (없으면 AGENTS.md 도 읽어요)
CodexAGENTS.md
AntigravityAGENTS.md 또는 GEMINI.md
CursorAGENTS.md (또는 Cursor 전용 규칙)

AGENTS.md 하나만 만들면 네 도구가 모두 읽어요. 이 교실에서는 이 파일로 통일해요.

규칙 파일 만들기
이 폴더 맨 위에 AGENTS.md 파일을 만들어 줘. 내용은 아래 규칙이야.

- 나는 코딩을 모르는 사람이야. 설명은 쉬운 우리말로, 전문 용어는 괄호로 풀어 줘
- 웹 도구는 가능하면 index.html 파일 하나로 만들어
- 화면은 휴대폰에서도 잘 보이게
- 파일을 지우거나 덮어쓰기 전에는 꼭 먼저 물어봐
- 일이 끝나면 내가 확인할 방법을 한 줄로 알려 줘

#3-6. 되돌리기

바이브 코딩을 하다 보면 "아까가 더 나았는데…" 하는 순간이 꼭 와요. 되돌리는 방법은 쉬운 것부터 확실한 것까지 네 단계가 있어요.

  1. 1말로 되돌리기"방금 바꾼 걸 원래대로 돌려 줘". 가장 쉽지만 완벽하진 않아요
  2. 2도구의 되돌리기도구에 들어 있는 체크포인트 기능 (아래 탭)
  3. 3폴더째 복사잘 될 때마다 폴더를 통째로 복사해 두기. 가장 확실해요
  4. 4git 저장저장 지점을 찍어 두고 언제든 돌아가기. 6부에서도 써요

터미널판에서는 입력창이 비었을 때 Esc 를 두 번 누르거나 /rewind 를 입력하면 이전 지점으로 되감을 수 있어요. 단, Claude 가 직접 고친 파일만 되돌아가요.

git 맛보기 — 저장 지점 찍기

git 은 파일의 "저장 지점"을 기록해 두는 프로그램이에요. 명령어를 몰라도 에이전트에게 시키면 돼요.

① 처음 한 번: 저장 지점 기능 켜기
이 폴더를 git 저장소로 만들고, 지금 상태를 "첫 저장"이라는 이름으로 저장해 줘.
git 이 설치돼 있지 않으면 설치 방법부터 알려 줘.
② 잘 될 때마다: 저장하기
지금 상태를 "{카드에 이모지 넣음}"이라는 이름으로 저장해 줘.
③ 망가졌을 때: 돌아가기
저장 기록을 쉬운 말로 보여 주고, "{카드에 이모지 넣음}" 시점으로 파일을 되돌려 줘.