나는 kiro IDE를 사용해 지루한 스펙 일수를 시각화하는 Kiro Extension을 만들었습니다
Source: Dev.to
아이디어의 불꽃
상상해 보세요: 평범한 화요일. 저는 Kiro IDE를 사용해 프로젝트 사양을 관리하고 있습니다. tasks.md를 백 번째로 열면서 생각했죠…
“이 마크다운 파일들 너무 지루해. 만약… 무시무시하게 변한다면?” 🎃
그 한 마디와 Kiro AI의 힘이 결합돼 SpecterFlow가 탄생했습니다 — 지루한 사양 파일을 전기 테슬라 코일, 애니메이션 커서, 네온 빛 인터페이스가 있는 인터랙티브하고 무시무시한 테마 시각 경험으로 바꾸는 Kiro 확장입니다.
전체 코드의 80 %가 AI에 의해 단 3일 만에 작성되었습니다!
SpecterFlow란?
SpecterFlow는 .kiro/specs/ 마크다운 파일을 세 가지 테마 뷰로 살아나게 하는 Kiro 확장입니다:
🪦 묘지 (tasks.md)
칸반 보드가 묘지로 변합니다:
- 돌 텍스처가 입힌 무덤 모양 카드
- 모든 카드에 전기 테슬라 코일 스파크
- 작업을 완료하면 유령 축하 효과
- 카드를 드래그하면 에크트플라즘 트레일
- 컬럼: 신선한 무덤 → 부활 중 → R.I.P.
📜 마법서 (requirements.md)
요구사항이 고대 주문서가 됩니다:
- 양피지 텍스처와 신비로운 룬
- 물결치는 텍스트 애니메이션 (6가지 스타일)
- 분할 뷰: 사용자 스토리 ↔ 수용 기준
- 펄싱 효과가 있는 네온 숫자 배지
- 고대 서적 느낌을 주는 Crimson Text 폰트
🔮 영혼 보드 (design.md)
디자인 문서가 오우지아 보드가 됩니다:
- 신비로운 네비게이션 사이드바
- 빛나는 크리스탈 이모지
- 트리 뷰의 전기 가지
- 네온 버튼이 있는 부드러운 스크롤
AI‑구동 개발 여정
1일차 – 사양‑주도 개발
Kiro의 사양‑주도 워크플로우로 시작하며 물었습니다:
“
.kiro/specs파일을 무시무시한 테마로 시각화하는 Kiro 확장을 만들고 싶어요.”
Kiro는 다음을 생성했습니다:
requirements.md– EARS 패턴과 수용 기준 포함design.md– 아키텍처, 컴포넌트, 정확성 속성tasks.md– 30개의 상세 구현 작업
그 뒤 초기 코드를 만들었습니다:
- 확장 활성화 로직
- 커스텀 에디터 프로바이더
- 파일‑시스템 스캐너
- 마크다운 파서(이벤트‑드리븐 아키텍처)
- 기본 웹뷰 구조
1일차에 Kiro가 작성한 코드 라인: 약 800줄
2일차 – 바이브 코딩 매직
“바이브 코딩” 모드로 전환해 원하는 것을 설명했습니다:
Me: “전기 테슬라 코일 효과를 넣어 무시무시하게 만들어줘!”
Kiro: 테슬라 코일 스파크 애니메이션, 번개 SVG, 플라즈마 구, 전기 입자, 전압 아크를 포함한 500줄의 CSS를 생성.
Me: “물결치는 텍스트 애니메이션을 추가해!”
Kiro: 파동, 글리치 파동, 떠다니는 파동, 네온 파동, 레인보우 파동, 액체 파동 등 전체 애니메이션 시스템을 제작.
Me: “입자 트레일이 있는 커스텀 커서를 만들어!”
Kiro: 빛나는 커서, 입자 트레일, 클릭 폭발, GPU 가속 렌더링, 60 fps를 위한 스로틀링을 구현한 최적화된 JavaScript를 구축.
2일차에 Kiro가 작성한 코드 라인: 약 2,500줄
3일차 – 마무리 & 성능 최적화
최적화와 마무리에 집중했습니다:
Me: “커서가 느려. 최적화해줘!”
Kiro: 트레일 생성 스로틀링, 입자 수 감소, GPU 가속을 위한 will-change, left/top 대신 transform 사용, 패시브 이벤트 리스너와 이벤트 위임을 적용해 리팩터링.
Me: “폰트가 별로야. 더 좋은 걸로 바꿔!”
Kiro: 옵션을 분석하고 지능형 폰트 계층 구조를 생성 (헤더는 October Twilight, UI는 Jura, 마법서는 Crimson Text, 코드용은 Share Tech Mono).
3일차에 Kiro가 작성한 코드 라인: 약 900줄
숫자로 보는 성과
- 3,500+줄의 CSS (애니메이션, 효과, 레이아웃)
- 1,200+줄의 JavaScript (파서, 컴포넌트, 인터랙션)
- 17+ 종류의 입자 효과 (스파크, 트레일, 폭발 등)
- 6가지 밝은 네온 색상 (신중히 선택된 팔레트)
- 5가지 폰트 패밀리 (지능적으로 선정)
- 8개 에이전트 훅 (자동화 워크플로)
- 9개 MCP 서버 (확장 기능)
- 완전한 문서화 (가이드, README, 주석)
총합: 3일 만에 약 5,000줄의 프로덕션‑레디 코드!
비밀 소스: Kiro가 어떻게 했을까
1. 사양‑주도 개발
Kiro는 구조화된 개발에 강합니다. 먼저 포괄적인 사양을 만들면 명확한 로드맵이 생깁니다:
## Requirement 1: Graveyard Kanban Board
**User Story:** As a developer, I want to see my tasks as tombstones...
### Acceptance Criteria
1. WHEN a user opens `tasks.md` THEN the system SHALL display a kanban board
2. WHEN a task is dragged THEN the system SHALL show an ectoplasm trail
3. WHEN a task is completed THEN the system SHALL trigger ghost celebration이 명확성 덕분에 Kiro는 요구사항에 정확히 부합하는 코드를 생성했습니다.
2. 바이브 코딩
창의적인 기능을 위해 바이브 코딩을 활용했습니다:
Me: "Make it feel like a haunted computer terminal from the 80s"
Kiro: *generates Share Tech Mono font, CRT effects, scanlines*
Me: "Add electric sparks like a Tesla coil"
Kiro: *creates complete particle system with physics*Kiro는 바이브를 이해하고 코드를 구현했습니다.
3. 에이전트 훅
훅을 사용해 워크플로를 자동화했습니다:
{
"name": "Compile on Save",
"trigger": { "type": "onFileSave", "filePattern": "**/*.ts" },
"action": { "type": "executeCommand", "command": "npm run compile" }
}TypeScript 파일을 저장할 때마다 Kiro가 자동으로 컴파일했습니다.
4. 스티어링 문서
스티어링 문서는 Kiro의 코딩 스타일을 안내합니다:
# JavaScript Patterns
- Use classes instead of @typedef
- Prefer ternary over if‑else for assignments
- Use object lookups instead of switch statements
- Keep functions concise (single responsibility)이 덕분에 일관되고 고품질의 코드가 유지되었습니다.
5. MCP 서버
확장된 기능을 위해 MCP 서버를 활성화했습니다:
- vscode‑extension – Kiro 확장 API 검색
- npm – 패키지 찾기 및 제안
- fetch – 웹에서 문서 가져오기
- typescript – 실시간 타입 검사
이들 덕분에 Kiro는 기본 지식을 넘어선 슈퍼파워를 얻었습니다.
가장 인상적인 코드 생성
전기 테슬라 코일 효과는 정말 놀라웠습니다. 제가 이렇게 말했죠:
“Add electric sparks like a Tesla coil”
Kiro는 다음과 같은 CSS를 만들어냈습니다:
@keyframes teslaCoil {
0%, 100% {
opacity: 0;
transform: scale(0.8) translateY(0);
}
10% {
opacity: 1;
transform: scale(1) translateY(-5px);
}
20% {
opacity: 0;
transform: scale(0.9) translateY(-10px);
}
/* ... continues with perfect timing ... */
}
.electric-spark {
position: absolute;
width: 2px;
height: 20px;
background: linear-gradient(180deg, #00ffff 0%, #0080ff 50%, transparent 100%);
box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #0080ff;
animation: teslaCoil 1.5s ease-in-out infinite;
}또한 Kiro는 스파크를 생성하고 수명 주기를 관리하며 성능을 최적화하는 JavaScript도 한 문장으로 만들어냈습니다.
성능: 깜짝 승리
커서 지연을 언급했을 때 Kiro는:
- 병목 현상(과도한 입자) 파악
- 50 ms 간격 스로틀링 구현
- 입자 수 감소 및
will-change로 GPU 가속 적용 left/top대신transform기반 이동 전환- 패시브 이벤트 리스너와 이벤트 위임 추가
그 결과 부드러운 60 fps 경험을 얻었으며 눈에 띄는 지연이 사라졌습니다.