30_개발 프롬프트 전략 - yojulab/learn_vibecodings GitHub Wiki

같은 듯 다른 결과 프롬프트

flowchart LR
    A["당신은 Kent Beck (TDD 창시자) 입니다.<br/>기능이나 앱 구현 시 TDD 접근 방식을 step by step 예시와 함께 설명해주세요."]
    B["너는 TDD 방법론 전문가인 켄트벡입니다.<br/>전문가로써 TDD 접근 과정이 일반 개발자와는 다른 세부 과정이 있을 것 같습니다.<br/>TDD 전문가로써 접근하는 방식을 단계 순서로 상황 예시 들어 자세히 설명 바랍니다."] 
    C["당신은 다양한 문제 해결 통찰을 가진 TDD 전문가 켄트벡입니다.<br/>전문가로서 TDD 접근 과정에서 일반 개발자보다 세부적인 단계들이 있을 것입니다.<br/>기능이나 앱 구현 시 TDD 전문가로서 step by step 예시와 함께 설명해주세요."]
    A --> B --> C
Loading

주요 프롬프트 전략

  • 페라소나 도메인 복수 부여
당신은 강의 설계와 실행에 대한 풍부한 경험을 가진 교육 기술 전문가이며, 동시에 실무 중심의 웹 애플리케이션을 설계 및 구현해 온 시니어 풀스택 개발자입니다.
  • 상황 설명
전문가로서 접근 과정에서 일반 개발자보다 세부적인 단계들이 있을 것입니다.
  • 필요 사항
요구 사항을 분석해 TDD 기법으로 vibe coding 할 수 있는 PRD 를 작성하려고 합니다.

예제 1 : 블로그 시스템

인증 있는 블로그

당신은 다양한 문제 해결 통찰을 가진 TDD 전문가 켄트벡입니다.

전문가로서 TDD 접근 과정에서 일반 개발자보다 세부적인 단계들이 있을 것입니다.

요구 사항을 분석해 TDD 기법으로 vibe coding 할 수 있는 PRD 를 작성하려고 합니다.

기능이나 앱 구현 시 TDD 전문가로서 step by step 으로 문답 형식으로 필요 사항을 채워 PRD를 완성해 주세요.

[요구 사항]
| 단계 | 대화 내용 | 결과물 |
|------|----------|--------|
| **Vision** | "사용자가 블로그 글을 등록하고 관리할 수 있도록 한다" | 요구사항 정의 |
| **Ideation** | "/posts API 설계, CRUD 명세 작성해줘" | API 명세서, ERD |
| **Build** | "FastAPI로 CRUD 작성, Vue로 폼 구성해줘" | 실행 가능한 코드 |
| **Evaluation** | "Pytest로 테스트, 성능 최적화해줘, Playwright로 headless로 UI 테스트 후 배포" | 테스트 코드, 배포 준비 |

결과 : https://chatgpt.com/share/6889ca0f-c108-8009-a392-c56c100d02b3 

sequenceDiagram
    participant Dev as 개발자
    participant AI as AI Assistant
    participant Code as 코드베이스
    
    Dev->>AI: "블로그 글을 등록하고 관리할 수 있는 시스템을 만들고 싶어"
    AI->>Dev: "CRUD 기능이 필요하겠네요. 기술 스택을 정해볼까요?"
    Dev->>AI: "FastAPI + Vue + PostgreSQL로 해줘"
    AI->>Code: API 엔드포인트 생성
    AI->>Code: 데이터베이스 모델 정의
    AI->>Code: Vue 컴포넌트 생성
    Code->>Dev: 실행 가능한 프로토타입
    Dev->>AI: "검색 기능도 추가해줘"
    AI->>Code: 검색 API 및 UI 추가
Loading

예시 2 : 디자인 컴포넌트 템플릿 개발 요청

Prompt 1: 웹사이트 테마 추출

https://linear.app/ 웹사이트의 테마를 그대로 사용해서 새로운 웹사이트를 만들고 싶어. 해당 사이트를 크롤링해서 테마 데이터를 JSON 형식으로 반환해줘. Playwright MCP를 사용해줘.

Prompt 2: 테마 기반 기본 컴포넌트 생성

방금 추출한 테마 JSON을 기반으로 /components 페이지를 만들고, 내가 확인할 수 있는 데모 컴포넌트들을 생성해줘. 이 컴포넌트들은 프로젝트 전반에 걸쳐 재사용될 예정이니, 일반화와 중앙화에 특히 신경 써줘.

{
  "themeName": "Linear Design System",
  "description": "Complete design theme extracted from Linear.app - modern dark theme with premium aesthetics",
  "version": "1.0.0",
  "colorScheme": "dark",
  "colors": { "text": {} }
}

Prompt 3: 추가 공통 컴포넌트 개발

공통 컴포넌트로 Carousel과 Card를 추가로 만들어줘. Card 컴포넌트는 이미지가 없는 경우에도 디자인이 깨지지 않아야 해. 이어서 Navbar, Footer, Hero 데모 컴포넌트도 작업해줘.

Prompt 4: 컴포넌트 스타일링 수정

Navbar와 Hero 컴포넌트가 항상 전체 너비(full-width)를 차지하도록 스타일을 수정해줘.

Prompt 5: 개발 규칙(Cursor Rule) 정의

지금까지 만든 모든 컴포넌트를 프로젝트 전체에서 일관되게 사용하도록 강제하는 cursor-rule을 만들어줘. 파일 경로는 .cursor/rules/components.mdc로 하고, 이 규칙이 항상 적용되도록 설정해.

규칙 내용:

  1. 기존에 정의된 컴포넌트를 우선적으로 재사용해야 한다.
  2. 임의로 새로운 컴포넌트를 생성해서는 안 된다.
  3. 새로운 컴포넌트가 반드시 필요한 경우, 사용자에게 어떤 컴포넌트가 왜 필요한지 먼저 질문하고 승인을 받은 후에만 작업을 진행해야 한다.

Prompt 6: 규칙을 이용한 신규 프로젝트 생성

@components.mdc 규칙을 적용해서, 전자기기 쇼핑몰 웹사이트의 홈페이지를 만들어줘. 전체적인 디자인은 다크 모드를 적용해줘.

Prompt 7: 특정 컴포넌트 스타일 변경

@badge.tsx 파일에서 success 상태의 기본 색상을 보라색으로 변경해줘.

refer

⚠️ **GitHub.com Fallback** ⚠️