프롬프트의 기술 — AI에게 잘 부탁하는 법

바이브 코딩에서 코드를 작성하는 건 AI예요. 그런데 같은 AI를 써도 결과물의 차이가 엄청 커요. 그 차이를 만드는 건 프롬프트, 즉 AI에게 보내는 메시지예요.

프롬프트를 잘 쓰는 건 코딩 문법을 외우는 것보다 훨씬 중요해요. 디자이너가 다른 사람보다 유리한 영역이기도 하고요.

---

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

같은 요청을 두 가지 방식으로 해볼게요.

나쁜 예

"로그인 페이지 만들어줘"

AI는 만들어주긴 해요. 하지만 내가 원하는 것과 전혀 다른 모습일 확률이 높아요. 색상도, 레이아웃도, 스타일도 전부 AI 마음대로.

좋은 예

"로그인 페이지를 만들어줘.

레이아웃:
- 전체 배경: #09090b (거의 검정)
- 중앙 정렬된 폼 카드, 최대 너비 400px
- 카드 테두리: 1px solid #27272a, border-radius 0 (각진 스타일)

구성 요소:
- 상단에 'DESIGNER × CODE' 텍스트 로고
- 이메일 입력 필드
- 비밀번호 입력 필드
- 로그인 버튼: 배경 #E5FD52, 텍스트 검정, font-weight 900
- 하단에 '계정이 없으신가요? 가입하기' 링크

기술 스택: Next.js App Router, Tailwind CSS"

차이가 느껴지나요? 두 번째 프롬프트는 거의 디자인 시안을 말로 풀어쓴 것과 같아요.

---

프롬프트의 4가지 요소

좋은 프롬프트에는 네 가지가 들어있어요.

맥락이 중요한 이유

"버튼 컴포넌트 만들어줘"

vs

"Next.js + Tailwind CSS 프로젝트야.
배경이 #09090b인 다크 테마 사이트에서 쓸
버튼 컴포넌트를 만들어줘."

맥락을 주면 AI가 프로젝트에 맞는 코드를 생성해요. 안 주면 기본 밝은 테마 + 일반 CSS로 만들어버려요.

---

디자이너의 비밀 무기: 시각적 언어

디자이너가 프롬프트를 잘 쓸 수밖에 없는 이유가 있어요. 시각적으로 구체적인 언어를 쓸 수 있거든요.

개발자가 쓰는 프롬프트:

"유저 프로필 카드 만들어줘. 이름이랑 이메일 보여주면 돼."

디자이너가 쓰는 프롬프트:

"유저 프로필 카드를 만들어줘.

- 왼쪽에 48px 원형 아바타
- 아바타 오른쪽에 이름(14px, bold, white)과
  이메일(12px, #a1a1aa)을 세로로 배치
- 전체를 가로로 정렬 (flex row, items-center)
- 카드 패딩 16px, 배경 없음, 하단 border만
- 이름과 아바타 사이 gap 12px"

이 차이가 결과물의 차이를 만들어요.

---

대화를 이어가는 기술

프롬프트는 한 번에 완벽할 필요 없어요. 대화를 이어가면서 다듬는 게 핵심이에요.

단계 1: 큰 틀 요청

"블로그 글 상세 페이지를 만들어줘.
제목, 날짜, 태그, 본문이 보여야 해.
Tailwind CSS, 다크 테마."

단계 2: 결과를 보고 수정 요청

"좋아. 근데 제목 폰트가 너무 작아.
clamp(1.8rem, 5vw, 2.8rem)으로 바꿔주고,
letter-spacing -0.03em 추가해줘."

단계 3: 세부 추가

"본문 위에 태그를 뱃지 형태로 보여줘.
각 태그는 border 1px #3f3f46, 패딩 2px 10px,
텍스트 10px uppercase tracking-wider."

단계 4: 예외 처리

"태그가 없는 글도 있어.
태그 배열이 비어있으면 뱃지 영역을 아예 안 보여줘."

이런 식으로 4-5번 주고받으면 완성도 높은 결과물이 나와요. 한 번에 완벽한 프롬프트를 쓰려고 스트레스 받지 마세요.

---

상황별 프롬프트 템플릿

자주 쓰는 상황별로 템플릿을 정리했어요. 복사해서 바로 쓰세요.

새 컴포넌트 만들기

"[컴포넌트 이름]을 만들어줘.

기술 스택: [Next.js / React] + Tailwind CSS

레이아웃:
- [구조 설명]

스타일:
- 배경: [색상]
- 텍스트: [크기, 색상, 굵기]
- 간격: [패딩, 마진, gap]
- 테두리: [있으면 명시]

동작:
- [호버, 클릭 등 인터랙션]

제약:
- [하지 말아야 할 것]"

기존 코드 수정하기

"[파일명]에서 [부분]을 수정해줘.

현재: [현재 상태]
원하는 결과: [변경 후 상태]

나머지는 건드리지 마."

에러 해결하기

"이 에러가 나와:

[에러 메시지 전체 복사]

관련 코드는 [파일명]이야.
원인이 뭔지 설명하고 수정해줘."

---

흔한 실수 3가지

1. 너무 한꺼번에 요청하기

// 이렇게 하지 마세요
"로그인, 회원가입, 마이페이지, 관리자 대시보드 전부 만들어줘"

// 이렇게 하세요
"로그인 페이지부터 만들자. 레이아웃은..."

한 번에 하나씩. AI도 범위가 넓으면 품질이 떨어져요.

2. 결과를 확인 안 하고 계속 요청하기

코드를 받으면 반드시 실행해서 확인하고 다음 단계로 넘어가세요. 확인 없이 쌓아 올리면 나중에 전부 무너져요.

3. AI가 만든 코드를 100% 신뢰하기

AI는 자신 있게 틀린 코드를 써요.

특히 최신 라이브러리 버전이나 프로젝트 고유 설정은 AI가 모를 수 있어요. 결과를 항상 눈으로 확인하세요.

---

정리

프롬프트는 연습할수록 늘어요. 다음 글에서는 지금까지 배운 걸 총동원해서 실제로 포트폴리오 사이트를 만들어볼 거예요.

다음 글에서 만나요!