프로젝트 시작하기 시작하기
사례 연구사례 템플릿 · Banking App
Banking App뱅킹 · 디지털 제품
오전 9:00의 알림: 이번 주에 쓰기에 카드 잔액 부족, 3일 후 종료되는 체험판, 갱신, 63일 동안 열지 않은 서비스, 가격 인상, 내일 4건의 청구, 예산 속도보다 37% 많은 지출
오늘 주의가 필요한 사항
인사이트: 동시에 두 개의 체육관, YouTube Music 이중 결제, 63일 동안 열지 않은 서비스, 각각 월 절약액, ‘해지’ 버튼, ‘나중에’ 포함
검토할 가치가 있는 비용
총 잔액, ‘Oracul의 제안’: 새 차를 위해 월 $2,834 저축(‘$2,834 추가’), 손에 닿는 14개월 치 지출, 월 $200를 더 내면 자동차 대출이 더 빨리 끝나는 방법
목표를 향한 다음 단계

서비스

  • 프로덕트 디자인
  • UX/UI 디자인
  • 프런트엔드 개발

도구

  • 수행해야 할 과업
  • 페르소나
  • 시장 조사
  • 경쟁사 분석
  • App Store 리뷰 분석
  • 사용자 흐름
  • 정보 구조

기술 스택

  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • shadcn/ui
  • Base UI
  • Recharts
  • Tesseract.js

Banking App

자신의 돈이 어떻게 움직이는지 이해하고 다음에 할 일을 결정하도록 돕는 뱅킹 앱 콘셉트입니다. 어시스턴트 Oracul은 평소와 다른 지출, 반복 청구, 예정된 납부를 설명 및 동작과 함께 보여 줍니다.

이 제품을 만든 이유

잔액은 남은 금액을 알려 주지만, 무엇이 바뀌었는지나 어떤 결정에 주의가 필요한지는 설명하지 않습니다. 저희는 일상적인 자금 관리가 보고서 읽기, 갱신일 기억하기, 결과를 직접 계산하기에 덜 의존하도록 만들고자 했습니다.

저희의 제품 결정

알아차리기, 설명하기, 행동하기를 하나의 흐름으로 만들었습니다. Oracul은 패턴을 짚어 주고, 그 뒤의 금액을 보여 주며, 관련된 다음 단계를 엽니다. 본인은 근거를 확인하고, 행동하거나, 나중으로 미룰 수 있습니다.

지금 주의가 필요한 결정과 앞으로의 계획을 분리했습니다. 갱신과 중복 청구에는 기한이 있고, 예산은 의도와 실제 지출을 비교하며, ‘만약에’는 돈이 움직이기 전에 변경안이 현재 계획에 미치는 영향을 보여 줍니다.

저희의 기여

제품 로직을 정의하고, 모바일 인터페이스를 디자인하고, 프런트엔드를 구축했습니다. 원래 콘셉트와 함께 미국 은행 및 결제 앱 여덟 개의 App Store 리뷰 4,000개를 검토하고 열두 개의 금융 제품을 비교했습니다. 이 작업은 반복 비용 이해부터 카드 정보 복사까지 일상의 불편을 구체적인 인터페이스 결정과 연결하는 데 도움이 되었습니다.

인사이트: 인사이트 7개로 월 $3,458 절약 가능, 월 예측, 연간, 이어서 ‘본인의 구매인가요?’와 예산 속도보다 37% 많은 지출
패턴과 예상 효과
인사이트: ‘토요일 음주를 줄이세요’, 4번의 토요일에 The Bungalow에서 $1,333, 이번 달 스포츠보다 많은 지출, 절반으로 줄이면 월 $722 확보, ‘토요일에 알림’ 포함, 그 아래 예산 속도를 넘은 라이프스타일과 두 개의 체육관
네 번의 토요일을 한 달로 환산

지출 패턴을 결정으로 연결합니다.

카테고리 합계만으로는 해석이 전적으로 본인 몫입니다. Oracul은 대신 구체적인 패턴을 짚어 줍니다. 한 바에서 보낸 네 번의 토요일, 그 비용, 지출을 줄이면 다른 우선순위에 얼마를 쓸 수 있는지입니다. 제안 옆에 숫자를 함께 제시하여 스스로 판단할 수 있습니다.

스크린샷은 샘플 거래를 사용합니다. 네 번의 토요일에 $1,333입니다. 월 $722 추정치는 평균 토요일 지출의 절반을 평균적인 한 달로 환산한 값입니다. 원본 거래를 보여 주어 이 추정치를 검토할 수 있습니다.

거래의 경고 부분: ‘은행에서 이 판매자를 확인할 수 없습니다’, 이어서 ‘문제가 있나요?’에서 ‘제가 구매하지 않았습니다’ 선택, ‘문제 신고’와 ‘지원팀에 문의’
신고 전에 구매 내역 검토
이미 입력된 계좌 간 이체: 주 계좌에서 ‘새 차’ 목표로 $2,834.00
미리 입력된 이체 검토

다음 단계를 이유와 연결합니다.

설명은 구체적인 행동으로 이어질 때 더 유용합니다. 낯선 결제 내역을 확인하면 해당 거래와 신고 옵션이 열립니다. 자동차 구입 자금을 모으라는 제안은 받는 곳과 금액이 이미 입력된 이체 화면을 엽니다.

결정은 본인에게 맡겼습니다. 세부 정보를 검토하고 동작을 확인합니다. 금액을 기억하고 맞는 화면을 다시 찾게 하는 대신 앱이 맥락을 이어 갑니다.

조치 필요: 결정이 필요한 8건을 기한이 가까운 순서로 표시. YouTube Music 이중 결제, 카드 업데이트, 잔액 부족, 각각 금액, 하나의 주요 동작, ‘확인’ 포함
기한순으로 정렬된 결정
YouTube Music 구독 해지 시트: 11월 23일까지 이용 가능, 잃게 되는 항목, 연 $131.88 절약, ‘대신 일시 중지’와 ‘구독 해지’
해지에 따른 결과
‘실물 상품’, ‘멤버십’ 옆의 ‘디지털’ 탭: 생산성 구독, 각각 가격, 다음 청구, 카드 표시, 하나에 ‘잔액 부족’ 플래그
유형별 반복 비용

다음 청구 전에 선택합니다.

구독 목록만으로는 무엇을 해야 할지 알 수 없습니다. ‘조치 필요’는 중복 결제, 종료되는 체험판, 가격 변경, 결제 문제를 가장 가까운 기한 순으로 보여 줍니다.

해지 전에 인터페이스에 비용, 남은 이용 기간, 잃게 되는 항목이 표시됩니다. 디지털 서비스, 배송, 멤버십은 별도 그룹으로 나뉘지만, 결정은 동일한 명확한 패턴을 따릅니다.

‘예상과 실제’의 Oracul 탭: 월 예산과 예측, 카테고리별 비교 막대(초과분은 빨간색), 가족 예산, 위쪽에 카테고리 타일
예상과 실제
한 카테고리의 분석, 차트 아래에 돈이 쓰인 곳과 비어 있는 메모 ‘이번 달에 왜 예산에 맞지 않았나요?’
예산에 맞지 않았던 이유
한도: 선물 주 $1,245, $1,617 지출, 이번 주 $372 초과. 그 아래 Oracul이 제안하는 생활용품, Etsy, Target, 바, 뷰티, Amazon 한도, 각각 30일간의 빈도와 금액 표시
한도

계획과 실제 결과를 비교합니다.

카테고리별로 예산과 실제 지출을 나란히 배치했습니다. 두 개의 보고서를 비교하지 않아도 차이를 바로 볼 수 있습니다.

메모는 평소와 다른 달의 이유를 남기고, 주간 또는 월간 한도는 반복 지출에 더 작은 범위를 줍니다. 이 둘은 무엇이 바뀌었는지, 왜 바뀌었는지, 다음에 무엇을 조정할지에 대한 실용적인 점검을 돕습니다.

‘만약에’: 이번 달 $15,000의 큰 구매, 주 계좌에 $12,849가 부족해진다는 경고, 이어서 잔액, 남은 예산, 월 순액의 변경 전후
현재 계획 대비 구매
진행률 링이 있는 목표: 주택 계약금은 지연, 아파트 리모델링은 위험, 새 차는 순조로움. 그 아래에 ‘만약에’와 필수 납부금
기존 샘플 목표의 진행 상황

결정하기 전에 득실을 확인합니다.

‘만약에’에서는 구매, 대출, 새 구독, 소득 변화를 샘플 재정에 적용해 볼 수 있습니다. 변경 전후를 나란히 놓고, 진행하기 전에 부족분을 알려 줍니다.

시나리오는 월 납입액이 있는 목표로 저장할 수 있습니다. 별도의 목표 화면에서 기존 샘플 목표의 진행 상황을 볼 수 있습니다. 예측을 약속처럼 제시하지 않으면서 선택을 살펴보기 쉽게 하는 것이 목적입니다.

잔액에서 신중한 다음 단계로.

이 결과물은 문제를 알아차리고, 이해하고, 조치하는 과정을 하나의 경험으로 묶습니다. 샘플 데이터로 인사이트, 예산, 반복 결제, 계획 시나리오를 살펴보세요. 금액은 날짜에 따라 달라지며, 은행, 결제 서비스, 지원팀은 연결되어 있지 않습니다.

다른 사례

KO