AtoZAI
쇼케이스프로젝트블로그무료 도구VOD 강의Shop의뢰하기
Free Tool

프롬프트 라이브러리

바이브코딩 실전 프롬프트 50선. 클릭 한 번으로 복사해서 Claude Code, Cursor, Windsurf에 바로 사용하세요.

카테고리

50개의 프롬프트

프로젝트 시작

아키텍처 설계

[서비스 설명]을 만들려고 해. Next.js 16 + Supabase + Tailwind CSS로. 먼저 프로젝트 구조(디렉토리, DB 테이블, 페이지 라우트)를 설계해줘. 코드는 아직 쓰지 마.

프로젝트 시작

CLAUDE.md 생성

이 프로젝트의 CLAUDE.md를 작성해줘. 기술 스택, 디렉토리 구조, 코딩 규칙, 금지 사항을 포함해.

프로젝트 시작

DB 스키마 설계

[서비스]에 필요한 Supabase DB 테이블을 설계해줘. 각 테이블의 컬럼, 타입, 관계(FK)를 SQL로 보여줘.

프로젝트 시작

초기 셋업

Next.js 16 프로젝트를 초기 설정해줘. Supabase 클라이언트(서버/클라이언트), 미들웨어, 환경변수 검증(Zod)을 셋업해.

프로젝트 시작

인증 설정

Supabase Auth로 이메일+비밀번호 로그인/회원가입을 만들어줘. /login, /register 페이지와 미들웨어 세션 처리 포함.

DB 설계

테이블 생성

[기능]에 필요한 테이블을 설계해줘. 컬럼, 타입, NOT NULL, 기본값, FK를 SQL CREATE TABLE로.

DB 설계

관계 설정

users와 [테이블]의 관계를 설정해줘. 1:N인지 N:M인지 설명하고 FK/조인 테이블 SQL을 작성해.

DB 설계

RLS 정책

[테이블]의 RLS 정책을 작성해줘. SELECT: 공개, INSERT: 로그인 사용자, UPDATE/DELETE: 본인만.

DB 설계

마이그레이션

기존 [테이블]에 [컬럼]을 추가하는 마이그레이션 SQL을 작성해줘. 기존 데이터 호환 유지.

DB 설계

인덱스 분석

[테이블]에 인덱스가 필요한 컬럼을 분석해줘. 자주 조회/필터/정렬하는 컬럼 기준으로.

API 개발

Server Action 작성

[기능]의 Server Action을 만들어줘. 파일: src/lib/actions/[name].ts. 'use server' 포함, try-catch 에러 처리.

API 개발

API 라우트 + 외부 연동

[외부 API]를 연동하는 API 라우트를 만들어줘. src/app/api/[path]/route.ts. 인증, 에러 처리 포함.

API 개발

파일 업로드

파일 업로드 Server Action을 만들어줘. Supabase Storage 사용, 파일 타입/크기 검증 포함.

API 개발

결제 승인

토스페이먼츠 결제 승인 API를 만들어줘. /api/payments/confirm. 승인 후 orders 테이블에 저장.

API 개발

CRUD 풀세트

[기능]의 CRUD API를 한꺼번에 만들어줘. 목록 조회(필터/정렬/페이지네이션), 상세 조회, 생성, 수정, 삭제.

UI/프론트엔드

페이지 생성

[페이지]를 만들어줘. 서버 컴포넌트, Tailwind CSS, 모바일 반응형. 기존 UI 컴포넌트(Card, Badge, Button) 사용.

UI/프론트엔드

필터 + 정렬

목록 페이지에 카테고리 필터 + 정렬 기능을 추가해줘. URL searchParams 사용.

UI/프론트엔드

폼 만들기

폼을 만들어줘. 클라이언트 컴포넌트, 유효성 검증, 제출 중 로딩 상태, 성공/에러 메시지.

UI/프론트엔드

모달

모달 컴포넌트를 만들어줘. ESC로 닫기, 바깥 클릭으로 닫기, 포커스 트랩.

UI/프론트엔드

다크모드

다크모드를 적용해줘. next-themes 사용, CSS 변수로 색상 관리.

인증/로그인

OAuth 추가

Google OAuth 로그인을 추가해줘. Supabase Auth 사용. 콜백 처리 포함.

인증/로그인

비밀번호 재설정

비밀번호 재설정 기능을 만들어줘. 이메일 발송 → 토큰 검증 → 새 비밀번호 설정.

인증/로그인

관리자 권한 체크

관리자 권한 체크 시스템을 만들어줘. profiles.role 기반, checkAdmin(), requireAdmin().

인증/로그인

페이지 보호

로그인 상태에 따라 페이지 접근을 제한해줘. 미들웨어에서 /dashboard, /settings 보호.

인증/로그인

회원 탈퇴

회원 탈퇴 기능을 만들어줘. 확인 모달, 관련 데이터 처리 방침 안내.

결제

단건 결제

토스페이먼츠 단건 결제를 연동해줘. 결제 요청 → 결제창 → 승인 API → DB 저장.

결제

정기결제

정기결제(구독)를 연동해줘. 빌링키 발급 → 자동 결제 → 웹훅으로 상태 업데이트.

결제

환불 요청

환불 요청 기능을 만들어줘. 환불 사유 입력, 관리자 승인 후 처리.

결제

쿠폰 시스템

쿠폰/할인 코드 시스템을 만들어줘. 코드 검증, 할인 적용, 사용 횟수 제한.

결제

장바구니

장바구니 기능을 만들어줘. 추가/삭제/수량변경, 총 금액 계산, 결제 페이지 연동.

버그 수정

에러 분석

다음 에러를 해결해줘: [에러 메시지 전체]. 파일: [경로]. 발생 시점: [동작 설명].

버그 수정

데이터 로딩 실패

이 페이지에서 데이터가 안 불러와져. 콘솔에 [에러]. Supabase RLS 문제인지 확인해줘.

버그 수정

세션 미유지

로그인은 되는데 세션이 유지 안 돼. 새로고침하면 로그아웃됨. 미들웨어/쿠키 확인해줘.

버그 수정

모바일 깨짐

모바일에서 레이아웃이 깨져. 가로 스크롤이 생기는 원인 찾아줘.

버그 수정

배포 후 오류

Vercel 배포 후 [기능]이 안 돼. 로컬에서는 정상. 환경변수 문제인지 확인해줘.

성능 최적화

로딩 속도

이 페이지 로딩이 느려. 서버 컴포넌트/클라이언트 컴포넌트 분리를 최적화해줘.

성능 최적화

이미지 최적화

이미지 최적화를 해줘. img 태그를 next/image로 교체, 적절한 sizes 설정.

성능 최적화

N+1 쿼리

이 쿼리가 느려. N+1 문제인지 확인하고, 조인이나 서브쿼리로 최적화해줘.

성능 최적화

번들 사이즈

번들 사이즈를 줄여줘. dynamic import로 큰 라이브러리를 코드 스플리팅해줘.

성능 최적화

Lighthouse 개선

Lighthouse 점수를 개선해줘. LCP, CLS, FID를 중심으로.

배포

Vercel 배포

Vercel로 이 프로젝트를 배포하는 단계를 알려줘. 환경변수 설정 포함.

배포

커스텀 도메인

커스텀 도메인을 Vercel에 연결하는 방법을 알려줘. DNS 설정 포함.

배포

Supabase Auth URL

Supabase Auth의 Site URL과 Redirect URL을 배포 도메인에 맞게 설정해줘.

배포

500 에러

배포 후 API가 500 에러를 반환해. Vercel Functions 로그를 확인하는 방법 알려줘.

배포

CI/CD 설정

CI/CD를 설정해줘. GitHub main 브랜치 push 시 자동 배포.

리팩토링

파일 리팩토링

[파일]을 리팩토링해줘. 중복 제거, 타입 추가. 기능은 바꾸지 마. 변경 사항 요약해줘.

리팩토링

컴포넌트 분리

이 컴포넌트를 작은 컴포넌트들로 분리해줘. 각각 독립적으로 재사용 가능하게.

리팩토링

공통 로직 추출

이 3개 파일에서 중복되는 로직을 공통 유틸로 추출해줘.

리팩토링

any 제거

any 타입을 제거해줘. 적절한 인터페이스/타입을 정의해서 교체.

리팩토링

미사용 정리

이 프로젝트 전체에서 사용하지 않는 import, 변수, 파일을 찾아서 정리해줘.

📚 100선 전체와 사용 가이드가 필요하다면?

바이브코딩 스타터 팩 PDF에는 100선 전체, CLAUDE.md 5종 템플릿, 배포 체크리스트가 모두 들어 있습니다.