바이브코딩에서 가장 중요한 능력은 코딩이 아닙니다. 내가 원하는 것을 말로 표현하는 능력입니다.
바이브코딩 시작 가이드를 따라 첫 도구를 만들어보셨나요? "만들어줘" 한마디로도 결과물이 나왔지만, 내가 원하는 모습과는 좀 달랐을 겁니다.
이 문서는 그 다음 단계입니다. AI에게 점점 더 잘 말하는 법을 익히면, 수정 없이 한 번에 원하는 결과를 얻게 됩니다.
레벨 1: 일단 말하기
처음엔 이렇게만 해도 됩니다.
할일 체크리스트 만들어줘.
HTML 파일 하나로 만들어줘.
AI가 알아서 만들어줍니다. 그런데 결과를 보면 이런 생각이 듭니다.
- "음… 색깔이 별로네"
- "버튼이 너무 작은데"
- "이 기능은 필요 없는데"
이게 정상입니다. 한 번에 마음에 드는 결과가 나오는 경우는 거의 없습니다. 이때 두 가지 방법이 있습니다.
방법 A: 수정 요청하기
결과를 보고 마음에 안 드는 부분을 그때그때 말합니다.
색상을 초록색 계열로 바꿔줘
버튼을 더 크게 만들어줘
완료된 항목은 아래로 내려가게 해줘
이렇게 한 번에 하나씩 고쳐나가는 것도 좋은 방법입니다. 처음엔 이게 가장 편합니다.
방법 B: 처음부터 좀 더 말해주기
수정을 여러 번 반복하다 보면 패턴이 보입니다. "아, 내가 처음에 이것도 말해줬으면 한 번에 됐을 텐데." 그 감각이 쌓이면 자연스럽게 레벨 2로 넘어갑니다.
💡 레벨 1의 핵심: 일단 말하세요. 못 말하겠으면 한 줄이라도. AI는 부족한 요청도 잘 알아듣습니다. 완벽하게 말할 필요 없습니다.
레벨 2: 내가 원하는 걸 구체적으로 말하기
같은 할일 체크리스트인데, 이번엔 조금 더 말해봅니다.
오늘 할일을 관리하는 체크리스트를 만들어줘.
- 할일을 입력하고 추가할 수 있어야 해
- 완료하면 체크 표시가 되고, 삭제도 가능하게
- 전체/완료/남은 개수를 보여줘
- 디자인은 깔끔하고 모던하게, 둥근 모서리에 그림자 효과
- 데이터는 브라우저를 닫아도 유지되게 해줘
- HTML, CSS, JavaScript를 사용해서 하나의 HTML 파일로 만들어줘
뭐가 달라졌을까요? 레벨 1에서는 "할일 체크리스트 만들어줘"였습니다. 레벨 2에서는 어떤 기능이 있으면 좋겠는지, 어떤 모습이면 좋겠는지를 말해줬습니다. 이렇게 하면 수정 횟수가 확 줄어듭니다.
구체적으로 말하는 3가지 기준
뭘 말해야 할지 모르겠으면, 이 세 가지만 생각해보세요.
| 기준 | 질문 | 예시 |
|---|---|---|
| 기능 | 뭘 할 수 있어야 하지? | "입력하면 추가되고, 체크하면 완료 표시" |
| 모습 | 어떻게 생겼으면 좋겠지? | "깔끔하고 모던하게, 파란색 계열" |
| 동작 | 어떻게 작동해야 하지? | "새로고침해도 데이터 유지" |
전부 안 떠오를 수도 있습니다. 하나만 말해도 충분합니다. 나머지는 AI가 적당히 채워줍니다.
💡 레벨 2의 핵심: "만들어줘" 뒤에 한두 줄만 더 붙이면 결과가 확 달라집니다.
레벨 3: 맥락을 말하기
레벨 2까지는 "이런 기능, 이런 모습"을 말했습니다. 레벨 3에서는 왜 만드는지, 누가 쓰는지를 말합니다.
나는 헬스장을 다니는 직장인인데,
운동할 때 세트 사이 쉬는 시간을 재는 타이머를 만들고 싶어.
- 쉬는 시간을 30초, 60초, 90초 중에 선택할 수 있게
- 시간이 다 되면 소리와 진동으로 알려줘
- 큰 숫자로 카운트다운이 보여야 해 (운동 중에 멀리서도 볼 수 있게)
- 어두운 배경에 밝은 글씨 (헬스장이 어두우니까)
- 스마트폰 화면에 맞게 모바일 최적화
- HTML 파일 하나로 만들어줘
왜 이게 더 좋을까요? "헬스장에서 쓴다"는 맥락을 알려주니까, AI가 알아서 판단합니다.
- 어두운 배경 → 당연히 다크모드
- 멀리서 본다 → 큰 글씨
- 스마트폰 → 모바일 최적화
맥락을 모르면 AI는 추측해야 합니다. 맥락을 알면 AI가 더 똑똑해집니다.
맥락을 말하는 공식
어렵게 생각할 필요 없습니다. 이 순서로 말하면 됩니다.
나는 [누구]인데, [왜/어디서] 쓸 [무엇]을 만들고 싶어.
[기능 목록]
[모습/디자인]
[특별히 신경 써야 할 점]
HTML 파일 하나로 만들어줘.
💡 레벨 3의 핵심: "나는 ~인데"로 시작하면 AI가 상황에 맞게 알아서 판단해줍니다.
레벨 4: 예시를 보여주기
말로 설명하기 어려운 것들이 있습니다. 특히 디자인이나 레이아웃. 이럴 때는 예시를 보여주면 됩니다.
이런 느낌의 가계부를 만들어줘.
[참고 이미지나 사이트 설명]
- 상단에 이번 달 총 지출 금액이 크게 보이고
- 아래에 카테고리별로 (식비, 교통비, 쇼핑 등) 지출 목록
- 토스 앱의 소비 내역처럼 깔끔한 디자인
- 날짜별로 묶어서 보여줘
"토스 앱처럼"이라는 한마디가 디자인을 긴 설명보다 잘 전달합니다.
예시를 전달하는 방법
- 잘 아는 앱 이름 말하기: "토스처럼", "노션처럼", "인스타그램 피드처럼"
- 구체적인 레이아웃 설명: "왼쪽에 메뉴, 오른쪽에 내용"
- 스크린샷 보여주기: 이미지를 AI에게 직접 올리기 (ChatGPT, Claude 둘 다 가능)
💡 레벨 4의 핵심: 말로 안 되면 "~처럼"이라고 하거나, 스크린샷을 보여주세요.
