[{"data":1,"prerenderedAt":752},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-project-brobean-brobean-dev-log-03":267,"-ko-project-brobean-brobean-dev-log-03-surround":747},[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":202,"body":269,"date":731,"description":732,"extension":733,"links":734,"meta":735,"navigation":742,"path":203,"seo":743,"stem":204,"__hash__":746},"docs_ko\u002Fko\u002F2.project\u002F2.brobean\u002F3.brobean-dev-log-03.md",{"type":270,"value":271,"toc":729},"minimark",[272,277,286,293,296,299,315,318,325,328,332,335,338,435,438,441,443,447,450,453,456,467,470,473,484,487,489,493,496,499,510,513,516,599,606,608,612,615,618,621,638,641,643,647,650,653,666,669,671,675,678,681,684,695,698,701,703,707,714,717,720,725],[273,274,276],"h1",{"id":275},"모바일-앱을-목표로-한-첫-번째-설계","📱 모바일 앱을 목표로 한 첫 번째 설계",[278,279,280,281,285],"p",{},"프로젝트를 생성한 뒤 가장 먼저 고민한 것은 ",[282,283,284],"strong",{},"홈 화면","이 아니었다.",[278,287,288,289,292],{},"오히려 어떤 화면을 만들더라도 계속 재사용하게 될 ",[282,290,291],{},"공통 레이아웃(Layout)"," 을 먼저 만드는 것이 우선이라고 생각했다.",[278,294,295],{},"BroBean은 처음에는 모바일 웹으로 개발하지만, 최종적으로는 하이브리드 앱 형태까지 고려하고 있다.",[278,297,298],{},"즉 처음부터",[300,301,302,306,309,312],"ul",{},[303,304,305],"li",{},"모바일 화면 비율",[303,307,308],{},"하단 Navigation",[303,310,311],{},"Drawer 형태의 메뉴",[303,313,314],{},"상단 Header",[278,316,317],{},"구조를 기준으로 설계하기로 했다.",[278,319,320,321,324],{},"웹 사이트를 만드는 것이 아니라 ",[282,322,323],{},"앱을 만드는 것처럼 개발","하는 것이 이번 프로젝트의 목표다.",[326,327],"hr",{},[273,329,331],{"id":330},"️-먼저-만든-것은-layout","🏗️ 먼저 만든 것은 Layout",[278,333,334],{},"Nuxt에서는 Layout을 활용하면 모든 페이지에서 동일한 UI를 재사용할 수 있다.",[278,336,337],{},"이번 프로젝트에서는 가장 기본이 되는 구조를 아래처럼 구성했다.",[339,340,346],"pre",{"className":341,"code":342,"filename":343,"language":344,"meta":345,"style":345},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\n\u003CAppHeader \u002F>\n\n\u003Cmain>\n  \u003Cslot \u002F>\n\u003C\u002Fmain>\n\n\u003CAppFooter \u002F>\n\n\u003CAppSideBar \u002F>\n\n","Default Layout","vue","",[347,348,349,358,372,377,388,395,405,410,420,425],"code",{"__ignoreMap":345},[350,351,354],"span",{"class":352,"line":353},"line",1,[350,355,357],{"emptyLinePlaceholder":356},true,"\n",[350,359,361,365,369],{"class":352,"line":360},2,[350,362,364],{"class":363},"sMK4o","\u003C",[350,366,368],{"class":367},"swJcz","AppHeader",[350,370,371],{"class":363}," \u002F>\n",[350,373,375],{"class":352,"line":374},3,[350,376,357],{"emptyLinePlaceholder":356},[350,378,380,382,385],{"class":352,"line":379},4,[350,381,364],{"class":363},[350,383,384],{"class":367},"main",[350,386,387],{"class":363},">\n",[350,389,391],{"class":352,"line":390},5,[350,392,394],{"class":393},"sTEyZ","  \u003Cslot \u002F>\n",[350,396,398,401,403],{"class":352,"line":397},6,[350,399,400],{"class":363},"\u003C\u002F",[350,402,384],{"class":367},[350,404,387],{"class":363},[350,406,408],{"class":352,"line":407},7,[350,409,357],{"emptyLinePlaceholder":356},[350,411,413,415,418],{"class":352,"line":412},8,[350,414,364],{"class":363},[350,416,417],{"class":367},"AppFooter",[350,419,371],{"class":363},[350,421,423],{"class":352,"line":422},9,[350,424,357],{"emptyLinePlaceholder":356},[350,426,428,430,433],{"class":352,"line":427},10,[350,429,364],{"class":363},[350,431,432],{"class":367},"AppSideBar",[350,434,371],{"class":363},[278,436,437],{},"구조 자체는 단순하지만 앞으로 추가될 모든 페이지가 이 레이아웃 안에서 동작하게 된다.",[278,439,440],{},"덕분에 새로운 페이지를 만들더라도 Header와 Footer를 매번 작성할 필요가 없다.",[326,442],{},[273,444,446],{"id":445},"header는-최소한의-정보만","📌 Header는 최소한의 정보만",[278,448,449],{},"Header에는 너무 많은 기능을 넣고 싶지는 않았다.",[278,451,452],{},"가계부는 하루에도 여러 번 사용하는 서비스이기 때문에 화면을 복잡하게 만드는 것보다 필요한 기능만 빠르게 접근할 수 있도록 구성했다.",[278,454,455],{},"Header에는 다음 기능을 배치했다.",[300,457,458,461,464],{},[303,459,460],{},"BroBean 로고",[303,462,463],{},"다크모드 전환",[303,465,466],{},"알림 확인",[278,468,469],{},"특히 다크모드는 모바일 환경에서 사용하는 시간이 길어질 것을 고려해 처음부터 포함했다.",[278,471,472],{},"알림 역시 추후",[300,474,475,478,481],{},[303,476,477],{},"목표 달성",[303,479,480],{},"소비 알림",[303,482,483],{},"챌린지 완료",[278,485,486],{},"등을 연결할 예정이라 기본 구조부터 만들어 두었다.",[326,488],{},[273,490,492],{"id":491},"sidebar는-단순한-메뉴가-아니다","📂 Sidebar는 단순한 메뉴가 아니다",[278,494,495],{},"일반적인 Drawer 메뉴가 아니라 BroBean만의 세계관을 담고 싶었다.",[278,497,498],{},"그래서 메뉴 이름도 단순히",[300,500,501,504,507],{},[303,502,503],{},"Home",[303,505,506],{},"Budget",[303,508,509],{},"Report",[278,511,512],{},"처럼 작성하지 않았다.",[278,514,515],{},"대신 서비스 컨셉에 맞춰 모두 농장 테마로 구성했다.",[517,518,519,532],"table",{},[520,521,522],"thead",{},[523,524,525,529],"tr",{},[526,527,528],"th",{},"메뉴",[526,530,531],{},"의미",[533,534,535,543,551,559,567,575,583,591],"tbody",{},[523,536,537,541],{},[538,539,540],"td",{},"🏠 나의 농장",[538,542,284],{},[523,544,545,548],{},[538,546,547],{},"🌱 씨앗 심기",[538,549,550],{},"지출·수입·저축 기록",[523,552,553,556],{},[538,554,555],{},"📒 성장 일지",[538,557,558],{},"가계부 내역",[523,560,561,564],{},[538,562,563],{},"🌾 밭 가꾸기",[538,565,566],{},"예산 및 고정 수입\u002F지출 관리",[523,568,569,572],{},[538,570,571],{},"🌳 나무 키우기",[538,573,574],{},"저축 목표",[523,576,577,580],{},[538,578,579],{},"🌾 수확 정산",[538,581,582],{},"소비 리포트",[523,584,585,588],{},[538,586,587],{},"🎁 농부의 보물상자",[538,589,590],{},"상점",[523,592,593,596],{},[538,594,595],{},"📖 브로빈 도감",[538,597,598],{},"성장 단계",[278,600,601,602,605],{},"사용자가 메뉴를 누르는 순간에도 \"돈을 관리한다\"가 아니라 ",[282,603,604],{},"농장을 가꾼다","는 느낌을 받을 수 있도록 구성했다.",[326,607],{},[273,609,611],{"id":610},"footer는-앱처럼","🧭 Footer는 앱처럼",[278,613,614],{},"모바일 앱에서 가장 많이 사용하는 요소 중 하나가 Bottom Navigation이다.",[278,616,617],{},"브라우저에서도 앱과 비슷한 사용 경험을 제공하기 위해 Footer Navigation을 고정으로 배치했다.",[278,619,620],{},"Footer에는 가장 자주 사용하는 메뉴만 배치했다.",[300,622,623,626,629,632,635],{},[303,624,625],{},"🏠 홈",[303,627,628],{},"📒 가계부",[303,630,631],{},"🌱 지출 · 수입 입력",[303,633,634],{},"🌾 소비 현황",[303,636,637],{},"👤 내 정보",[278,639,640],{},"화면 이동 횟수를 최소화하는 것이 가장 큰 목표였다.",[326,642],{},[273,644,646],{"id":645},"프로젝트-대표-이미지도-함께-제작","🎨 프로젝트 대표 이미지도 함께 제작",[278,648,649],{},"프로젝트를 기록하면서 대표 썸네일도 함께 제작했다.",[278,651,652],{},"추후 Github나 블로그, SNS 등에 공유될 때 프로젝트를 한눈에 보여줄 수 있도록 BroBean 전용 OG 이미지를 만들었다.",[654,655,660],"div",{"className":656},[657,658,659],"flex","items-center","justify-center",[661,662],"img",{"alt":663,"src":664,"width":665},"BroBean OG Image","\u002Fimages\u002Fbrobean\u002Fog-image.png",600,[278,667,668],{},"프로젝트가 진행될수록 대표 이미지는 조금씩 수정될 수도 있지만, 지금 시점에서는 BroBean의 첫 번째 얼굴이라고 생각하면 될 것 같다.",[326,670],{},[273,672,674],{"id":673},"화면보다-먼저-구조를-만든-이유","💭 화면보다 먼저 구조를 만든 이유",[278,676,677],{},"사실 처음에는 바로 홈 화면부터 만들려고 했다.",[278,679,680],{},"하지만 개발을 오래 하다 보면 화면은 계속 바뀌지만 레이아웃은 거의 바뀌지 않는다.",[278,682,683],{},"처음부터 공통 구조를 만들어 두면",[300,685,686,689,692],{},[303,687,688],{},"새로운 페이지 추가",[303,690,691],{},"UI 수정",[303,693,694],{},"컴포넌트 재사용",[278,696,697],{},"이 훨씬 편해진다.",[278,699,700],{},"이번 작업은 눈에 띄는 기능을 만든 것은 아니지만 앞으로 BroBean의 모든 화면이 올라갈 기반을 만든 작업이었다.",[326,702],{},[273,704,706],{"id":705},"다음-일정","🚀 다음 일정",[278,708,709,710,713],{},"이제 기본 레이아웃이 완성되었으니 본격적으로 ",[282,711,712],{},"홈 화면(Dashboard)"," 을 설계할 차례다.",[278,715,716],{},"사용자가 처음 앱을 실행했을 때 어떤 정보를 가장 먼저 보여줄지 고민하면서 Mock 데이터와 타입을 설계하고 실제 UI를 만들어 보기 시작했다.",[278,718,719],{},"다음 글에서는 BroBean의 홈 화면을 어떤 기준으로 설계했는지 자세히 기록해보려고 한다.",[278,721,722],{},[282,723,724],{},"👉 다음 글 : BroBean 프로젝트 #4 - 홈 화면(Dashboard) 설계와 Mock 데이터 구성",[726,727,728],"style",{},"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":345,"searchDepth":360,"depth":360,"links":730},[],"2026-08-01","Nuxt 4 기반 BroBean 프로젝트에서 모바일 앱 전환을 고려하여 Header, Footer, Sidebar를 포함한 공통 레이아웃을 설계한 과정을 기록합니다.","md",null,{"tags":736,"image":664},[137,737,738,739,740,741],"BroBean","Nuxt","Vue","Layout","Frontend",{"icon":20},{"title":744,"description":745},"BroBean 프로젝트 #3 - 모바일 앱 전환을 고려한 레이아웃 설계","Nuxt Layout을 활용하여 Header, Footer, Sidebar를 구성하고 모바일 앱 형태의 공통 UI 구조를 설계한 과정을 정리합니다.","xkATCVmNFZHPDMJY0wwvVxw22k0hvPptRWz4Ne7eKT4",[748,750],{"title":198,"path":199,"stem":200,"description":749,"icon":20,"children":-1},"연인과 부부가 함께 사용할 수 있는 가계부 서비스 BroBean 프로젝트를 시작하며, 프론트 기술 스택 선정 과정과 Nuxt 4 프로젝트 생성 및 초기 개발 환경 구축 과정을 기록합니다.",{"title":206,"path":207,"stem":208,"description":751,"icon":20,"children":-1},"BroBean의 첫 화면인 Dashboard를 설계하면서 사용자 경험을 중심으로 필요한 정보와 Mock 데이터를 어떻게 구성했는지 정리합니다.",1789947621594]