Smart Wallet Dashboard
본문
개요
개인 자산을 한 화면에서 관리하는 대시보드입니다. 전체 자산 현황, 한 달 지출, 주식 계좌 손익을 함께 봅니다.
자산 관리 앱들이 대부분 모바일 중심이라 PC에서 편하게 볼 곳이 마땅치 않아 만들었습니다. AI와 구현 방식을 비교하며 금융 API와 시세 데이터를 연결하고, 기관마다 다른 파일 형식과 거래 예외가 같은 기준으로 집계되는지 직접 검증했습니다.
구현
- PC 웹 환경에 최적화한 대시보드 레이아웃 설계
- 다크모드 전환 시 색상이 부드럽게 넘어가도록 처리
- 통일한 거래 구조를 검색·필터·월별 수입과 지출 계산·자산 대시보드에 공통으로 활용
- 구독 캘린더에 결제일을 도트로 표시해 한눈에 파악되도록 구성
트러블슈팅
기관마다 다른 거래 형식이 집계되지 않음
은행과 카드사마다 CSV의 열 구성과 표현 방식이 달라 같은 기준으로 계산하기 어려웠습니다. 기관별 데이터를 공통 거래 구조로 변환하고, 따옴표 안의 쉼표·취소 거래·할부 금액·이체와 충전 같은 예외를 구분해 집계 오류를 줄였습니다.
연동 버튼 중복 요청
API 응답을 기다리는 동안에도 버튼이 활성 상태로 남아 있어, 응답이 늦으면 요청이 중복 발생했습니다. QA 시절 비동기 응답 지연에서 생기는 결함을 다뤄본 경험이 있어 연동 중임을 시각적으로 구분해야 한다고 판단했고, 요청 중에는 버튼을 비활성화하도록 방향을 잡았습니다.
더미 데이터가 시간이 지나며 사라짐
더미 거래내역 날짜를 고정 문자열로 넣어둬서, 실제 날짜가 그 시점을 지나자 이번 달 필터에 걸리는 데이터가 하나도 없어 차트가 0으로 표시됐습니다. 상대 날짜로 바꿔 방문 시점과 무관하게 최근 데이터가 보이도록 고쳤습니다.