[{"data":1,"prerenderedAt":895},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-project-brobean-brobean-dev-log-04":267,"-ko-project-brobean-brobean-dev-log-04-surround":890},[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":206,"body":269,"date":873,"description":874,"extension":875,"links":876,"meta":877,"navigation":885,"path":207,"seo":886,"stem":208,"__hash__":889},"docs_ko\u002Fko\u002F2.project\u002F2.brobean\u002F4.brobean-dev-log-04.md",{"type":270,"value":271,"toc":871},"minimark",[272,277,286,289,292,298,301,308,311,315,318,335,338,360,363,365,369,372,377,380,383,394,397,400,403,408,411,413,417,420,423,426,429,443,446,448,452,455,458,461,599,602,605,608,610,614,617,620,666,669,672,683,686,689,691,695,698,701,704,721,724,727,730,733,735,739,742,745,748,751,765,768,771,774,776,780,783,786,791,794,797,808,811,813,817,820,823,826,829,832,835,838,840,844,847,850,856,859,862,867],[273,274,276],"h1",{"id":275},"앱을-실행하면-가장-먼저-보이는-화면","🏠 앱을 실행하면 가장 먼저 보이는 화면",[278,279,280,281,285],"p",{},"공통 레이아웃을 완성한 뒤 가장 먼저 작업한 화면은 ",[282,283,284],"strong",{},"Dashboard(Home)"," 이다.",[278,287,288],{},"가계부 서비스에서 가장 자주 보게 되는 화면인 만큼 단순히 현재 잔액만 보여주는 것이 아니라,",[278,290,291],{},"사용자가 앱을 실행했을 때",[293,294,295],"blockquote",{},[278,296,297],{},"\"오늘 무엇을 하면 되는지\"",[278,299,300],{},"를 자연스럽게 알려주는 화면을 만들고 싶었다.",[278,302,303,304,307],{},"그래서 처음부터 단순한 통계 화면이 아니라 ",[282,305,306],{},"성장형 Dashboard","를 목표로 설계를 시작했다.",[309,310],"hr",{},[273,312,314],{"id":313},"️-현재-dashboard-화면","🖼️ 현재 Dashboard 화면",[278,316,317],{},"아래는 현재 구현한 Dashboard 화면이다.",[319,320,326,332],"div",{"className":321},[322,323,324,325],"flex","items-center","justify-center","gap-10",[327,328],"img",{"alt":329,"src":330,"width":331},"BroBean Dashboard","\u002Fimages\u002Fbrobean\u002Fbrobean-home-thumbnail.png",300,[327,333],{"alt":329,"src":334,"width":331},"\u002Fimages\u002Fbrobean\u002Fbrobean-home-thumbnail2.png",[278,336,337],{},"홈 화면에서는",[339,340,341,345,348,351,354,357],"ul",{},[342,343,344],"li",{},"현재 성장 단계",[342,346,347],{},"이번 달 저축 진행률",[342,349,350],{},"저축 목표",[342,352,353],{},"오늘의 퀘스트",[342,355,356],{},"예산 정보",[342,358,359],{},"최근 소비 내역",[278,361,362],{},"까지 한 번에 확인할 수 있도록 구성했다.",[309,364],{},[273,366,368],{"id":367},"단순한-가계부가-아닌-성장형-서비스","🌱 단순한 가계부가 아닌 성장형 서비스",[278,370,371],{},"기존 가계부를 사용하면서 가장 많이 느낀 것은",[293,373,374],{},[278,375,376],{},"\"기록만 하고 끝난다.\"",[278,378,379],{},"는 점이었다.",[278,381,382],{},"기록은 열심히 하지만",[339,384,385,388,391],{},[342,386,387],{},"얼마나 잘하고 있는지",[342,389,390],{},"오늘 무엇을 해야 하는지",[342,392,393],{},"목표까지 얼마나 남았는지",[278,395,396],{},"같은 부분은 크게 느껴지지 않았다.",[278,398,399],{},"그래서 BroBean에서는",[278,401,402],{},"돈을 관리하는 것이 아니라",[278,404,405],{},[282,406,407],{},"브로빈을 성장시키는 경험",[278,409,410],{},"으로 만들고 싶었다.",[309,412],{},[273,414,416],{"id":415},"dashboard에-어떤-정보가-필요할까","📊 Dashboard에 어떤 정보가 필요할까?",[278,418,419],{},"처음에는 정말 많은 정보를 넣으려고 했다.",[278,421,422],{},"하지만 화면이 복잡해질수록 오히려 아무것도 보이지 않았다.",[278,424,425],{},"그래서 필요한 정보를 다시 정리했다.",[278,427,428],{},"Dashboard에서 보여줄 정보는 크게 다섯 가지로 정리했다.",[339,430,431,433,436,438,441],{},[342,432,344],{},[342,434,435],{},"목표 저축 진행률",[342,437,353],{},[342,439,440],{},"예산 현황",[342,442,359],{},[278,444,445],{},"이 정도만 있어도 사용자가 앱을 실행했을 때 해야 할 일을 충분히 파악할 수 있다고 판단했다.",[309,447],{},[273,449,451],{"id":450},"화면보다-먼저-type부터-설계","📦 화면보다 먼저 Type부터 설계",[278,453,454],{},"이번 프로젝트에서는 UI를 먼저 만들기보다",[278,456,457],{},"데이터 구조를 먼저 설계하는 방식을 선택했다.",[278,459,460],{},"Dashboard에서 사용하는 모든 데이터를 하나의 Interface로 묶었다.",[462,463,469],"pre",{"className":464,"code":465,"filename":466,"language":467,"meta":468,"style":468},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\nexport interface DashboardData {\n\n    userStatus: UserStatus\n\n    savingGoals: SavingGoal[]\n\n    quests: Quest[]\n\n    budgetSummary: BudgetSummary\n\n    todayMessage: string\n\n}\n\n","DashboardData","ts","",[470,471,472,481,500,505,518,523,538,543,556,561,572,577,588,593],"code",{"__ignoreMap":468},[473,474,477],"span",{"class":475,"line":476},"line",1,[473,478,480],{"emptyLinePlaceholder":479},true,"\n",[473,482,484,488,492,496],{"class":475,"line":483},2,[473,485,487],{"class":486},"s7zQu","export",[473,489,491],{"class":490},"spNyl"," interface",[473,493,495],{"class":494},"sBMFI"," DashboardData",[473,497,499],{"class":498},"sMK4o"," {\n",[473,501,503],{"class":475,"line":502},3,[473,504,480],{"emptyLinePlaceholder":479},[473,506,508,512,515],{"class":475,"line":507},4,[473,509,511],{"class":510},"swJcz","    userStatus",[473,513,514],{"class":498},":",[473,516,517],{"class":494}," UserStatus\n",[473,519,521],{"class":475,"line":520},5,[473,522,480],{"emptyLinePlaceholder":479},[473,524,526,529,531,534],{"class":475,"line":525},6,[473,527,528],{"class":510},"    savingGoals",[473,530,514],{"class":498},[473,532,533],{"class":494}," SavingGoal",[473,535,537],{"class":536},"sTEyZ","[]\n",[473,539,541],{"class":475,"line":540},7,[473,542,480],{"emptyLinePlaceholder":479},[473,544,546,549,551,554],{"class":475,"line":545},8,[473,547,548],{"class":510},"    quests",[473,550,514],{"class":498},[473,552,553],{"class":494}," Quest",[473,555,537],{"class":536},[473,557,559],{"class":475,"line":558},9,[473,560,480],{"emptyLinePlaceholder":479},[473,562,564,567,569],{"class":475,"line":563},10,[473,565,566],{"class":510},"    budgetSummary",[473,568,514],{"class":498},[473,570,571],{"class":494}," BudgetSummary\n",[473,573,575],{"class":475,"line":574},11,[473,576,480],{"emptyLinePlaceholder":479},[473,578,580,583,585],{"class":475,"line":579},12,[473,581,582],{"class":510},"    todayMessage",[473,584,514],{"class":498},[473,586,587],{"class":494}," string\n",[473,589,591],{"class":475,"line":590},13,[473,592,480],{"emptyLinePlaceholder":479},[473,594,596],{"class":475,"line":595},14,[473,597,598],{"class":498},"}\n",[278,600,601],{},"이렇게 화면 하나가 사용하는 데이터를 명확하게 분리해두면",[278,603,604],{},"나중에 Backend API를 연결하더라도",[278,606,607],{},"응답 구조를 거의 그대로 사용할 수 있다.",[309,609],{},[273,611,613],{"id":612},"mock-데이터로-먼저-개발하기","🧪 Mock 데이터로 먼저 개발하기",[278,615,616],{},"아직 Spring Boot Backend는 개발하지 않은 상태이기 때문에",[278,618,619],{},"모든 화면은 Mock 데이터로 개발을 진행했다.",[462,621,624],{"className":464,"code":622,"filename":623,"language":467,"meta":468,"style":468},"\nexport const dummyDashboardData: DashboardData = {\n\n    ...\n\n}\n\n","dummyDashboardData",[470,625,626,630,649,653,658,662],{"__ignoreMap":468},[473,627,628],{"class":475,"line":476},[473,629,480],{"emptyLinePlaceholder":479},[473,631,632,634,637,640,642,644,647],{"class":475,"line":483},[473,633,487],{"class":486},[473,635,636],{"class":490}," const",[473,638,639],{"class":536}," dummyDashboardData",[473,641,514],{"class":498},[473,643,495],{"class":494},[473,645,646],{"class":498}," =",[473,648,499],{"class":498},[473,650,651],{"class":475,"line":502},[473,652,480],{"emptyLinePlaceholder":479},[473,654,655],{"class":475,"line":507},[473,656,657],{"class":498},"    ...\n",[473,659,660],{"class":475,"line":520},[473,661,480],{"emptyLinePlaceholder":479},[473,663,664],{"class":475,"line":525},[473,665,598],{"class":498},[278,667,668],{},"Mock 데이터를 사용하는 이유는 단순히 Backend가 없어서가 아니다.",[278,670,671],{},"Backend가 완성되기 전에도",[339,673,674,677,680],{},[342,675,676],{},"화면 개발",[342,678,679],{},"컴포넌트 분리",[342,681,682],{},"상태 관리",[278,684,685],{},"를 모두 진행할 수 있기 때문이다.",[278,687,688],{},"API가 준비되면 Mock 데이터만 실제 API 호출로 교체하면 된다.",[309,690],{},[273,692,694],{"id":693},"목표-저축도-하나가-아니라-여러-개","🌳 목표 저축도 하나가 아니라 여러 개",[278,696,697],{},"저축 목표 역시 하나만 두고 싶지 않았다.",[278,699,700],{},"사람마다 돈을 모으는 이유는 모두 다르기 때문이다.",[278,702,703],{},"예를 들어",[339,705,706,709,712,715,718],{},[342,707,708],{},"여행",[342,710,711],{},"비상금",[342,713,714],{},"기념일",[342,716,717],{},"자동차",[342,719,720],{},"결혼",[278,722,723],{},"등 다양한 목표가 존재한다.",[278,725,726],{},"그래서 Dashboard에서는 여러 개의 목표를 동시에 관리할 수 있도록 설계했다.",[278,728,729],{},"현재는 진행률만 표시하지만",[278,731,732],{},"추후에는 브로빈 성장과도 연결할 계획이다.",[309,734],{},[273,736,738],{"id":737},"오늘의-퀘스트","🎯 오늘의 퀘스트",[278,740,741],{},"Dashboard에서 가장 마음에 드는 기능 중 하나가 오늘의 퀘스트다.",[278,743,744],{},"가계부는 기록을 하지 않으면 아무 의미가 없다.",[278,746,747],{},"하지만 기록 자체가 귀찮아지는 순간 사용을 그만두게 된다.",[278,749,750],{},"그래서",[339,752,753,756,759,762],{},[342,754,755],{},"오늘의 지출 기록",[342,757,758],{},"무지출 데이",[342,760,761],{},"예산 확인",[342,763,764],{},"상대방 응원하기",[278,766,767],{},"같은 간단한 행동을 퀘스트 형태로 제공하려고 한다.",[278,769,770],{},"작은 행동이 모여",[278,772,773],{},"돈을 모으는 습관으로 이어질 수 있도록 만드는 것이 목표다.",[309,775],{},[273,777,779],{"id":778},"최근-소비-내역","📖 최근 소비 내역",[278,781,782],{},"최근 소비 내역도 단순한 리스트가 아니라",[278,784,785],{},"사용자가",[293,787,788],{},[278,789,790],{},"\"방금 무엇에 돈을 사용했는지\"",[278,792,793],{},"를 바로 확인할 수 있도록 배치했다.",[278,795,796],{},"추후에는",[339,798,799,802,805],{},[342,800,801],{},"카테고리 색상",[342,803,804],{},"소비 패턴",[342,806,807],{},"AI 소비 분석",[278,809,810],{},"등도 함께 보여줄 계획이다.",[309,812],{},[273,814,816],{"id":815},"아직은-화면보다-구조가-중요하다","💭 아직은 화면보다 구조가 중요하다",[278,818,819],{},"현재 Dashboard는 완성형이라기보다",[278,821,822],{},"전체 서비스를 구성하기 위한 뼈대를 만드는 과정에 가깝다.",[278,824,825],{},"UI는 언제든 변경될 수 있지만",[278,827,828],{},"데이터 구조와 컴포넌트 구조는 프로젝트 전체를 따라가기 때문이다.",[278,830,831],{},"이번 작업에서는",[278,833,834],{},"화면을 예쁘게 만드는 것보다",[278,836,837],{},"나중에 Backend를 연결했을 때도 그대로 사용할 수 있는 구조를 만드는 데 가장 많은 시간을 투자했다.",[309,839],{},[273,841,843],{"id":842},"다음-일정","🚀 다음 일정",[278,845,846],{},"Dashboard가 어느 정도 완성되었으니",[278,848,849],{},"다음으로는 BroBean만의 핵심 시스템인",[278,851,852,855],{},[282,853,854],{},"브로빈 성장 단계(Evolution)"," 를 설계해 보려고 한다.",[278,857,858],{},"단순히 돈이 늘어나는 것이 아니라",[278,860,861],{},"브로빈이 성장하는 과정을 어떻게 표현할지 고민했던 내용을 다음 글에서 정리해 보겠다.",[278,863,864],{},[282,865,866],{},"👉 다음 글 : BroBean 프로젝트 #5 - 브로빈 성장 시스템과 레벨 설계",[868,869,870],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":468,"searchDepth":483,"depth":483,"links":872},[],"2026-08-02","BroBean의 첫 화면인 Dashboard를 설계하면서 사용자 경험을 중심으로 필요한 정보와 Mock 데이터를 어떻게 구성했는지 정리합니다.","md",null,{"tags":878,"image":884},[137,879,880,881,882,883],"BroBean","Nuxt","Dashboard","Mock","TypeScript","\u002Fimages\u002Fbrobean\u002Fog-image.png",{"icon":20},{"title":887,"description":888},"BroBean 프로젝트 #4 - Dashboard 화면 설계와 Mock 데이터 구성","Nuxt 기반 BroBean 프로젝트에서 홈 화면 UI를 설계하고 TypeScript Interface와 Mock 데이터를 구성한 과정을 기록합니다.","GDfOJADaIHS3mN2oJdbgFdsQF63rWRG6UEfoor9TMV4",[891,893],{"title":202,"path":203,"stem":204,"description":892,"icon":20,"children":-1},"Nuxt 4 기반 BroBean 프로젝트에서 모바일 앱 전환을 고려하여 Header, Footer, Sidebar를 포함한 공통 레이아웃을 설계한 과정을 기록합니다.",{"title":210,"path":211,"stem":212,"description":894,"icon":20,"children":-1},"BroBean 프로젝트에서 가계부를 꾸준히 사용할 수 있도록 설계한 성장 시스템과 브로빈 캐릭터 진화 과정을 소개합니다.",1789947621672]