서론

이 프로젝트를 위해 저는 기존의 예산 추적기(Budget Tracker) 애플리케이션에 간단한 AI 기반 예산 관리 비서를 추가하기로 결정했습니다. 이 애플리케이션은 이미 사용자가 예산을 설정하고 지출을 추적할 수 있게 해주었지만, 사용자들이 어떻게 소비를 더 잘 관리해야 하는지에 대한 안내는 제공하지 못했습니다. 여기에 AI를 통합함으로써, 애플리케이션은 이제 사용자의 예산 및 지출 정보를 분석하여 실용적인 예산 책정 제안을 생성할 수 있습니다.

이 기능의 목표는 기존의 예산 기능을 대체하는 것이 아니라, 사용자에게 더 나은 재정적 결정을 내리는 데 도움이 되는 빠른 통찰력을 제공함으로써 이를 향상시키는 것이었습니다.

왜 이 기능을 선택했는가

저는 예산 관리 애플리케이션들이 종종 거래 기록에만 초점을 맞추기 때문에 이 기능을 선택했습니다. 사용자는 돈이 어디로 가고 있는지를 볼 수는 있지만, 그 숫자들이 실제로 무엇을 의미하는지 또는 어떤 변화를 주어야 하는지 항상 알지는 못할 수 있습니다.

AI 예산 관리 비서를 추가함으로써, 애플리케이션은 사용자의 재정 데이터를 기반으로 개인화된 제안을 제공하여 더 유용해집니다. 단순히 예산과 지출을 표시하는 대신, 이제 애플리케이션은 사용자가 소비 습관을 파악하고, 과소비할 수 있는 영역을 인식하며, 더 나은 재정 계획을 세우도록 도울 수 있습니다.

이 기능은 또한 기존 사용자 경험을 변경하지 않으면서 애플리케이션의 목적에 자연스럽게 부합합니다.

기술적 결정 사항

이번 구현을 위해 저는 Vercel AI SDK와 Google의 Gemini 모델을 함께 사용했습니다. 제가 Gemini를 선택한 이유는 관대한 무료 등급(free tier)을 제공하고, 통합하기 쉬우며, 짧은 예산 책정 추천에 적합한 빠른 응답을 생성하기 때문입니다.

애플리케이션의 프론트엔드는 이미 React와 Vite로 구축되었으며, 예산 및 지출 데이터는 브라우저의 로컬 스토리지(local storage)에 저장됩니다. 사용자가 AI 조언을 요청하면, 애플리케이션은 저장된 예산 및 지출 데이터를 검색하여 AI 모델로 전송하고, 생성된 추천 사항을 애플리케이션 내부에 표시합니다.

API 키를 보호하기 위해 애플리케이션에 하드코딩하는 대신 환경 파일에 저장합니다.

통합 과정

첫 번째 단계는 필요한 AI SDK 패키지를 설치하여 기존 예산 추적기(Budget Tracker) 프로젝트를 AI 통합을 준비하는 것이었습니다. Google Gemini API 키를 얻은 후, 이를 환경 변수를 사용하여 안전하게 저장했습니다.

다음으로, 저는 AI 모델과 통신할 책임이 있는 백엔드 엔드포인트를 생성했습니다. 이 엔드포인트는 사용자의 예산 및 지출 데이터를 수신하고, 적절한 프롬프트를 구성하여 Gemini로 전송하며, 생성된 예산 책정 조언을 반환합니다.

프론트엔드에서는 'AI 예산 조언 받기(Get AI Budget Advice)' 버튼을 추가했습니다. 이 버튼이 클릭되면, 애플리케이션은 로컬 스토리지에서 사용자의 현재 예산 및 지출 데이터를 수집하여 백엔드로 전송합니다. 반환된 추천 사항은 대시보드 내부에 직접 표시됩니다.

또한 AI 서비스가 응답을 생성할 수 없는 경우 사용자에게 유용한 메시지를 받을 수 있도록 기본적인 오류 처리(error handling)도 포함했습니다.

겪었던 어려움

주요 어려움은 원래 프론트엔드 전용 React 프로젝트로 구축된 애플리케이션에 AI를 통합하는 것이었습니다. AI 모델은 사용자에게 노출되어서는 안 되는 API 키가 필요하기 때문에, 저는 AI 서비스와 안전하게 통신할 백엔드 엔드포인트를 도입해야 했습니다.

또 다른 어려움은 길고 일반적인 응답 대신 짧고 관련성 높은 예산 책정 추천을 생성하는 프롬프트를 설계하는 것이었습니다. 이를 위해 AI가 실용적인 재정 자문(financial advice)에만 집중하도록 프롬프트를 개선해야 했습니다.

회고

이 프로젝트를 계속 개선한다면, 현재의 예산 및 지출뿐만 아니라 시간에 따른 지출 패턴을 고려하여 AI 추천 사항을 더욱 개인화할 것입니다. 또한 로딩 인디케이터(loading indicators) 추가, AI 응답에 대한 더 나은 형식 지정(better formatting), 그리고 사용자가 후속 예산 질문을 할 수 있도록 하여 인터페이스를 개선할 것입니다.

전반적으로, 예산 추적기에 AI를 통합하는 과정은 인공지능이 기존 웹 애플리케이션에 비교적 작은 변경만으로도 실질적인 가치를 더하고 전반적인 사용자 경험을 개선할 수 있음을 보여주었습니다.