software

Kiro와 함께 MCP 타임 트래블러 만들기: Vibe Coding, Specs, Steering, Hooks, 그리고 MCP를 사용해 풀 스택 앱을 구축한 방법

발행: (2025년 12월 2일 오후 11:37 GMT+9)
7 min read
원문: Dev.to

Source: Dev.to

🎃 아이디어

앱은 사용자가 다음을 선택할 수 있게 합니다:

  • 언어 (Node, Python, Ruby)
  • 프레임워크 (Express, Django, Rails)
  • 연도 (2015–2025)

그리고 다음을 반환합니다:

  • 해당 연도에 맞는 올바른 런타임 버전
  • 패키지 매니저 버전
  • 프레임워크 버전
  • 관련 의존성
  • 생태계 변화에 대한 메모
  • npm, PyPI, RubyGems에서 가져온 실제 버전 데이터

본질적으로 개발자를 위한 “시간 여행기”입니다.

⚡ 1단계: Vibe Coding — 아이디어를 실제 코드로 전환

Kiro 안에서 vibe coding을 시작하면서 프로젝트를 설명했습니다:

“API, 웹 UI, 공유 타입 폴더, 그리고 실제 레지스트리를 조회하는 MCP 서버가 있는 모노레포가 필요해.”

Kiro는 즉시 다음을 생성했습니다:

  • 깔끔한 모노레포 레이아웃 (apps/api, apps/web, shared, mcp-server)
  • 초기 Express 라우트
  • TypeScript 타입
  • Vite + React 프론트엔드
  • MCP 도구 스켈레톤
  • 작동하는 /api/generate 개념 증명

몇 분 만에 아이디어가 기능하는 코드베이스로 변하는 모습을 보며 초기 모멘텀을 얻었고, 수동 코딩을 시작하기 전에 아키텍처를 검증할 수 있었습니다.

📘 2단계: Spec‑Driven Development — 구조 정의

두 개의 사양 파일을 추가했습니다:

  • .kiro/specs/app-spec.md
  • .kiro/specs/mcp-spec.md

각 사양에는 다음이 정의되었습니다:

  • 입력 및 출력
  • 오류 형태
  • 엣지 케이스
  • 타입 계약
  • 검증 규칙
  • API 동작
  • MCP 도구 동작

이 사양들로부터 Kiro는 모노레포 전체에 걸쳐 깔끔하고 일관된 코드를 다시 생성했습니다. 요구사항을 업데이트하려면 사양만 수정하면 되고, Kiro가 모든 서비스를 동기화해 주어 드리프트, 충돌, 오래된 파일이 발생하지 않았습니다.

🎛 3단계: Steering Docs — 코드베이스 일관성 유지

.kiro/steering/coding-style.md를 만들어 다음을 강제했습니다:

  • 폴더 구조
  • 네이밍 규칙
  • 오류 응답 형식
  • 주석 스타일
  • TypeScript 패턴
  • 파일 레이아웃
  • import 스타일

스티어링 문서를 추가한 뒤, 며칠 뒤에 생성된 파일이라도 모두 정의된 코드 스타일에 맞게 만들어졌으며, 프로젝트가 “단일 저자”가 만든 듯한 느낌을 주었습니다.

🔌 4단계: MCP Server — 데모에서 실제 앱으로 전환

맞춤형 MCP 서버가 프로젝트의 핵심입니다. 세 가지 MCP 도구를 구현했습니다:

  • npmHistoricalVersions
  • pypiHistoricalVersions
  • rubygemsHistoricalVersions

이 도구들은 실제 레지스트리 API를 호출해 정확한 버전 데이터를 가져옵니다. Kiro는 다음을 생성했습니다:

  • MCP 도구 스키마
  • 요청/응답 TypeScript 타입
  • 검증 로직
  • 오류 처리
  • 메인 MCP 서버 프레임워크와의 통합

이 MCP 레이어 덕분에 앱은 정적 모의 데이터가 아니라 실제 역사적 생태계 데이터를 기반으로 동작합니다.

🔁 5단계: Agent Hooks — 워크플로 자동화

두 개의 커스텀 훅을 추가했습니다:

  1. gen:scaffold – 업데이트된 사양을 기반으로 프로젝트 구조를 재생성합니다.
  2. pre-commit – 타입 체크와 가벼운 빌드 검증을 실행합니다.

이 훅들은 타입 불일치, 빌드 파손, 사양 드리프트를 방지해 전체 모노레포의 안전망 역할을 합니다.

🧪 6단계: API 및 프론트엔드 배포

심사위원이 프로젝트에 접근할 수 있도록:

  • API는 Heroku에 배포
  • 프론트엔드는 Vercel에 배포

모든 엔드포인트는 공개되어 있으며, 오픈소스이고 실시간으로 동작합니다.

💡 배운 점

  • Vibe coding은 초기 탐색을 가속화합니다.
  • 사양은 AI 출력물을 구조화되고 일관된 코드로 바꿔줍니다.
  • 스티어링 문서는 장기 AI‑생성 프로젝트에 필수적입니다.
  • MCP는 정적 스캐폴딩을 넘어 실제 통합을 가능하게 합니다.
  • 훅은 코드베이스를 건강하게 유지하고 자동으로 일관성을 보장합니다.

Kiro는 내 워크플로를 단순히 빠르게 만든 것이 아니라, 더 구조적이고 예측 가능하며 유지보수하기 쉬운 형태로 바꾸어 주었습니다.

🚀 MCP Time‑Traveler 체험하기

실시간 데모와 소스 코드를 확인해 “시간 여행기”가 어떻게 동작하는지 살펴보세요.

🎃 마무리 생각

솔로 개발자로서 MCP 서버, API, 프론트엔드가 포함된 다중 서비스 앱을 만드는 것은 보통 큰 도전입니다. Kiro의 vibe coding, 사양, 훅, 스티어링 생태계를 활용하면서 경험은 매끄럽고 가속화되었으며 즐거웠습니다. 이 프로젝트는 Kiro 없이는 만들 수 없었습니다.

Back to Blog

관련 글

더 보기 »