바이브코딩 교육

바이브코딩 요청문 잘 쓰는 법 7가지

바이브코딩 결과물의 품질은 요청문에서 갈립니다. 기업 교육 현장에서 수강생이 가장 자주 막히는 지점을 기준으로 추렸습니다. 요청문 작성 원칙 전반은 프롬프트 엔지니어링 가이드에 있습니다.

1. 결과물과 확인 방법을 한 번에 말합니다

   무엇을, 어떤 모양으로, 어디에 만들지와 다 만든 뒤 무엇을 확인할지까지 적습니다. 확인 방법이 없으면 AI는 파일을 만든 것만으로 완료라고 보고합니다.

   덜 좋은 예견적 계산기 만들어 줘

   좋은 예수량과 단가를 넣으면 부가세 포함 합계가 나오는 견적 계산기를 index.html 하나로 만들어 줘. 수량 3, 단가 10,000원이면 33,000원이 나오는지 확인하고 알려 줘.

2. 큰 그림 먼저, 기능은 두세 개씩

   처음부터 열 가지 기능을 한꺼번에 요청하면 각 기능의 완성도가 떨어지고, 문제가 생겼을 때 원인을 찾기 어렵습니다. 전체 목적을 먼저 말하고 기능은 두세 개씩 붙입니다.

   덜 좋은 예회원가입, 로그인, 게시판, 댓글, 알림, 관리자 화면이 있는 사이트 만들어 줘

   좋은 예팀 공지 게시판을 만들 거야. 오늘은 글 목록과 글 쓰기 화면만 만들어 줘.

3. 디자인은 말 대신 샘플로 보여 줍니다

   「예쁘게」, 「세련되게」는 AI마다 해석이 다릅니다. 마음에 드는 화면의 캡처, 글꼴과 색 조합을 보여 주고 구조와 분위기만 참고하라고 합니다. 시안을 세 개 받아 고르는 방법도 있습니다.

   덜 좋은 예버튼 좀 더 예쁘게 해 줘

   좋은 예첨부한 캡처처럼 흰 바탕에 굵은 제목, 버튼은 모서리 5px의 보라색(#603bff)으로. 내용은 그대로 두고 배치와 색만 참고해 줘.

4. 숫자로 시킵니다

   「좀 줄여」, 「조금 크게」보다 숫자가 정확합니다. 용량, 크기, 개수, 시간처럼 확인할 수 있는 숫자를 주면 AI도 그 숫자로 스스로 검사합니다.

   덜 좋은 예배포 폴더가 너무 무거워, 좀 줄여 줘

   좋은 예배포 폴더가 23.6MB야. 화면은 그대로 두고 5MB 아래로 줄여 줘. 줄인 뒤 용량을 다시 재서 알려 줘.

5. 오류는 메시지 전문과 화면째 붙여 넣습니다

   「에러 났어」만으로는 AI가 짐작해야 합니다. 터미널의 빨간 글자, 브라우저 콘솔의 오류를 그대로 복사하고, 화면 문제는 캡처를 붙입니다.

   덜 좋은 예안 돼. 에러 나.

   좋은 예메일 보내기 버튼을 누르니 아래 오류가 나왔어(오류 전문 붙여 넣기). 캡처도 붙였어. 원인부터 설명하고 고쳐 줘.

6. 규칙은 지침 파일에 남깁니다

   매번 같은 규칙을 말하지 않도록 프로젝트 폴더에 지침 파일을 둡니다. Codex는 AGENTS.md, Claude Code는 CLAUDE.md를 읽습니다. 쓰는 색, 파일 구조, 하지 말아야 할 일을 적고, 진행하면서 계속 고칩니다.

   AGENTS.md 예시복사

   # 견적 계산기 프로젝트 규칙
   - 화면은 index.html 하나, 외부 라이브러리 없이
   - 색은 보라 #603bff, 잉크 #17171a 두 가지만
   - 비밀번호·API 키는 .env에만, 코드에 직접 쓰지 않기
   - 메일 발송·배포는 내가 직접 누른다. 자동으로 보내지 않기
   - 고친 뒤에는 수량 3 × 단가 10,000원 = 33,000원 확인

7. 기능을 빼거나 제한을 넣을 때는 먼저 묻게 합니다

   AI는 일을 빨리 끝내려고 파일 크기 제한, 읽는 쪽수 제한 같은 조건을 말없이 넣기도 합니다. 결과가 그럴듯해 보여도 문서를 끝까지 읽지 않은 답일 수 있습니다. 요청문 끝에 한 줄을 붙여 둡니다.

   붙여 둘 한 줄요청하지 않은 기능을 빼거나, 파일 크기·쪽수 같은 제한을 넣어야 하면 만들기 전에 먼저 물어봐 줘.

바이브코딩으로 만든 것들 - 웬비디아 실전 사례

웬비디아 채널에서 바이브코딩으로 직접 만들고 과정을 글로 공개한 사례입니다. 이 사이트에서 내려받는 신캡쳐도 그중 하나입니다.

• 이 사이트에서 배포 중

  신캡쳐 - Windows 캡처 프로그램

  Claude Code로 만든 Windows 캡처 프로그램입니다. 영역·창·스크롤 캡처에 화살표와 문구를 넣고, 배경 제거와 글자 추출까지 합니다. 편집한 캡처를 AI 터미널에 바로 붙여 넣도록 만들어 바이브코딩을 할 때 직접 씁니다.

  신캡쳐 내려받기 · 만든 과정 보기 (네프콘)
• 영상 자동화

  숏폼·롱폼 영상 자동화 프로그램

  구독자 20만 유튜브 채널에서 쓰는 프로그램입니다. 원본 영상에서 장면을 고르고 자막을 넣어 플랫폼별 비율로 편집합니다.

  네프콘에서 보기
• 지도 앱

  신축 호텔 지도 앱

  지도 위에 신축 호텔 위치를 표시하고 지역·가격대로 걸러 보는 웹 앱입니다. 비개발자가 처음 만들 때 알아야 할 것을 함께 정리했습니다.

  네프콘에서 보기
• 메일 자동화

  우리 분야 뉴스레터 수집·발송기

  분야 뉴스를 모아 뉴스레터로 묶고 받는 사람 목록에 보내는 도구입니다. 발송 전 미리보기를 사람이 확인합니다.

  네프콘에서 보기
• 문서 자동화

  정부 사업계획서 HWP 작성

  정해진 HWP 양식은 그대로 두고, 준비한 자료에 있는 내용만 칸에 채워 사업계획서 초안을 만듭니다.

  네프콘에서 보기