📖 성장 일지와 나무 키우기 화면 구현

앞선 개발 과정에서 기본 레이아웃과 가계부 입력, 예산 및 고정 수입·지출 관리 화면까지 구성했다.

이번에는 입력한 데이터를 실제로 확인하고, 설정한 저축 목표를 꾸준히 관리할 수 있도록 성장 일지와 나무 키우기 화면을 구현했다.

BroBean에서는 단순히 가계부 내역을 보여주는 것보다 조금 더 재미있게 사용할 수 있도록 각각의 기능에 서비스 컨셉을 적용했다.

• 가계부 내역 → 성장 일지
• 저축 목표 → 나무 키우기
• 저축 진행 → 나무 성장
• 목표 달성 → 수확

이를 통해 돈을 기록하고 관리하는 과정을 하나의 성장 과정처럼 느낄 수 있도록 구성했다.

📖 성장 일지

📝 단순한 가계부 내역을 기록으로 바꾸기

가계부의 가장 기본적인 기능은 결국 내가 언제 무엇을 소비했는지 확인하는 것이다.

하지만 BroBean에서는 이 영역을 단순히 가계부 내역이라고 표현하기보다 성장 일지라는 이름으로 구성했다.

앞서 지출·수입·저축을 기록할 때도 씨앗을 심는다는 컨셉을 사용했기 때문에, 기록된 내역 역시 내가 지금까지 어떤 씨앗을 심었는지 확인하는 일지처럼 연결했다.

성장 일지에서는 크게 두 가지 방식으로 내역을 확인할 수 있도록 구성했다.

• 목록 형태로 확인
• 달력 형태로 확인

📋 목록으로 확인하기

가장 기본적인 형태는 날짜순으로 거래 내역을 확인하는 방식이다.

각 내역에는 거래 유형과 카테고리, 이름, 금액, 시간이 함께 표시되도록 구성했다.

예를 들어:

🍛 식비
맛있는 카레식당
-18,000원

🐷 저축
자유적금 자동이체
-50,000원

☕ 카페
스타벅스 아메리카노
-4,500원

처럼 한눈에 어떤 소비가 있었는지 확인할 수 있도록 했다.

목록 화면에서는 단순히 금액만 나열하기보다 아이콘과 색상을 함께 사용해 거래 유형과 카테고리를 빠르게 구분할 수 있도록 했다.

특히 모바일 환경에서 화면을 길게 읽지 않아도 필요한 정보를 빠르게 찾을 수 있는 것을 중요하게 생각했다.

📅 달력으로 소비 기록 확인하기

목록 형태만으로는 특정 날짜에 내가 어떤 소비를 했는지 확인하기 조금 불편할 수 있다.

그래서 두 번째 방식으로 달력 기반 조회 화면을 추가했다.

달력에서는 날짜별로 기록이 존재하는지 확인할 수 있고, 특정 날짜를 선택하면 해당 날짜의 거래 내역을 확인할 수 있도록 구성했다.

이 방식은 단순한 가계부 조회뿐만 아니라 다음과 같은 사용에도 활용할 수 있다.

• 특정 날짜의 소비 확인
• 특정 기간의 소비 패턴 확인
• 지출이 많았던 날짜 확인
• 저축이나 수입이 발생한 날짜 확인

가계부를 숫자 목록으로만 보는 것보다 시간의 흐름 속에서 소비 기록을 확인할 수 있다는 점을 중요하게 생각했다.

🔎 날짜별 상세 내역

달력에서 특정 날짜를 선택하면 해당 날짜에 발생한 거래를 아래에서 상세하게 확인할 수 있도록 구성했다.

날짜를 기준으로 관련 내역을 모아 보여주기 때문에 사용자는 별도의 검색 과정 없이 원하는 날의 소비 내역을 바로 확인할 수 있다.

향후에는 여기에 다음과 같은 기능도 추가할 수 있을 것 같다.

• 거래 수정 및 삭제
• 카테고리별 합계
• 해당 날짜의 총 지출
• 수입/지출/저축 합계
• 메모 확인
• 커플 각각의 소비 내역 구분

현재는 화면과 사용자 경험을 우선 구현하고 있기 때문에, 실제 데이터 연결과 세부 기능은 이후 Backend API를 연결하면서 확장할 예정이다.

🌳 나무 키우기

💰 저축 목표를 하나의 나무로 표현하기

성장 일지가 지금까지의 소비와 수입을 기록하는 공간이라면, 나무 키우기는 앞으로의 목표를 관리하는 공간이다.

BroBean에서는 저축 목표를 단순히 금액과 달성률로 보여주는 대신 하나의 나무를 키우는 형태로 표현했다.

예를 들어:

저축 목표
↓
나무 심기
↓
돈을 모으기
↓
나무 성장
↓
목표 달성
↓
수확

이라는 흐름이다.

앞서 BroBean이라는 이름을 정하면서 생각했던

작은 습관이 모여 큰 자산이 된다.

라는 메시지를 실제 서비스 기능으로 연결하기 위한 부분이기도 하다.

🌱 새로운 목표 나무 심기

나무 키우기 화면에서는 새로운 저축 목표를 만들 수 있도록 했다.

메인 화면에서는 현재 등록된 저축 목표들을 확인할 수 있고, 각각의 목표가 어느 정도 성장했는지 확인할 수 있다.

저축 목표를 추가할 때는 별도의 팝업을 사용하도록 구성했다.

새로운 목표를 만들 때는 목표 이름과 목표 금액 등을 입력하고 새로운 나무를 심는 방식이다.

예를 들어:

🌳 우리들의 여행 나무
제주도 여행 자금 모으기

현재 금액
400,000원

목표 금액
1,000,000원

달성률
40%

처럼 실제 저축 목표를 하나의 나무와 연결한다.

이렇게 하면 단순히 저축 목표 1, 저축 목표 2처럼 관리하는 것보다 각 목표에 의미를 부여할 수 있다.

💧 저축하면서 나무에 물주기

저축 목표를 만드는 것만으로 끝나면 기존의 목표 관리 기능과 크게 다르지 않다.

그래서 BroBean에서는 목표에 돈을 추가하는 행동을 나무에 물을 주는 행동으로 표현했다.

저축 금액을 입력하고 물을 주면 해당 나무의 성장률이 올라가는 방식이다.

예를 들어:

💧 50,000원 저축

↓
나무 성장

🌱 ─────── 🌿 ─────── 🌳

처럼 실제 금액의 증가를 시각적인 성장과 연결할 수 있다.

이 기능을 통해 저축이라는 행동을 단순한 숫자의 변화가 아니라 눈에 보이는 성장 과정으로 만들고 싶었다.

🌳 여러 개의 목표를 동시에 관리하기

나무 키우기의 또 다른 목적은 여러 가지 저축 목표를 동시에 관리하는 것이다.

예를 들어:

🌳 우리들의 여행 나무
제주도 여행 자금

🌿 비상금 콩나무
예비비 100만원

🎁 1주년 기념일 나무
커플링 제작 자금

처럼 각각의 목표를 별도의 나무로 관리할 수 있다.

이 구조라면 사용자는 단순히 "이번 달에 얼마를 저축했는가"만 보는 것이 아니라,

"우리가 어떤 목표를 위해 돈을 모으고 있는가"

를 계속 확인할 수 있다.

특히 연인이나 부부가 함께 사용하는 가계부라는 서비스 특성상, 개인의 저축 목표뿐 아니라 함께 이루고 싶은 목표를 관리하는 기능으로 발전시키는 것도 고려하고 있다.

🌱 현재 화면 구현 단계

이번 단계에서는 실제 Backend와 Database를 연결하기보다 화면과 사용자 경험을 먼저 확인하는 것을 목표로 했다.

따라서 현재 화면에서는 앞서 만든 Mock 데이터를 기반으로 다음과 같은 데이터를 표시하고 있다.

성장 일지

├── 목록 조회
├── 달력 조회
└── 날짜별 상세 내역

나무 키우기

├── 저축 목표 목록
├── 새로운 목표 생성
└── 저축 금액 추가

실제 데이터 구조가 확정되면 이후 Backend API를 연결하면서 해당 화면을 실제 서비스 데이터와 연동할 예정이다.

🔗 기록과 목표를 하나의 흐름으로

이번 화면을 만들면서 중요하게 생각했던 부분은 성장 일지와 나무 키우기를 서로 다른 기능으로 분리하지 않는 것이었다.

BroBean의 전체적인 사용 흐름은 다음과 같이 연결할 수 있다.

💸 지출 / 수입 / 저축 기록
          ↓
       🌱 씨앗 심기
          ↓
      📖 성장 일지
          ↓
    소비 습관과 자산 확인
          ↓
       💧 저축하기
          ↓
       🌳 나무 성장
          ↓
       🎯 목표 달성
          ↓
        🌾 수확

가계부는 결국 돈을 기록하는 도구이지만, BroBean에서는 그 기록이 내 소비 습관과 자산의 성장을 확인하는 과정이 되었으면 했다.

그래서 화면 하나하나를 구현할 때도 단순히 기능을 추가하는 것보다, 처음에 잡았던 씨앗 → 성장 → 나무 → 수확이라는 서비스 컨셉이 실제 사용 과정에서도 자연스럽게 이어지는지를 계속 확인하고 있다.

🚧 다음 개발 단계

현재 Frontend에서는 주요 화면의 기본적인 흐름을 계속 만들어가고 있다.

다음 단계에서는 지금까지 구현한 화면을 실제 데이터 구조와 연결할 수 있도록 기능 및 데이터 모델을 구체화하는 작업을 진행할 예정이다.

특히 다음과 같은 부분을 정리할 필요가 있다.

• 사용자 및 커플 데이터
• 수입 / 지출 / 저축 거래 데이터
• 카테고리 구조
• 예산 데이터
• 고정 수입 / 지출
• 저축 목표
• 나무 성장 단계
• 목표별 저축 내역
• 퀘스트 및 보상 데이터