나는 Kiro의 Spec-Driven AI Development를 사용해 7일 만에 Yahoo Pipes 2.0을 만들었다

Source: Dev.to

Yahoo Pipes 문제

기술 업계에 어느 정도 연륜이 있는 사람이라면 Yahoo Pipes 를 기억할 것입니다. 제공했던 기능은 다음과 같습니다:

• 데이터 워크플로우를 위한 시각적 프로그래밍
• 코딩 불필요
• RSS 피드 가져오기, 필터링, 병합, 변환
• 결과를 어디든 출력

Yahoo는 2015년에 서비스를 종료했습니다. 개발자 커뮤니티는 크게 슬퍼했죠. Zapier, IFTTT, n8n 같은 대안이 있었지만, 그 완벽한 파워와 단순성의 균형을 잡지는 못했습니다.

내가 만든 것: GhostPipes

핵심 기능

🎯 ML‑기반 추천

“파이프라인을 위한 넷플릭스.” URL을 붙여넣거나 CSV를 업로드하거나 텍스트를 드롭하면 Ghost Pipes가 다음을 분석합니다:

• 입력 유형 (파일/URL/텍스트)
• MIME 타입 및 구조
• 사용 기록
• 파이프라인 성공률

각 파이프라인에 0‑100 점수를 매겨 상위 5개를 제안하며, 실행할 때마다 학습합니다.

🎨 산업 수준 시각 편집기

단순 노드 편집기가 아니라 실제 파이프처럼 보이는 편집기:

Bad:  Node1 -----> Node2
Good: Node1 ═══╗
              ║
          Node2

주요 특징:

• 두께 10 px SVG 파이프
• 부드러운 큐빅‑베지어 코너를 가진 90° 굽힘
• 충돌 회피 (파이프가 노드 주변을 우회)
• 엘보 부위에 장식용 조인트 패치
• requestAnimationFrame을 이용한 60 fps 드래그‑앤‑드롭

⚡ 35+ 노드 타입

입력, 처리, 출력 노드 전반을 포괄:

• HTTP 요청 (스케줄링 또는 일회성)
• 웹훅 (고유 URL 생성)
• 파일 작업 (CSV, JSON, HTML 파싱)
• AI 처리 (요약, 번역, 추출)
• 로직 (루프, 조건문, 스위치)
• 목적지 (다운로드, API POST, 이메일)

🔗 실시간 웹훅

각 파이프라인마다 고유 URL을 생성합니다. 외부 서비스가 트리거하면:

1. 백엔드가 토큰을 검증
2. 페이로드 크기를 확인
3. 파이프라인을 실행

구현 상세 (발췌):

If  kiro build backend
- [Kiro reads specs + steering]
- [Generates 15 files, 3,500 lines]
- [Tests pass on first run]

• 시간: 구현 5 일
• 품질: 즉시 프로덕션 사용 가능
• 유지보수성: 완전 문서화, 내 스타일 그대로 적용

Kiro의 마법 실전 예시

예시 1: SVG 파이프 챌린지

문제: “SVG를 몰라요. 현실적인 파이프를 만들려면 몇 주가 걸릴 것 같아요.”

해결:

• “산업용 파이프, 두께 10 px, 90° 굽힘, 부드러운 코너” 라고 설명
• 참고 이미지를 업로드

Kiro는 완전한 PathCalculator 클래스를 생성했습니다:

export class PathCalculator {
  calculateOrthogonalPath(start, end, obstacles) {
    // 120 lines of collision detection, waypoint generation,
    // Bezier curve insertion
  }

  generateSVGPath(waypoints) {
    // Converts to SVG with smooth corners
  }
}

결과: 완벽히 동작했고, 내가 직접 작성하지 않은 200+ 라인의 코드가 사라졌습니다.

예시 2: 35+ Om.js 웹 컴포넌트

문제: React에 특화된 AI가 커스텀 프레임워크에는 쓰레기를 만들어냅니다.

해결: /steering/om-js-framework.md에 Om.js를 문서화 (reactive proxy 시스템, html 템플릿 리터럴, @click 이벤트 바인딩, shadow DOM 없음).

Kiro의 출력 (FilterNode 컴포넌트):

import { react, html } from '/lib/om.compact.js';

export class FilterNode extends HTMLElement {
  state = react({
    mode: 'permit',
    rules: []
  });

  render() {
    return html`
      
         this.state.mode}>
          Permit
          Block
        
        ${this.state.rules.map(rule => this.renderRule(rule))}
      
    `;
  }
}

첫 시도부터 Om.js 문법이 완벽했습니다. 추가로 34개의 노드를 생성했으며 모두 오류 없이 동작했습니다.

예시 3: MCP를 통한 AWS 연동

배경: 프론트엔드 개발자이지만 AWS 사용 경험이 부족.

이슈: Aurora PostgreSQL 마이그레이션이 실패하고, 데이터베이스가 없다고 나옴.

Kiro + AWS MCP:

Me: "Here’s my Terraform config. Migrations fail. Database 'ghostpipes' doesn't exist."
Kiro: "RDS instance created, but database not initialized. Run:
CREATE DATABASE ghostpipes;

Also, your connection string is missing the DB name. Add: ?database=ghostpipes"

5 분 만에 해결되었습니다.

에이전트 훅스 비밀 무기

Kiro의 훅은 코드 품질을 지속적으로 모니터링합니다.

.kiro/hooks/pre-commit.js

// Check for leaked API keys
if (detectAPIKeys(changedFiles)) {
  fail("API key detected in commit!");
}

// Check manifest.json permissions
if (hasNewPermissions(manifest)) {
  warn("New permission added: " + newPerms);
}

.kiro/hooks/on-build.js

// Remove console.logs in production
stripDebugCode(distFiles);

// Check bundle size
if (extensionSize > 5 * 1024 * 1024) { // 5 MB
  fail("Extension too large: " + extensionSize);
}

이 훅들 덕분에 개발 중 12건의 이슈를 잡았습니다:

• 하드코딩된 테스트 API 키 2건
• 실수로 남긴 “ 권한 1건
• 남은 console.log 8건
• 잘못된 라이브러리 포함으로 인한 번들 크기 급증 1건

수치

배운 점

1. 스펙은 가치가 있다

스펙 작성에 2 일을 투자하는 것이 느리게 느껴졌지만, Kiro가 만든 깔끔한 코드 덕분에 2 주간의 리팩터링 시간을 절감했습니다.

• 잘못된 접근: 코드를 먼저 작성하고 나중에 문서화 (아예 안 할 수도 있음)
• 올바른 접근: 먼저 스펙을 만들고 그 다음 코딩

2. Steering Docs = 1 % 노력, 99 % 보상

스타일과 프레임워크 선호도를 한 번 정의해 두면, Kiro가 처음부터 여러분의 생태계에 맞는 코드를 자동으로 생성합니다.