1프롬프트: "Tailwind CSS와 shadcn/ui를 사용한 데이터 테이블 컴포넌트.
2정렬, 페이지네이션, 검색 기능 포함. Next.js App Router 호환"
3 
4결과: 90점 품질의 컴포넌트 (기능, 스타일, TypeScript 타입 포함)
5소요: 30초
6직접 작성 시: 2~3시간

1프롬프트: "기존 Button 컴포넌트를 기반으로 
2 loading, disabled, icon 변형 추가"
3 
4결과: 기존 스타일 유지하면서 변형 추가 (85점)

1프롬프트: "반응형 대시보드 레이아웃.
2사이드바(240px), 헤더(60px), 메인 컨텐츠 영역. 모바일에서 사이드바는 드로어로"
3 
4결과: 잘 작동하는 레이아웃 (88점)

1// v0가 생성한 코드 (문제 있음)
2function calculatePricing(items: CartItem[]): PricingResult {
3  const total = items.reduce((sum, item) => sum + item.price * item.qty, 0);
4  const discount = total > 100000 ? total * 0.1 : 0;  // 단순화됨
5  return { total, discount, final: total - discount };
6}
7 
8// 실제 필요한 코드 (복잡한 비즈니스 규칙)
9function calculatePricing(items: CartItem[], customer: Customer): PricingResult {
10  // VIP 등급별 다른 할인율
11  // 상품 카테고리별 할인 중복 적용 방지
12  // 멤버십 포인트 적용
13  // 프로모션 코드와 정기 할인 중복 여부
14  // 세금 계산 (부가세, 개별소비세)
15  // ...
16}

1// v0 생성 (접근성 문제)
2<div onClick={handleSelect} className="cursor-pointer">
3  {option.label}
4</div>
5 
6// 수정 후
7<button
8  type="button"
9  onClick={handleSelect}
10  onKeyDown={(e) => e.key === 'Enter' && handleSelect()}
11  aria-selected={isSelected}
12  role="option"
13>
14  {option.label}
15</button>

1// v0 생성 (성능 문제)
2export function ProductList({ products }: { products: Product[] }) {
3  const [filter, setFilter] = useState('');
4  
5  // 매 렌더마다 필터링 (1000개 상품 × 매 키입력)
6  const filtered = products.filter(p => p.name.includes(filter));
7  
8  return (
9    <div>
10      <input onChange={(e) => setFilter(e.target.value)} />
11      {filtered.map(p => <ProductCard key={p.id} product={p} />)}
12    </div>
13  );
14}
15 
16// 올바른 구현
17export function ProductList({ products }: { products: Product[] }) {
18  const [filter, setFilter] = useState('');
19  const debouncedFilter = useDebounce(filter, 300);  // 디바운스
20  
21  const filtered = useMemo(
22    () => products.filter(p => p.name.includes(debouncedFilter)),
23    [products, debouncedFilter]  // 메모이제이션
24  );
25  
26  return (
27    <div>
28      <input onChange={(e) => setFilter(e.target.value)} />
29      <VirtualList items={filtered} />  {/* 가상 스크롤 */}
30    </div>
31  );
32}

1권장 조합: v0 + Cursor
2 
3사용 패턴:
41. v0: UI 프로토타입 생성 (시간의 40%)
52. Cursor: 비즈니스 로직, API 연동 (시간의 60%)
63. 모든 AI 생성 코드는 PR 리뷰 필수
7 
8예상 효과: 개발 속도 2~3배 향상 (단, 리뷰 역량 필요)

1권장 조합: Cursor Enterprise + GitHub Copilot Workspace
2 
3사용 패턴:
41. 이슈 → Copilot Workspace로 초안 PR 생성
52. 시니어 엔지니어 리뷰 + 비즈니스 로직 수정
63. Cursor로 코드베이스 전체 맥락 활용 리팩토링
7 
8주의: AI 생성 코드 품질 기준 팀 내 문서화 필요

1주요 고려사항:
2- 코드 소유권: AI 생성 코드의 저작권/책임 정책 수립
3- 보안: 코드베이스 외부 전송 여부 (Cursor/Copilot)
4- 감사: AI 보조 vs 직접 작성 구분 추적
5 
6권장: GitHub Copilot Business (Enterprise 플랜, 데이터 미학습 보장)

1# 좋은 프롬프트 구조
2[컨텍스트] + [기술 스택] + [제약 조건] + [예시]
3 
4예시:
5"Next.js 15 App Router 기반 프로젝트에서 사용할 무한 스크롤 훅.
6- React Query v5 사용
7- TypeScript strict 모드
8- 에러 상태, 로딩 상태, 빈 상태 처리 포함
9- Intersection Observer API 사용
10- 기존 useQuery 훅 wrapping 방식으로"
11 
12# 나쁜 프롬프트
13"무한 스크롤 만들어줘"