페이지를 불러오는 중입니다.
Beginner · Prompt
바이브코딩에서 가장 중요한 기술은 코딩이 아니라 지시입니다. 5칸 공식과 상황별 예시를 복사해 쓰세요.
01 · 목표
02 · 스택·위치
03 · 규칙·금지
04 · 완료 조건
05 · 범위
빈 칸 템플릿
목표: (한 문장) 스택: (Next / Supabase / 기타) 손댈 곳: (파일·경로 또는 페이지 URL) 규칙: (톤, 언어, 보안) 하지 말 것: (범위 밖) 완료 조건: - [ ] (브라우저에서 확인) - [ ] (에러 없으면) 이번 턴 범위: (여기까지만)
같은 의도라도 적는 방식이 결과를 가릅니다. 오른쪽(좋은 예)을 복사해 고쳐 쓰세요.
피하기
인스타 같은 SNS 앱 전부 만들어줘. 로그인, 피드, DM, 알림까지.
고르기 · 복붙
Next.js + Supabase로 ‘글 목록 + 글 작성’만. - 로그인 없음(게스트 이름만) - 모노톤 UI, 한국어 완료: / 에서 글 2개 보이고, 작성 후 목록에 추가됨. 이번엔 DM·알림·팔로우는 하지 마.
범위가 작을수록 에이전트가 끝냅니다. 큰 앱은 조각으로 나눕니다.
피하기
UI 좀 더 예쁘게 해줘.
고르기 · 복붙
홈 히어로만 수정. - 제목 한 줄 + 설명 한 줄 + 버튼 1개 - 그라데이션 카드 3장 나열 금지 - 여백 넓게, 모노톤 + primary 1색 완료: 360px 폭에서 가로 스크롤 없고 CTA가 하나로 보임.
‘예쁘게’ 대신 레이아웃·금지·완료 모습을 적습니다.
피하기
그 파일 버그 고쳐줘. 아까 만든 거.
고르기 · 복붙
src/app/builds/page.tsx 목록이 비어 보일 때. 증상: 네트워크 200인데 카드 0개. 가설: 필터 status=published 조건. 수정 후: 시드 데이터 1건이 카드로 보이게. 다른 페이지는 건드리지 마.
경로·증상·완료 조건이 있으면 환각이 줄어듭니다.
피하기
배포 설정해줘.
고르기 · 복붙
Vercel 프로덕션에 이 레포 연결. 완료 조건: 1) 프로덕션 URL 홈 200 2) env 키 이름 목록만 문서에 (값 비밀) 3) 빌드 로그에 type error 없음 값(키 내용)은 채팅에 붙여 넣지 마. 내가 대시보드에 넣을게.
‘됐다’를 사람이 검증할 체크리스트가 필요합니다.
흔한 실수: 게시판 만들어줘
목표: 게스트가 제목·본문으로 글을 올리고 목록에서 보게. 스택: Next.js App Router + Supabase (이미 연결됨). 규칙: RLS 본인/공개 정책 유지, 모노톤 UI, 한국어. 손댈 곳: src/app/builds, src/app/actions/build.ts 위주. 완료: /builds 에서 글 작성 → 새로고침 후 목록에 보임. 범위: 이번엔 댓글·좋아요 제외.
흔한 실수: 에러 나. 고쳐.
파일: src/components/ask-chat.tsx 증상: 묻기 버튼 클릭 시 500, 콘솔에 DEEPSEEK_API_KEY missing. 재현: 로컬 .env 없이 /ask 접속 → 질문 전송. 원하면: env 없을 때 사용자에게 ‘설정 필요’ 안내, 서버 500 대신 503 JSON. 완료: 키 없을 때 빨간 에러 대신 안내 문구. 키 있으면 정상 답변. 로그 전문은 아래 20줄만: (여기에 에러 메시지 붙여넣기)
흔한 실수: 더 세련되게
페이지: /learn/frontend-design 허브. 참고: DESIGN.md 또는 ‘Apple 톤 — 여백 넓고 CTA 1개’. 하지 말 것: 네온 글로우, 그라데이션 카드 3열. 할 것: 히어로 문구 짧게, 버튼 1개, 카드 간격 일정. 완료: 모바일 폭에서 제목이 잘리지 않고, 주요 버튼이 하나. 스크린샷 기준으로 수정해줘 (코드 설명은 짧게).
흔한 실수: 이 코드 설명해줘 (파일 전체 붙여넣기)
나는 비전공 초보야. 비유로 짧게. 질문: RLS가 뭐고, 왜 켜야 해? 우리 상황: Supabase builds 테이블, 게스트 글은 author_id null. 답변: 5문장 이내 + 내가 에이전트에게 시킬 문장 1개.
흔한 실수: 코드 전체 깔끔하게 리팩터해줘
목표: src/lib/rag/ 폴더 구조는 유지하고 retrieve.ts 주석·이름만 명확히. 금지: API 계약(/api/ask 응답 JSON) 변경, 새 의존성 추가. 완료: typecheck 통과, /api/ask POST 동일 동작. 변경 요약은 불릿 5개 이내로.
흔한 실수: 배포해줘 키는 sk-xxxx
목표: Vercel 프로덕션 배포. 내가 할 일: 대시보드에 env 값 입력 (채팅에 비밀값 안 붙임). 네가 할 일: 필요한 env 키 이름 목록, 빌드 설정 확인, 배포 체크리스트. 완료: 프로덕션 URL 홈 열림, /ask 는 키 있을 때만 동작 안내. 비밀 키·토큰은 출력하지 마.
같은 상황에서 A와 B를 비교해 보세요. 권장(B 쪽)을 기본값으로 쓰면 됩니다. 본인 실험 결과는 Build에 프롬프트 칸에 남겨 공유할 수 있습니다.
A
인스타 클론 전부 만들어줘. 피드 DM 알림 로그인 다.
B (권장)
목표: 글 목록 + 작성만 완료: 목록에 글 2개, 작성 후 추가됨 범위: DM·알림·팔로우 제외
A
UI 세련되게 해줘.
B (권장)
히어로만: 한 문장 약속 + CTA 1개 금지: 그라데이션 카드 3장, 네온 글로우 톤: 모노톤 + primary 1색
A
버그 고쳐.
B (권장)
파일: src/app/... 증상: 클릭 시 500 재현: 1) /ask 2) 질문 전송 완료: 안내 문구 또는 정상 답변