나만의 맞춤형 자산 관리, 가계부 웹 서비스 "자산노트" 개발 회고 💸

안녕하세요! 오늘은 제가 최근에 기획하고 직접 풀스택으로 개발을 진행한 맞춤형 가계부 및 자산 관리 서비스인 자산노트(Asset Note) 프로젝트에 대해 자세한 회고를 남겨보려고 합니다.

재테크와 자산 관리의 가장 기본적이면서도 중요한 첫걸음은 **“내가 돈을 어디에, 얼마나 쓰고 있는지”**를 정확하게 파악하는 것입니다. 시중에는 뱅크샐러드, 토스 등 훌륭한 자동 가계부 어플리케이션들이 이미 많이 나와 있습니다. 하지만 너무 많은 기능들이 오히려 화면을 복잡하게 만들거나, 제가 원하는 통계 방식대로 볼 수 없다는 아쉬움이 늘 있었습니다.

그래서 **“가장 최소한의 조작으로, 내가 원하는 직관적인 통계만 깔끔하게 보여주는 웹 가계부를 직접 만들어보자!”**는 생각으로 구상하여 탄생한 것이 바로 “자산노트”입니다.

✨ 자산노트의 3가지 핵심 철학

프로젝트 기획 단계에서부터 아래 세 가지 핵심 가치에 집중했습니다.

1. 한눈에 들어오는 직관적인 UI/UX

금융 서비스 특성상 숫자가 많아지면 눈이 피로해집니다. 이를 방지하기 위해 불필요한 장식과 어려운 금융 용어를 최대한 배제했습니다. 언제, 어디에, 알마를 썼는지 달력 형태와 리스트 형태로 명확하게 토글하며 볼 수 있도록 뷰를 심플하게 구성했습니다.

2. 목표 달성을 돕는 강력한 동기부여 요소

단순히 이번 달에 얼마를 썼는지 “기록만” 하는 것은 반쪽짜리 가계부라고 생각합니다. 자산노트는 유저가 초기에 설정한 **‘월간 목표 예산’**과 **‘저축 목표량’**을 기반으로 현재 지출 속도를 분석해 줍니다. “이 페이스대로라면 목표 예산 초과가 예상됩니다” 등 스스로 지출 멘탈을 잡을 수 있게 돕는 시스템을 고민했습니다.

3. 언제 어디서나 접근 가능한 스마트한 자산 관리

앱 설치라는 심리적 장벽 없이, 언제 어디서든 스마트폰 웹 브라우저나 데스크톱 환경에서 빠르게 접속할 수 있도록 PWA(Progressive Web App) 및 반응형 웹으로 개발했습니다.

💻 Tech Stack & Architecture (이렇게 구현했습니다)

성능 최적화와 안정적인 사용자 경험을 제공하기 위해, 고민 끝에 아래와 같은 모던 웹 기술 스택을 선정하여 아낌없이 활용했습니다.

  • Frontend: Next.js 15 기반의 React를 채택했습니다. App Router 기반의 서버 사이드 렌더링(SSR)을 통해 빠른 초기 로딩 속도를 확보했고, 스타일링은 Tailwind CSS를 사용하여 클래스명 고민 없이 직관적으로 UI 컴포넌트를 조립해 나갔습니다.
  • Backend & Database: 데이터베이스는 빠르고 안정적인 관계형 DB인 PostgreSQL을 선택했습니다. 그리고 SQL을 직접 작성하는 대신 타입 안정성을 보장해주는 Prisma ORM을 도입했습니다. 덕분에 런타임 에러를 획기적으로 줄이며 개발 생산성을 높일 수 있었습니다.
  • Authentication: 유저 개인의 민감한 자산 데이터가 들어가는 만큼 보안이 중요했습니다. 직접 세션을 구현하기보다 안정성이 검증된 NextAuth.js 모듈을 도입하여 각종 OAuth 소셜 로그인과 안전한 세션 관리 시스템을 며칠 만에 빠르게 구축했습니다.
  • Charts & Animation: 단순히 표로 숫자만 보여주면 재미가 없습니다. 데이터 시각화를 위해 Recharts 라이브러리를 도입하여 카테고리별 지출 비율 등을 도넛 차트로 보여주고, 뷰 전환 시 뚝뚝 끊기지 않도록 Framer Motion을 활용해 마이크로 인터랙션과 부드러운 애니메이션을 적용했습니다.
  • Cross-Platform 확장성 고려: 현재는 웹 서비스지만 언젠가 네이티브 앱 심사를 구상하고 있어, 웹뷰 기반으로 안드로이드/iOS 패키징을 수월하게 해주는 Capacitor 환경도 미리 세팅해 두었습니다.

🛠️ 개발 과정에서 겪었던 어려움과 해결책

가장 많은 고민을 했던 부분은 **“데이터 시각화 렌더링 성능”**이었습니다. 1년 치 지출 내역(수백, 수천 건의 트랜잭션 데이터)을 한 번에 불러와 카테고리별로 그룹핑(Grouping)하고 계산하여 차트에 바인딩하는 연산은 클라이언트에서 수행하면 메인 스레드에 병목을 일으킬 수 있었습니다.

이를 해결하기 위해 날짜 필터링과 데이터 집계 로직을 Prisma의 집계 함수(groupBy, _sum 등)를 통해 데이터베이스 서버단에서 1차 가공된 상태로 응답하도록 백엔드 구조를 최적화했습니다. 그 결과 무거운 반복문 연산이 사라져 Frontend의 차트 렌더링 비용을 큰 폭으로 줄일 수 있었습니다.

🚀 똑똑한 연말 정산을 위해, 지금 시작해보세요!

단순한 토이프로젝트로 시작했지만, 지금은 제가 매일매일 영수증을 확인하며 제일 유용하게 실사용하고 있는 최애 프로덕트가 되었습니다.

가입 절차도 매우 간단하니, 여러분도 지금 바로 접속하셔서 똑똑한 자산 관리의 첫걸음을 내디뎌보세요.

👉 자산노트 바로가기 (https://asset.hobokai.com/budget)

직접 사용해보시면서 불편한 점이나 “이런 카테고리 분류 기능이 추가되면 좋겠어요!” 같은 피드백이 있다면 언제든 편하게 이메일이나 댓글로 남겨주세요! 유저분들의 의견을 반영하여 계속해서 발전해 나가는 서비스가 되겠습니다.

긴 개발 회고 읽어주셔서 감사합니다. 다음에는 자산노트 업데이트 로그로 찾아오겠습니다.