[{"data":1,"prerenderedAt":715},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-project-brobean-brobean-dev-log-05":267,"-ko-project-brobean-brobean-dev-log-05-surround":710},[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":210,"body":269,"date":693,"description":694,"extension":695,"links":696,"meta":697,"navigation":705,"path":211,"seo":706,"stem":212,"__hash__":709},"docs_ko\u002Fko\u002F2.project\u002F2.brobean\u002F5.brobean-dev-log-05.md",{"type":270,"value":271,"toc":690},"minimark",[272,277,281,284,287,290,293,302,305,308,312,315,322,325,328,344,347,350,353,358,361,363,367,374,377,380,383,386,389,402,404,408,411,422,425,428,431,434,440,443,446,449,452,454,458,461,464,467,474,477,488,491,494,497,500,503,506,509,511,515,518,521,524,527,530,533,536,539,542,544,548,551,554,565,568,571,574,577,580,583,586,589,591,595,598,601,603,620,623,626,629,632,638,640,644,647,650,653,656,659,662,665,667,671,674,677,680],[273,274,276],"h1",{"id":275},"돈을-모으면-브로빈도-함께-성장한다","🌱 돈을 모으면 브로빈도 함께 성장한다",[278,279,280],"p",{},"홈 화면을 어느 정도 완성한 뒤 가장 오래 고민했던 부분은 **\"사용자가 왜 꾸준히 가계부를 써야 하는가?\"**였다.",[278,282,283],{},"가계부 서비스는 처음에는 열심히 기록하지만 시간이 지나면서 자연스럽게 사용 빈도가 줄어드는 경우가 많다.",[278,285,286],{},"돈을 기록하는 행위 자체는 필요하지만",[278,288,289],{},"그 과정에서 재미있는 경험이나 목표가 부족하기 때문이다.",[278,291,292],{},"그래서 BroBean에서는 단순히 기록만 하는 서비스가 아니라,",[294,295,296],"blockquote",{},[278,297,298],{},[299,300,301],"strong",{},"기록할수록 캐릭터도 함께 성장하는 가계부",[278,303,304],{},"를 목표로 성장 시스템을 설계하기 시작했다.",[306,307],"hr",{},[273,309,311],{"id":310},"단순한-기록보다-성장하는-경험을-만들고-싶었다","🎮 단순한 기록보다 성장하는 경험을 만들고 싶었다",[278,313,314],{},"BroBean의 핵심 컨셉은",[294,316,317],{},[278,318,319],{},[299,320,321],{},"돈을 심고 자산을 키운다.",[278,323,324],{},"이다.",[278,326,327],{},"이 컨셉을 확장하면",[329,330,331,335,338,341],"ul",{},[332,333,334],"li",{},"소비 기록 → 씨앗 심기",[332,336,337],{},"예산 관리 → 밭 가꾸기",[332,339,340],{},"저축 목표 → 나무 키우기",[332,342,343],{},"목표 달성 → 수확하기",[278,345,346],{},"처럼 서비스 전체를 하나의 성장 과정으로 연결할 수 있다.",[278,348,349],{},"그렇다면 사용자의 금융 습관 역시",[278,351,352],{},"단순한 숫자 변화가 아니라",[278,354,355],{},[299,356,357],{},"내 캐릭터가 성장하는 과정으로 표현하면 어떨까?",[278,359,360],{},"라는 생각에서 브로빈 성장 시스템을 시작하게 되었다.",[306,362],{},[273,364,366],{"id":365},"브로빈-성장-시스템-설계","🌱 브로빈 성장 시스템 설계",[278,368,369,370,373],{},"BroBean의 마스코트인 ",[299,371,372],{},"브로빈(BroBean)"," 은",[278,375,376],{},"사용자가 서비스를 사용하는 과정에 따라 성장하는 캐릭터다.",[278,378,379],{},"단순히 레벨 숫자만 증가하는 방식이 아니라",[278,381,382],{},"각 단계마다 새로운 모습과 의미를 가지도록 설계했다.",[278,384,385],{},"현재 브로빈은 작은 콩에서 시작해",[278,387,388],{},"사용자의 금융 습관과 함께 성장하는 방향으로 구성하고 있다.",[390,391,396],"div",{"className":392},[393,394,395],"flex","items-center","justify-center",[397,398],"img",{"alt":399,"src":400,"width":401},"브로빈 캐릭터 성장 단계","\u002Fimages\u002Fbrobean\u002Fcharacter-evolution.png",700,[306,403],{},[273,405,407],{"id":406},"레벨보다-중요한-것은-성장-과정","🌾 레벨보다 중요한 것은 성장 과정",[278,409,410],{},"일반적인 서비스에서는",[412,413,419],"pre",{"className":414,"code":416,"language":417,"meta":418},[415],"language-text","Lv.1\n\nLv.2\n\nLv.3\n","text","",[420,421,416],"code",{"__ignoreMap":418},[278,423,424],{},"처럼 숫자로만 성장 단계를 표현하는 경우가 많다.",[278,426,427],{},"하지만 BroBean에서는",[278,429,430],{},"각 단계마다 이름과 이야기를 부여하고 싶었다.",[278,432,433],{},"예를 들면",[412,435,438],{"className":436,"code":437,"language":417,"meta":418},[415],"Lv.1\n\n씨앗\n\n↓\n\nLv.2\n\n아기 새싹\n\n↓\n\nLv.3\n\n...\n",[420,439,437],{"__ignoreMap":418},[278,441,442],{},"처럼 작은 콩이 점점 성장하는 느낌을 전달하는 것이다.",[278,444,445],{},"단순히 숫자가 올라가는 것이 아니라",[278,447,448],{},"\"내가 키우고 있다\"",[278,450,451],{},"라는 경험을 주는 것이 목표였다.",[306,453],{},[273,455,457],{"id":456},"성장-도감-화면","📖 성장 도감 화면",[278,459,460],{},"성장 시스템을 구현하면서",[278,462,463],{},"현재 레벨만 보여주는 것이 아니라",[278,465,466],{},"앞으로 어떤 모습으로 성장하는지도 확인할 수 있도록 도감 화면을 설계했다.",[390,468,470],{"className":469},[393,394,395],[397,471],{"alt":399,"src":472,"width":473},"\u002Fimages\u002Fbrobean\u002Fcharacter-evolution-popup.png",300,[278,475,476],{},"도감에서는",[329,478,479,482,485],{},[332,480,481],{},"현재 성장 단계",[332,483,484],{},"이전 성장 단계",[332,486,487],{},"앞으로 도달할 단계",[278,489,490],{},"를 한눈에 확인할 수 있다.",[278,492,493],{},"현재 단계는 강조해서 보여주고",[278,495,496],{},"아직 도달하지 못한 단계는 잠금 상태로 표현한다.",[278,498,499],{},"사용자는 자연스럽게",[278,501,502],{},"\"다음 단계까지 얼마나 남았는지\"",[278,504,505],{},"확인할 수 있고",[278,507,508],{},"새로운 목표를 가지게 된다.",[306,510],{},[273,512,514],{"id":513},"현재-상태를-보여주는-방법","💡 현재 상태를 보여주는 방법",[278,516,517],{},"현재 사용자의 성장 상태는",[278,519,520],{},"단순한 텍스트 표시보다",[278,522,523],{},"더 직관적으로 확인할 수 있도록 구성했다.",[278,525,526],{},"CURRENT 배지를 통해",[278,528,529],{},"현재 내가 어느 단계에 있는지 바로 알 수 있도록 했고",[278,531,532],{},"각 성장 단계에는 간단한 설명을 추가했다.",[278,534,535],{},"이를 통해",[278,537,538],{},"브로빈이 단순한 아이콘이 아니라",[278,540,541],{},"함께 성장하는 캐릭터라는 느낌을 주고 싶었다.",[306,543],{},[273,545,547],{"id":546},"왜-성장-시스템이-필요했을까","🌱 왜 성장 시스템이 필요했을까?",[278,549,550],{},"가계부는 꾸준함이 가장 중요한 서비스다.",[278,552,553],{},"매일",[329,555,556,559,562],{},[332,557,558],{},"소비를 기록하고",[332,560,561],{},"저축을 관리하고",[332,563,564],{},"예산을 확인하는 과정",[278,566,567],{},"이 반복된다.",[278,569,570],{},"하지만 반복되는 행동만으로는 오래 유지하기 어렵다.",[278,572,573],{},"그래서 BroBean에서는",[278,575,576],{},"작은 행동에도 성장이라는 보상을 제공하고 싶었다.",[278,578,579],{},"오늘 소비를 기록하면 브로빈이 조금 성장하고",[278,581,582],{},"저축 목표를 달성하면 새로운 단계가 열린다.",[278,584,585],{},"이런 작은 변화들이",[278,587,588],{},"사용자가 서비스를 계속 사용할 수 있는 이유가 되길 바랐다.",[306,590],{},[273,592,594],{"id":593},"앞으로-추가하고-싶은-성장-요소","🎯 앞으로 추가하고 싶은 성장 요소",[278,596,597],{},"현재는 기본적인 성장 단계만 구현했지만",[278,599,600],{},"앞으로는 더 다양한 시스템을 추가할 예정이다.",[278,602,433],{},[329,604,605,608,611,614,617],{},[332,606,607],{},"오늘의 퀘스트",[332,609,610],{},"무지출 데이",[332,612,613],{},"소비 습관 칭찬",[332,615,616],{},"저축 달성 보상",[332,618,619],{},"시즌 한정 캐릭터",[278,621,622],{},"같은 요소들을 고려하고 있다.",[278,624,625],{},"또한 이전에 이야기했던 것처럼",[278,627,628],{},"브로빈 외에도",[278,630,631],{},"사용자의 소비 습관에 따라 다양한 감정을 표현하는",[278,633,634,637],{},[299,635,636],{},"서브 캐릭터 시스템","도 추가해보고 싶다.",[306,639],{},[273,641,643],{"id":642},"아직은-기능보다-방향을-만드는-과정","💭 아직은 기능보다 방향을 만드는 과정",[278,645,646],{},"현재 성장 시스템은 단순히 레벨을 올리는 기능이 아니다.",[278,648,649],{},"BroBean이라는 서비스가",[278,651,652],{},"어떤 경험을 제공해야 하는지 결정하는 중요한 부분이다.",[278,654,655],{},"돈을 관리하는 행위를",[278,657,658],{},"단순한 기록이 아니라",[278,660,661],{},"캐릭터를 성장시키는 경험으로 바꾸는 것.",[278,663,664],{},"그것이 BroBean 성장 시스템의 가장 큰 목표다.",[306,666],{},[273,668,670],{"id":669},"다음-일정","🚀 다음 일정",[278,672,673],{},"성장 시스템이 준비되었다면",[278,675,676],{},"이제 실제로 사용자가 돈을 기록할 수 있는 기능이 필요하다.",[278,678,679],{},"다음 편에서는 BroBean의 핵심 기능인",[278,681,682,685,686,689],{},[299,683,684],{},"씨앗 심기(지출·수입·저축 등록)"," 와 ",[299,687,688],{},"밭 가꾸기(예산 및 고정 수입·지출 관리)"," 화면을 어떻게 설계했는지 정리해보려고 한다.",{"title":418,"searchDepth":691,"depth":691,"links":692},2,[],"2026-08-05","BroBean 프로젝트에서 가계부를 꾸준히 사용할 수 있도록 설계한 성장 시스템과 브로빈 캐릭터 진화 과정을 소개합니다.","md",null,{"tags":698,"image":704},[699,700,701,702,703],"BroBean","Nuxt","UX","Gameification","Character","\u002Fimages\u002Fbrobean\u002Fog-image.png",{"icon":20},{"title":707,"description":708},"BroBean 성장 시스템 설계 - 돈을 모으면 브로빈도 성장한다","가계부를 게임처럼 즐길 수 있도록 설계한 BroBean의 성장 시스템과 캐릭터 진화 컨셉을 소개합니다.","smEipWjIWjUmdZv-bwrPx0nLOhCXaqeDFF6aCHWBrR8",[711,713],{"title":206,"path":207,"stem":208,"description":712,"icon":20,"children":-1},"BroBean의 첫 화면인 Dashboard를 설계하면서 사용자 경험을 중심으로 필요한 정보와 Mock 데이터를 어떻게 구성했는지 정리합니다.",{"title":214,"path":215,"stem":216,"description":714,"icon":20,"children":-1},"BroBean의 핵심 기능인 지출·수입·저축 등록과 월별 예산, 저축 목표, 고정 수입·지출 관리 화면을 설계한 과정을 정리합니다.",1789947621688]