🎃 FixIt AI — 일주일 만에 Kiro를 사용해 전체 AI 수리 어시스턴트를 만든 방법

Source: Dev.to

위에 제공된 소스 링크 외에 번역할 텍스트가 포함되어 있지 않습니다. 번역을 원하는 본문 내용을 제공해 주시면 한국어로 번역해 드리겠습니다.

👻 영감 — 단순한 아이디어가 실제 필요와 만날 때

I didn’t build FixIt AI because it was “cool.” I built it because I needed it — and people around me needed it too.

Where I live, many device issues (slow laptop, flickering screen, draining battery) don’t actually require a technician. But the knowledge gap means people pay every time. As a 17‑year‑old developer passionate about solving real problems, I wanted to build a tool that:

• 사용자가 즉시 진단할 수 있게 함
• 불필요한 수리 비용을 줄임
• 청년 및 학생들이 “기술 긴급 상황”을 피하도록 도움
• AI를 활용해 하드웨어 접근성을 높임

Kiroween gave me the creative angle: a funny, spooky ghost assistant that “haunts away” your device problems. FixIt AI was born.

🛠️ FixIt AI가 하는 일

FixIt AI는 다음과 같은 증상을 분석합니다:

• “내 노트북이 과열되고 있어요”
• “내 폰이 충전되지 않아요”
• “내 전자레인지에서 불꽃이 튀어요”

그 후 다음을 생성합니다:

• 구조화된 진단
• 심각도 평가
• 예상 비용
• 기술자 필요 여부
• 초급, 중급, 고급 수리 단계
• 안전 경고
• 기기 수명 관련 메모
• 성공 확률
• 으스스한 분위기의 텍스트
• 처리 중에 빛나는 유령 애니메이션

기술 스택

• 프론트엔드: Netlify (HTML, CSS, JS)
• 백엔드: Render에서 Node.js + Express
• AI 로직: Kiro 지원 진단 엔진

Source: …

⚙️ How I Used Kiro to Build FixIt AI

🟣 1. Vibe Coding — My Main Workflow

I built FixIt AI conversationally, using Kiro like a pair‑programming teammate. Kiro helped me:

• rewrite complex frontend functions (e.g., showResult())
• design the multi‑tier repair instructions structure
• write spooky‑themed UI text and animation concepts
• debug deployment errors and Express routing issues
• build the diagnosis engine logic
• optimize JSON responses
• refine prompts for better reasoning

🟣 2. Spec‑Driven Development

Before coding the engine, I defined:

• required JSON structure
• expected fields (severity, probability, steps)
• multi‑layer outputs
• UI expectations
• error‑handling behavior

I handed this spec to Kiro, which generated consistent logic, speeding development and preventing contradictory outputs.

🟣 3. Steering

I used steering prompts such as:

• “Rewrite this completely to be more professional.”
• “Improve the output, make it spookier but still readable.”
• “Make this judge‑friendly.”
• “Simplify; now restructure it; now enhance it.”

Each round aligned Kiro more closely with my needs.

🟣 4. Rapid Prototyping & Debugging

Kiro helped me solve:

• CORS errors
• Render’s Node version failure
• Express incorrect dependency path
• Frontend/backend connection mismatch
• CSS animation placement issues

🟣 5. Creativity + User Experience

Kiro also shaped:

• the ghost loading animation
• the glowing UI
• the spooky diagnostic responses
• problem‑to‑solution storytelling
• architecture diagrams
• day‑by‑day plan

FixIt AI ended up looking more polished than anything I expected to finish within a hackathon.

🚀 내가 배운 것

• AI 추론을 기존 백엔드 로직과 결합하는 방법
• 복잡한 JSON 출력 구조화 방법
• 풀스택 앱을 배포하는 방법 (Netlify + Render)
• 시간 압박 속에서 매력적인 UX를 설계하는 방법
• AI 어시스턴트와 협업하는 방법
• 사양 기반 접근 방식이 얼마나 강력한지
• 순수 코딩에 비해 Kiro가 개발을 얼마나 가속화하는지

😅 직면한 도전 과제

• Render에서 Express 디버깅
• 여전히 사용하기 쉬운 스푸키 테마 디자인
• 무작위가 아닌 구조화된 출력 만들기
• 결과 UI를 여러 번 다시 작성
• 시간 압박 — 모든 작업을 마치는 데 하루밖에 없었습니다

Kiro가 모든 난관을 극복하도록 도와줬습니다.

🎯 Final Thoughts

FixIt AI는 단순히 할로윈 테마 앱이 아닙니다. 매일 실제 사람들에게 영향을 미치는 실제 문제를 해결합니다. Kiroween은 제한된 자원으로도, 올바른 AI 도구와 결합하면 혼자서도 유용하고 아름다우며 영향력 있는 것을 만들 수 있다는 것을 가르쳐 주었습니다.

이것은 시작에 불과합니다. 저는 FixIt AI를 더 큰 무언가로 확장하고, 저렴한 진단을 기기만 있으면 누구에게든 제공하려고 계획하고 있습니다.

🔗 시도해 보기

• 프론트엔드:
• 백엔드:
• 코드: