MCP Time‑Traveler를 Kiro와 함께 만든 방법: Vibe Coding, Specs, Steering, Hooks, 그리고 MCP에 대한 개발자 여정

Source: Dev.to

🌱 아이디어가 시작된 곳

개발자들은 흔히 “어떤 스택을 써야 할까?” 라고 이야기하지만, “5년 전이나 10년 전 이 스택은 어땠을까?” 라고는 거의 묻지 않는다.
나는 간단한 인터페이스를 상상했다:

1. 언어 선택 →
2. 프레임워크 선택 →
3. 연도 선택 →
4. 해당 연도의 전체 런타임 + 의존성 스택을 얻기.

여기서 트위스트는 데이터를 조작하고 싶지 않았다는 점이다—실제 패키지 레지스트리에서 가져오고 싶었다. 이를 위해 나는 다음이 필요했다:

• 프론트엔드
• API
• 공유 타입 레이어
• 커스텀 MCP 서버
• 실제 레지스트리 연동
• 엔드‑투‑엔드 Kiro 지원

솔로 개발자에게는 많은 작업이지만, Kiro 덕분에 놀라울 정도로 관리 가능하게 느껴졌다.

⚡ Vibe Coding: 자유로운 생각을 실제 프로젝트로

나는 vibe coding부터 시작했다—그냥 Kiro에게 개념을 이야기한 것뿐. 몇 분 안에 Kiro는 다음을 만들어냈다:

• 전체 모노레포 구조
• Express API
• React/Vite 프론트엔드
• 공유 TypeScript 타입
• 시작용 MCP 서버
• 초기 라우트와 검증 로직

Kiro는 처음부터 각 파트를 서로 맞추어 주었고, 마치 아키텍처를 이해하는 엔지니어와 짝 프로그래밍을 하는 느낌이었다.

📘 Specs: 탐색에서 구조화로

아이디어를 명확히 한 뒤, 나는 스펙‑드리븐 개발로 전환했다. 두 개의 스펙 파일을 작성했다:

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

이 스펙들은 다음을 정의했다:

• 입력/출력 계약
• 타입 구조
• 기대되는 API 동작
• 입력 검증
• 오류 형태
• 통합 포인트

그 다음 Kiro에게 이렇게 말했다:

Update the API implementation based on the current spec.

Kiro는 모든 것을 업데이트했다—API 라우트, 타입, 헬퍼 등—모노레포 전체에 일관되게. 스펙 덕분에 프로젝트가 탐색 단계에서 내부적으로 일관된 형태로 변모했다.

🎛 Steering Docs: Kiro에게 내 선호도를 가르치기

일관성을 보장하기 위해 .kiro/steering/coding-style.md에 다음을 기술했다:

• 네이밍 규칙
• 오류 포맷
• TypeScript 패턴
• 폴더 구조 규칙
• 기대되는 주석
• 파일 레이아웃 선호도

그 결과: 첫날 생성된 부분이든 다섯째 날 생성된 부분이든, 모든 파트가 같은 저자에게서 나온 듯 보였고, 정리 시간이 사라져 반복 속도가 빨라졌다.

🔌 MCP 서버: 프로젝트의 심장

커스텀 MCP 서버는 MCP Time‑Traveler를 단순 데모가 아니라 실제 서비스로 만든다. 나는 세 가지 MCP 도구를 구축했다:

• npm 히스토리 버전 조회
• PyPI 히스토리 버전 조회
• RubyGems 버전 조회

Kiro는 다음을 생성하는 데 도움을 줬다:

• MCP 도구 스키마
• 검증 로직
• 오류 처리
• 도구 핸들러 구현
• EOF‑안전 요청/응답 타입

MCP 레이어 덕분에 앱은 실제이고 정확한 생태계 데이터를 가져올 수 있었다—하드코딩된 값이 아니다. 예를 들어:

• 2015년 Node 4.9.1 + Express 4.13.4
• 2018년 Python 3.7.17 + Django 2.1.15

UI에 실제 역사적 스택이 나타나는 것을 보는 것은 마법과도 같았다.

🔁 Hooks: 당신을 느리게 하는 워크플로 자동화

두 개의 Kiro 에이전트 훅을 추가했다:

1. Scaffold regeneration hook – 스펙이 변경될 때마다 트리거되어 프로젝트 구조를 맞춰준다.
2. Pre‑commit hook – 타입 체크와 가벼운 빌드 단계를 수행한다.

이 훅들은 가드레일처럼 작동해, 솔로 개발자가 모든 세부 사항을 기억하지 않아도 규율과 일관성을 유지하도록 도와준다.

☁️ 전체 프로젝트 배포

• API → Heroku에 배포
• 프론트엔드 → Vercel에 배포
• MCP 서버 → 개발 중 Kiro가 로컬에서 실행
• GitHub Repo → 공개, 오픈 소스, MIT 라이선스

다음에서 직접 체험해 볼 수 있다:

• 프론트엔드:
• API health endpoint:
• 소스 코드:

💡 이 프로젝트가 가르쳐 준 것

• AI‑기반 IDE가 솔로 개발자를 어떻게 끌어올리는가
• vibe coding이 초기 탐색에 얼마나 유용한가
• 스펙이 구조와 장기 일관성을 어떻게 강제하는가
• Steering Docs가 코드베이스를 어떻게 통합하는가
• MCP가 AI와 실제 데이터 사이를 어떻게 연결하는가
• 훅이 반복 작업을 어떻게 자동화하는가

Kiro는 단순히 빠르게 빌드하도록 도와준 것이 아니라, 더 깔끔하고 예측 가능하며 즐겁게 만들도록 도와줬다.

🎃 마무리 생각

시작할 때 나는 MCP 서버가 가장 어려운 부분일 거라 생각했다. 실제로 가장 어려운 부분은 AI‑보조 IDE가 전체 멀티‑서비스 빌드를 안내할 수 있다는 믿음이었다. Kiro는 그 믿음을 일관되게, 신뢰할 수 있게, 창의적으로 실현했다. MCP Time‑Traveler는 해커톤 프로젝트를 넘어, 앞으로 만들고 싶은 도구들의 청사진이 되었다.