🌱 가계부의 핵심 기능을 만들기 시작했다

홈 화면과 공통 레이아웃, 그리고 브로빈 성장 시스템까지 어느 정도 방향을 잡은 뒤 이제 실제 가계부 기능을 만들어보기로 했다.

BroBean에서 가장 중요한 기능은 결국 돈을 기록하고 관리하는 것이다.

처음 프로젝트를 구상할 때부터 일반적인 가계부처럼 단순히 금액과 메모를 입력하는 방식보다는, 앞에서 정한 농장 컨셉을 기능 자체에도 자연스럽게 녹이고 싶었다.

그래서 이번에는 가계부의 기본 기능을 크게 두 가지 영역으로 나누었다.

🌱 씨앗 심기

지출 / 수입 / 저축 기록


🌾 밭 가꾸기

예산 / 저축 목표 / 고정 수입·지출 관리

기능 이름부터 BroBean의 세계관과 연결되도록 설계했다.

🌱 씨앗 심기 - 지출·수입·저축 기록

가장 먼저 만든 것은 실제 돈의 흐름을 기록하는 화면이다.

가계부에서 사용자가 가장 자주 접근하게 될 화면이기 때문에 입력 과정을 최대한 단순하게 만드는 것을 우선했다.

기록 유형은 크게 세 가지로 구분했다.

지출

수입

저축

각 유형을 하나의 탭으로 구분하고, 같은 입력 화면에서 유형만 변경할 수 있도록 구성했다.

이렇게 하면 별도의 페이지를 이동하지 않고도 현재 기록하려는 항목의 종류를 빠르게 선택할 수 있다.

💰 금액 입력은 최대한 빠르게

가계부에서 가장 자주 입력하는 값은 금액이다.

따라서 금액 입력 영역을 화면 상단에 배치하고 빠르게 숫자를 입력할 수 있도록 구성했다.

특히 자주 사용하는 금액을 빠르게 추가할 수 있도록

+1천

+5천

+1만

+5만

형태의 빠른 금액 버튼도 함께 배치했다.

매번 숫자를 직접 입력하는 것보다 자주 사용하는 금액을 한 번 눌러 추가할 수 있도록 하여 모바일 환경에서의 입력 부담을 줄이는 방향으로 설계했다.

금액을 잘못 입력했을 때를 고려해 초기화 버튼도 함께 제공했다.

🏷️ 카테고리는 버튼 형태로 선택

금액을 입력한 다음에는 카테고리를 선택한다.

카테고리는 일반적인 Select 형태보다는 화면에서 바로 선택할 수 있는 카드 형태로 구성했다.

┌─────────┬─────────┬─────────┐
│ 🍚 식비  │ ☕ 카페  │ 🚗 교통  │
├─────────┼─────────┼─────────┤
│ 🛍 쇼핑  │ 🏠 생활  │ 🎮 취미  │
└─────────┴─────────┴─────────┘

모바일에서는 목록을 펼쳐서 선택하는 것보다 자주 사용하는 카테고리를 바로 보여주는 편이 입력 흐름을 끊지 않는다고 판단했다.

선택된 카테고리는 색상과 테두리를 변경하고 체크 표시를 추가하여 현재 선택 상태도 명확하게 표현했다.

📅 날짜와 메모

기본적인 기록에는 날짜와 메모도 추가했다.

날짜는 기본 입력을 활용하고, 메모는 선택 사항으로 두었다.

특히 저축의 경우

주택청약

비상금 통장

자유적금

처럼 어디에 저축했는지 기록할 수 있도록 메모 영역의 Placeholder도 유형에 맞게 구성했다.

모든 정보를 필수로 입력하게 만들기보다는 빠르게 기록할 수 있는 것을 우선했다.

🌱 등록 버튼도 BroBean 컨셉으로

일반적인 가계부라면 단순히

등록

이라고 표시할 수 있다.

하지만 BroBean에서는 등록 버튼 역시 농장 컨셉과 연결했다.

지출 씨앗 심기

수입 씨앗 심기

저축 씨앗 심기

같은 식으로 현재 선택한 유형에 따라 버튼 문구가 변경되도록 했다.

작은 부분이지만 이런 요소들이 모이면 일반적인 입력 폼과는 다른 BroBean만의 경험을 만들 수 있다고 생각했다.

🌾 밭 가꾸기 - 예산을 관리하는 화면

두 번째로 설계한 영역은 예산 관리다.

가계부에 기록만 하는 것으로는 소비 습관을 관리하기 어렵다.

이번 달에 얼마를 사용할 것인지 정하고,

각 카테고리에 어느 정도의 예산을 배분할 것인지 미리 설정할 필요가 있다.

그래서 예산 관리 화면을 BroBean에서는 밭 가꾸기라는 이름으로 구성했다.

📅 월별 예산 설정

먼저 관리할 월을 선택할 수 있도록 했다.

특정 월을 선택하면 해당 월의 예산을 설정할 수 있다.

전체 지출 예산을 먼저 입력하고 이후 카테고리별로 금액을 나누는 구조다.

예를 들어

이번 달 지출 예산

2,000,000원

을 설정했다면

식비       500,000원

교통       200,000원

생활       300,000원

쇼핑       200,000원

기타       800,000원

처럼 세부 카테고리별 예산을 배분할 수 있다.

⚖️ 예산 배분 금액을 실시간으로 확인

카테고리별 금액을 입력하다 보면 전체 예산과 맞지 않는 경우가 생길 수 있다.

그래서 현재 배분된 금액의 합계를 별도로 표시하도록 했다.

카테고리 배분 합계

1,200,000원

전체 예산과 차이가 있다면

1,200,000원
(-800,000)

처럼 남은 금액도 함께 확인할 수 있다.

반대로 정확하게 배분이 완료되면 정상 상태로 표시한다.

이렇게 하면 저장하기 전에 예산 설정이 제대로 되었는지 바로 확인할 수 있다.

⚡ 자동 균등 배분

모든 카테고리에 일일이 금액을 입력하는 것도 번거로울 수 있다.

그래서 자동 균등 배분 기능도 추가했다.

전체 예산을 입력한 뒤 버튼을 누르면 현재 카테고리에 예산을 자동으로 나누어준다.

처음 예산을 설정하는 사용자에게 기본값을 제공하는 역할도 할 수 있기 때문에 이후 실제 서비스에서는 사용자의 과거 소비 데이터를 활용한 추천 예산으로 발전시킬 수도 있을 것 같다.

🔁 고정 수입과 고정 지출 관리

예산 관리 화면에서는 일반적인 월별 예산뿐만 아니라 매월 반복되는 항목도 관리할 수 있도록 했다.

예를 들면

월급

월세

통신비

보험료

구독 서비스

같은 항목이다.

이런 값들은 매달 반복되기 때문에 매번 직접 입력하도록 하면 가계부 사용 과정이 번거로워진다.

따라서 별도의 고정 지출·수입 관리 영역을 만들었다.

💳 고정 항목 등록

새로운 고정 항목을 추가하면

항목 이름

유형

금액

매월 처리일

을 입력할 수 있다.

유형은

지출

수입

두 가지로 구분했다.

예를 들어

월급
수입
3,000,000원
매월 25일

또는

월세
지출
700,000원
매월 1일

처럼 등록할 수 있다.

등록된 항목은 목록에서

월세

매월 1일 자동 반영

-700,000원

처럼 확인할 수 있도록 했다.

🧩 예산과 고정비를 하나의 화면에서 관리

여기서 조금 고민했던 부분은 예산과 고정 수입·지출을 별도의 페이지로 분리할 것인지였다.

결론적으로는 둘을 하나의 관리 영역 안에서 탭으로 분리했다.

┌────────────────────────────┐
│  예산 및 저축 목표 │ 고정 지출·수입 │
└────────────────────────────┘

예산과 고정비는 서로 다른 기능이지만 모두 사용자의 월간 재정 계획을 설정하는 기능이라는 공통점이 있기 때문이다.

사용자가 한 곳에서 이번 달 돈의 흐름을 계획할 수 있도록 하는 것이 더 자연스럽다고 판단했다.

🌱 기능을 하나의 세계관으로 연결하기

이번 화면들을 만들면서 가장 신경 쓴 부분은 각각의 기능이 따로 놀지 않도록 하는 것이었다.

BroBean에서는

💸 지출 기록

↓

🌱 씨앗 심기


💰 수입 기록

↓

🌱 씨앗 심기


🏦 저축 기록

↓

🌱 씨앗 심기


📊 예산 설정

↓

🌾 밭 가꾸기


🎯 저축 목표

↓

🌳 나무 키우기


📈 소비 리포트

↓

🌾 수확 정산

처럼 실제 가계부의 기능과 BroBean의 세계관을 연결하고 있다.

이렇게 하면 사용자는 단순히 메뉴 이름을 외우는 것이 아니라 각각의 기능이 어떤 역할을 하는지 자연스럽게 이해할 수 있다.

📱 모바일 환경을 기준으로 설계

이번 기능들도 앞서 설계한 레이아웃과 마찬가지로 모바일 화면을 우선해서 제작했다.

특히 입력 화면에서는

• 큰 금액 입력 영역
• 빠른 금액 버튼
• 한눈에 보이는 카테고리
• 짧은 입력 단계
• 명확한 등록 버튼

을 중심으로 구성했다.

가계부는 한 번 사용하는 것보다 매일 반복해서 사용하는 과정이 중요하기 때문이다.

따라서 화려한 UI보다는 실제 입력 과정에서 손이 덜 가는 구조를 우선하려고 했다.

🧪 현재는 Mock 데이터 기반으로 개발

이번 단계에서도 아직 Backend와 Database는 연결하지 않았다.

먼저 화면과 사용자 흐름을 검증하기 위해 Mock 데이터를 활용하고 있다.

예산 금액이나 고정 지출 항목 등을 실제 데이터처럼 넣어보고

예산 설정

↓

카테고리 배분

↓

고정 수입·지출 등록

↓

가계부 기록

↓

홈 화면에 반영

되는 전체 흐름을 먼저 확인하고 있다.

이렇게 Frontend에서 필요한 데이터 구조와 화면을 먼저 구체화한 뒤 나중에 Spring Boot API와 연결할 예정이다.

🚀 다음 단계

이번 단계까지 진행하면서 BroBean의 주요 가계부 기능에 필요한 기본 화면을 하나씩 만들어가고 있다.

다음 단계에서는 이렇게 만들어진 화면들을 실제 사용자 흐름에 맞게 연결하고,

가계부 기록 → 예산 → 저축 목표 → 소비 현황

이 하나의 흐름으로 이어지도록 기능을 확장해볼 예정이다.

Frontend에서 화면과 데이터 구조를 충분히 검증한 뒤,

이후에는 실제 Backend API와 Database 설계로 넘어갈 계획이다.