수확 정산으로 한눈에 보는 소비 흐름 - BroBean 소비 리포트 & 정산 화면 구현

가계부에 수입과 지출, 저축 내역을 기록하고 예산까지 설정했다면 그다음으로 필요한 것은 기록된 데이터를 다시 돌아볼 수 있는 화면이라고 생각했다.

단순히 "이번 달에 얼마를 썼는지"만 보여주는 것이 아니라,

• 이번 달 지출 예산을 얼마나 사용했는지
• 저축 목표를 얼마나 달성했는지
• 실제로 사용할 수 있는 현금은 얼마인지
• 어떤 카테고리에 지출이 집중됐는지
• 주차별 소비 패턴은 어떻게 달라지는지
• 최근 수입·지출·저축 흐름은 어떻게 변하고 있는지

까지 확인할 수 있어야 가계부를 기록하는 것에서 끝나지 않고 소비 습관을 돌아볼 수 있다고 생각했다.

그래서 BroBean에서는 이 기능을 **「수확 정산」**이라는 이름으로 구성했다.

🌾 수확 정산 화면의 전체 구조

수확 정산 페이지는 크게 월별 보기와 기간 설정 두 가지 방식으로 나누었다.

월별 보기에서는 특정 월의 소비와 저축 현황을 집중적으로 확인하고, 기간 설정에서는 사용자가 원하는 기간을 선택해 조금 더 넓은 범위의 소비 흐름을 확인할 수 있도록 했다.

월별 보기와 기간 설정은 상단 토글을 통해 전환하도록 구성했다.

<div class="flex bg-gray-100 dark:bg-[#2A2A2A] p-1 rounded-2xl">
  <button
      type="button"
      :class="currentTab === 'MONTH'
        ? 'bg-white dark:bg-[#1E1E1E] text-gray-900 shadow-xs'
        : 'text-gray-400'"
      @click="currentTab = 'MONTH'"
  >
    월별 보기
  </button>

  <button
      type="button"
      :class="currentTab === 'CUSTOM'
        ? 'bg-white dark:bg-[#1E1E1E] text-gray-900 shadow-xs'
        : 'text-gray-400'"
      @click="currentTab = 'CUSTOM'"
  >
    기간 설정
  </button>
</div>

월별 보기에서는 조회할 월을 선택할 수 있도록 USelect를 배치했다.

const selectedMonth = ref('2026-08')

const monthOptions = [
  { label: '2026년 8월', value: '2026-08' },
  { label: '2026년 7월', value: '2026-07' },
  { label: '2026년 6월', value: '2026-06' }
]

이렇게 구성하면 현재 월을 기본으로 보여주면서도 이전 달의 소비 기록을 다시 확인할 수 있다.

🌱 이번 달 소비 상태를 먼저 보여주기

수확 정산에서 가장 먼저 보여주는 영역은 이번 달의 전체적인 소비 상태다.

숫자와 차트를 바로 나열하기보다는 사용자가 화면에 들어왔을 때 가장 먼저

"이번 달 소비를 잘 관리하고 있는가?"

를 확인할 수 있도록 수확 정산 평가 카드를 가장 위에 배치했다.

평가 기준은 지출 예산 사용률을 기준으로 단순하게 나누었다.

const harvestEvaluation = computed(() => {
  const percent = expenseUsagePercent.value

  if (percent <= 70) {
    return {
      title: '풍년이에요! 🌾',
      desc: '목표 예산 대비 아주 알뜰하게 지출 및 저축을 관리하고 있어요.'
    }
  }

  if (percent <= 95) {
    return {
      title: '안정적인 수확이에요! 🌱',
      desc: '계획했던 예산 범위 내에서 잘 유지되고 있어요.'
    }
  }

  return {
    title: '씨앗 조심! ⚠️',
    desc: '지출 및 저축 금액이 예산 한도에 거의 다다랐어요.'
  }
})

단순한 경고 문구보다는 BroBean의 농장 컨셉에 맞춰 풍년, 수확, 씨앗 같은 표현을 사용했다.

그리고 평가 카드 아래에는 지출 예산과 저축 목표를 각각 프로그레스 바로 표현했다.

const expenseUsagePercent = computed(() => {
  const { totalExpense } = reportData.value

  return Math.min(
    Math.round((totalExpense / expenseBudget.value) * 100),
    100
  )
})

const savingsPercent = computed(() => {
  const { totalSavings } = reportData.value

  return Math.min(
    Math.round((totalSavings / savingsGoal.value) * 100),
    100
  )
})

따라서 사용자는 이번 달의 소비 상태와 함께 예산 사용량과 저축 목표 달성률도 바로 확인할 수 있다.

💰 수입·지출·저축 핵심 지표

평가 카드 다음에는 이번 달의 주요 금액을 빠르게 확인할 수 있도록 핵심 지표를 배치했다.

먼저 세 가지 핵심 지표를 보여준다.

• 총 수입
• 총 지출
• 총 저축

그리고 그 아래에는 단순한 총액을 넘어 실제 자산 상태를 확인할 수 있도록

• 순수익 잔액
• 실사용 가용 현금

을 추가했다.

const netProfit = computed(() =>
  reportData.value.totalIncome -
  reportData.value.totalExpense
)

const availableCash = computed(() =>
  reportData.value.totalIncome -
  reportData.value.totalExpense -
  reportData.value.totalSavings
)

여기서 두 값은 비슷해 보이지만 의미를 다르게 잡았다.

순수익 잔액은 수입에서 생활 지출을 제외한 금액이고, 실사용 가용 현금은 여기에 저축까지 제외한 금액이다.

즉,

수입
 └─ 지출 제외
     └─ 순수익

수입
 └─ 지출 제외
     └─ 저축 제외
         └─ 실사용 가용 현금

이라는 흐름으로 이해할 수 있다.

📊 주차별 소비 패턴 분석

월별 총액만 봐서는 한 달 동안 소비가 언제 집중됐는지 알기 어렵다.

그래서 다음으로 주차별 소비 패턴 분석을 추가했다.

Chart.js의 Bar 차트를 사용해서 1주차부터 4주차까지의 지출 흐름을 막대 그래프로 표현했다.

const weeklyBarChartData = computed(() => ({
  labels: ['1주차', '2주차', '3주차', '4주차'],

  datasets: [
    {
      label: '주차별 지출',
      data: [
        Math.round(reportData.value.totalExpense * 0.25),
        Math.round(reportData.value.totalExpense * 0.35),
        Math.round(reportData.value.totalExpense * 0.20),
        Math.round(reportData.value.totalExpense * 0.20)
      ],
      backgroundColor: '#06B6D4',
      borderRadius: 6,
      barThickness: 18
    }
  ]
}))

이를 통해

• 특정 주차에 소비가 몰렸는지
• 월말에 지출이 증가했는지
• 비교적 균등하게 소비했는지

등을 한눈에 확인할 수 있다.

🥧 카테고리별 소비 비중

다음은 어디에 가장 많은 돈을 사용했는지 확인하는 영역이다.

가계부를 작성할 때 카테고리를 함께 저장하기 때문에, 이 데이터를 기반으로 카테고리별 지출 비율을 도넛 차트로 표현했다.

Chart.js의 Doughnut 차트를 사용했고, 각 카테고리의 금액과 색상을 데이터로 전달했다.

const categoryChartData = computed(() => ({
  labels: reportData.value.categories.map(c => c.category),

  datasets: [
    {
      data: reportData.value.categories.map(c => c.amount),
      backgroundColor: reportData.value.categories.map(c => c.color),
      borderWidth: 3,
      hoverOffset: 8,
      borderRadius: 6
    }
  ]
}))

도넛 차트 중앙에는 전체 지출 금액을 표시하고, 아래에는 각 카테고리별 비율을 함께 보여주도록 했다.

특히 가장 많은 금액을 사용한 카테고리는 최대 배지로 별도 표시했다.

이를 통해 사용자가 차트를 직접 해석하지 않아도 어떤 영역에서 소비가 가장 많이 발생했는지 바로 확인할 수 있도록 했다.

📈 월별 수입·지출·저축 비교

한 달의 소비만 보는 것으로 끝나지 않도록 최근 월별 자산 흐름도 추가했다.

수입, 지출, 저축을 각각 하나의 데이터셋으로 구성해서 동일한 그래프에서 비교할 수 있도록 했다.

const multiBarChartData = computed(() => {
  const trends = reportData.value.monthlyTrends

  return {
    labels: trends.map(t => t.month),

    datasets: [
      {
        label: '수입',
        data: trends.map(t => t.income)
      },
      {
        label: '지출',
        data: trends.map(t => t.expense)
      },
      {
        label: '저축',
        data: trends.map(t => t.savings)
      }
    ]
  }
})

이 그래프를 통해 단순히

"이번 달에 얼마를 썼다."

에서 끝나는 것이 아니라,

"최근 몇 달 동안 수입과 지출, 저축이 어떻게 변화했는가?"

까지 확인할 수 있도록 했다.

🗓️ 기간 설정으로 더 넓은 범위 확인하기

월별 데이터만으로 부족한 경우를 위해 기간 설정 기능도 별도의 화면으로 구성했다.

월별 보기와 기간 설정을 하나의 컴포넌트 안에서 복잡하게 관리하기보다는 PeriodReport 컴포넌트로 분리했다.

<template v-if="currentTab === 'MONTH'">
  <!-- 월별 리포트 -->
</template>

<template v-else>
  <PeriodReport />
</template>

기간 설정 화면에서는 사용자가 직접 조회 기간을 설정하고 해당 기간에 대한 소비 데이터를 분석할 수 있다.

기간 설정을 별도 컴포넌트로 분리한 덕분에 월별 리포트와 기간 리포트가 서로 다른 조회 조건과 분석 방식을 가져가더라도 각각 독립적으로 관리할 수 있게 했다.

🥕 기간 내 카테고리별 지출 비교

기간을 설정한 경우에는 해당 기간 동안 어떤 카테고리에서 지출이 많았는지도 비교할 수 있도록 했다.

월별 보기의 카테고리 분석이 특정 월의 소비 비중을 확인하는 데 초점을 맞췄다면, 기간 설정에서는 지정한 기간 전체를 기준으로 소비 카테고리를 비교한다.

따라서 한 달 단위에서는 크게 보이지 않았던 소비 패턴도 여러 달을 묶어서 확인할 수 있다.

📊 기간별 월별 자산 흐름

기간 설정 화면에서는 월별 자산 흐름도 함께 확인할 수 있도록 구성했다.

이 영역에서는 조회 기간 안에서 월별 수입과 지출, 저축의 변화를 비교한다.

이를 통해 단기적인 소비 패턴뿐만 아니라 장기적인 자산 관리 흐름을 확인할 수 있도록 했다.

📉 기간 내 주차별 지출 비교

기간 설정에서는 주차별 소비도 추가로 비교할 수 있도록 했다.

월별 분석에서는 해당 월의 1~4주차 소비를 확인했다면, 기간 리포트에서는 지정한 기간을 기준으로 주차별 지출 흐름을 비교할 수 있다.

따라서 특정 기간 동안 소비가 어느 시점에 집중됐는지 조금 더 자세하게 살펴볼 수 있다.

🧩 화면 전체를 구성하면서 중요하게 본 것

이번 화면에서는 단순히 차트를 많이 배치하는 것보다 정보를 단계적으로 보여주는 것에 초점을 맞췄다.

전체적인 흐름은 다음과 같다.

수확 정산
│
├─ 월별 보기 / 기간 설정
│
├─ 이달의 수확 정산 평가
│   ├─ 지출 예산 사용률
│   └─ 저축 목표 달성률
│
├─ 핵심 자산 지표
│   ├─ 총 수입
│   ├─ 총 지출
│   ├─ 총 저축
│   ├─ 순수익 잔액
│   └─ 실사용 가용 현금
│
├─ 주차별 소비 패턴
│
├─ 카테고리별 소비 비중
│
└─ 월별 수입·지출·저축 비교

사용자가 페이지에 들어왔을 때

"이번 달은 어떤 상태인가?"

부터 확인하고,

"어디에 돈을 많이 썼지?"

그리고

"최근에는 어떻게 변하고 있지?"

순서로 자연스럽게 정보를 확인할 수 있도록 배치했다.

기간 설정으로 넘어가면 여기에서 한 단계 더 나아가

"특정 기간 동안에는 어떤 소비 패턴을 보였지?"

를 확인할 수 있도록 했다.

🌾 가계부의 마지막은 기록이 아니라 돌아보기

BroBean에서 가계부는 단순히 돈을 입력하는 기능으로 끝나지 않는다.

씨앗을 심고,

밭을 가꾸고,

나무를 키운 뒤,

마지막에는 지금까지의 결과를 수확해서 확인하는 과정까지 이어진다.

그래서 이번에 만든 수확 정산은 단순한 통계 페이지라기보다는 지금까지 기록한 소비 습관을 다시 돌아보는 화면에 가깝다.

월별 지출과 저축을 확인하고, 카테고리별 소비를 비교하고, 주차별 소비 패턴을 살펴보고, 기간을 넓혀 자산 흐름까지 확인할 수 있도록 구성했다.

특히 이번 화면을 만들면서 단순히 숫자를 많이 보여주는 것보다 사용자가 숫자를 보고 다음 행동을 생각할 수 있도록 만드는 것이 중요하다는 점을 다시 느꼈다.

"이번 달 지출은 얼마였지?"에서 끝나는 것이 아니라,

"이번 달에는 식비가 많이 나갔네."

"저축 목표는 생각보다 잘 지키고 있네."

"지난달보다 지출이 줄었구나."

처럼 자신의 소비 습관을 자연스럽게 돌아볼 수 있어야 가계부 서비스의 의미가 생긴다고 생각한다.

이렇게 BroBean의 주요 가계부 화면들이 하나씩 연결되면서 씨앗을 심고 → 밭을 가꾸고 → 나무를 키우고 → 수확하는 하나의 서비스 흐름도 조금씩 완성되어 가고 있다.