AI 코딩 도구로 웹사이트 만들기 — 프롬프트만으로 어디까지?

# AI가 생성한 컴포넌트 예시 (프롬프트: "pricing 카드 3개를 만들어줘")

// 프롬프트 한 줄로 생성된 컴포넌트 구조
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
  {plans.map((plan) => (
    <div key={plan.name}
      className="bg-card rounded-2xl p-8 border
        border-border hover:shadow-lg transition-all">
      <h3 className="text-xl font-bold">{plan.name}</h3>
      <p className="text-3xl font-bold mt-4">
        {plan.price}<span className="text-sm">/월</span>
      </p>
      {/* features, CTA button ... */}
    </div>
  ))}
</div>

# 나쁜 프롬프트 vs 좋은 프롬프트

# 나쁜 예: 추상적
"페이지를 더 좋게 만들어줘"

# 좋은 예: 구체적
"app/(site)/blog/page.tsx에서
1. 블로그 카드 그리드를 grid-cols-1 md:grid-cols-2 lg:grid-cols-3으로 변경
2. 각 카드에 카테고리 배지 추가 (bg-primary/10 text-primary rounded-full)
3. 기존 BlogCard 컴포넌트의 스타일 패턴 유지
4. 날짜 포맷을 'YYYY.MM.DD' 형식으로 통일"