Kiro: 즉시 금융 및 비용 추적

Source: Dev.to

Kiro를 사용하여 만든 가벼운 재무 및 예산 계산기로, 사용자가 비용을 빠르게 계산하고, 예산을 추적하며, 재정 상태를 in a fraction of a second 파악하도록 설계되었습니다.

이 프로젝트는 의도적으로 simple하고 beginner‑friendly하게 유지되어 Kiro를 학습하고, 데모를 만들거나, Kiro의 채팅 기반 인텔리전스가 실용적인 애플리케이션을 어떻게 구동할 수 있는지 보여주는 데 이상적입니다.

📌 개요

재정을 관리하는 데 항상 복잡한 회계 소프트웨어가 필요한 것은 아닙니다. 많은 사용자는 단순히 빠른 방법을 원합니다:

• 예산 입력
• 지출 추가
• 지출한 금액 확인
• 남은 금액 파악

Kiro – Simple Finance & Budget Calculator는 깔끔한 UI와 Kiro의 AI 기반 채팅 지원을 활용하여 정확히 이 문제를 해결합니다.

✨ 기능

• 예산 입력 – 총 예산 또는 수입 입력
• 지출 추적 – 이름과 금액으로 여러 지출 추가
• 즉시 계산
  • 총 지출
  • 남은 잔액
• 초과 지출 감지 – 지출이 예산을 초과하면 알림
• 키로 채팅 인터페이스 – 자연어로 재무 질문하기
• 미니멀하고 깔끔한 UI – 모든 사용자가 이해하기 쉬움

🛠️ 기술 스택

• Kiro – AI 어시스턴트 및 채팅 로직
• JavaScript / HTML / React
• Node.js
• Python

참고: 이 프로젝트는 무거운 백엔드 아키텍처보다 논리 단순성에 중점을 둡니다.

⚙️ 설치 및 설정

1️⃣ 사전 요구 사항

• Node.js (v16 이상 권장)
• npm 또는 yarn
• Kiro 계정

2️⃣ Kiro 설치

공식 Kiro 시작 가이드를 따라 주세요:
🔗

3️⃣ 저장소 복제

git clone https://github.com/Shreya111111/tracker-kiro

▶️ 작동 방식

1. 사용자가 예산 금액을 입력합니다.
2. 사용자가 개별 지출을 추가합니다.
3. 앱이 데이터를 즉시 처리하고 계산합니다:
   • 총 지출
   • 남은 잔액
4. 결과가 화면에 명확하게 표시됩니다.

Kiro가 돕는 방법

• 사용자 의도를 이해합니다
• 정확하게 계산을 수행합니다
• 간단하고 사람이 읽기 쉬운 답변을 제공합니다

💬 Kiro Chat 및 Spec을 활용한 설계·구현 단계

Kiro Chat은 디자인 씽킹 및 구현 보조 도구로서 프로젝트 전반에 걸쳐 사용되었으며, 아이디어 단계부터 실제 동작하는 재무·예산 계산기에 이르기까지 단계별 개발을 안내했습니다.

모든 로직이나 UI를 한 번에 작성하는 대신, Kiro Chat이 제시하는 단계별 가이드에 따라 개발이 진행되었습니다. 이는 Kiro의 공식 워크플로우 접근 방식에서 권장하는 방법입니다.

Kiro Spec의 핵심 구성 요소

Kiro는 새로운 기능이나 프로젝트마다 요구사항과 코드 간의 정렬을 보장하기 위해 일반적으로 다음 세 가지 마크다운 파일을 생성합니다:

• requirements.md – 사용자 스토리와 수용 기준을 캡처하며, 보통 EARS(Easy Approach to Requirements Syntax) 표기법을 사용합니다.
• design.md – 시퀀스 다이어그램(Mermaid 사용) 및 데이터 흐름 모델을 포함한 기술 아키텍처를 문서화합니다.
• tasks.md – 상세하고 추적 가능한 구현 계획을 제공합니다. Kiro는 설계를 개별 작업으로 분해하여 에이전트가 하나씩 실행할 수 있도록 합니다.

🧠 Phase 1: 문제 이해 및 범위 정의

첫 번째 단계는 앱이 해야 할 일과 하지 말아야 할 일을 명확히 정의하는 것이었습니다.

Kiro Chat 사용 예시 (프롬프트 예시)

• Help me define a finance and budget calculator for beginners
• What features should a basic budget calculator include?
• What should I avoid to keep the app simple?

결과

• 명확한 범위 정의
• 복잡한 재무 규칙 배제
• 예산, 지출 및 잔액에만 집중

이는 Kiro의 구현 전에 명확성을 먼저 확보한다는 지침과 일치합니다.

🎨 2단계: UI / UX 디자인 지원

Kiro Chat이 기본 UI 기획을 도왔습니다.

Kiro Chat 사용 예시 (프롬프트 예시)

• Suggest a UI layout for a budget calculator
• What input fields are required for this app?
• How should results be displayed clearly?

결과

• 예산 입력 필드
• 지출 항목명 + 금액 입력
• 총합 요약 섹션
• 미니멀하고 깔끔한 레이아웃

Kiro는 기능 요구사항을 간단한 UI 구성 요소로 변환하는 데 도움을 주었습니다.

🧩 3단계: 논리 및 계산 설계

코딩하기 전에 Kiro Chat을 사용하여 계산 논리를 검증했습니다.

Kiro Chat 사용 예시 (프롬프트 예시)

• How to calculate total expenses and remaining budget?
• What happens if expenses exceed the budget?
• Explain the logic in simple steps

결과

• 명확한 계산 흐름
• 초과 지출 조건 정의
• 구현하기 쉬운 논리

이 단계는 구현 전에 오류를 줄였습니다.

💻 Phase 4: 구현 지원

During development, Kiro Chat acted as a real‑time coding assistant.

Kiro Chat Usage (example prompts)

• Help me write simple logic for adding expenses
• How to update total dynamically when a new expense is added?
• Explain this code in simple terms

Outcome

• Faster implementation
• Cleaner logic
• Better understanding of each step

💬 5단계: 채팅 기반 사용자 상호작용

Kiro Chat도 사용자용 기능으로 통합되었습니다.

예시 사용자 질의

• What is my total expense?
• How much budget is left?
• Am I overspending?
• Summarize my expenses

Kiro는 이러한 질의들을 해석하고, 계산된 결과를 평이한 언어로 응답합니다.

🔁 Phase 6: Review & Refinement

마지막으로 Kiro Chat을 사용하여:

• 앱 흐름 검토
• 누락된 엣지 케이스 식별
• 작은 UX 개선 사항 제안

예시 프롬프트

• Review my budget calculator flow
• Identify edge cases for expense entry
• Suggest UX tweaks for the summary section

---

이것을 더 사용자 친화적으로 만들기 위한 개선점은 무엇일까요?

✅ Kiro 모범 사례와의 정렬

Kiro 공식 문서 및 가이드에 언급된 바와 같이, 이 단계적 접근 방식은 다음을 따릅니다:

• 명확한 문제 정의
• 반복적인 디자인
• 점진적인 구현
• 채팅을 통한 지속적인 검증

Kiro Chat은 코딩뿐만 아니라 생각하고, 설계하고, 애플리케이션을 끝까지 다듬는 과정에서도 효과적이었습니다.

📸 스크린샷

첨부된 스크린샷:

• 예산 입력 화면
• 비용 입력 화면
• 비용 요약
• Kiro 채팅 상호작용

📂 프로젝트 구조

kiro-finance-budget-calculator/
├── kiro.
├── vscode/
├── index.html
├── script.js
├── styles.css
└── README.md

🔗 GitHub 리포지토리

Repo Link

🎯 사용 사례

• 개인 월간 예산 관리
• 학생 지출 추적
• Kiro 학습 프로젝트
• 데모 또는 해커톤 제출
• AI‑기반 계산기 개념 증명

🚀 추가된 기능

• 비용 카테고리 (음식, 임대료, 여행 등)
• 월별 기록 추적
• 시각적 차트
• 모바일 친화적인 UI

🤝 Contributing

Contributions are welcome!

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Open a pull request

If you found this project useful, please ⭐ the repository and share your feedback!