[{"data":1,"prerenderedAt":876},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-project-brobean-brobean-dev-log-06":267,"-ko-project-brobean-brobean-dev-log-06-surround":871},[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":214,"body":269,"date":853,"description":854,"extension":855,"links":856,"meta":857,"navigation":866,"path":215,"seo":867,"stem":216,"__hash__":870},"docs_ko\u002Fko\u002F2.project\u002F2.brobean\u002F6.brobean-dev-log-06.md",{"type":270,"value":271,"toc":850},"minimark",[272,277,281,289,292,295,306,309,312,316,319,322,325,331,334,337,350,352,356,359,362,365,371,374,377,380,382,386,389,392,398,401,404,406,410,413,416,419,425,428,435,437,441,444,450,453,456,462,465,468,470,474,481,484,487,490,497,499,503,506,513,516,519,522,528,531,537,540,542,546,549,552,558,561,567,570,573,576,578,582,585,592,595,598,600,604,607,613,616,622,625,628,635,637,641,644,650,653,656,662,665,667,673,676,682,685,688,694,697,699,703,706,713,719,726,729,731,735,738,741,747,750,753,755,759,762,765,784,787,794,797,799,803,806,809,812,818,821,824,826,830,833,836,841,844,847],[273,274,276],"h1",{"id":275},"가계부의-핵심-기능을-만들기-시작했다","🌱 가계부의 핵심 기능을 만들기 시작했다",[278,279,280],"p",{},"홈 화면과 공통 레이아웃, 그리고 브로빈 성장 시스템까지 어느 정도 방향을 잡은 뒤 이제 실제 가계부 기능을 만들어보기로 했다.",[278,282,283,284,288],{},"BroBean에서 가장 중요한 기능은 결국 ",[285,286,287],"strong",{},"돈을 기록하고 관리하는 것","이다.",[278,290,291],{},"처음 프로젝트를 구상할 때부터 일반적인 가계부처럼 단순히 금액과 메모를 입력하는 방식보다는, 앞에서 정한 농장 컨셉을 기능 자체에도 자연스럽게 녹이고 싶었다.",[278,293,294],{},"그래서 이번에는 가계부의 기본 기능을 크게 두 가지 영역으로 나누었다.",[296,297,303],"pre",{"className":298,"code":300,"language":301,"meta":302},[299],"language-text","🌱 씨앗 심기\n\n지출 \u002F 수입 \u002F 저축 기록\n\n\n🌾 밭 가꾸기\n\n예산 \u002F 저축 목표 \u002F 고정 수입·지출 관리\n","text","",[304,305,300],"code",{"__ignoreMap":302},[278,307,308],{},"기능 이름부터 BroBean의 세계관과 연결되도록 설계했다.",[310,311],"hr",{},[273,313,315],{"id":314},"씨앗-심기-지출수입저축-기록","🌱 씨앗 심기 - 지출·수입·저축 기록",[278,317,318],{},"가장 먼저 만든 것은 실제 돈의 흐름을 기록하는 화면이다.",[278,320,321],{},"가계부에서 사용자가 가장 자주 접근하게 될 화면이기 때문에 입력 과정을 최대한 단순하게 만드는 것을 우선했다.",[278,323,324],{},"기록 유형은 크게 세 가지로 구분했다.",[296,326,329],{"className":327,"code":328,"language":301,"meta":302},[299],"지출\n\n수입\n\n저축\n",[304,330,328],{"__ignoreMap":302},[278,332,333],{},"각 유형을 하나의 탭으로 구분하고, 같은 입력 화면에서 유형만 변경할 수 있도록 구성했다.",[278,335,336],{},"이렇게 하면 별도의 페이지를 이동하지 않고도 현재 기록하려는 항목의 종류를 빠르게 선택할 수 있다.",[338,339,344],"div",{"className":340},[341,342,343],"flex","items-center","justify-center",[345,346],"img",{"alt":347,"src":348,"width":349},"BroBean 씨앗 심기 화면","\u002Fimages\u002Fbrobean\u002Fseed-farm.png",300,[310,351],{},[273,353,355],{"id":354},"금액-입력은-최대한-빠르게","💰 금액 입력은 최대한 빠르게",[278,357,358],{},"가계부에서 가장 자주 입력하는 값은 금액이다.",[278,360,361],{},"따라서 금액 입력 영역을 화면 상단에 배치하고 빠르게 숫자를 입력할 수 있도록 구성했다.",[278,363,364],{},"특히 자주 사용하는 금액을 빠르게 추가할 수 있도록",[296,366,369],{"className":367,"code":368,"language":301,"meta":302},[299],"+1천\n\n+5천\n\n+1만\n\n+5만\n",[304,370,368],{"__ignoreMap":302},[278,372,373],{},"형태의 빠른 금액 버튼도 함께 배치했다.",[278,375,376],{},"매번 숫자를 직접 입력하는 것보다 자주 사용하는 금액을 한 번 눌러 추가할 수 있도록 하여 모바일 환경에서의 입력 부담을 줄이는 방향으로 설계했다.",[278,378,379],{},"금액을 잘못 입력했을 때를 고려해 초기화 버튼도 함께 제공했다.",[310,381],{},[273,383,385],{"id":384},"️-카테고리는-버튼-형태로-선택","🏷️ 카테고리는 버튼 형태로 선택",[278,387,388],{},"금액을 입력한 다음에는 카테고리를 선택한다.",[278,390,391],{},"카테고리는 일반적인 Select 형태보다는 화면에서 바로 선택할 수 있는 카드 형태로 구성했다.",[296,393,396],{"className":394,"code":395,"language":301,"meta":302},[299],"┌─────────┬─────────┬─────────┐\n│ 🍚 식비  │ ☕ 카페  │ 🚗 교통  │\n├─────────┼─────────┼─────────┤\n│ 🛍 쇼핑  │ 🏠 생활  │ 🎮 취미  │\n└─────────┴─────────┴─────────┘\n",[304,397,395],{"__ignoreMap":302},[278,399,400],{},"모바일에서는 목록을 펼쳐서 선택하는 것보다 자주 사용하는 카테고리를 바로 보여주는 편이 입력 흐름을 끊지 않는다고 판단했다.",[278,402,403],{},"선택된 카테고리는 색상과 테두리를 변경하고 체크 표시를 추가하여 현재 선택 상태도 명확하게 표현했다.",[310,405],{},[273,407,409],{"id":408},"날짜와-메모","📅 날짜와 메모",[278,411,412],{},"기본적인 기록에는 날짜와 메모도 추가했다.",[278,414,415],{},"날짜는 기본 입력을 활용하고, 메모는 선택 사항으로 두었다.",[278,417,418],{},"특히 저축의 경우",[296,420,423],{"className":421,"code":422,"language":301,"meta":302},[299],"주택청약\n\n비상금 통장\n\n자유적금\n",[304,424,422],{"__ignoreMap":302},[278,426,427],{},"처럼 어디에 저축했는지 기록할 수 있도록 메모 영역의 Placeholder도 유형에 맞게 구성했다.",[278,429,430,431,434],{},"모든 정보를 필수로 입력하게 만들기보다는 ",[285,432,433],{},"빠르게 기록할 수 있는 것","을 우선했다.",[310,436],{},[273,438,440],{"id":439},"등록-버튼도-brobean-컨셉으로","🌱 등록 버튼도 BroBean 컨셉으로",[278,442,443],{},"일반적인 가계부라면 단순히",[296,445,448],{"className":446,"code":447,"language":301,"meta":302},[299],"등록\n",[304,449,447],{"__ignoreMap":302},[278,451,452],{},"이라고 표시할 수 있다.",[278,454,455],{},"하지만 BroBean에서는 등록 버튼 역시 농장 컨셉과 연결했다.",[296,457,460],{"className":458,"code":459,"language":301,"meta":302},[299],"지출 씨앗 심기\n\n수입 씨앗 심기\n\n저축 씨앗 심기\n",[304,461,459],{"__ignoreMap":302},[278,463,464],{},"같은 식으로 현재 선택한 유형에 따라 버튼 문구가 변경되도록 했다.",[278,466,467],{},"작은 부분이지만 이런 요소들이 모이면 일반적인 입력 폼과는 다른 BroBean만의 경험을 만들 수 있다고 생각했다.",[310,469],{},[273,471,473],{"id":472},"밭-가꾸기-예산을-관리하는-화면","🌾 밭 가꾸기 - 예산을 관리하는 화면",[278,475,476,477,480],{},"두 번째로 설계한 영역은 ",[285,478,479],{},"예산 관리","다.",[278,482,483],{},"가계부에 기록만 하는 것으로는 소비 습관을 관리하기 어렵다.",[278,485,486],{},"이번 달에 얼마를 사용할 것인지 정하고,",[278,488,489],{},"각 카테고리에 어느 정도의 예산을 배분할 것인지 미리 설정할 필요가 있다.",[278,491,492,493,496],{},"그래서 예산 관리 화면을 BroBean에서는 ",[285,494,495],{},"밭 가꾸기","라는 이름으로 구성했다.",[310,498],{},[273,500,502],{"id":501},"월별-예산-설정","📅 월별 예산 설정",[278,504,505],{},"먼저 관리할 월을 선택할 수 있도록 했다.",[338,507,509],{"className":508},[341,342,343],[345,510],{"alt":511,"src":512,"width":349},"BroBean 밭 가꾸기 화면","\u002Fimages\u002Fbrobean\u002Fbudget.png",[278,514,515],{},"특정 월을 선택하면 해당 월의 예산을 설정할 수 있다.",[278,517,518],{},"전체 지출 예산을 먼저 입력하고 이후 카테고리별로 금액을 나누는 구조다.",[278,520,521],{},"예를 들어",[296,523,526],{"className":524,"code":525,"language":301,"meta":302},[299],"이번 달 지출 예산\n\n2,000,000원\n",[304,527,525],{"__ignoreMap":302},[278,529,530],{},"을 설정했다면",[296,532,535],{"className":533,"code":534,"language":301,"meta":302},[299],"식비       500,000원\n\n교통       200,000원\n\n생활       300,000원\n\n쇼핑       200,000원\n\n기타       800,000원\n",[304,536,534],{"__ignoreMap":302},[278,538,539],{},"처럼 세부 카테고리별 예산을 배분할 수 있다.",[310,541],{},[273,543,545],{"id":544},"️-예산-배분-금액을-실시간으로-확인","⚖️ 예산 배분 금액을 실시간으로 확인",[278,547,548],{},"카테고리별 금액을 입력하다 보면 전체 예산과 맞지 않는 경우가 생길 수 있다.",[278,550,551],{},"그래서 현재 배분된 금액의 합계를 별도로 표시하도록 했다.",[296,553,556],{"className":554,"code":555,"language":301,"meta":302},[299],"카테고리 배분 합계\n\n1,200,000원\n",[304,557,555],{"__ignoreMap":302},[278,559,560],{},"전체 예산과 차이가 있다면",[296,562,565],{"className":563,"code":564,"language":301,"meta":302},[299],"1,200,000원\n(-800,000)\n",[304,566,564],{"__ignoreMap":302},[278,568,569],{},"처럼 남은 금액도 함께 확인할 수 있다.",[278,571,572],{},"반대로 정확하게 배분이 완료되면 정상 상태로 표시한다.",[278,574,575],{},"이렇게 하면 저장하기 전에 예산 설정이 제대로 되었는지 바로 확인할 수 있다.",[310,577],{},[273,579,581],{"id":580},"자동-균등-배분","⚡ 자동 균등 배분",[278,583,584],{},"모든 카테고리에 일일이 금액을 입력하는 것도 번거로울 수 있다.",[278,586,587,588,591],{},"그래서 ",[285,589,590],{},"자동 균등 배분"," 기능도 추가했다.",[278,593,594],{},"전체 예산을 입력한 뒤 버튼을 누르면 현재 카테고리에 예산을 자동으로 나누어준다.",[278,596,597],{},"처음 예산을 설정하는 사용자에게 기본값을 제공하는 역할도 할 수 있기 때문에 이후 실제 서비스에서는 사용자의 과거 소비 데이터를 활용한 추천 예산으로 발전시킬 수도 있을 것 같다.",[310,599],{},[273,601,603],{"id":602},"고정-수입과-고정-지출-관리","🔁 고정 수입과 고정 지출 관리",[278,605,606],{},"예산 관리 화면에서는 일반적인 월별 예산뿐만 아니라 매월 반복되는 항목도 관리할 수 있도록 했다.",[338,608,610],{"className":609},[341,342,343],[345,611],{"alt":511,"src":612,"width":349},"\u002Fimages\u002Fbrobean\u002Fbudget2.png",[278,614,615],{},"예를 들면",[296,617,620],{"className":618,"code":619,"language":301,"meta":302},[299],"월급\n\n월세\n\n통신비\n\n보험료\n\n구독 서비스\n",[304,621,619],{"__ignoreMap":302},[278,623,624],{},"같은 항목이다.",[278,626,627],{},"이런 값들은 매달 반복되기 때문에 매번 직접 입력하도록 하면 가계부 사용 과정이 번거로워진다.",[278,629,630,631,634],{},"따라서 별도의 ",[285,632,633],{},"고정 지출·수입 관리"," 영역을 만들었다.",[310,636],{},[273,638,640],{"id":639},"고정-항목-등록","💳 고정 항목 등록",[278,642,643],{},"새로운 고정 항목을 추가하면",[296,645,648],{"className":646,"code":647,"language":301,"meta":302},[299],"항목 이름\n\n유형\n\n금액\n\n매월 처리일\n",[304,649,647],{"__ignoreMap":302},[278,651,652],{},"을 입력할 수 있다.",[278,654,655],{},"유형은",[296,657,660],{"className":658,"code":659,"language":301,"meta":302},[299],"지출\n\n수입\n",[304,661,659],{"__ignoreMap":302},[278,663,664],{},"두 가지로 구분했다.",[278,666,521],{},[296,668,671],{"className":669,"code":670,"language":301,"meta":302},[299],"월급\n수입\n3,000,000원\n매월 25일\n",[304,672,670],{"__ignoreMap":302},[278,674,675],{},"또는",[296,677,680],{"className":678,"code":679,"language":301,"meta":302},[299],"월세\n지출\n700,000원\n매월 1일\n",[304,681,679],{"__ignoreMap":302},[278,683,684],{},"처럼 등록할 수 있다.",[278,686,687],{},"등록된 항목은 목록에서",[296,689,692],{"className":690,"code":691,"language":301,"meta":302},[299],"월세\n\n매월 1일 자동 반영\n\n-700,000원\n",[304,693,691],{"__ignoreMap":302},[278,695,696],{},"처럼 확인할 수 있도록 했다.",[310,698],{},[273,700,702],{"id":701},"예산과-고정비를-하나의-화면에서-관리","🧩 예산과 고정비를 하나의 화면에서 관리",[278,704,705],{},"여기서 조금 고민했던 부분은 예산과 고정 수입·지출을 별도의 페이지로 분리할 것인지였다.",[278,707,708,709,712],{},"결론적으로는 둘을 ",[285,710,711],{},"하나의 관리 영역 안에서 탭으로 분리","했다.",[296,714,717],{"className":715,"code":716,"language":301,"meta":302},[299],"┌────────────────────────────┐\n│  예산 및 저축 목표 │ 고정 지출·수입 │\n└────────────────────────────┘\n",[304,718,716],{"__ignoreMap":302},[278,720,721,722,725],{},"예산과 고정비는 서로 다른 기능이지만 모두 사용자의 ",[285,723,724],{},"월간 재정 계획을 설정하는 기능","이라는 공통점이 있기 때문이다.",[278,727,728],{},"사용자가 한 곳에서 이번 달 돈의 흐름을 계획할 수 있도록 하는 것이 더 자연스럽다고 판단했다.",[310,730],{},[273,732,734],{"id":733},"기능을-하나의-세계관으로-연결하기","🌱 기능을 하나의 세계관으로 연결하기",[278,736,737],{},"이번 화면들을 만들면서 가장 신경 쓴 부분은 각각의 기능이 따로 놀지 않도록 하는 것이었다.",[278,739,740],{},"BroBean에서는",[296,742,745],{"className":743,"code":744,"language":301,"meta":302},[299],"💸 지출 기록\n\n↓\n\n🌱 씨앗 심기\n\n\n💰 수입 기록\n\n↓\n\n🌱 씨앗 심기\n\n\n🏦 저축 기록\n\n↓\n\n🌱 씨앗 심기\n\n\n📊 예산 설정\n\n↓\n\n🌾 밭 가꾸기\n\n\n🎯 저축 목표\n\n↓\n\n🌳 나무 키우기\n\n\n📈 소비 리포트\n\n↓\n\n🌾 수확 정산\n",[304,746,744],{"__ignoreMap":302},[278,748,749],{},"처럼 실제 가계부의 기능과 BroBean의 세계관을 연결하고 있다.",[278,751,752],{},"이렇게 하면 사용자는 단순히 메뉴 이름을 외우는 것이 아니라 각각의 기능이 어떤 역할을 하는지 자연스럽게 이해할 수 있다.",[310,754],{},[273,756,758],{"id":757},"모바일-환경을-기준으로-설계","📱 모바일 환경을 기준으로 설계",[278,760,761],{},"이번 기능들도 앞서 설계한 레이아웃과 마찬가지로 모바일 화면을 우선해서 제작했다.",[278,763,764],{},"특히 입력 화면에서는",[766,767,768,772,775,778,781],"ul",{},[769,770,771],"li",{},"큰 금액 입력 영역",[769,773,774],{},"빠른 금액 버튼",[769,776,777],{},"한눈에 보이는 카테고리",[769,779,780],{},"짧은 입력 단계",[769,782,783],{},"명확한 등록 버튼",[278,785,786],{},"을 중심으로 구성했다.",[278,788,789,790,793],{},"가계부는 한 번 사용하는 것보다 ",[285,791,792],{},"매일 반복해서 사용하는 과정","이 중요하기 때문이다.",[278,795,796],{},"따라서 화려한 UI보다는 실제 입력 과정에서 손이 덜 가는 구조를 우선하려고 했다.",[310,798],{},[273,800,802],{"id":801},"현재는-mock-데이터-기반으로-개발","🧪 현재는 Mock 데이터 기반으로 개발",[278,804,805],{},"이번 단계에서도 아직 Backend와 Database는 연결하지 않았다.",[278,807,808],{},"먼저 화면과 사용자 흐름을 검증하기 위해 Mock 데이터를 활용하고 있다.",[278,810,811],{},"예산 금액이나 고정 지출 항목 등을 실제 데이터처럼 넣어보고",[296,813,816],{"className":814,"code":815,"language":301,"meta":302},[299],"예산 설정\n\n↓\n\n카테고리 배분\n\n↓\n\n고정 수입·지출 등록\n\n↓\n\n가계부 기록\n\n↓\n\n홈 화면에 반영\n",[304,817,815],{"__ignoreMap":302},[278,819,820],{},"되는 전체 흐름을 먼저 확인하고 있다.",[278,822,823],{},"이렇게 Frontend에서 필요한 데이터 구조와 화면을 먼저 구체화한 뒤 나중에 Spring Boot API와 연결할 예정이다.",[310,825],{},[273,827,829],{"id":828},"다음-단계","🚀 다음 단계",[278,831,832],{},"이번 단계까지 진행하면서 BroBean의 주요 가계부 기능에 필요한 기본 화면을 하나씩 만들어가고 있다.",[278,834,835],{},"다음 단계에서는 이렇게 만들어진 화면들을 실제 사용자 흐름에 맞게 연결하고,",[278,837,838],{},[285,839,840],{},"가계부 기록 → 예산 → 저축 목표 → 소비 현황",[278,842,843],{},"이 하나의 흐름으로 이어지도록 기능을 확장해볼 예정이다.",[278,845,846],{},"Frontend에서 화면과 데이터 구조를 충분히 검증한 뒤,",[278,848,849],{},"이후에는 실제 Backend API와 Database 설계로 넘어갈 계획이다.",{"title":302,"searchDepth":851,"depth":851,"links":852},2,[],"2026-08-06","BroBean의 핵심 기능인 지출·수입·저축 등록과 월별 예산, 저축 목표, 고정 수입·지출 관리 화면을 설계한 과정을 정리합니다.","md",null,{"tags":858,"image":865},[859,860,861,862,863,864],"BroBean","Nuxt","Frontend","가계부","UI\u002FUX","예산관리","\u002Fimages\u002Fbrobean\u002Fog-image.png",{"icon":20},{"title":868,"description":869},"BroBean 씨앗 심기와 밭 가꾸기 기능 설계 - 가계부 입력과 예산 관리","지출·수입·저축을 기록하는 씨앗 심기와 월별 예산 및 고정 수입·지출을 관리하는 밭 가꾸기 기능을 설계했습니다.","1hSojoWnl_WezbLXR5f1riYgUNhvdmTgYo_XKYXvM3M",[872,874],{"title":210,"path":211,"stem":212,"description":873,"icon":20,"children":-1},"BroBean 프로젝트에서 가계부를 꾸준히 사용할 수 있도록 설계한 성장 시스템과 브로빈 캐릭터 진화 과정을 소개합니다.",{"title":218,"path":219,"stem":220,"description":875,"icon":20,"children":-1},"BroBean 가계부의 성장 일지와 나무 키우기 화면을 구현하며 지출 내역 조회, 달력 기반 기록 확인, 저축 목표 관리와 나무 성장 기능을 설계한 과정을 정리합니다.",1789947621706]