복사해서 쓸 수 있는 바이브 코딩 프롬프트 30개 (치트 시트)

좋은 바이브 코딩 프롬프트는 짧고, 구체적이며, 동작에 관한 것입니다. 누가 앱을 쓰는지, 무엇을 할 수 있는지, 무엇을 보관하는지, 어떻게 보이는지 말하세요. 아래에는 첫 빌드부터 게시까지 현재 단계에 따라 묶은 복사용 프롬프트 30개가 있습니다. 대괄호 [ ] 안의 부분은 여러분의 세부 내용으로 바꾸세요.

어떤 AI 앱 빌더나 코딩 에이전트에서도 작동합니다. 그 배경이 궁금하다면 AI 앱 빌더용 프롬프트 작성법에서 원칙을 자세히 설명합니다. 이 페이지는 치트 시트입니다.

이 치트 시트 사용법

• 첫 빌드 프롬프트 하나로 시작한 다음, 나머지를 한 번에 하나씩 사용하세요.
• 프롬프트마다 테스트하세요. 다음 것을 보내기 전에 변경을 직접 클릭해 보세요.
• 작동하는 것은 유지하세요. 여기 있는 후속 프롬프트 대부분이 "나머지는 모두 그대로 유지"로 끝나는 데는 이유가 있습니다.
• 정확한 텍스트를 붙여 넣으세요. 오류 메시지, 버튼 문구, 화면에 보이는 단어는 설명보다 늘 낫습니다.

첫 빌드 프롬프트

이 프롬프트들은 앱의 형태를 정합니다. 각각 사용자, 동작, 데이터, 모양을 명시합니다.

1. 간단한 추적기

나를 위한 [습관] 추적기를 만들어 줘. [습관] 이름과 색을 넣어 추가하고, 하루에 한 번 체크하고, 30일 격자와 현재 연속 일수를 볼 수 있어야 해. 새로고침 후에도 모든 것이 남아 있도록 저장해 줘. 깔끔하고 단순한 디자인이며 휴대폰에서도 잘 작동해야 해.

2. 소규모 사업체를 위한 예약 페이지

우리 [미용실]을 위한 예약 페이지를 만들어 줘. 고객은 서비스([커트 30분, 염색 90분]), 날짜, [9:00~18:00] 사이의 빈 시간을 고르고, 이름, 전화번호, 이메일을 입력해. 두 사람이 같은 슬롯을 예약할 수 없어야 해. 로그인 뒤에 있는 비공개 관리자 페이지가 필요해. 다가오는 예약을 날짜별로 보여 줘.

3. 내부 도구

우리 팀이 [장비 대여]를 추적할 수 있는 내부 도구를 만들어 줘. 각 물품은 이름, 코드, 상태(사용 가능, 대여 중, 고장)를 가져. 직원은 로그인해서 물품을 자신에게 대여하거나 반납할 수 있어야 해. 상태별 필터가 있는 표와 각 물품을 누가 가졌었는지 기록을 보여 줘.

4. 대기자 명단이 있는 랜딩 페이지

[내 제품: 바쁜 부모를 위한 식단 계획 앱]을 위한 한 페이지짜리 웹사이트를 만들어 줘. 제목, 한 문장짜리 부제목, 이메일 가입을 넣은 히어로 영역. 그다음 혜택 3가지, 짧은 작동 방식 섹션, FAQ. 가입 이메일은 데이터베이스에 저장하고, 비공개 관리자 페이지에서 목록을 볼 수 있게 해 줘.

5. 고객 포털

우리 [디자인 스튜디오]를 위한 고객 포털을 만들어 줘. 각 고객은 로그인해서 자기 프로젝트만 보고, 상태, 내가 올린 파일, 댓글 스레드를 볼 수 있어야 해. 나는 관리자로 로그인해서 모든 고객을 볼 수 있어야 해. 고객은 서로의 데이터를 절대 볼 수 없어야 해.

6. 계산기 또는 견적 도구

우리 [청소 사업]을 위한 견적 계산기를 만들어 줘. 입력은 침실 수, 욕실 수, 추가 서비스(오븐, 창문, 냉장고), 빈도(일회성, 매주, 매월)야. 옵션을 바꿀 때마다 가격을 보여 주고, 내역도 나눠서 보여 줘. 가격표: [가격표 붙여 넣기]. 견적 요청을 이메일로 나에게 보내는 버튼을 추가해 줘.

계획 프롬프트

큰 기능을 만들기 전이나 무언가를 어떻게 설명해야 할지 확신이 없을 때 사용하세요.

7. 만들기 전에 계획하기

어떤 코드든 쓰기 전에, 만들 화면, 저장할 데이터, 내가 결정해야 할 사항을 쉬운 말로 설명해 줘. 내가 승인할 때까지 기다려 줘.

8. 복잡한 아이디어를 첫 버전으로 바꾸기

내 아이디어는 이래: [메모 붙여 넣기]. 여전히 유용한 가장 작은 첫 버전을 5~8개 글머리 기호로 제안해 줘. 나중으로 미룰 것과 그 이유도 적어 줘.

9. 빠진 것 묻기

이걸 만들기 전에 개발자가 나에게 물어볼 질문은 무엇일까? 하나씩 물어보고, 내 답을 짧은 명세로 정리해 줘.

10. 큰 변경 전에 확인하기

[여러 사람이 하나의 작업 공간을 공유하는 팀 계정]을 추가하고 싶어. 데이터, 화면, 권한에서 무엇을 바꿔야 하고 무엇이 깨질 수 있는지 설명해 줘. 아직 아무것도 바꾸지 마.

디자인 프롬프트

11. 명확한 스타일 정하기

앱 스타일을 바꿔 줘. 따뜻한 오프화이트 배경, 짙은 글자색, 강조색 하나 [#1F6F50], 둥근 모서리, 넉넉한 여백, 현대적인 산세리프 글꼴. 레이아웃과 모든 기능은 정확히 그대로 유지해 줘.

12. 참고 자료의 느낌 가져오기

대시보드를 차분한 금융 앱처럼 느껴지게 해 줘. 여백을 넉넉히, 숫자는 크고 굵게, 라벨은 작고 회색으로, 맨 위에는 단순한 차트 하나. 어떤 브랜드의 로고나 문구도 복사하지 마.

13. 휴대폰 레이아웃 고치기

너비 375px 휴대폰에서 [주문 페이지]의 표가 옆으로 스크롤되고 버튼이 겹쳐. 작은 화면에서는 각 행을 쌓인 카드로 바꿔 줘. 데스크톱 레이아웃은 바꾸지 마.

14. 빈 상태, 로딩, 오류 상태

[프로젝트 목록]에 적절한 상태를 추가해 줘. 첫 프로젝트를 추가하는 버튼이 있는 친절한 빈 상태, 데이터를 불러오는 동안 보이는 로딩 스켈레톤, 불러오기가 실패하면 다시 시도 버튼이 있는 명확한 메시지.

15. 오른쪽에서 왼쪽으로 쓰는 언어 지원

전체가 오른쪽에서 왼쪽으로 배치되는 아랍어 인터페이스를 추가해 줘. 방향을 가리키는 아이콘은 뒤집고, 숫자와 날짜는 지역 형식을 사용해. 기본값은 영어로 유지해 줘.

데이터와 기능 프롬프트

16. 데이터 유지하기

지금은 새로고침하면 데이터가 사라져. 대신 실제 데이터베이스에 저장하고, 현재 화면은 지금처럼 계속 작동하게 해 줘.

17. 로그인 추가하기

이메일과 비밀번호로 가입과 로그인을 추가해 줘. 각 사용자는 자신의 [항목]만 보고 편집할 수 있어야 해. 상단 바에 사용자 이메일과 로그아웃 버튼을 보여 줘.

18. 역할 추가하기

관리자와 회원, 두 가지 역할을 추가해 줘. 관리자는 [제품]을 추가, 편집, 삭제할 수 있고, 회원은 보기만 가능해야 해. 버튼을 숨기는 것만이 아니라 서버에서 이를 강제해 줘.

19. 검색과 필터 추가하기

[연락처 목록] 위에 검색창을 추가해 줘. 입력하는 동안 이름, 회사, 이메일과 맞춰 필터링되어야 해. 그리고 [상태]별 필터도 추가해 줘. 현재 정렬 순서는 유지해.

20. 파일 업로드 추가하기

사용자가 각 [매물]에 최대 [이미지 5개]를 첨부할 수 있게 해 줘. 각 파일은 최대 [5MB]. 매물에는 썸네일을 보여 주고, 클릭하면 크게 볼 수 있게 해 줘. 이미지는 소유자만 삭제할 수 있어야 해.

21. 스프레드시트에서 가져오기

열이 [이름, 이메일, 전화번호, 메모]인 CSV를 받는 가져오기 버튼을 추가해 줘. 처음 10행 미리보기를 보여 주고, 저장하기 전에 내가 확인할 수 있어야 해. 이메일이 없는 행은 건너뛰고, 건너뛴 개수를 알려 줘.

수정 프롬프트

22. 버그를 명확하게 보고하기

[편집 폼에서 저장을 클릭]하면 "[정확한 오류 문구]"가 보이고 변경 사항이 저장되지 않아. 기대한 결과: 변경 사항이 저장되고 목록으로 돌아가야 해. 원인을 찾아서 한두 문장으로 설명한 다음 고쳐 줘.

23. 수정 루프 멈추기

이걸 세 번 고치려 했지만 여전히 실패해. 이제 코드 변경은 멈춰. 가장 가능성이 높은 원인 세 가지, 각각을 확인하는 방법, 그중 어느 것이라고 생각하는지 적어 줘.

24. 부작용 되돌리기

네 마지막 변경으로 날짜 선택기는 고쳐졌지만 [사이드바]가 사라졌어. 사이드바를 원래대로 되돌리고, 날짜 선택기 수정은 유지해 줘.

25. 바꾸기 전에 설명하기

지금 [결제 합계]가 어떻게 계산되는지 단계별로 설명하고, 관련된 파일을 짚어 줘. 아무것도 바꾸지 마.

테스트와 검토 프롬프트

26. 예외 상황

실제 사용자가 [예약 폼]을 깨뜨릴 수 있는 방법 10가지를 나열해 줘. 빈 필드, 아주 긴 텍스트, 더블 클릭, 두 사람이 동시에 사용, 잘못된 시간대 등. 각각 테스트하고 실패하는 것을 고쳐 줘. 무엇을 바꿨는지 보고해 줘.

27. 최근 변경 요약하기

최근 [5]단계에서 한 모든 변경을 쉬운 말로 요약하고, 기존 데이터에 영향을 줄 수 있는 것이 있으면 표시해 줘.

보안 프롬프트

이것들은 바이브 코딩이 안전한지 페이지와 함께 사용하세요.

28. 데이터 접근 확인하기

서버 코드를 확인해 줘. 로그인한 사용자가 요청의 ID를 바꿔서 다른 사용자의 [레코드]를 읽거나 변경할 수 있나? 접근이 어디에서 검사되는지 보여 주고, 빈틈이 있으면 고쳐 줘.

29. 노출된 비밀 값 확인하기

이 앱이 사용하는 모든 API 키, 비밀번호, 토큰과 각각이 저장된 위치를 나열해 줘. 브라우저에서 실행되는 코드나 커밋된 파일에 들어 있는 것이 없는지 확인하고, 있다면 비밀 설정으로 옮겨 줘.

게시 프롬프트

30. 출시 전 점검

이걸 실제 사용자에게 곧 게시할 거야. 검토자로서 살펴봐 줘. 깨진 링크, 없는 페이지 제목과 설명, 검증이 없는 폼, 느린 페이지, 콘솔 오류, 휴대폰에서 미완성처럼 보이는 것. 중요도 순으로 목록을 주고, 상위 다섯 개를 고쳐 줘.

피해야 할 프롬프트

어떤 프롬프트는 일관되게 더 나쁜 결과를 만듭니다.

• "더 좋게 만들어 줘." 어떻게 더 좋게? 화면과 변경을 말하세요.
• "전부 고쳐 줘." AI가 많은 것을 바꿔서 무엇이 움직였는지 알 수 없게 됩니다.
• "[라이브러리]와 [프레임워크]와 [패턴]을 써 줘." 이유가 없다면, 동작을 설명하고 도구가 스택을 고르게 하세요.
• "내 API 키는 이거야: …" 비밀 값은 절대 채팅에 붙여 넣지 마세요. 도구의 비밀 설정을 사용하세요.
• 한 메시지에 기능 열 개. 나눠서 보내세요.

프롬프트를 습관으로 만들기

프로젝트를 몇 번 하면 여기 있는 프롬프트의 나만의 버전이 생길 것입니다. 메모에 보관하고, 잘 작동하는 것은 재사용하세요. Mythex는 프로젝트를 넘어서 여러분이 누구인지, 어떻게 일하는지도 기억하므로, 스타일이나 스택처럼 반복하는 선호는 매번 다시 입력하지 않아도 이어집니다.

첫 프롬프트에 막혔다면, 무료 앱 프롬프트 생성기가 한 줄짜리 아이디어를 더 완성된 시작 프롬프트로 바꿔 줍니다. 이 프롬프트들이 실제로 무엇을 만드는지 보려면 바이브 코딩 예시를 읽거나, 1번 프롬프트를 AI 앱 빌더에 붙여 넣고 대괄호를 내 아이디어로 바꿔 보세요.

자주 묻는 질문