🏠 앱을 실행하면 가장 먼저 보이는 화면

공통 레이아웃을 완성한 뒤 가장 먼저 작업한 화면은 Dashboard(Home) 이다.

가계부 서비스에서 가장 자주 보게 되는 화면인 만큼 단순히 현재 잔액만 보여주는 것이 아니라,

사용자가 앱을 실행했을 때

"오늘 무엇을 하면 되는지"

를 자연스럽게 알려주는 화면을 만들고 싶었다.

그래서 처음부터 단순한 통계 화면이 아니라 성장형 Dashboard를 목표로 설계를 시작했다.

🖼️ 현재 Dashboard 화면

아래는 현재 구현한 Dashboard 화면이다.

홈 화면에서는

• 현재 성장 단계
• 이번 달 저축 진행률
• 저축 목표
• 오늘의 퀘스트
• 예산 정보
• 최근 소비 내역

까지 한 번에 확인할 수 있도록 구성했다.

🌱 단순한 가계부가 아닌 성장형 서비스

기존 가계부를 사용하면서 가장 많이 느낀 것은

"기록만 하고 끝난다."

는 점이었다.

기록은 열심히 하지만

• 얼마나 잘하고 있는지
• 오늘 무엇을 해야 하는지
• 목표까지 얼마나 남았는지

같은 부분은 크게 느껴지지 않았다.

그래서 BroBean에서는

돈을 관리하는 것이 아니라

브로빈을 성장시키는 경험

으로 만들고 싶었다.

📊 Dashboard에 어떤 정보가 필요할까?

처음에는 정말 많은 정보를 넣으려고 했다.

하지만 화면이 복잡해질수록 오히려 아무것도 보이지 않았다.

그래서 필요한 정보를 다시 정리했다.

Dashboard에서 보여줄 정보는 크게 다섯 가지로 정리했다.

• 현재 성장 단계
• 목표 저축 진행률
• 오늘의 퀘스트
• 예산 현황
• 최근 소비 내역

이 정도만 있어도 사용자가 앱을 실행했을 때 해야 할 일을 충분히 파악할 수 있다고 판단했다.

📦 화면보다 먼저 Type부터 설계

이번 프로젝트에서는 UI를 먼저 만들기보다

데이터 구조를 먼저 설계하는 방식을 선택했다.

Dashboard에서 사용하는 모든 데이터를 하나의 Interface로 묶었다.

export interface DashboardData {

    userStatus: UserStatus

    savingGoals: SavingGoal[]

    quests: Quest[]

    budgetSummary: BudgetSummary

    todayMessage: string

}

이렇게 화면 하나가 사용하는 데이터를 명확하게 분리해두면

나중에 Backend API를 연결하더라도

응답 구조를 거의 그대로 사용할 수 있다.

🧪 Mock 데이터로 먼저 개발하기

아직 Spring Boot Backend는 개발하지 않은 상태이기 때문에

모든 화면은 Mock 데이터로 개발을 진행했다.

export const dummyDashboardData: DashboardData = {

    ...

}

Mock 데이터를 사용하는 이유는 단순히 Backend가 없어서가 아니다.

Backend가 완성되기 전에도

• 화면 개발
• 컴포넌트 분리
• 상태 관리

를 모두 진행할 수 있기 때문이다.

API가 준비되면 Mock 데이터만 실제 API 호출로 교체하면 된다.

🌳 목표 저축도 하나가 아니라 여러 개

저축 목표 역시 하나만 두고 싶지 않았다.

사람마다 돈을 모으는 이유는 모두 다르기 때문이다.

예를 들어

• 여행
• 비상금
• 기념일
• 자동차
• 결혼

등 다양한 목표가 존재한다.

그래서 Dashboard에서는 여러 개의 목표를 동시에 관리할 수 있도록 설계했다.

현재는 진행률만 표시하지만

추후에는 브로빈 성장과도 연결할 계획이다.

🎯 오늘의 퀘스트

Dashboard에서 가장 마음에 드는 기능 중 하나가 오늘의 퀘스트다.

가계부는 기록을 하지 않으면 아무 의미가 없다.

하지만 기록 자체가 귀찮아지는 순간 사용을 그만두게 된다.

그래서

• 오늘의 지출 기록
• 무지출 데이
• 예산 확인
• 상대방 응원하기

같은 간단한 행동을 퀘스트 형태로 제공하려고 한다.

작은 행동이 모여

돈을 모으는 습관으로 이어질 수 있도록 만드는 것이 목표다.

📖 최근 소비 내역

최근 소비 내역도 단순한 리스트가 아니라

사용자가

"방금 무엇에 돈을 사용했는지"

를 바로 확인할 수 있도록 배치했다.

추후에는

• 카테고리 색상
• 소비 패턴
• AI 소비 분석

등도 함께 보여줄 계획이다.

💭 아직은 화면보다 구조가 중요하다

현재 Dashboard는 완성형이라기보다

전체 서비스를 구성하기 위한 뼈대를 만드는 과정에 가깝다.

UI는 언제든 변경될 수 있지만

데이터 구조와 컴포넌트 구조는 프로젝트 전체를 따라가기 때문이다.

이번 작업에서는

화면을 예쁘게 만드는 것보다

나중에 Backend를 연결했을 때도 그대로 사용할 수 있는 구조를 만드는 데 가장 많은 시간을 투자했다.

🚀 다음 일정

Dashboard가 어느 정도 완성되었으니

다음으로는 BroBean만의 핵심 시스템인

브로빈 성장 단계(Evolution) 를 설계해 보려고 한다.

단순히 돈이 늘어나는 것이 아니라

브로빈이 성장하는 과정을 어떻게 표현할지 고민했던 내용을 다음 글에서 정리해 보겠다.

👉 다음 글 : BroBean 프로젝트 #5 - 브로빈 성장 시스템과 레벨 설계