Vooster MCP 연동 + 개발 시작하는 방법

기획은 끝났는데, 어떻게 코딩 시작하지?

"좋아, PRD도 만들었고, TRD도 완성했어. 이제 뭘 해야 하지?"

Vooster AI에서 아이디어를 구체화하고, 7가지 기획 문서를 자동으로 생성했습니다. 태스크도 깔끔하게 분해되어 있습니다. 하지만 막상 코딩을 시작하려니 막막합니다. AI 코딩 도구에게 이 모든 맥락을 어떻게 전달할까요?

Vooster AI의 7단계 워크플로우를 기억하시나요?

1️⃣ Vooster AI에서 아이디어 입력 2️⃣ (선택) FullSaaS 템플릿 적용 3️⃣ 기획자 에이전트와 티키타카하며 구체화 4️⃣ 7가지 문서 + 프롬프트 생성완료! 5️⃣ Vooster AI MCP 연동 ← 지금 여기! 6️⃣ 'vooster-ai야, 구현해줘' 명령 7️⃣ 끝

이 글에서는 5단계인 MCP 연동부터 실제 코딩 시작까지, 5분 만에 완료하는 방법을 알려드립니다. 복잡한 설정은 없습니다. 간단한 JSON 파일 하나면 충분합니다.

MCP가 무엇인지 궁금하다면 "AI 코딩 도구에 55조원 쏟아진 2025년, 제대로 쓰는 법은 따로 있다" 글을 먼저 읽어보세요.

사전 준비 - Vooster 기획 완료 확인

MCP를 연동하기 전에, Vooster AI에서 기획이 제대로 완료되었는지 확인하세요.

7가지 문서 생성 확인

Vooster AI 대시보드에서 다음 문서들이 모두 생성되었는지 체크하세요:

1. PRD (Product Requirements Document) - 제품 요구사항 정의
2. TRD (Technical Requirements Document) - 기술 스택 및 아키텍처
3. User Journey - 사용자 흐름 시각화
4. ERD (Entity Relationship Diagram) - 데이터베이스 설계
5. Design Guide - 컬러, 타이포그래피, UI 컴포넌트
6. IA (Information Architecture) - 사이트맵, 네비게이션
7. Code Guideline - 코딩 규칙 및 컨벤션

이 문서들이 AI 코딩 도구가 읽을 설계도입니다. 문서가 완성되지 않았다면 먼저 Vooster AI에서 기획을 완료하세요.

Task 분해 완료 확인

Vooster AI의 칸반 보드에서 태스크 목록을 확인하세요. "사용자 회원가입 기능 구현", "결제 시스템 연동" 같은 구체적인 태스크들이 보여야 합니다.

태스크가 분해되지 않았다면 AI 기획자 에이전트와 대화하며 구체화하세요. 초보자를 위한 Next.js SaaS 만드는 완벽 가이드에서 자세한 방법을 확인할 수 있습니다.

API Key 발급받기

MCP 연동에는 Vooster API 키가 필요합니다. 발급은 아주 간단합니다.

발급 방법

1. Vooster AI 대시보드 접속 (vooster.ai)
2. 우측 상단 프로필 클릭 → 설정 (Settings)
3. API Keys 탭으로 이동
4. "Generate New API Key" 버튼 클릭
5. 생성된 키를 복사하여 안전한 곳에 보관

⚠️ 중요: API 키는 한 번만 표시됩니다. 복사 후 안전한 곳에 저장하세요. 키를 분실하면 새로 발급받아야 합니다.

보안 주의사항

• API 키를 Git에 커밋하지 마세요
• .env 파일에 저장하고 .gitignore에 추가하세요
• 키가 노출되었다면 즉시 재발급하세요

Claude Code에서 MCP 연동

Claude Code는 Anthropic의 공식 CLI 도구입니다. 터미널에서 작동하며, 프로젝트 전체를 이해하는 데 특화되어 있습니다.

설정 파일 생성

프로젝트 루트 디렉토리에 .mcp.json 파일을 생성하세요:

{
  "mcpServers": {
    "vooster-ai": {
      "command": "npx",
      "args": ["-y", "--package=@vooster/mcp@latest", "vooster-ai", "--api-key=YOUR_API_KEY"],
      "type": "stdio"
    }
  }
}

YOUR_API_KEY 부분을 앞에서 발급받은 실제 API 키로 교체하세요.

연동 확인

1. Claude Code를 재시작하세요
2. 새로운 대화 시작
3. "내 프로젝트 목록 보여줘" 입력
4. Vooster AI에서 프로젝트 목록이 표시되면 연동 성공!

트러블슈팅

Q: "mcpServers not found" 오류가 나요 A: .mcp.json 파일이 프로젝트 루트에 있는지 확인하세요. 하위 폴더에 있으면 인식되지 않습니다.

Q: "Authentication failed" 오류가 나요 A: API 키가 정확한지 확인하세요. 공백이나 따옴표가 들어가면 안 됩니다.

Cursor에서 MCP 연동

Cursor는 VS Code 기반 AI 네이티브 에디터입니다. 실시간 코드 작성과 즉각적인 AI 도움에 최적화되어 있습니다.

설정 파일 생성

프로젝트 루트에 .cursor 폴더를 만들고, 그 안에 mcp.json 파일을 생성하세요:

mkdir -p .cursor

.cursor/mcp.json 파일 내용:

{
  "mcpServers": {
    "vooster-ai": {
      "command": "npx",
      "args": ["-y", "--package=@vooster/mcp@latest", "vooster-ai", "--api-key=YOUR_API_KEY"],
      "type": "stdio"
    }
  }
}

마찬가지로 YOUR_API_KEY를 실제 키로 교체하세요.

Cursor에서 확인

1. Cursor를 재시작하세요
2. Cmd/Ctrl + Shift + P → "Settings" 검색
3. MCP Servers 항목에서 "vooster-ai"가 활성화되어 있는지 확인
4. AI 채팅에서 "내 Vooster 프로젝트 목록 보여줘" 입력
5. 프로젝트 목록이 표시되면 성공!

유용한 단축키

• Cmd/Ctrl + K: 빠른 AI 명령
• Cmd/Ctrl + L: AI 채팅 열기
• Cmd/Ctrl + I: 인라인 AI 편집

프로젝트 연결하기

MCP 연동이 완료되었다면, 이제 작업할 프로젝트를 선택해야 합니다.

프로젝트 목록 확인

AI 코딩 도구에서 다음과 같이 대화하세요:

You: "내 프로젝트 목록 보여줘"

AI: [list_projects 도구 실행]

프로젝트 목록:
1. proj_abc123 - 쇼핑몰 SaaS
2. proj_def456 - 블로그 플랫폼
3. proj_ghi789 - 이커머스 대시보드

프로젝트 연결

작업할 프로젝트 ID를 복사하고 연결하세요:

You: "proj_abc123 프로젝트에 연결해줘"

AI: [connect_project 도구 실행]

✅ "쇼핑몰 SaaS" 프로젝트에 연결되었습니다.
이제 PRD, TRD, Task 목록에 접근할 수 있습니다.

문서 읽기 테스트

연결이 성공했는지 확인해보세요:

You: "PRD 내용 보여줘"

AI: [read_prd 도구 실행]

=== Product Requirements Document ===

프로젝트명: 쇼핑몰 SaaS
타겟 유저: 개인 셀러 및 소상공인

주요 기능:
1. 상품 관리 시스템
2. 주문 및 결제 처리
3. 고객 관리 CRM
...

PRD 내용이 정확히 표시되면 모든 설정이 완료된 것입니다!

첫 번째 태스크 구현하기 ⭐

드디어 코딩을 시작할 시간입니다. Vooster AI가 분해한 태스크를 하나씩 구현하면 됩니다.

다음 할 일 확인하기

AI에게 우선순위가 가장 높은 태스크를 물어보세요:

You: "다음에 할 작업 뭐야?"

AI: [get_next_task 도구 실행]

🎯 Next Priority Task

🆔 ID: T-001
📋 Title: 사용자 회원가입 기능 구현
📊 Status: backlog
⏰ Priority: high

📝 Description:
사용자가 이메일과 비밀번호로 회원가입할 수 있는 기능을 구현합니다.
이메일 인증을 포함하며, Clerk 인증 라이브러리를 사용합니다.

✅ Sub-tasks:
1. 회원가입 폼 UI 구현 (React Hook Form)
2. 이메일 인증 로직 구현
3. Clerk 연동 및 설정
4. Prisma User 스키마 업데이트

💡 Reference Documents:
- PRD Section 3.1: 사용자 인증
- TRD Section 2.3: Clerk 설정
- Design Guide: Form 컴포넌트 스타일

태스크 구현 시작

AI에게 구현을 요청하세요:

You: "T-001 구현해줘"

AI: "네, 태스크 T-001 '사용자 회원가입 기능 구현'을 시작하겠습니다.

먼저 관련 문서를 확인했습니다:
- PRD에 따르면 이메일 인증이 필수입니다
- TRD에서 Clerk 라이브러리 사용을 권장하고 있습니다
- Code Guideline에 따라 React Hook Form을 사용하겠습니다

구현 순서:
1. Clerk 설치 및 설정
2. 회원가입 폼 컴포넌트 생성
3. 이메일 인증 플로우 구현
4. Prisma 스키마 업데이트

시작할까요?"

You: "응, 시작해"

AI: [실제 코드 작성 시작]

✅ Step 1/4: Clerk 설치 완료
✅ Step 2/4: SignUpForm 컴포넌트 생성 완료
✅ Step 3/4: 이메일 인증 로직 구현 완료
✅ Step 4/4: Prisma 스키마 업데이트 완료

태스크 T-001이 완료되었습니다!
테스트 방법:
1. `pnpm dev` 실행
2. /signup 페이지 접속
3. 이메일 입력 후 인증 메일 확인

핵심 포인트

MCP를 사용하면:

• AI가 PRD, TRD를 자동으로 참고합니다
• Code Guideline에 맞춰 일관된 코드를 작성합니다
• 디자인 가이드를 준수하여 UI를 구현합니다
• 매번 맥락을 설명할 필요가 없습니다

단 한 줄 "T-001 구현해줘"만으로 충분합니다!

태스크 상태 업데이트

작업이 완료되면 상태를 업데이트하세요:

You: "T-001 완료로 표시해줘"

AI: [update_task_status 도구 실행]

✅ Task T-001 상태가 'done'으로 변경되었습니다.

다음 우선순위 태스크:
🆔 ID: T-002
📋 Title: 로그인 기능 구현

Vooster AI 대시보드에서도 칸반 보드가 실시간으로 업데이트됩니다!

FullSaaS 템플릿 활용

MAX 요금제 사용자라면 FullSaaS 템플릿을 활용하세요. MCP와 조합하면 개발 속도가 3배 이상 빨라집니다.

FullSaaS 템플릿에 포함된 것들

1. 완전한 인증 시스템: Clerk 기반 회원가입/로그인
2. 구독 결제: Stripe 연동으로 SaaS 결제 준비 완료
3. 관리자 대시보드: 사용자 관리, 통계, 설정 페이지
4. 모노레포 구조:
   • apps/www: 랜딩 페이지 (Next.js)
   • apps/app: 대시보드 (Next.js)
   • packages/*: 공유 라이브러리
5. tRPC API: 타입 안전한 API 통신
6. Prisma ORM: PostgreSQL 데이터베이스 관리

MCP + FullSaaS 조합의 장점

템플릿 없이 MCP만 사용:

• AI가 프로젝트 구조부터 만들어야 함
• 설정 파일, 인증, DB 연동 등 기본 설정에 시간 소모
• 토큰 비용 ↑, 실수 가능성 ↑

템플릿 + MCP 조합:

• 검증된 코드 구조가 이미 완성됨
• AI는 비즈니스 로직 구현에만 집중
• 토큰 비용 ↓, 개발 속도 ↑↑↑

템플릿 적용 방법

Vooster AI에서 프로젝트 생성 시 "FullSaaS 템플릿 사용" 옵션을 선택하세요. AI가 템플릿 구조에 맞춰 PRD, TRD를 자동 생성합니다.

MCP 주요 도구 한눈에 보기

Vooster MCP가 제공하는 도구들을 정리했습니다. AI가 자동으로 사용하지만, 알아두면 대화가 더 정확해집니다.

실전 활용 예시

# 프로젝트 전환
"proj_def456으로 전환해줘"

# 특정 문서 확인
"TRD에서 데이터베이스 설계 부분만 보여줘"

# 태스크 필터링
"백엔드 관련 태스크만 보여줘"

# 우선순위 태스크 3개
"다음에 할 태스크 3개 알려줘"

# 태스크 검색
"로그인 관련 태스크 찾아줘"

결론 - 7단계 완주, 이제 구현만 남았다

지금까지 Vooster MCP 연동 방법을 살펴봤습니다. 7단계 워크플로우를 다시 정리하면:

1️⃣ Vooster AI에서 아이디어 입력 ✅ 2️⃣ (선택) FullSaaS 템플릿 적용 ✅ 3️⃣ 기획자 에이전트와 티키타카하며 구체화 ✅ 4️⃣ 7가지 문서 + 프롬프트 생성완료! ✅ 5️⃣ Vooster AI MCP 연동 ✅ ← 이 글에서 완료! 6️⃣ 'vooster-ai야, 구현해줘' 명령 ← 이제 여기! 7️⃣ 끝

5분 만에 할 수 있는 것들

• ✅ API 키 발급 (1분)
• ✅ Claude Code 또는 Cursor에 MCP 설정 (2분)
• ✅ 프로젝트 연결 및 확인 (1분)
• ✅ 첫 번째 태스크 구현 시작 (1분)

총 5분이면 기획에서 코딩으로 넘어가는 모든 준비가 끝납니다.

Vooster AI와 함께라면

• 매번 AI에게 프로젝트를 설명할 필요가 없습니다
• PRD, TRD가 자동으로 코드에 반영됩니다
• 일관된 코드 품질과 스타일을 유지합니다
• 태스크 기반으로 체계적인 개발이 가능합니다

좋은 코드는 좋은 계획에서 시작됩니다. Vooster AI가 계획을 세우고, MCP가 AI와 연결하며, AI 코딩 도구가 실행합니다.

아이디어에서 실행까지, 모든 단계를 AI가 함께합니다.

지금 바로 시작하세요

**Vooster AI**에서 무료로 시작할 수 있습니다:

1. AI 기획자와 대화하며 아이디어 구체화
2. 7가지 문서 자동 생성
3. MCP로 Claude Code/Cursor 연동
4. "다음 할 일 뭐야?" 한마디로 개발 시작

함께 읽으면 좋은 글

• AI 코딩 도구에 55조원 쏟아진 2025년, 제대로 쓰는 법은 따로 있다
• 초보자를 위한 Next.js SaaS 만드는 완벽 가이드

오늘 Vooster AI와 함께 당신의 아이디어를 현실로 만들어보세요!