[{"data":1,"prerenderedAt":825},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-project-brobean-brobean-dev-log-07":267,"-ko-project-brobean-brobean-dev-log-07-surround":820},[4,130,253],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":33},"Note (개발 지식)","emojione-v1:note-pad","\u002Fko\u002Fnote","ko\u002F1.note",[10,34,48,74,84,94,110,120],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":33},"Spring","logos:spring-icon","\u002Fko\u002Fnote\u002Fspring","ko\u002F1.note\u002F0.spring",[16,21,25,29],{"title":17,"path":18,"stem":19,"icon":20},"Spring AI 핵심 개념과 LLM 애플리케이션 구조 이해","\u002Fko\u002Fnote\u002Fspring\u002Fspring-ai","ko\u002F1.note\u002F0.spring\u002F1.spring-ai","lucide:file-text",{"title":22,"path":23,"stem":24,"icon":20},"[Java] Record와 @Version으로 이해하는 불변 데이터와 동시성 제어","\u002Fko\u002Fnote\u002Fspring\u002Frecord-and-version-concurrency","ko\u002F1.note\u002F0.spring\u002F2.record-and-version-concurrency",{"title":26,"path":27,"stem":28,"icon":20},"[JPA] @PersistenceContext와 EntityManager로 이해하는 영속성 컨텍스트","\u002Fko\u002Fnote\u002Fspring\u002Fspring-persistence-context","ko\u002F1.note\u002F0.spring\u002F3.spring-persistence-context",{"title":30,"path":31,"stem":32,"icon":20},"[Java] YearMonth로 월 단위 날짜를 다루는 방법","\u002Fko\u002Fnote\u002Fspring\u002Fjava-year-month","ko\u002F1.note\u002F0.spring\u002F4.java-year-month",false,{"title":35,"icon":36,"path":37,"stem":38,"children":39,"page":33},"Javascript","skill-icons:javascript","\u002Fko\u002Fnote\u002Fjavascript","ko\u002F1.note\u002F1.javascript",[40,44],{"title":41,"path":42,"stem":43,"icon":20},"Promise.all과 구조 분해 할당을 활용한 데이터 처리 패턴","\u002Fko\u002Fnote\u002Fjavascript\u002Fdestructuring","ko\u002F1.note\u002F1.javascript\u002F1.destructuring",{"title":45,"path":46,"stem":47,"icon":20},"JavaScript 배열 고차 함수와 데이터 처리 패턴 이해","\u002Fko\u002Fnote\u002Fjavascript\u002Ffilter","ko\u002F1.note\u002F1.javascript\u002F2.filter",{"title":49,"icon":50,"path":51,"stem":52,"children":53,"page":33},"Nuxt4","logos:nuxt-icon","\u002Fko\u002Fnote\u002Fnuxt4","ko\u002F1.note\u002F2.nuxt4",[54,58,62,66,70],{"title":55,"path":56,"stem":57,"icon":20},"Nuxt 4를 선택한 이유와 아키텍처 및 실무 가이드","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-info","ko\u002F1.note\u002F2.nuxt4\u002F1.nuxt-info",{"title":59,"path":60,"stem":61,"icon":20},"Nuxt useAsyncData 동작 원리와 SSR 데이터 페칭 최적화","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-use_async_data","ko\u002F1.note\u002F2.nuxt4\u002F2.nuxt-use_async_data",{"title":63,"path":64,"stem":65,"icon":20},"Nuxt Content v3 데이터 모델과 Query 시스템 이해","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-content-v3","ko\u002F1.note\u002F2.nuxt4\u002F3.nuxt-content-v3",{"title":67,"path":68,"stem":69,"icon":20},"Nuxt Auto-imports 내부 동작과 컴파일 과정 분석","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-auto-import","ko\u002F1.note\u002F2.nuxt4\u002F4.nuxt-auto-import",{"title":71,"path":72,"stem":73,"icon":20},"Nuxt 렌더링 방식 이해: SSR, SSG, ISR, CSR 구현 방법","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-rendering-strategy","ko\u002F1.note\u002F2.nuxt4\u002F5.nuxt-rendering-strategy",{"title":75,"icon":76,"path":77,"stem":78,"children":79,"page":33},"Nitro","unjs:nitro","\u002Fko\u002Fnote\u002Fnitro","ko\u002F1.note\u002F3.nitro",[80],{"title":81,"path":82,"stem":83,"icon":20},"Nitro 아키텍처와 서버 엔진 구조","\u002Fko\u002Fnote\u002Fnitro\u002Fnitro","ko\u002F1.note\u002F3.nitro\u002Fnitro",{"title":85,"icon":86,"path":87,"stem":88,"children":89,"page":33},"Devops","vscode-icons:file-type-pipeline","\u002Fko\u002Fnote\u002Fdevops","ko\u002F1.note\u002F4.devops",[90],{"title":91,"path":92,"stem":93,"icon":20},"서버사이드 WebAssembly(Wasm)와 차세대 실행 환경","\u002Fko\u002Fnote\u002Fdevops\u002Fwebassembly","ko\u002F1.note\u002F4.devops\u002F1.webAssembly",{"title":95,"icon":96,"path":97,"stem":98,"children":99,"page":33},"Tooling","lucide:wrench","\u002Fko\u002Fnote\u002Ftooling","ko\u002F1.note\u002F4.tooling",[100],{"title":101,"icon":102,"path":103,"stem":104,"children":105,"page":33},"Package Manager","devicon:npm","\u002Fko\u002Fnote\u002Ftooling\u002Fpackage-manager","ko\u002F1.note\u002F4.tooling\u002F1.package-manager",[106],{"title":107,"path":108,"stem":109,"icon":20},"Package Lock 파일의 역할과 의존성 관리 원리","\u002Fko\u002Fnote\u002Ftooling\u002Fpackage-manager\u002Fpackage-lock","ko\u002F1.note\u002F4.tooling\u002F1.package-manager\u002F1.package-lock",{"title":111,"icon":112,"path":113,"stem":114,"children":115,"page":33},"Web","streamline-plump:web","\u002Fko\u002Fnote\u002Fweb","ko\u002F1.note\u002F4.web",[116],{"title":117,"path":118,"stem":119,"icon":20},"웹 애플리케이션 렌더링 아키텍처 이해","\u002Fko\u002Fnote\u002Fweb\u002Frendering-modes","ko\u002F1.note\u002F4.web\u002F2.rendering-modes",{"title":121,"icon":122,"path":123,"stem":124,"children":125,"page":33},"SEO","icon-park-solid:seo","\u002Fko\u002Fnote\u002Fseo","ko\u002F1.note\u002F6.seo",[126],{"title":127,"path":128,"stem":129,"icon":20},"[SEO] 개발 블로그 검색 노출을 위한 robots.txt와 SEO 설정 가이드","\u002Fko\u002Fnote\u002Fseo\u002Fseo","ko\u002F1.note\u002F6.seo\u002F1.seo",{"title":131,"icon":132,"path":133,"stem":134,"children":135,"page":33},"Project (개발일지)","icon-park-solid:branch-two","\u002Fko\u002Fproject","ko\u002F2.project",[136,187],{"title":137,"icon":138,"path":139,"stem":140,"children":141,"page":33},"Brolog","custom:symbol","\u002Fko\u002Fproject\u002Fbrolog","ko\u002F2.project\u002F1.brolog",[142,146,150,154,158,162,166,170,174,179,183],{"title":143,"path":144,"stem":145,"icon":20},"[Brolog] 프로젝트 개요","\u002Fko\u002Fproject\u002Fbrolog\u002Foutline","ko\u002F2.project\u002F1.brolog\u002F1.outline",{"title":147,"path":148,"stem":149,"icon":20},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (3) - Runtime 기능 문제 분석과 AI Assistant 전환","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy3-ai-integration","ko\u002F2.project\u002F1.brolog\u002F10.vercel-deploy3-ai-integration",{"title":151,"path":152,"stem":153,"icon":20},"[Brolog] AI Assistant 적용 과정 - Agent 구조와 API 사용량 관리 시 고려사항","\u002Fko\u002Fproject\u002Fbrolog\u002Fai-assistant-application-process","ko\u002F2.project\u002F1.brolog\u002F11.ai-assistant-application-process",{"title":155,"path":156,"stem":157,"icon":20},"[Brolog] 검색 엔진 노출을 위한 SEO 적용 과정","\u002Fko\u002Fproject\u002Fbrolog\u002Fbrolog-seo","ko\u002F2.project\u002F1.brolog\u002F12.brolog-seo",{"title":159,"path":160,"stem":161,"icon":20},"[Brolog] 프로젝트 구조","\u002Fko\u002Fproject\u002Fbrolog\u002Fstructure","ko\u002F2.project\u002F1.brolog\u002F2.structure",{"title":163,"path":164,"stem":165,"icon":20},"[Brolog] Nuxt Content 네비게이션 아이콘 커스텀 빌드","\u002Fko\u002Fproject\u002Fbrolog\u002Fcustom-icon","ko\u002F2.project\u002F1.brolog\u002F3.custom-icon",{"title":167,"path":168,"stem":169,"icon":20},"[Brolog] Nuxt4 Auto-imports 동작 원리와 자동 import 시스템 이해","\u002Fko\u002Fproject\u002Fbrolog\u002Fnuxt-auto-import","ko\u002F2.project\u002F1.brolog\u002F4.nuxt-auto-import",{"title":171,"path":172,"stem":173,"icon":20},"[Brolog] 개발 블로그 메인 페이지 구현","\u002Fko\u002Fproject\u002Fbrolog\u002Fdevelop-main","ko\u002F2.project\u002F1.brolog\u002F5.develop-main",{"title":175,"path":176,"stem":177,"icon":178},"[Brolog] 브랜드 아이덴티티 적용 - Custom 404 페이지와 Default No Image 구현","\u002Fko\u002Fproject\u002Fbrolog\u002Fcustom-error-and-default-thumbnail","ko\u002F2.project\u002F1.brolog\u002F6.custom-error-and-default-thumbnail","lucide:image",{"title":180,"path":181,"stem":182,"icon":20},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (1)","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy1","ko\u002F2.project\u002F1.brolog\u002F8.vercel-deploy1",{"title":184,"path":185,"stem":186,"icon":20},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (2) - Build Pipeline 오류 분석과 Nuxt 실행 구조 이해","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy2-error-analyze","ko\u002F2.project\u002F1.brolog\u002F9.vercel-deploy2-error-analyze",{"title":188,"icon":189,"path":190,"stem":191,"children":192,"page":33},"Brobean","custom:brobean","\u002Fko\u002Fproject\u002Fbrobean","ko\u002F2.project\u002F2.brobean",[193,197,201,205,209,213,217,221,225,229,233,237,241,245,249],{"title":194,"path":195,"stem":196,"icon":20},"[BroBean] 연인과 함께 사용하는 가계부: BroBean - 프로젝트 기획과 이름의 탄생","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-01","ko\u002F2.project\u002F2.brobean\u002F1.brobean-dev-log-01",{"title":198,"path":199,"stem":200,"icon":20},"[BroBean] 연인과 함께 사용하는 가계부: BroBean 프로젝트 시작 - Nuxt 4 기반 프론트 개발 환경 구축","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-02","ko\u002F2.project\u002F2.brobean\u002F2.brobean-dev-log-02",{"title":202,"path":203,"stem":204,"icon":20},"[BroBean] BroBean 프로젝트 #3 - 모바일 앱 전환을 고려한 공통 레이아웃 설계","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-03","ko\u002F2.project\u002F2.brobean\u002F3.brobean-dev-log-03",{"title":206,"path":207,"stem":208,"icon":20},"[BroBean] BroBean 프로젝트 #4 - 홈 화면(Dashboard) 설계와 Mock 데이터 구성","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-04","ko\u002F2.project\u002F2.brobean\u002F4.brobean-dev-log-04",{"title":210,"path":211,"stem":212,"icon":20},"[BroBean] BroBean 프로젝트 #5 돈을 모으면 캐릭터도 성장한다 - 브로빈 성장 시스템 설계","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-05","ko\u002F2.project\u002F2.brobean\u002F5.brobean-dev-log-05",{"title":214,"path":215,"stem":216,"icon":20},"[BroBean] BroBean 프로젝트 #6 씨앗 심기와 밭 가꾸기 기능 설계","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-06","ko\u002F2.project\u002F2.brobean\u002F6.brobean-dev-log-06",{"title":218,"path":219,"stem":220,"icon":20},"[BroBean] BroBean 프로젝트 #7 성장 일지와 나무 키우기 화면 구현","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-07","ko\u002F2.project\u002F2.brobean\u002F7.brobean-dev-log-07",{"title":222,"path":223,"stem":224,"icon":20},"[BroBean] BroBean 프로젝트 #8 수확 정산으로 한눈에 보는 소비 흐름 - 소비 리포트 & 정산 화면 구현","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-08","ko\u002F2.project\u002F2.brobean\u002F8.brobean-dev-log-08",{"title":226,"path":227,"stem":228,"icon":20},"[BroBean] BroBean 프로젝트 #9 알림부터 마이페이지까지 - 사용자 편의 기능과 개인 농장 설정 화면 구현","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-09","ko\u002F2.project\u002F2.brobean\u002F9.brobean-dev-log-09",{"title":230,"path":231,"stem":232,"icon":20},"[BroBean] BroBean 프로젝트 #10 로그인부터 파트너 초대까지 - 계정 인증과 커플 연결 화면 구현","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-10","ko\u002F2.project\u002F2.brobean\u002F910.brobean-dev-log-10",{"title":234,"path":235,"stem":236,"icon":20},"[BroBean] BroBean 프로젝트 #11 개인과 커플을 모두 위한 모드 분리 - Pinia 기반 개인\u002F커플 모드 전환 구현","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-11","ko\u002F2.project\u002F2.brobean\u002F911.brobean-dev-log-11",{"title":238,"path":239,"stem":240,"icon":20},"[BroBean] BroBean 프로젝트 #12 인증 상태 복구와 Nuxt Plugin 실행 순서 제어","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-12","ko\u002F2.project\u002F2.brobean\u002F912.brobean-dev-log-12",{"title":242,"path":243,"stem":244,"icon":20},"[BroBean] BroBean 프로젝트 #13 개인·커플 모드와 가계부 API 구현 - 쿼리 성능을 다시 돌아보다","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-13","ko\u002F2.project\u002F2.brobean\u002F913.brobean-dev-log-13",{"title":246,"path":247,"stem":248,"icon":20},"[BroBean] BroBean 프로젝트 #14 순환 참조 오류를 ObjectProvider로 해결하기","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-14","ko\u002F2.project\u002F2.brobean\u002F914.brobean-dev-log-14",{"title":250,"path":251,"stem":252,"icon":20},"[BroBean] BroBean 프로젝트 #15 JPA 페이지네이션 적용, Page와 Slice의 차이","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-15","ko\u002F2.project\u002F2.brobean\u002F915.brobean-dev-log-15",{"title":254,"icon":255,"path":256,"stem":257,"children":258,"page":33},"Error (트러블슈팅)","emojione:stop-sign","\u002Fko\u002Ftrouble-shooting","ko\u002F3.trouble-shooting",[259],{"title":137,"icon":138,"path":260,"stem":261,"children":262,"page":33},"\u002Fko\u002Ftrouble-shooting\u002Fbrolog","ko\u002F3.trouble-shooting\u002F1.brolog",[263],{"title":264,"path":265,"stem":266,"icon":20},"[Nuxt Content] Nuxt Icon 오류 해결과 Custom Collection 기반 오프라인 아이콘 구성","\u002Fko\u002Ftrouble-shooting\u002Fbrolog\u002Fnuxt-icon-restricted-network-troubleshooting","ko\u002F3.trouble-shooting\u002F1.brolog\u002F1.nuxt-icon-restricted-network-troubleshooting",{"id":268,"title":218,"body":269,"date":801,"description":802,"extension":803,"links":804,"meta":805,"navigation":815,"path":219,"seo":816,"stem":220,"__hash__":819},"docs_ko\u002Fko\u002F2.project\u002F2.brobean\u002F7.brobean-dev-log-07.md",{"type":270,"value":271,"toc":795},"minimark",[272,277,281,293,296,322,325,328,332,337,340,351,354,357,365,367,371,374,377,380,390,393,406,409,412,414,418,421,428,435,438,441,455,462,464,468,471,478,481,484,504,507,509,513,517,523,530,532,538,541,544,550,553,555,559,562,569,572,575,583,586,588,594,597,608,610,614,617,624,631,634,636,642,645,652,654,658,661,663,669,672,675,680,683,690,692,696,699,702,708,711,713,717,724,727,733,740,747,749,753,756,763,766],[273,274,276],"h1",{"id":275},"성장-일지와-나무-키우기-화면-구현","📖 성장 일지와 나무 키우기 화면 구현",[278,279,280],"p",{},"앞선 개발 과정에서 기본 레이아웃과 가계부 입력, 예산 및 고정 수입·지출 관리 화면까지 구성했다.",[278,282,283,284,288,289,292],{},"이번에는 입력한 데이터를 실제로 확인하고, 설정한 저축 목표를 꾸준히 관리할 수 있도록 ",[285,286,287],"strong",{},"성장 일지","와 ",[285,290,291],{},"나무 키우기"," 화면을 구현했다.",[278,294,295],{},"BroBean에서는 단순히 가계부 내역을 보여주는 것보다 조금 더 재미있게 사용할 수 있도록 각각의 기능에 서비스 컨셉을 적용했다.",[297,298,299,305,310,316],"ul",{},[300,301,302,303],"li",{},"가계부 내역 → ",[285,304,287],{},[300,306,307,308],{},"저축 목표 → ",[285,309,291],{},[300,311,312,313],{},"저축 진행 → ",[285,314,315],{},"나무 성장",[300,317,318,319],{},"목표 달성 → ",[285,320,321],{},"수확",[278,323,324],{},"이를 통해 돈을 기록하고 관리하는 과정을 하나의 성장 과정처럼 느낄 수 있도록 구성했다.",[326,327],"hr",{},[273,329,331],{"id":330},"성장-일지","📖 성장 일지",[333,334,336],"h2",{"id":335},"단순한-가계부-내역을-기록으로-바꾸기","📝 단순한 가계부 내역을 기록으로 바꾸기",[278,338,339],{},"가계부의 가장 기본적인 기능은 결국 내가 언제 무엇을 소비했는지 확인하는 것이다.",[278,341,342,343,347,348,350],{},"하지만 BroBean에서는 이 영역을 단순히 ",[344,345,346],"code",{},"가계부 내역","이라고 표현하기보다 ",[285,349,287],{},"라는 이름으로 구성했다.",[278,352,353],{},"앞서 지출·수입·저축을 기록할 때도 씨앗을 심는다는 컨셉을 사용했기 때문에, 기록된 내역 역시 내가 지금까지 어떤 씨앗을 심었는지 확인하는 일지처럼 연결했다.",[278,355,356],{},"성장 일지에서는 크게 두 가지 방식으로 내역을 확인할 수 있도록 구성했다.",[297,358,359,362],{},[300,360,361],{},"목록 형태로 확인",[300,363,364],{},"달력 형태로 확인",[326,366],{},[333,368,370],{"id":369},"목록으로-확인하기","📋 목록으로 확인하기",[278,372,373],{},"가장 기본적인 형태는 날짜순으로 거래 내역을 확인하는 방식이다.",[278,375,376],{},"각 내역에는 거래 유형과 카테고리, 이름, 금액, 시간이 함께 표시되도록 구성했다.",[278,378,379],{},"예를 들어:",[381,382,388],"pre",{"className":383,"code":385,"language":386,"meta":387},[384],"language-text","🍛 식비\n맛있는 카레식당\n-18,000원\n\n🐷 저축\n자유적금 자동이체\n-50,000원\n\n☕ 카페\n스타벅스 아메리카노\n-4,500원\n","text","",[344,389,385],{"__ignoreMap":387},[278,391,392],{},"처럼 한눈에 어떤 소비가 있었는지 확인할 수 있도록 했다.",[394,395,400],"div",{"className":396},[397,398,399],"flex","items-center","justify-center",[401,402],"img",{"alt":403,"src":404,"width":405},"BroBean 성장 일지 화면","\u002Fimages\u002Fbrobean\u002Fhistory.png",300,[278,407,408],{},"목록 화면에서는 단순히 금액만 나열하기보다 아이콘과 색상을 함께 사용해 거래 유형과 카테고리를 빠르게 구분할 수 있도록 했다.",[278,410,411],{},"특히 모바일 환경에서 화면을 길게 읽지 않아도 필요한 정보를 빠르게 찾을 수 있는 것을 중요하게 생각했다.",[326,413],{},[273,415,417],{"id":416},"달력으로-소비-기록-확인하기","📅 달력으로 소비 기록 확인하기",[278,419,420],{},"목록 형태만으로는 특정 날짜에 내가 어떤 소비를 했는지 확인하기 조금 불편할 수 있다.",[278,422,423,424,427],{},"그래서 두 번째 방식으로 ",[285,425,426],{},"달력 기반 조회 화면","을 추가했다.",[394,429,431],{"className":430},[397,398,399],[401,432],{"alt":433,"src":434,"width":405},"BroBean 성장 일지 화면2","\u002Fimages\u002Fbrobean\u002Fhistory2.png",[278,436,437],{},"달력에서는 날짜별로 기록이 존재하는지 확인할 수 있고, 특정 날짜를 선택하면 해당 날짜의 거래 내역을 확인할 수 있도록 구성했다.",[278,439,440],{},"이 방식은 단순한 가계부 조회뿐만 아니라 다음과 같은 사용에도 활용할 수 있다.",[297,442,443,446,449,452],{},[300,444,445],{},"특정 날짜의 소비 확인",[300,447,448],{},"특정 기간의 소비 패턴 확인",[300,450,451],{},"지출이 많았던 날짜 확인",[300,453,454],{},"저축이나 수입이 발생한 날짜 확인",[278,456,457,458,461],{},"가계부를 숫자 목록으로만 보는 것보다 ",[285,459,460],{},"시간의 흐름 속에서 소비 기록을 확인할 수 있다는 점","을 중요하게 생각했다.",[326,463],{},[273,465,467],{"id":466},"날짜별-상세-내역","🔎 날짜별 상세 내역",[278,469,470],{},"달력에서 특정 날짜를 선택하면 해당 날짜에 발생한 거래를 아래에서 상세하게 확인할 수 있도록 구성했다.",[394,472,474],{"className":473},[397,398,399],[401,475],{"alt":476,"src":477,"width":405},"BroBean 성장 일지 화면3","\u002Fimages\u002Fbrobean\u002Fhistory3.png",[278,479,480],{},"날짜를 기준으로 관련 내역을 모아 보여주기 때문에 사용자는 별도의 검색 과정 없이 원하는 날의 소비 내역을 바로 확인할 수 있다.",[278,482,483],{},"향후에는 여기에 다음과 같은 기능도 추가할 수 있을 것 같다.",[297,485,486,489,492,495,498,501],{},[300,487,488],{},"거래 수정 및 삭제",[300,490,491],{},"카테고리별 합계",[300,493,494],{},"해당 날짜의 총 지출",[300,496,497],{},"수입\u002F지출\u002F저축 합계",[300,499,500],{},"메모 확인",[300,502,503],{},"커플 각각의 소비 내역 구분",[278,505,506],{},"현재는 화면과 사용자 경험을 우선 구현하고 있기 때문에, 실제 데이터 연결과 세부 기능은 이후 Backend API를 연결하면서 확장할 예정이다.",[326,508],{},[273,510,512],{"id":511},"나무-키우기","🌳 나무 키우기",[333,514,516],{"id":515},"저축-목표를-하나의-나무로-표현하기","💰 저축 목표를 하나의 나무로 표현하기",[278,518,519,520,522],{},"성장 일지가 지금까지의 소비와 수입을 기록하는 공간이라면, ",[285,521,291],{},"는 앞으로의 목표를 관리하는 공간이다.",[278,524,525,526,529],{},"BroBean에서는 저축 목표를 단순히 금액과 달성률로 보여주는 대신 ",[285,527,528],{},"하나의 나무를 키우는 형태","로 표현했다.",[278,531,379],{},[381,533,536],{"className":534,"code":535,"language":386,"meta":387},[384],"저축 목표\n↓\n나무 심기\n↓\n돈을 모으기\n↓\n나무 성장\n↓\n목표 달성\n↓\n수확\n",[344,537,535],{"__ignoreMap":387},[278,539,540],{},"이라는 흐름이다.",[278,542,543],{},"앞서 BroBean이라는 이름을 정하면서 생각했던",[545,546,547],"blockquote",{},[278,548,549],{},"작은 습관이 모여 큰 자산이 된다.",[278,551,552],{},"라는 메시지를 실제 서비스 기능으로 연결하기 위한 부분이기도 하다.",[326,554],{},[273,556,558],{"id":557},"새로운-목표-나무-심기","🌱 새로운 목표 나무 심기",[278,560,561],{},"나무 키우기 화면에서는 새로운 저축 목표를 만들 수 있도록 했다.",[394,563,565],{"className":564},[397,398,399],[401,566],{"alt":567,"src":568,"width":405},"BroBean 나무 키우기 화면","\u002Fimages\u002Fbrobean\u002Fsaving.png",[278,570,571],{},"메인 화면에서는 현재 등록된 저축 목표들을 확인할 수 있고, 각각의 목표가 어느 정도 성장했는지 확인할 수 있다.",[278,573,574],{},"저축 목표를 추가할 때는 별도의 팝업을 사용하도록 구성했다.",[394,576,578],{"className":577},[397,398,399],[401,579],{"alt":580,"src":581,"width":582},"BroBean 나무 키우기 화면2","\u002Fimages\u002Fbrobean\u002Fsaving2.png",250,[278,584,585],{},"새로운 목표를 만들 때는 목표 이름과 목표 금액 등을 입력하고 새로운 나무를 심는 방식이다.",[278,587,379],{},[381,589,592],{"className":590,"code":591,"language":386,"meta":387},[384],"🌳 우리들의 여행 나무\n제주도 여행 자금 모으기\n\n현재 금액\n400,000원\n\n목표 금액\n1,000,000원\n\n달성률\n40%\n",[344,593,591],{"__ignoreMap":387},[278,595,596],{},"처럼 실제 저축 목표를 하나의 나무와 연결한다.",[278,598,599,600,603,604,607],{},"이렇게 하면 단순히 ",[344,601,602],{},"저축 목표 1",", ",[344,605,606],{},"저축 목표 2","처럼 관리하는 것보다 각 목표에 의미를 부여할 수 있다.",[326,609],{},[273,611,613],{"id":612},"저축하면서-나무에-물주기","💧 저축하면서 나무에 물주기",[278,615,616],{},"저축 목표를 만드는 것만으로 끝나면 기존의 목표 관리 기능과 크게 다르지 않다.",[278,618,619,620,623],{},"그래서 BroBean에서는 목표에 돈을 추가하는 행동을 ",[285,621,622],{},"나무에 물을 주는 행동","으로 표현했다.",[394,625,627],{"className":626},[397,398,399],[401,628],{"alt":629,"src":630,"width":405},"BroBean 나무 키우기 화면3","\u002Fimages\u002Fbrobean\u002Fsaving3.png",[278,632,633],{},"저축 금액을 입력하고 물을 주면 해당 나무의 성장률이 올라가는 방식이다.",[278,635,379],{},[381,637,640],{"className":638,"code":639,"language":386,"meta":387},[384],"💧 50,000원 저축\n\n↓\n나무 성장\n\n🌱 ─────── 🌿 ─────── 🌳\n",[344,641,639],{"__ignoreMap":387},[278,643,644],{},"처럼 실제 금액의 증가를 시각적인 성장과 연결할 수 있다.",[278,646,647,648,651],{},"이 기능을 통해 저축이라는 행동을 단순한 숫자의 변화가 아니라 ",[285,649,650],{},"눈에 보이는 성장 과정","으로 만들고 싶었다.",[326,653],{},[273,655,657],{"id":656},"여러-개의-목표를-동시에-관리하기","🌳 여러 개의 목표를 동시에 관리하기",[278,659,660],{},"나무 키우기의 또 다른 목적은 여러 가지 저축 목표를 동시에 관리하는 것이다.",[278,662,379],{},[381,664,667],{"className":665,"code":666,"language":386,"meta":387},[384],"🌳 우리들의 여행 나무\n제주도 여행 자금\n\n🌿 비상금 콩나무\n예비비 100만원\n\n🎁 1주년 기념일 나무\n커플링 제작 자금\n",[344,668,666],{"__ignoreMap":387},[278,670,671],{},"처럼 각각의 목표를 별도의 나무로 관리할 수 있다.",[278,673,674],{},"이 구조라면 사용자는 단순히 \"이번 달에 얼마를 저축했는가\"만 보는 것이 아니라,",[278,676,677],{},[285,678,679],{},"\"우리가 어떤 목표를 위해 돈을 모으고 있는가\"",[278,681,682],{},"를 계속 확인할 수 있다.",[278,684,685,686,689],{},"특히 연인이나 부부가 함께 사용하는 가계부라는 서비스 특성상, 개인의 저축 목표뿐 아니라 ",[285,687,688],{},"함께 이루고 싶은 목표를 관리하는 기능","으로 발전시키는 것도 고려하고 있다.",[326,691],{},[273,693,695],{"id":694},"현재-화면-구현-단계","🌱 현재 화면 구현 단계",[278,697,698],{},"이번 단계에서는 실제 Backend와 Database를 연결하기보다 화면과 사용자 경험을 먼저 확인하는 것을 목표로 했다.",[278,700,701],{},"따라서 현재 화면에서는 앞서 만든 Mock 데이터를 기반으로 다음과 같은 데이터를 표시하고 있다.",[381,703,706],{"className":704,"code":705,"language":386,"meta":387},[384],"성장 일지\n\n├── 목록 조회\n├── 달력 조회\n└── 날짜별 상세 내역\n\n나무 키우기\n\n├── 저축 목표 목록\n├── 새로운 목표 생성\n└── 저축 금액 추가\n",[344,707,705],{"__ignoreMap":387},[278,709,710],{},"실제 데이터 구조가 확정되면 이후 Backend API를 연결하면서 해당 화면을 실제 서비스 데이터와 연동할 예정이다.",[326,712],{},[273,714,716],{"id":715},"기록과-목표를-하나의-흐름으로","🔗 기록과 목표를 하나의 흐름으로",[278,718,719,720,723],{},"이번 화면을 만들면서 중요하게 생각했던 부분은 ",[285,721,722],{},"성장 일지와 나무 키우기를 서로 다른 기능으로 분리하지 않는 것","이었다.",[278,725,726],{},"BroBean의 전체적인 사용 흐름은 다음과 같이 연결할 수 있다.",[381,728,731],{"className":729,"code":730,"language":386,"meta":387},[384],"💸 지출 \u002F 수입 \u002F 저축 기록\n          ↓\n       🌱 씨앗 심기\n          ↓\n      📖 성장 일지\n          ↓\n    소비 습관과 자산 확인\n          ↓\n       💧 저축하기\n          ↓\n       🌳 나무 성장\n          ↓\n       🎯 목표 달성\n          ↓\n        🌾 수확\n",[344,732,730],{"__ignoreMap":387},[278,734,735,736,739],{},"가계부는 결국 돈을 기록하는 도구이지만, BroBean에서는 그 기록이 ",[285,737,738],{},"내 소비 습관과 자산의 성장을 확인하는 과정","이 되었으면 했다.",[278,741,742,743,746],{},"그래서 화면 하나하나를 구현할 때도 단순히 기능을 추가하는 것보다, 처음에 잡았던 ",[344,744,745],{},"씨앗 → 성장 → 나무 → 수확","이라는 서비스 컨셉이 실제 사용 과정에서도 자연스럽게 이어지는지를 계속 확인하고 있다.",[326,748],{},[273,750,752],{"id":751},"다음-개발-단계","🚧 다음 개발 단계",[278,754,755],{},"현재 Frontend에서는 주요 화면의 기본적인 흐름을 계속 만들어가고 있다.",[278,757,758,759,762],{},"다음 단계에서는 지금까지 구현한 화면을 실제 데이터 구조와 연결할 수 있도록 ",[285,760,761],{},"기능 및 데이터 모델을 구체화하는 작업","을 진행할 예정이다.",[278,764,765],{},"특히 다음과 같은 부분을 정리할 필요가 있다.",[297,767,768,771,774,777,780,783,786,789,792],{},[300,769,770],{},"사용자 및 커플 데이터",[300,772,773],{},"수입 \u002F 지출 \u002F 저축 거래 데이터",[300,775,776],{},"카테고리 구조",[300,778,779],{},"예산 데이터",[300,781,782],{},"고정 수입 \u002F 지출",[300,784,785],{},"저축 목표",[300,787,788],{},"나무 성장 단계",[300,790,791],{},"목표별 저축 내역",[300,793,794],{},"퀘스트 및 보상 데이터",{"title":387,"searchDepth":796,"depth":796,"links":797},2,[798,799,800],{"id":335,"depth":796,"text":336},{"id":369,"depth":796,"text":370},{"id":515,"depth":796,"text":516},"2026-08-07","BroBean 가계부의 성장 일지와 나무 키우기 화면을 구현하며 지출 내역 조회, 달력 기반 기록 확인, 저축 목표 관리와 나무 성장 기능을 설계한 과정을 정리합니다.","md",null,{"tags":806,"image":814},[807,808,809,810,811,812,813],"BroBean","개발일지","Nuxt","Vue","가계부","저축","UI\u002FUX","\u002Fimages\u002Fbrobean\u002Fog-image.png",{"icon":20},{"title":817,"description":818},"BroBean 성장 일지와 나무 키우기 화면 구현","Nuxt 4 기반 BroBean에서 가계부 내역을 성장 일지로 관리하고 저축 목표를 나무로 표현하는 화면을 구현한 과정을 정리합니다.","a2Bk0Sk8AKNuhTiysGzgrgKPR9t6CsG2OrCFVHQqStU",[821,823],{"title":214,"path":215,"stem":216,"description":822,"icon":20,"children":-1},"BroBean의 핵심 기능인 지출·수입·저축 등록과 월별 예산, 저축 목표, 고정 수입·지출 관리 화면을 설계한 과정을 정리합니다.",{"title":222,"path":223,"stem":224,"description":824,"icon":20,"children":-1},"BroBean의 가계부 데이터를 바탕으로 수입·지출·저축 현황과 예산 달성률, 카테고리별 소비 비중, 주차별 소비 패턴, 월별 자산 흐름을 확인할 수 있는 수확 정산 화면 구현",1789947622660]