바이브코딩 실전 프롬프트 50선. 클릭 한 번으로 복사해서 Claude Code, Cursor, Windsurf에 바로 사용하세요.
50개의 프롬프트
[서비스 설명]을 만들려고 해. Next.js 16 + Supabase + Tailwind CSS로. 먼저 프로젝트 구조(디렉토리, DB 테이블, 페이지 라우트)를 설계해줘. 코드는 아직 쓰지 마.
이 프로젝트의 CLAUDE.md를 작성해줘. 기술 스택, 디렉토리 구조, 코딩 규칙, 금지 사항을 포함해.
[서비스]에 필요한 Supabase DB 테이블을 설계해줘. 각 테이블의 컬럼, 타입, 관계(FK)를 SQL로 보여줘.
Next.js 16 프로젝트를 초기 설정해줘. Supabase 클라이언트(서버/클라이언트), 미들웨어, 환경변수 검증(Zod)을 셋업해.
Supabase Auth로 이메일+비밀번호 로그인/회원가입을 만들어줘. /login, /register 페이지와 미들웨어 세션 처리 포함.
[기능]에 필요한 테이블을 설계해줘. 컬럼, 타입, NOT NULL, 기본값, FK를 SQL CREATE TABLE로.
users와 [테이블]의 관계를 설정해줘. 1:N인지 N:M인지 설명하고 FK/조인 테이블 SQL을 작성해.
[테이블]의 RLS 정책을 작성해줘. SELECT: 공개, INSERT: 로그인 사용자, UPDATE/DELETE: 본인만.
기존 [테이블]에 [컬럼]을 추가하는 마이그레이션 SQL을 작성해줘. 기존 데이터 호환 유지.
[테이블]에 인덱스가 필요한 컬럼을 분석해줘. 자주 조회/필터/정렬하는 컬럼 기준으로.
[기능]의 Server Action을 만들어줘. 파일: src/lib/actions/[name].ts. 'use server' 포함, try-catch 에러 처리.
[외부 API]를 연동하는 API 라우트를 만들어줘. src/app/api/[path]/route.ts. 인증, 에러 처리 포함.
파일 업로드 Server Action을 만들어줘. Supabase Storage 사용, 파일 타입/크기 검증 포함.
토스페이먼츠 결제 승인 API를 만들어줘. /api/payments/confirm. 승인 후 orders 테이블에 저장.
[기능]의 CRUD API를 한꺼번에 만들어줘. 목록 조회(필터/정렬/페이지네이션), 상세 조회, 생성, 수정, 삭제.
[페이지]를 만들어줘. 서버 컴포넌트, Tailwind CSS, 모바일 반응형. 기존 UI 컴포넌트(Card, Badge, Button) 사용.
목록 페이지에 카테고리 필터 + 정렬 기능을 추가해줘. URL searchParams 사용.
폼을 만들어줘. 클라이언트 컴포넌트, 유효성 검증, 제출 중 로딩 상태, 성공/에러 메시지.
모달 컴포넌트를 만들어줘. ESC로 닫기, 바깥 클릭으로 닫기, 포커스 트랩.
다크모드를 적용해줘. next-themes 사용, CSS 변수로 색상 관리.
Google OAuth 로그인을 추가해줘. Supabase Auth 사용. 콜백 처리 포함.
비밀번호 재설정 기능을 만들어줘. 이메일 발송 → 토큰 검증 → 새 비밀번호 설정.
관리자 권한 체크 시스템을 만들어줘. profiles.role 기반, checkAdmin(), requireAdmin().
로그인 상태에 따라 페이지 접근을 제한해줘. 미들웨어에서 /dashboard, /settings 보호.
회원 탈퇴 기능을 만들어줘. 확인 모달, 관련 데이터 처리 방침 안내.
토스페이먼츠 단건 결제를 연동해줘. 결제 요청 → 결제창 → 승인 API → DB 저장.
정기결제(구독)를 연동해줘. 빌링키 발급 → 자동 결제 → 웹훅으로 상태 업데이트.
환불 요청 기능을 만들어줘. 환불 사유 입력, 관리자 승인 후 처리.
쿠폰/할인 코드 시스템을 만들어줘. 코드 검증, 할인 적용, 사용 횟수 제한.
장바구니 기능을 만들어줘. 추가/삭제/수량변경, 총 금액 계산, 결제 페이지 연동.
다음 에러를 해결해줘: [에러 메시지 전체]. 파일: [경로]. 발생 시점: [동작 설명].
이 페이지에서 데이터가 안 불러와져. 콘솔에 [에러]. Supabase RLS 문제인지 확인해줘.
로그인은 되는데 세션이 유지 안 돼. 새로고침하면 로그아웃됨. 미들웨어/쿠키 확인해줘.
모바일에서 레이아웃이 깨져. 가로 스크롤이 생기는 원인 찾아줘.
Vercel 배포 후 [기능]이 안 돼. 로컬에서는 정상. 환경변수 문제인지 확인해줘.
이 페이지 로딩이 느려. 서버 컴포넌트/클라이언트 컴포넌트 분리를 최적화해줘.
이미지 최적화를 해줘. img 태그를 next/image로 교체, 적절한 sizes 설정.
이 쿼리가 느려. N+1 문제인지 확인하고, 조인이나 서브쿼리로 최적화해줘.
번들 사이즈를 줄여줘. dynamic import로 큰 라이브러리를 코드 스플리팅해줘.
Lighthouse 점수를 개선해줘. LCP, CLS, FID를 중심으로.
Vercel로 이 프로젝트를 배포하는 단계를 알려줘. 환경변수 설정 포함.
커스텀 도메인을 Vercel에 연결하는 방법을 알려줘. DNS 설정 포함.
Supabase Auth의 Site URL과 Redirect URL을 배포 도메인에 맞게 설정해줘.
배포 후 API가 500 에러를 반환해. Vercel Functions 로그를 확인하는 방법 알려줘.
CI/CD를 설정해줘. GitHub main 브랜치 push 시 자동 배포.
[파일]을 리팩토링해줘. 중복 제거, 타입 추가. 기능은 바꾸지 마. 변경 사항 요약해줘.
이 컴포넌트를 작은 컴포넌트들로 분리해줘. 각각 독립적으로 재사용 가능하게.
이 3개 파일에서 중복되는 로직을 공통 유틸로 추출해줘.
any 타입을 제거해줘. 적절한 인터페이스/타입을 정의해서 교체.
이 프로젝트 전체에서 사용하지 않는 import, 변수, 파일을 찾아서 정리해줘.