AI 코딩 프롬프트 템플릿

다음 요구사항으로 웹 앱을 만들어줘:

- 프로젝트 이름: [이름]
- 주요 기능: [기능 설명]
- 기술 스택: Next.js + TypeScript + Tailwind CSS
- 사용자: [대상 사용자]

먼저 프로젝트 구조를 설계하고, 핵심 기능부터 구현해줘.
각 단계마다 무엇을 하는지 설명해줘.

[제품/서비스 이름]의 랜딩 페이지를 만들어줘.

요구사항:
- 히어로 섹션: 핵심 가치 제안 + CTA 버튼
- 기능 소개: 3-4개 주요 기능 카드
- 사회적 증거: 사용자 후기 또는 통계
- 가격표: [무료/유료] 플랜
- FAQ 섹션
- 반응형 디자인 (모바일 우선)
- 다크 모드 지원

기술 스택: Next.js + Tailwind CSS
디자인 스타일: 깔끔하고 현대적인 SaaS 스타일

다음 API 서버를 만들어줘:

- 엔드포인트: [목록]
- 인증: [JWT/세션/없음]
- 데이터베이스: [PostgreSQL/MongoDB/SQLite]
- 주요 모델: [데이터 구조 설명]

RESTful 규칙을 따르고, 에러 처리와 유효성 검사를 포함해줘.
각 엔드포인트에 대한 사용 예시도 보여줘.

기존 Next.js 앱에 로그인/회원가입 기능을 추가해줘.

요구사항:
- 이메일 + 비밀번호 로그인
- 소셜 로그인: [Google/GitHub/카카오]
- 비밀번호 찾기
- 보호된 라우트 (미로그인 시 리다이렉트)

사용할 라이브러리: [Clerk/Auth.js/Supabase Auth]
현재 프로젝트 구조를 확인하고 기존 코드에 맞게 추가해줘.

앱에 Stripe 결제 기능을 추가해줘.

요구사항:
- 구독형 결제: [월간/연간] 플랜
- 가격: [가격 정보]
- Stripe Checkout 사용
- 웹훅으로 결제 상태 동기화
- 구독 관리 페이지 (업그레이드/취소)

Stripe 환경변수가 이미 설정되어 있다고 가정하고,
안전한 서버 사이드 처리를 구현해줘.

앱에 데이터베이스를 연결해줘.

- DB: [Supabase/Neon/PlanetScale]
- 필요한 테이블: [테이블 구조 설명]
- ORM: [Prisma/Drizzle]

스키마 정의, 마이그레이션, 기본 CRUD 함수를 만들어줘.
환경변수 설정 방법도 알려줘.

다음 에러를 해결해줘:

```
[에러 메시지를 여기에 붙여넣기]
```

현재 환경:
- 프레임워크: [Next.js/React/etc]
- Node.js 버전: [버전]
- 패키지 매니저: [npm/pnpm/yarn]

에러의 원인을 설명하고, 해결 방법을 단계별로 알려줘.

다음 코드를 리뷰해줘:

```
[코드를 여기에 붙여넣기]
```

다음 관점에서 피드백해줘:
1. 버그나 잠재적 문제점
2. 성능 개선 포인트
3. 코드 가독성
4. 보안 취약점
5. 더 나은 패턴이나 대안

각 피드백에 수정 코드 예시를 포함해줘.

이 Next.js 프로젝트를 Vercel에 배포하려고 해.

도와줘:
1. Vercel 프로젝트 설정
2. 환경변수 설정 (어떤 변수가 필요한지)
3. 도메인 연결 방법
4. 빌드 에러가 있으면 해결
5. 배포 후 확인해야 할 사항

현재 프로젝트를 확인하고 배포에 필요한 모든 단계를 안내해줘.

이 웹사이트의 SEO를 최적화해줘.

확인하고 적용해야 할 사항:
1. 메타 태그 (title, description, OG tags)
2. 구조화 데이터 (JSON-LD)
3. sitemap.xml 생성
4. robots.txt 설정
5. 이미지 alt 텍스트
6. 시맨틱 HTML 구조
7. 페이지 로딩 속도 최적화

현재 프로젝트를 확인하고 누락된 SEO 요소를 추가해줘.

이 페이지를 반응형으로 만들어줘.

요구사항:
- 모바일 (< 640px): 1열 레이아웃, 햄버거 메뉴
- 태블릿 (640-1024px): 2열 그리드
- 데스크탑 (> 1024px): 현재 레이아웃 유지

Tailwind CSS breakpoint (sm, md, lg, xl)를 사용하고,
모바일 퍼스트로 작성해줘. 터치 타겟은 최소 44px로 유지.

앱에 다크모드를 추가해줘.

요구사항:
- 시스템 설정 감지 (prefers-color-scheme)
- 수동 토글 버튼
- 선택한 테마 localStorage에 저장
- 페이지 로드 시 깜빡임(FOUC) 방지

Tailwind CSS의 dark: 프리픽스를 사용하고,
HTML에 class="dark"를 토글하는 방식으로 구현해줘.

[모델 이름]의 CRUD 기능을 만들어줘.

데이터 구조:
- [필드1]: [타입] (필수)
- [필드2]: [타입] (선택)
- [필드3]: [타입] (필수)

요구사항:
- 목록 조회 (페이지네이션, 검색, 필터)
- 상세 조회
- 생성 폼 (유효성 검사 포함)
- 수정 (기존 데이터 불러오기)
- 삭제 (확인 다이얼로그)
- 낙관적 업데이트 (UI 즉시 반영)

Server Actions를 사용해서 서버에서 처리해줘.

[기능 설명]에 실시간 기능을 추가해줘.

요구사항:
- 다른 사용자의 변경사항이 즉시 반영
- 연결 끊김 시 자동 재연결
- 오프라인 상태 표시

기술: [Supabase Realtime / WebSocket / Server-Sent Events]
현재 프로젝트 구조를 확인하고 기존 코드에 맞게 구현해줘.

이 앱의 성능을 최적화해줘.

확인하고 적용할 사항:
1. 이미지 최적화 (next/image, lazy loading, WebP)
2. 코드 스플리팅 (dynamic import)
3. 불필요한 리렌더링 방지 (React.memo, useMemo, useCallback)
4. 번들 사이즈 줄이기 (tree shaking, 불필요한 의존성 제거)
5. 폰트 최적화 (next/font)
6. 캐싱 전략 (ISR, SWR)

현재 프로젝트를 분석하고 가장 효과적인 최적화부터 적용해줘.
각 최적화의 예상 효과도 설명해줘.