Ch.25 컴포넌트 설계 — 재사용 가능한 UI

AI에게 컴포넌트 시키는 법

컴포넌트 명세(Props 인터페이스, variants, states)를 작성할 수 있다디자인 토큰으로 일관된 스타일 시스템을 구축할 수 있다효과적인 프롬프트로 AI에게 정확한 컴포넌트를 받을 수 있다

프롬프트 하나로 완벽한 컴포넌트를 받으려면?

AI에게 "예쁜 버튼 만들어줘"라고 하면 결과가 들쭉날쭉합니다. 하지만 Props 타입과 디자인 토큰을 함께 주면 이야기가 달라집니다.

AI가 일관된 컴포넌트를 만들게 하려면 뭘 줘야 할까?

컴포넌트 명세서 — Props 인터페이스 + 디자인 토큰 + 변형 목록을 미리 정의해주면 됩니다.

article

핵심 내용

AI에게 설계도를 주면 결과가 확 달라집니다

// 1단계: Props 인터페이스부터 정의
interface ButtonProps {
  variant: "primary" | "secondary" | "ghost" | "danger";
  size: "sm" | "md" | "lg";
  label: string;
  onClick: () => void;
  disabled?: boolean;
  loading?: boolean;
  leftIcon?: React.ReactNode;
}

// 이걸 AI에게 먼저 보여주고
// "이 인터페이스에 맞는 Button 컴포넌트를 만들어줘"

바이브 코더 공식: 먼저 interface를 쓰고, 그 다음 AI에게 구현을 맡기세요. interface가 곧 AI에 대한 가장 정확한 프롬프트입니다.

디자인 토큰은 색상·크기·간격의 변수화입니다

// Tailwind의 theme 설정 = 프로젝트 전체 디자인 토큰
// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#eff6ff",
          500: "#3b82f6",
          600: "#2563eb",
          700: "#1d4ed8",
        },
      },
      spacing: {
        "page": "1rem",      // 페이지 패딩
        "card": "1.5rem",    // 카드 내부 패딩
      },
    },
  },
};

핵심: AI에게 디자인 토큰을 알려주면, 매번 일관된 스타일의 컴포넌트를 만들어줍니다. "이 토큰을 사용해서 만들어줘"라고 하세요.

이 프롬프트 템플릿으로 AI 결과물 퀄리티가 확 오릅니다

## 프롬프트 템플릿

아래 Props 인터페이스에 맞는 React 컴포넌트를 만들어줘.

```typescript
interface AlertProps {
  variant: "info" | "success" | "warning" | "error";
  title: string;
  description?: string;
  dismissible?: boolean;
  onClose?: () => void;
}
```

요구사항:
- Tailwind CSS 사용
- 각 variant별 색상: info=blue, success=green, warning=amber, error=red
- dismissible일 때 X 버튼 표시
- 아이콘 포함 (variant별 다른 아이콘)
- 접근성: role="alert" 추가

1. interface 작성: Props 타입을 먼저 정의

2. 토큰 첨부: 디자인 토큰/색상 체계 알려줌

3. 요구사항 나열: 상태, 접근성, 반응형 등 명시

4. 예시 첨부: 기존 컴포넌트 코드를 참고로 제공

바이브 코더의 무기: interface 정의 능력입니다. 코드를 다 이해하지 못해도, 인터페이스를 정확하게 설계할 수 있으면 AI가 나머지를 해결합니다.

AI에게 컴포넌트를 요청할 때 가장 먼저 해야 할 일은?

디자인 토큰을 사용하면 AI가 만든 컴포넌트들이 서로 일관된 스타일을 가진다.

다음 중 프롬프트에 포함하면 결과가 가장 좋아지는 것은?

key

핵심 용어

📋

Props 인터페이스

타입 정의로 AI가 만들어야 할 API를 확정

🎨

Variants (변형)

primary, secondary 같은 시각적 변형 목록

🔄

States (상태)

default, hover, disabled, loading 등 상태별 모습

💡

사용 예시

실제 사용 코드를 보여주면 의도가 명확해짐

edit_note

정리 노트

AI 컴포넌트 프롬프팅 핵심 정리

효과적인 프롬프트

Props 인터페이스: TypeScript interface로 컴포넌트가 받을 데이터 명세
디자인 토큰: 색상, 크기, 간격 등 구체적인 스타일 규칙 전달
요구사항: 반응형, 접근성, 애니메이션 등 비기능 요구사항 명시

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

나쁜 예: "이쁘게 만들어줘", "최신 트렌드에 맞게" 등 모호한 지시
좋은 예: interface + 토큰 + 구체적 요구사항으로 명확한 명세 전달

★

AI에게 컴포넌트를 시킬 때는 '이쁘게'가 아니라 Props interface를 먼저 정의하세요.

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작