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

Source: Dev.to

👻 Inspiration — When a Simple Idea Meets Real Need

나는 FixIt AI를 “멋져서” 만든 것이 아니다. 필요해서 만들었다 — 그리고 내 주변 사람들도 필요했다.

내가 사는 곳에서는 많은 기기 문제(느린 노트북, 깜빡이는 화면, 배터리 급소모)가 실제로는 기술자를 부를 필요가 없다. 하지만 지식 격차 때문에 사람들은 매번 비용을 지불한다. 실제 문제 해결에 열정을 가진 17세 개발자로서 나는 다음을 목표로 도구를 만들고 싶었다:

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

Kiroween이 나에게 창의적인 각도를 제공했다: “당신의 기기 문제를 유령처럼 사라지게” 하는 재미있고 으스스한 유령 어시스턴트. 이렇게 FixIt AI가 탄생했다.

🛠️ What FixIt AI Does

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

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

그 후에 다음을 생성한다:

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

Tech stack

• Frontend: Netlify (HTML, CSS, JS)
• Backend: Node.js + Express on Render
• AI logic: Kiro‑assisted diagnosis engine

⚙️ How I Used Kiro to Build FixIt AI

🟣 1. Vibe Coding — My Main Workflow

나는 Kiro를 페어 프로그래밍 팀원처럼 사용해 대화식으로 FixIt AI를 만들었다. Kiro는 다음을 도와줬다:

• 복잡한 프론트엔드 함수(예: showResult()) 재작성
• 다계층 수리 안내 구조 설계
• 으스스한 테마 UI 텍스트와 애니메이션 아이디어 작성
• 배포 오류와 Express 라우팅 문제 디버깅
• 진단 엔진 로직 구축
• JSON 응답 최적화
• 더 나은 추론을 위한 프롬프트 다듬기

🟣 2. Spec‑Driven Development

엔진 코딩 전에 나는 다음을 정의했다:

• 필요한 JSON 구조
• 예상 필드(심각도, 확률, 단계 등)
• 다중 레이어 출력
• UI 기대치
• 오류 처리 동작

이 사양을 Kiro에 전달했더니 일관된 로직을 생성해 개발 속도가 빨라졌고, 모순되는 출력도 방지할 수 있었다.

🟣 3. Steering

다음과 같은 스티어링 프롬프트를 사용했다:

• “이걸 완전히 다시 작성해서 더 전문적으로 만들어줘.”
• “출력을 개선하고, 더 으스스하게 만들되 읽기 쉽게 유지해.”
• “이걸 심사위원 친화적으로 바꿔.”
• “단순화; 이제 재구성; 이제 강화.”

각 라운드마다 Kiro가 내 요구에 더 가깝게 맞춰졌다.

🟣 4. Rapid Prototyping & Debugging

Kiro는 다음 문제 해결을 도와줬다:

• CORS 오류
• Render의 Node 버전 실패
• Express 의존성 경로 오류
• 프론트엔드/백엔드 연결 불일치
• CSS 애니메이션 배치 문제

🟣 5. Creativity + User Experience

Kiro는 또한 다음을 설계했다:

• 유령 로딩 애니메이션
• 빛나는 UI
• 으스스한 진단 응답
• 문제‑해결 스토리텔링
• 아키텍처 다이어그램
• 일일 진행 계획

FixIt AI는 해커톤 안에 끝낼 수 있을 거라 기대했던 것보다 훨씬 다듬어졌다.

🚀 What I Learned

• AI 추론을 전통적인 백엔드 로직과 결합하는 방법
• 복잡한 JSON 출력을 구조화하는 방법
• 전체 스택 앱을 배포하는 방법(Netlify + Render)
• 시간 압박 속에서 매력적인 UX를 설계하는 방법
• AI 어시스턴트와 협업하는 방법
• 사양‑주도 접근법이 얼마나 강력한지
• 혼자 코딩할 때보다 Kiro가 개발 속도를 얼마나 크게 높이는지

😅 Challenges I Faced

• Render에서 Express 디버깅
• 여전히 사용 가능하도록 으스스한 테마 디자인
• 무작위가 아닌 구조화된 출력 만들기
• 결과 UI를 여러 차례 재작성
• 시간 압박 — 모든 작업을 마치려면 하루 밖에 없었다

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

🎯 Final Thoughts

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

이것은 시작에 불과하다. 나는 FixIt AI를 더 크게 확장하고, 모든 기기 사용자에게 저렴한 진단 서비스를 제공할 계획이다.

🔗 Try It

• Frontend:
• Backend:
• Code: