바이브 코딩 예시 10가지: 실제 앱 유형, 프롬프트, 그리고 잘못된 점

가장 흔한 바이브 코딩 예시는 작고 유용한 웹 앱입니다. 추적기, 예약 페이지, 내부 도구, 고객 포털, 랜딩 페이지, 퀴즈, 대시보드, 간단한 AI 도구가 그렇습니다. 아래에서 그중 10가지를 다룹니다. 각 예시마다 누가 만드는지, 첫 프롬프트, 보통 무엇이 잘못되는지, 그리고 이를 고치는 후속 프롬프트를 볼 수 있습니다.

이 예시들은 한 사람의 사례 연구가 아니라 사람들이 AI 앱 빌더에 가장 많이 가져오는 프로젝트를 합성한 것입니다. 프롬프트는 복사해서 쓸 수 있습니다. 실패 사례는 계속 반복해서 나타나는 것들이며, 그래서 이 부분이 가장 유용합니다. 바이브 코딩 자체가 처음이라면 바이브 코딩이란 무엇인가부터 읽어 보세요.

1. 개인 예산 추적기

누가 만드나: 스프레드시트를 써 봤지만 포기한 개인.

첫 프롬프트:

월별 예산 추적기를 만들어 줘. 금액, 카테고리(식비, 월세, 교통, 여가, 기타), 날짜, 메모를 넣어 지출을 추가할 수 있어야 해. 이번 달 카테고리별 합계를 막대 차트로 보여 주고, 최근 지출 목록도 보여 줘. 카테고리마다 예산을 설정하고 남은 금액을 볼 수 있어야 해.

무엇이 잘못됐나: 차트가 이번 달만이 아니라 지금까지 입력된 모든 지출을 합산했습니다. 그래서 두 번째 달부터는 모든 카테고리가 초과 지출로 보였습니다. 또한 쉼표가 들어간 금액("1,200")은 1로 저장되었습니다.

수정 프롬프트:

차트와 합계는 선택한 달의 지출만 포함해야 해. 상단에 월 선택기를 추가하고 기본값은 이번 달로 해 줘. 쉼표나 공백이 들어간 금액도 받아서 숫자로 저장해 줘.

교훈: "이번 달"은 하나의 규칙입니다. 규칙은 소리 내어 말하세요.

2. 작은 미용실을 위한 예약 페이지

누가 만드나: 전화와 DM으로 예약받는 데 지친 소규모 사업자.

첫 프롬프트:

우리 미용실을 위한 예약 페이지를 만들어 줘. 고객이 서비스, 날짜, 빈 시간대를 고르고 이름과 전화번호를 입력하게 해 줘. 로그인 뒤에 있는 비공개 관리자 페이지에서는 날짜별 예약 목록을 보여 줘.

무엇이 잘못됐나: 두 고객이 1분 차이로 10:00 슬롯을 예약했습니다. 페이지가 처음 로드될 때만 예약 가능 여부를 확인했기 때문입니다. 또한 90분짜리 염색 예약이 그 뒤 슬롯을 막지 않았습니다.

수정 프롬프트:

고객이 예약을 제출하면 서버에서 예약이 차지하는 모든 슬롯이 여전히 비어 있는지 확인하고, 그렇지 않으면 "방금 다른 예약이 찼습니다"라는 메시지와 함께 거부해 줘. 서비스는 전체 길이만큼 슬롯을 차지해야 해. 즉 10:00에 90분 예약이 있으면 10:00, 10:30, 11:00 슬롯을 막아야 해.

교훈: 두 사람이 동시에 할 수 있는 일은 서버에서 확인해야 합니다. 전체 방법은 예약 앱 만드는 법을 참고하세요.

3. QR 코드가 있는 식당 메뉴

누가 만드나: 메뉴판을 너무 자주 다시 인쇄하는 카페와 식당 사장님.

첫 프롬프트:

우리 카페를 위한 모바일 메뉴 웹사이트를 만들어 줘. 아침, 점심, 음료, 디저트 섹션이 있고, 각 항목은 이름, 가격, 짧은 설명, 식단 태그(비건, 글루텐 프리)를 가져야 해. 항목을 수정하고 품절로 표시할 수 있는 관리자 페이지가 필요해. 메뉴로 연결되는 QR 코드를 인쇄할 수 있게 보여 줘.

무엇이 잘못됐나: 아무것도 깨지지 않았지만, 카페 와이파이에서 메뉴가 느렸습니다. 항목마다 원본 크기의 휴대폰 사진을 모두 불러왔기 때문입니다.

수정 프롬프트:

메뉴 사진이 너무 무거워. 업로드한 이미지를 가로 최대 800px로 줄이고 압축한 다음, 방문자가 스크롤할 때 지연 로드되게 해 줘.

교훈: 사무실 와이파이만이 아니라 느린 연결에서도 테스트하세요.

4. 팀을 위한 장비 또는 재고 추적기

누가 만드나: 공유 스프레드시트를 대체하려는 운영 담당자.

첫 프롬프트:

창고 팀을 위한 재고 도구를 만들어 줘. 품목은 이름, SKU, 수량, 위치, 최소 재고 수준을 가져야 해. 직원은 로그인해서 재고를 추가하고, 사유와 함께 재고를 빼고, 최소 수준 아래 품목을 빨간색으로 강조해서 볼 수 있어야 해. 모든 변경 내역과 변경한 사람을 기록해 줘.

무엇이 잘못됐나: 내역에 이름 대신 "user 3"이라고 표시되었습니다. 또한 재고보다 많이 빼도 수량이 음수가 되었습니다.

수정 프롬프트:

내역에는 ID가 아니라 사람 이름을 보여 줘. 수량이 0 아래로 내려가는 출고는 허용하지 말고, 대신 "재고 4개뿐입니다"라고 표시해 줘.

교훈: 가능한 것만이 아니라 불가능해야 하는 것을 설명하세요. 재고 관리 앱 만드는 법 가이드에서 나머지를 다룹니다.

5. 프리랜서나 스튜디오를 위한 고객 포털

누가 만드나: 디자이너, 회계사, 컨설턴트, 에이전시.

첫 프롬프트:

고객 포털을 만들어 줘. 고객은 이메일로 초대하고, 로그인하면 자기 프로젝트, 파일, 청구서만 보고 댓글을 남길 수 있어야 해. 나는 관리자로 로그인해서 모든 것을 볼 수 있어야 해.

무엇이 잘못됐나: 이 목록에서 가장 중요한 실패입니다. 페이지에는 각 고객의 프로젝트만 보였지만, 주소창의 번호를 바꾸면 서버가 어떤 프로젝트든 돌려주었습니다. 한 고객으로 화면을 둘러보는 것만으로는 이 문제가 드러나지 않았습니다.

수정 프롬프트:

프로젝트, 파일, 댓글, 청구서를 반환하는 모든 서버 경로를 확인해 줘. 각 경로는 로그인한 고객이 해당 레코드의 소유자인지 확인해야 하고, 아니면 "찾을 수 없음"을 반환해야 해. 그리고 테스트해 줘. 고객 A로 로그인한 뒤 ID로 고객 B의 프로젝트를 열어 보기.

교훈: 화면에 숨겨 두는 것과 보호하는 것은 같지 않습니다. 자세한 내용은 바이브 코딩은 안전한가?를 참고하세요.

6. 대기자 명단이 있는 출시 페이지

누가 만드나: 만들기 전에 아이디어를 테스트하는 창업자.

첫 프롬프트:

튜터가 수업 일정을 잡고 결제를 받을 수 있도록 돕는 앱을 위한 랜딩 페이지를 만들어 줘. 히어로 제목, 부제목, 이메일 가입 폼, 혜택 3가지, 작동 방식 섹션, FAQ를 넣어 줘. 가입 정보는 날짜와 함께 데이터베이스에 저장하고, 비공개 페이지에서 CSV로 내려받을 수 있게 해 줘.

무엇이 잘못됐나: 며칠 만에 봇이 만든 쓰레기 가입자로 목록이 채워졌습니다. 또한 페이지에 제목과 설명이 없어서 공유 링크가 빈 미리보기로 보였습니다.

수정 프롬프트:

가입 폼에 기본 봇 방어를 추가해 줘. 숨겨진 허니팟 필드와 IP당 시간당 5회 가입 제한을 넣어 줘. 페이지 제목, 메타 설명, 소셜 공유용 이미지도 추가해 줘.

교훈: 공개 폼은 결국 발견됩니다. 대기자 페이지 만드는 법을 참고하세요.

7. 선생님을 위한 퀴즈 앱

누가 만드나: LMS보다 가벼운 것을 원하는 교사와 강사.

첫 프롬프트:

우리 반을 위한 퀴즈 앱을 만들어 줘. 각 문제에 정답이 하나인 객관식 질문으로 퀴즈를 만들 수 있어야 해. 학생은 코드와 이름을 입력해 들어가 문제에 답하고, 마지막에 점수를 보게 해 줘. 나는 퀴즈별 결과표를 볼 수 있어야 해.

무엇이 잘못됐나: 정답이 질문과 함께 브라우저로 전송되어, 호기심 많은 학생이 페이지 소스에서 정답을 읽을 수 있었습니다. 또한 학생은 100%를 받을 때까지 계속 다시 제출할 수 있었습니다.

수정 프롬프트:

정답을 브라우저로 보내지 마. 제출 후 서버에서 답을 확인해 줘. 퀴즈마다 학생 이름당 한 번만 제출하게 하고, 누군가 다시 시도하면 교사에게 보여 줘.

교훈: 브라우저는 사용자의 것입니다. 거기 있는 것은 무엇이든 읽힐 수 있습니다.

8. 작은 AI 도구

누가 만드나: 집중된 AI 도우미를 원하는 마케터, 작가, 창업자.

첫 프롬프트:

제품 설명을 넣으면 서로 다른 어조(친근한, 전문적인, 장난스러운, 짧은, 긴)로 소셜 미디어 게시물 5개를 만들어 주는 도구를 만들어 줘. AI API를 사용해. 설명을 붙여 넣고, 플랫폼을 고르면 복사 버튼이 있는 게시물을 받을 수 있어야 해.

무엇이 잘못됐나: 첫 버전은 API 키를 페이지 안에 넣은 채 브라우저에서 AI 서비스를 직접 호출했습니다. 누구나 키를 복사해 요금을 크게 올릴 수 있었습니다.

수정 프롬프트:

AI 호출을 서버로 옮겨 줘. API 키는 비밀 값으로 저장하고, 프론트엔드 코드에는 절대 두지 마. 방문자당 하루 20회 생성으로 제한해 줘.

교훈: 키는 서버의 비밀 설정에 있어야 합니다. API 키를 안전하게 보관하는 법과 앱에 AI 기능을 추가하는 법을 참고하세요.

9. 아랍어와 영어를 쓰는 비즈니스 웹사이트

누가 만드나: 걸프 지역과 아랍 세계 전역에서 두 언어로 고객을 응대하는 기업.

첫 프롬프트:

우리 인테리어 디자인 회사를 위한 웹사이트를 아랍어와 영어로 만들어 줘. 언어 전환 기능을 넣어 줘. 페이지는 홈, 서비스, 포트폴리오, 회사 소개, 연락처야. 아랍어는 완전히 오른쪽에서 왼쪽으로 표시되어야 해.

무엇이 잘못됐나: 아랍어 텍스트는 오른쪽 정렬되었지만 레이아웃은 좌우 반전되지 않았습니다. 화살표는 여전히 잘못된 방향을 가리켰고, 메뉴는 반대쪽에 있었습니다. 전화번호도 일부 위치에서 거꾸로 표시되었습니다.

수정 프롬프트:

아랍어에서는 전체 레이아웃을 좌우 반전해 줘. 페이지 방향을 오른쪽에서 왼쪽으로 설정하고, 메뉴는 오른쪽에 두고, 방향이 있는 아이콘은 뒤집고, 아랍어 텍스트 안의 전화번호와 이메일은 왼쪽에서 오른쪽으로 유지해 줘.

교훈: 오른쪽에서 왼쪽으로 쓰는 방식은 정렬이 아니라 레이아웃입니다. Mythex는 아랍어와 기타 오른쪽에서 왼쪽으로 쓰는 레이아웃을 처리하며, 아랍어로 직접 프롬프트를 쓸 수도 있습니다.

10. 휴대폰 앱이 되는 추적기

누가 만드나: 사용자가 휴대폰에서 생활하는 코치, 헬스장, 커뮤니티 모임.

첫 프롬프트:

개인 트레이닝 고객을 위한 운동 기록 앱을 만들어 줘. 각 고객은 로그인해서 내가 그 주에 배정한 계획을 보고, 운동을 체크하고, 무게를 기록해. 나는 고객별 진행 상황을 차트로 볼 수 있어야 해.

무엇이 잘못됐나: 웹 앱은 작동했지만, 휴대폰에서는 운동 중에 누르기에 버튼이 너무 작았고 차트는 읽기 어려웠습니다.

수정 프롬프트:

휴대폰에서 한 손으로 쓰기 좋게 설계해 줘. 화면 아래쪽에 큰 터치 영역, 화면마다 운동 하나, 크게 보이는 다음과 완료 버튼, 그리고 간단한 주간 진행 차트를 넣어 줘.

교훈: 사람들이 휴대폰에서 사용할 것이라면 휴대폰을 먼저 설계하세요. Mythex Pro에서는 그 다음 게시된 앱을 Google Play용 Android 앱과 TestFlight로 보내는 iPhone 앱으로 만들 수 있습니다. 휴대폰 앱은 게시된 앱을 열기 때문에 게시할 때마다 함께 업데이트됩니다. 모바일 앱 빌더 페이지를 참고하세요.

이 예시들의 공통 패턴

10가지 예시 전체에서 실패는 몇 가지 그룹으로 나뉩니다.

이 중 어느 것도 코드를 읽을 필요는 없습니다. 호기심이 많고 약간 적대적인 사용자처럼 테스트하고, 무엇을 보는지 정확하게 설명하면 됩니다.

직접 하나 해 보기

아이디어와 가장 가까운 예시를 고르고, 첫 프롬프트를 복사해서 세부 내용을 바꾸세요. 그다음 공유하기 전에 수정 프롬프트를 체크리스트처럼 사용하세요. 바이브 코딩 프롬프트 치트 시트에는 30개가 더 있고, 바이브 코딩으로 앱 만드는 법은 한 프로젝트를 아이디어에서 게시된 앱까지 안내합니다. 준비가 되면 AI 앱 빌더에서 시작하거나, 시작점을 얻으려면 템플릿을 둘러보세요.

자주 묻는 질문