바이브 코딩시 좋은 프롬프트 작성하기

0. 프롬프트란?

- AI에게 전달하는 지시 사항이나 질문

 

1. 좋은 프롬프트의 조건

- 모호한 표현 피하기

- 원하는 결과를 구체적으로 전달하기

- 맥락을 위해 왜, 어떤 상황에서 활용될 것인지 전달하기

 

2. 5W1H

프롬프트에 아래 여섯가지 요소를 반영한다면 명확한 프롬프트를 만들 수 있다.

- Why: 목적

- Who: 대상 사용자 또는 프로젝트 구성원

- What: 무엇을 만들 것인지

- When: 언제 사용되는지

- Where: 어디서 사용되는지

- How: 구현 방법

 

5W1H 예시

What: AI가 상담자가 되는 심리 상담 채팅 프로그램
Why: 사용자가 따뜻한 공감과 위로를 받으며 현실적인 조언을 받기 위함
When: 지금 바로 개발 시작하여 즉시 사용 가능한 완성품 제작
Where: 웹 브라우저에서 실행, 호스팅 환경에서 작동
How:
- 사용할 OpenRouter API 모델은 '.env' 파일에서 읽어와 사용
- API 키는 현재 프로젝트 폴더의 '.env' 파일에서 읽어와 사용
- 따뜻하고 편안한 느낌의 UI 디자인 적용
- 최종 결과물은 Flask 프레임워크로 제작
- 철저한 테스트를 통해 안정적인 버전 완성
Who:
- 백엔드 개발자: API 연동, 기능 구현
- 프론트엔드 개발자: 따뜻하고 편안한 느낌의 UI 제작
- 품질 보증 엔지니어: 여러 상황을 테스트하고 문제 발견 시 완전히 해결될 때까지 수정

 

 

3. 실제 활용

1) 5W1H 기반 프롬포트 작성

[5W1H 내용 첨부 또는 서술]

어떻게 구현하면 좋을지 기술적인 방향과 함께 구체적인 PRD(Product Requirements Document)를 작성해줘.

※ 구현 방식을 AI에게 추천받고 싶은 개발자 기준으로 작성됨

※ 프롬포트가 너무 길어지는 경우에는 해당 내용을 파일화 해서 파일을 첨부하는 방식으로 활용 가능

- 더 복잡한 애플리케이션을 개발하는 경우에는 전체 프로젝트를 작은 단위로 나누어, 각 단위에 대한 PRD를 만드는 것이 좋다.

 

2) AI가 PRD를 제시

- 이 PRD를 그대로 사용할지 수정할지 결정하면 된다.

- 크게 복잡하지 않다면 프롬프트로 바로 사용한다.

 

3) PRD를 단계별 프롬포트화 하기 ★ ★ ★

(1) 프롬포트를 단계로 나누는 이유

- 전체 PRD를 하나의 프롬프트로 쓴다면 한번에 복잡한 코드가 생성될 가능성이 높다.

- 이로 인해 코드 구조를 파악하기 어렵고, 모든 요청 사항이 구현되었는지 확인하기 힘들다.

- 각 단계에서 명확한 목표를 검증할 수 있다.

 

(2) 단계 구성

- 예를 들면, 뼈대 -> 기능 -> 디자인 -> 점검과 같은 단계를 따르는 것이다. 그리고 각 단계에서는 요청 -> 생성 -> 확인 -> 수정을 거친다.

- AI에게 단계별 프롬프트로 변환해달라고 요청해도 된다. 단계별 효율적인 워크플로를 구성해준다.

(예시)
이 PRD를 단계별 프롬프트로 변환해 줘.
5개의 핵심 단계로 정리해서 각 단계마다 명확한 지시 사항을 만들어 줘.

# Daily Todo 앱 — 단계별 구현 프롬프트

> PRD v1.0 기반 | 총 5단계 | 각 단계는 이전 단계 결과물 위에 누적됩니다.

---

## STEP 1 · HTML 구조 + CSS 디자인 시스템

**목표**: 동작하지 않아도 되는 정적 뼈대를 완성한다. 모든 UI 요소가 화면에 올바르게 배치되고, 디자인 시스템(색상, 폰트, 간격)이 확립된다.

---

**프롬프트**
... (생략)

---

**완료 기준**
... (생략)

---
---

## STEP 2 · 핵심 데이터 레이어 + 할 일 추가/렌더링

**목표**: 앱의 두뇌를 만든다. 데이터 구조를 정의하고, 할 일을 추가하면 화면에 실시간으로 반영되도록 한다.

---

**프롬프트**
... (생략)

---

**완료 기준**
... (생략)

---
---

## STEP 3 · 완료 체크 + 삭제 + localStorage 영속성

**목표**: 가장 자주 쓰는 두 동작(체크, 삭제)을 완성하고, 새로고침 후에도 데이터가 살아있게 만든다.

---

**프롬프트**
... (생략)

---

**완료 기준**
... (생략)

---
---

## STEP 4 · 카테고리 필터 + 진행률 표시

**목표**: 정보 구조를 완성한다. 원하는 카테고리만 보거나, 오늘의 달성률을 한눈에 파악할 수 있게 한다.

---

**프롬프트**
... (생략)

---

**완료 기준**
... (생략)

---
---

## STEP 5 · 인라인 수정 + 마무리 다듬기

**목표**: 앱을 완성한다. 수정 기능을 붙이고, UX 세부 사항을 다듬어 실제로 매일 쓸 수 있는 상태로 만든다.

---

**프롬프트**
... (생략)

---

**완료 기준**
... (생략)

---

## 단계별 흐름 요약

```
STEP 1  정적 HTML/CSS 뼈대
   ↓
STEP 2  + JS 데이터 레이어 + 추가/렌더링
   ↓
STEP 3  + 완료 체크 + 삭제 + localStorage
   ↓
STEP 4  + 카테고리 필터 + 진행률
   ↓
STEP 5  + 인라인 수정 + UX 마무리
        = 완성된 Daily Todo 앱
```

※ 단계마다 .md 파일을 생성해달라고 해도 좋다.

 

단계별 프롬프트 결과물 예시를 보면 단계별로 목표, 프롬프트, 완료 기준을 구성해주었다. 우리는 클로드 코드와 같은 AI 코딩 어시스턴스에게 STEP1의 프롬포트부터 하나씩 제공하고, 단계별로 구현이 완료될때마다 완료 기준을 보면서 체크해주고, 충족 시 다음단계로 넘어가면서 개발해나가면 된다.

- AI에게 레퍼런스를 제공하는 것도 좋은 프롬프트 노하우다. 예를 들어, 디자인의 경우에는 워드프레스에서 마음에 드는 테마를 골라 AI에게 참고 자료로 줄 수 있다.