AI 기반 제품 개발은 제품 관리자의 역할을 다른 사람을 위한 요구 사항 작성에서 AI 에이전트가 소프트웨어를 직접 구축하도록 지시하는 것으로 전환합니다. 이 접근 방식은 개발 시간을 몇 개월에서 몇 주로 단축하고 비용을 최대 99%까지 절감합니다.
'JIRA-프롬프트' 프레임워크
AI 에이전트(예: Bolt)와의 모든 상호 작용을 마치 시니어 개발자를 위한 고품질 티켓을 작성하는 것처럼 취급하세요.
1. 기술 범위 정의
일반적인 설명 대신 AI가 환경을 구성하는 데 필요한 특정 매개변수를 제공하세요.
- 핵심 기능 식별: "스트리밍, 재생 목록 및 MP3 파일 지원이 있는 Spotify 클론을 만드세요."
- 스택 지정: 원하는 통합을 명시하세요(예: "데이터베이스는 Supabase, 호스팅은 Netlify를 사용하세요").
- 데이터 컨텍스트 제공: 원시 데이터(예: LinkedIn 소개, CSV 행, 브랜드 가이드라인)를 프롬프트에 직접 붙여넣어 AI에 컨텍스트를 제공하세요.
2. 명세와 '분위기'의 균형 맞추기
AI 에이전트는 엄격한 요구 사항과 창의적 자유가 혼합될 때 가장 잘 작동합니다.
- 높은 명확성: 비즈니스 로직, 데이터 스키마, 사용자 흐름에 사용하세요.
- '분위기' 프롬프트: UI/UX의 경우 특정 CSS 대신 설명적인 언어를 사용하세요.
- 예시: "고급스러운 의료 기부 사이트처럼 보이게 만드세요—깔끔하고, 전문적이며, 신뢰할 수 있게."
- 예시: "더 예쁘고 현대적으로 만드세요."
3. 반복적 디버깅 구현
AI가 막히거나 오류를 생성할 때:
- 스크린샷 디버깅: UI 문제 또는 오류 메시지의 스크린샷을 업로드하고 "의도한 디자인과 일치하도록 수정하세요."라고 요청하세요.
- '언스턱' 프로토콜: 특정 로직 문제에 대해 AI가 3번 시도 후 실패하면 사람이 개입하는 접근 방식으로 전환하세요. 전문가 또는 개발자에게 해당 특정 문제를 해결하도록 문의하고, AI가 더 넓은 코드베이스를 담당하도록 유지하세요.
워크플로우: Figma에서 배포까지
1단계: 디자인 추출
직접 URL 방법을 사용하여 정적 디자인을 코드로 변환하세요.
- Figma 디자인 URL을 가져옵니다.
- AI 도구의 URL(예:
bolt.new/[FIGMA_URL])을 앞에 붙입니다. - 에이전트가 자산과 레이아웃을 '흡수'하여 초기 환경을 만들도록 허용합니다.
2단계: 라이브 프로토타이핑
Figma에서 프레임을 드래그하는 대신 기능 변경을 프롬프트합니다.
- "Supabase Auth를 사용하여 로그인 페이지를 추가하세요."
- "users 테이블에서 데이터를 가져오는 대시보드를 만드세요."
- QR 코드 미리보기를 통해 자신의 기기에서 앱을 실시간으로 테스트하세요.
3단계: 원클릭 배포
앱을 즉시 프로덕션 URL로 이동하세요.
- '배포'를 클릭합니다.
- 호스팅 제공업체(Netlify/Vercel)에 연결합니다.
- 사용자 정의 도메인을 연결하여 프로토타입을 라이브 비즈니스로 전환합니다.
예시
예시 1: '제로-투-마켓' CRM
- 컨텍스트: 기업가가 Stripe 결제가 포함된 맞춤형 CRM이 필요하지만 $30,000 에이전시 예산이 없습니다.
- 입력: "부동산 중개인을 위한 CRM을 구축하세요. 리드 추적, 월별 구독을 위한 Stripe 통합, AI 기반 이메일 초안 작성을 포함하세요. 깔끔하고 파란색 테마의 UI를 사용하세요."
- 적용: Bolt를 사용하여 기본 앱을 생성합니다. "'마지막 연락 날짜' 열을 추가하세요" 및 "Stripe 테스트 키를 통합하세요"와 같이 반복합니다.
- 출력: 약 $300의 추론 비용으로 3주 안에 구축된 수익 창출 SaaS 제품입니다.
예시 2: 빠른 마케팅 랜딩 페이지
- 컨텍스트: PM이 새 기능 실험을 위한 랜딩 페이지가 필요합니다.
- 입력: [LinkedIn 소개/브랜드 사양 붙여넣기] + "전문적인 포트폴리오 사이트를 만드세요. 전문적인 다크 모드를 사용하세요. 쉽게 편집할 수 있는 '현재 프로젝트' 섹션을 추가하세요."
- 적용: 사이트를 생성한 다음 "항목을 내 이메일로 보내는 연락처 양식을 추가하세요."라고 프롬프트합니다.
- 출력: 10분 이내에 트래픽을 받을 준비가 된 라이브 호스팅 URL입니다.
일반적인 함정
- 레거시 코드 마이그레이션: 20년 된 수천 개의 파일로 구성된 프로덕션 코드베이스를 브라우저 기반 AI 에이전트로 이동하려고 시도하지 마세요. 이러한 도구는 그린필드 프로젝트 또는 관리자 패널 및 마케팅 사이트와 같은 격리된 '팟'에 사용하세요.
- 첫 번째 초안에 너무 많은 프롬프트: 첫 번째 버전에 5페이지짜리 프롬프트를 작성하지 마세요. 'Spotify 클론' 베이스로 시작하고 AI가 혼동하지 않도록 기능을 하나씩 추가하세요.
- 결정론 무시: 코드는 결정적입니다. 즉, 실행되거나 실행되지 않습니다. AI가 손상된 앱을 생성하는 경우, 코드가 잘못되었다고 가정하기 전에 환경(WebContainer)이 부팅을 완료했는지 확인하세요.
- 디자이너로만 취급: UI에만 사용하지 마세요. '풀스택'(데이터베이스, 인증, API)을 구축하는 기능을 활용하여 프로토타입이 단순한 고충실도 목업이 아니라 실제로 기능하도록 보장하세요.