[{"data":1,"prerenderedAt":616},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-project-brolog-develop-main":195,"-ko-project-brolog-develop-main-surround":611},[4,124,181],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":27},"Note (개발 지식)","emojione-v1:note-pad","\u002Fko\u002Fnote","ko\u002F1.note",[10,28,42,68,78,88,104,114],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":27},"Spring","logos:spring-icon","\u002Fko\u002Fnote\u002Fspring","ko\u002F1.note\u002F0.spring",[16],{"title":17,"icon":18,"path":19,"stem":20,"children":21,"page":27},"Spring Ai","custom:ai","\u002Fko\u002Fnote\u002Fspring\u002Fspring-ai","ko\u002F1.note\u002F0.spring\u002F1.spring-ai",[22],{"title":23,"path":24,"stem":25,"icon":26},"Spring AI 핵심 개념과 LLM 애플리케이션 구조 이해","\u002Fko\u002Fnote\u002Fspring\u002Fspring-ai\u002Fspring-ai","ko\u002F1.note\u002F0.spring\u002F1.spring-ai\u002F1.spring-ai","lucide:file-text",false,{"title":29,"icon":30,"path":31,"stem":32,"children":33,"page":27},"Javascript","skill-icons:javascript","\u002Fko\u002Fnote\u002Fjavascript","ko\u002F1.note\u002F1.javascript",[34,38],{"title":35,"path":36,"stem":37,"icon":26},"Promise.all과 구조 분해 할당을 활용한 데이터 처리 패턴","\u002Fko\u002Fnote\u002Fjavascript\u002Fdestructuring","ko\u002F1.note\u002F1.javascript\u002F1.destructuring",{"title":39,"path":40,"stem":41,"icon":26},"JavaScript 배열 고차 함수와 데이터 처리 패턴 이해","\u002Fko\u002Fnote\u002Fjavascript\u002Ffilter","ko\u002F1.note\u002F1.javascript\u002F2.filter",{"title":43,"icon":44,"path":45,"stem":46,"children":47,"page":27},"Nuxt4","logos:nuxt-icon","\u002Fko\u002Fnote\u002Fnuxt4","ko\u002F1.note\u002F2.nuxt4",[48,52,56,60,64],{"title":49,"path":50,"stem":51,"icon":26},"Nuxt 4를 선택한 이유와 아키텍처 및 실무 가이드","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-info","ko\u002F1.note\u002F2.nuxt4\u002F1.nuxt-info",{"title":53,"path":54,"stem":55,"icon":26},"Nuxt useAsyncData 동작 원리와 SSR 데이터 페칭 최적화","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-use_async_data","ko\u002F1.note\u002F2.nuxt4\u002F2.nuxt-use_async_data",{"title":57,"path":58,"stem":59,"icon":26},"Nuxt Content v3 데이터 모델과 Query 시스템 이해","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-content-v3","ko\u002F1.note\u002F2.nuxt4\u002F3.nuxt-content-v3",{"title":61,"path":62,"stem":63,"icon":26},"Nuxt Auto-imports 내부 동작과 컴파일 과정 분석","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-auto-import","ko\u002F1.note\u002F2.nuxt4\u002F4.nuxt-auto-import",{"title":65,"path":66,"stem":67,"icon":26},"Nuxt 렌더링 방식 이해: SSR, SSG, ISR, CSR 구현 방법","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-rendering-strategy","ko\u002F1.note\u002F2.nuxt4\u002F5.nuxt-rendering-strategy",{"title":69,"icon":70,"path":71,"stem":72,"children":73,"page":27},"Nitro","unjs:nitro","\u002Fko\u002Fnote\u002Fnitro","ko\u002F1.note\u002F3.nitro",[74],{"title":75,"path":76,"stem":77,"icon":26},"Nitro 아키텍처와 서버 엔진 구조","\u002Fko\u002Fnote\u002Fnitro\u002Fnitro","ko\u002F1.note\u002F3.nitro\u002Fnitro",{"title":79,"icon":80,"path":81,"stem":82,"children":83,"page":27},"Devops","vscode-icons:file-type-pipeline","\u002Fko\u002Fnote\u002Fdevops","ko\u002F1.note\u002F4.devops",[84],{"title":85,"path":86,"stem":87,"icon":26},"서버사이드 WebAssembly(Wasm)와 차세대 실행 환경","\u002Fko\u002Fnote\u002Fdevops\u002Fwebassembly","ko\u002F1.note\u002F4.devops\u002F1.webAssembly",{"title":89,"icon":90,"path":91,"stem":92,"children":93,"page":27},"Tooling","lucide:wrench","\u002Fko\u002Fnote\u002Ftooling","ko\u002F1.note\u002F4.tooling",[94],{"title":95,"icon":96,"path":97,"stem":98,"children":99,"page":27},"Package Manager","devicon:npm","\u002Fko\u002Fnote\u002Ftooling\u002Fpackage-manager","ko\u002F1.note\u002F4.tooling\u002F1.package-manager",[100],{"title":101,"path":102,"stem":103,"icon":26},"Package Lock 파일의 역할과 의존성 관리 원리","\u002Fko\u002Fnote\u002Ftooling\u002Fpackage-manager\u002Fpackage-lock","ko\u002F1.note\u002F4.tooling\u002F1.package-manager\u002F1.package-lock",{"title":105,"icon":106,"path":107,"stem":108,"children":109,"page":27},"Web","streamline-plump:web","\u002Fko\u002Fnote\u002Fweb","ko\u002F1.note\u002F4.web",[110],{"title":111,"path":112,"stem":113,"icon":26},"웹 애플리케이션 렌더링 아키텍처 이해","\u002Fko\u002Fnote\u002Fweb\u002Frendering-modes","ko\u002F1.note\u002F4.web\u002F2.rendering-modes",{"title":115,"icon":116,"path":117,"stem":118,"children":119,"page":27},"SEO","icon-park-solid:seo","\u002Fko\u002Fnote\u002Fseo","ko\u002F1.note\u002F6.seo",[120],{"title":121,"path":122,"stem":123,"icon":26},"[SEO] 개발 블로그 검색 노출을 위한 robots.txt와 SEO 설정 가이드","\u002Fko\u002Fnote\u002Fseo\u002Fseo","ko\u002F1.note\u002F6.seo\u002F1.seo",{"title":125,"icon":126,"path":127,"stem":128,"children":129,"page":27},"Project (개발일지)","icon-park-solid:branch-two","\u002Fko\u002Fproject","ko\u002F2.project",[130],{"title":131,"icon":132,"path":133,"stem":134,"children":135,"page":27},"Brolog","custom:symbol","\u002Fko\u002Fproject\u002Fbrolog","ko\u002F2.project\u002F1.brolog",[136,140,144,148,152,156,160,164,168,173,177],{"title":137,"path":138,"stem":139,"icon":26},"Brolog 프로젝트 개요","\u002Fko\u002Fproject\u002Fbrolog\u002Foutline","ko\u002F2.project\u002F1.brolog\u002F1.outline",{"title":141,"path":142,"stem":143,"icon":26},"[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":145,"path":146,"stem":147,"icon":26},"[Brolog] AI Assistant 적용 과정 - Agent 구조와 API 사용량 관리 시 고려사항","\u002Fko\u002Fproject\u002Fbrolog\u002Fai-assistant-application-process","ko\u002F2.project\u002F1.brolog\u002F11.ai-assistant-application-process",{"title":149,"path":150,"stem":151,"icon":26},"[Brolog] 검색 엔진 노출을 위한 SEO 적용 과정","\u002Fko\u002Fproject\u002Fbrolog\u002Fbrolog-seo","ko\u002F2.project\u002F1.brolog\u002F12.brolog-seo",{"title":153,"path":154,"stem":155,"icon":26},"Brolog 프로젝트 구조","\u002Fko\u002Fproject\u002Fbrolog\u002Fstructure","ko\u002F2.project\u002F1.brolog\u002F2.structure",{"title":157,"path":158,"stem":159,"icon":26},"[Nuxt Content] 네비게이션 아이콘 커스텀 빌드","\u002Fko\u002Fproject\u002Fbrolog\u002Fcustom-icon","ko\u002F2.project\u002F1.brolog\u002F3.custom-icon",{"title":161,"path":162,"stem":163,"icon":26},"[Nuxt 4] Auto-imports 동작 원리와 자동 import 시스템 이해","\u002Fko\u002Fproject\u002Fbrolog\u002Fnuxt-auto-import","ko\u002F2.project\u002F1.brolog\u002F4.nuxt-auto-import",{"title":165,"path":166,"stem":167,"icon":26},"[Brolog] 개발 블로그 메인 페이지 구현","\u002Fko\u002Fproject\u002Fbrolog\u002Fdevelop-main","ko\u002F2.project\u002F1.brolog\u002F5.develop-main",{"title":169,"path":170,"stem":171,"icon":172},"[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":174,"path":175,"stem":176,"icon":26},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (1)","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy1","ko\u002F2.project\u002F1.brolog\u002F8.vercel-deploy1",{"title":178,"path":179,"stem":180,"icon":26},"[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":182,"icon":183,"path":184,"stem":185,"children":186,"page":27},"Error (트러블슈팅)","emojione:stop-sign","\u002Fko\u002Ftrouble-shooting","ko\u002F3.trouble-shooting",[187],{"title":131,"icon":132,"path":188,"stem":189,"children":190,"page":27},"\u002Fko\u002Ftrouble-shooting\u002Fbrolog","ko\u002F3.trouble-shooting\u002F1.brolog",[191],{"title":192,"path":193,"stem":194,"icon":26},"[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":196,"title":165,"body":197,"date":596,"description":597,"extension":598,"links":599,"meta":600,"navigation":606,"path":166,"seo":607,"stem":167,"__hash__":610},"docs_ko\u002Fko\u002F2.project\u002F1.brolog\u002F5.develop-main.md",{"type":198,"value":199,"toc":591},"minimark",[200,205,209,212,215,218,231,234,237,240,244,247,259,262,264,268,271,274,281,289,301,308,316,318,322,325,328,331,338,340,344,347,350,353,392,395,398,400,404,407,410,457,460,463,468,475,479,482,489,491,495,498,501,505,508,515,518,521,528,531,533,537,540,543,550,553,556,563,565,569,572,575,581,584,587],[201,202,204],"h1",{"id":203},"brolog-메인-페이지-개발-시작","🏠 Brolog 메인 페이지 개발 시작",[206,207,208],"p",{},"Brolog는 개발 과정과 프로젝트 경험을 기록하기 위해 제작한 개인 기술 블로그 프로젝트다.",[206,210,211],{},"처음 프로젝트를 시작했을 때는 Nuxt Docus Theme에서 제공하는 기본 문서 구조를 활용하는 방향으로 개발을 진행했다.",[206,213,214],{},"Docus는 문서 사이트를 구축하기 위한 기능들이 잘 구성되어 있었지만, 실제로 개발 기록을 계속 쌓아가면서 기존 구조만으로는 원하는 블로그 경험을 만들기 어렵다고 판단했다.",[206,216,217],{},"특히 개발 기록을 관리하는 목적에서는 단순히 최신 글을 보여주는 것보다,",[219,220,221,225,228],"ul",{},[222,223,224],"li",{},"어떤 기술을 다뤘는지",[222,226,227],{},"어떤 프로젝트에서 작성된 글인지",[222,229,230],{},"관련된 글들을 어떻게 연결해서 볼 수 있는지",[206,232,233],{},"를 쉽게 탐색할 수 있는 구조가 필요했다.",[206,235,236],{},"그래서 Brolog의 메인 화면은 Docus의 기본 랜딩 페이지를 그대로 사용하는 대신, 프로젝트 목적에 맞는 Custom Home 구조로 직접 구현하기로 했다.",[238,239],"hr",{},[201,241,243],{"id":242},"brolog-home-화면-설계-방향","🎨 Brolog Home 화면 설계 방향",[206,245,246],{},"메인 페이지는 개발 문서 아카이브 형태를 목표로 다음과 같이 전체적인 레이아웃을 구상했다.",[248,249,256],"pre",{"className":250,"code":252,"filename":253,"language":254,"meta":255},[251],"language-text","Hero Section\n\n↓\n\nTag Filter\n\n↓\n\nPost Timeline\n\n↓\n\nCategory Tree\n","Architecture","text","",[257,258,252],"code",{"__ignoreMap":255},[206,260,261],{},"상단에서는 Brolog라는 프로젝트의 성격을 보여주고, 중앙에서는 작성한 글의 흐름을 확인하며, 좌측에서는 파일 구조 기반으로 원하는 문서를 탐색할 수 있도록 설계했다.",[238,263],{},[201,265,267],{"id":266},"프로젝트-아이덴티티를-위한-hero-영역-구성","🚀 프로젝트 아이덴티티를 위한 Hero 영역 구성",[206,269,270],{},"처음에는 메인 페이지 상단에 단순한 제목과 설명만 표시할 계획이었다.",[206,272,273],{},"하지만 프로젝트를 진행할수록 Brolog만의 개성과 아이덴티티를 표현할 수 있는 요소가 필요하다고 느꼈다. 이에 따라 Hero 영역을 별도로 구성하고 다음과 같은 형태로 제작했다.",[248,275,279],{"className":276,"code":277,"filename":278,"language":254,"meta":255},[251],"Brolog Title + Project Description + Terminal UI\n","UI Structure",[257,280,277],{"__ignoreMap":255},[206,282,283,284,288],{},"개발 블로그라는 특징을 직관적으로 살리기 위해 일반적인 이미지 중심 Hero 대신 ",[285,286,287],"strong",{},"터미널 형태의 UI","를 적용했다.",[290,291,295],"div",{"className":292},[293,294],"flex","justify-center",[296,297],"img",{"alt":298,"src":299,"width":300},"termainalHero","\u002Fimages\u002FterminalHero.png",700,[206,302,303,304,307],{},"또한 이번 프로젝트를 단순히 글을 모아두는 공간에 그치지 않고, 하나의 독립된 프로젝트 브랜드로 발전시키고자 ",[285,305,306],{},"프로젝트를 대표하는 캐릭터와 로고를 직접 제작","해 메인 페이지와 Header 영역 전반에 녹여냈다.",[290,309,311],{"className":310},[293,294],[296,312],{"alt":313,"src":314,"width":315},"logo","\u002Flogo\u002Flogo.png",400,[238,317],{},[201,319,321],{"id":320},"시간-흐름-기반-post-timeline-구현","📝 시간 흐름 기반 Post Timeline 구현",[206,323,324],{},"기존 Docus 구조는 개별 문서를 탐색하는 데에는 적합하지만, 블로그 메인 페이지처럼 작성한 글들을 목록 형태로 모아볼 수 있는 기본 기능이 없었다.",[206,326,327],{},"Brolog에서는 개발 과정을 기록하는 특성상 작성 순서와 작업의 흐름이 중요하기 때문에, 중앙 영역에 Post Timeline 형태의 컴포넌트를 구현했다.",[206,329,330],{},"각 포스트는 작성 날짜를 기준으로 정렬되어, 시간의 흐름에 따라 프로젝트가 어떻게 발전해 나갔는지 한눈에 확인할 수 있도록 했다.",[290,332,334],{"className":333},[293,294],[296,335],{"alt":336,"src":337,"width":300},"timeline","\u002Fimages\u002Ftimeline.png",[238,339],{},[201,341,343],{"id":342},"콘텐츠-성격에-맞춘-category-tree-구성","🌳 콘텐츠 성격에 맞춘 Category Tree 구성",[206,345,346],{},"Brolog의 콘텐츠는 모두 Nuxt Content 기반 Markdown 파일로 관리하고 있다.",[206,348,349],{},"프로젝트를 진행하면서 단순히 글을 시간순으로 나열하는 것만으로는 원하는 내용을 다시 찾아보기 어렵다는 점을 느꼈다. 카테고리별로 구조를 나누어두는 편이 글을 찾고 관리하기에 훨씬 직관적이고 편할 것이라 생각했다.",[206,351,352],{},"이에 따라 콘텐츠의 성격을 크게 세 가지로 분류했다.",[290,354,358,367],{"className":355},[293,356,357],"items-center","gap-6",[206,359,360],{},[296,361],{"alt":362,"src":363,"width":364,"className":365},"categoryTree","\u002Fimages\u002FcategoryTree.png",300,[366],"flex-shrink-0",[290,368,369,389],{},[219,370,371,377,383],{},[222,372,373,376],{},[285,374,375],{},"Note"," : 개발 과정에서 학습한 개념이나 아키텍처, 기술 정리",[222,378,379,382],{},[285,380,381],{},"Project"," : 사이드 프로젝트를 진행하며 기록하는 개발 일지",[222,384,385,388],{},[285,386,387],{},"Error"," : 개발 과정에서 발생한 문제와 해결 과정을 기록한 트러블슈팅",[206,390,391],{},"이러한 카테고리 분류를 바탕으로, 메인 화면 좌측에는 전체 구조를 트리 형태로 한눈에 보여주는 Category Tree 컴포넌트를 구현했다.",[206,393,394],{},"단순히 폴더 구조를 시각화하는 것에 그치지 않고, 현재 어떤 주제의 글을 읽고 있는지 자연스럽게 인지하며 관련 문서까지 매끄럽게 탐색할 수 있도록 설계했다.",[206,396,397],{},"아울러 앞으로 새로운 프로젝트나 기술 카테고리가 늘어나더라도 기존 구조를 해치지 않고 유연하게 확장할 수 있는 토대를 마련했다.",[238,399],{},[201,401,403],{"id":402},"️-metadata-기반-tag-filter-구현","🏷️ Metadata 기반 Tag Filter 구현",[206,405,406],{},"각 포스트는 Markdown Frontmatter에 Metadata 정보를 가지고 있다.",[206,408,409],{},"예:",[248,411,416],{"className":412,"code":413,"filename":414,"language":415,"meta":255,"style":255},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","tags:\n  - Nuxt\n  - Vercel\n  - Deployment\n","Frontmatter","yaml",[257,417,418,431,441,449],{"__ignoreMap":255},[419,420,423,427],"span",{"class":421,"line":422},"line",1,[419,424,426],{"class":425},"swJcz","tags",[419,428,430],{"class":429},"sMK4o",":\n",[419,432,434,437],{"class":421,"line":433},2,[419,435,436],{"class":429},"  -",[419,438,440],{"class":439},"sfazB"," Nuxt\n",[419,442,444,446],{"class":421,"line":443},3,[419,445,436],{"class":429},[419,447,448],{"class":439}," Vercel\n",[419,450,452,454],{"class":421,"line":451},4,[419,453,436],{"class":429},[419,455,456],{"class":439}," Deployment\n",[206,458,459],{},"처음에는 단순히 글의 하단에 정보를 표시하는 Badge 용도로만 사용했으나, 작성되는 글이 많아질수록 특정 기술이나 주제별로 글을 모아볼 수 있는 필터링 기능의 필요성을 느꼈다.",[206,461,462],{},"이에 따라 기존 포스트의 Metadata에 담긴 Tag 정보를 활용하여 Tag Filter 컴포넌트를 구현했다.",[464,465,467],"h2",{"id":466},"동작-구조","🔄 동작 구조",[248,469,473],{"className":470,"code":471,"filename":472,"language":254,"meta":255},[251],"Markdown Metadata\n\n↓\n\nTag 데이터 수집\n\n↓\n\nTag Filter Component\n\n↓\n\n해당 Tag 포함 Post 출력\n","Data Flow",[257,474,471],{"__ignoreMap":255},[464,476,478],{"id":477},"️-구현-결과","🖥️ 구현 결과",[206,480,481],{},"이를 통해 사용자는 특정 기술이나 관심 분야와 관련된 글만 빠르게 탐색할 수 있다.",[290,483,485],{"className":484},[293,294],[296,486],{"alt":487,"src":488,"width":300},"tagFilter","\u002Fimages\u002FtagFilter.png",[238,490],{},[201,492,494],{"id":493},"기존-docus-기능-활용과-custom-영역-분리","🔎 기존 Docus 기능 활용과 Custom 영역 분리",[206,496,497],{},"메인 페이지를 구성하면서 모든 기능을 새롭게 만드는 방향은 선택하지 않았다.",[206,499,500],{},"Docus에서 이미 안정적으로 제공하는 기능은 적극 활용하고, Brolog만의 사용자 경험이 필요한 영역만 직접 커스터마이징하여 개발했다.",[464,502,504],{"id":503},"️-역할-분담","🛠️ 역할 분담",[206,506,507],{},"기존 유지 기능:",[248,509,513],{"className":510,"code":511,"filename":512,"language":254,"meta":255},[251],"Search System + Content Rendering + Nuxt Content Integration\n","Framework Feature",[257,514,511],{"__ignoreMap":255},[206,516,517],{},"이미 검증된 검색 시스템과 마크다운 렌더링 환경은 그대로 가져가 개발 공수를 줄이고 안정성을 확보했다.",[206,519,520],{},"커스터마이징 영역:",[248,522,526],{"className":523,"code":524,"filename":525,"language":254,"meta":255},[251],"Home Layout + Post Timeline + Category Navigation + Tag Filter + Branding Element\n","Custom Feature",[257,527,524],{"__ignoreMap":255},[206,529,530],{},"블로그의 핵심인 타임라인과 카테고리 트리, 태그 필터를 직접 구현해 콘텐츠 탐색 경험을 극대화했다.",[238,532],{},[201,534,536],{"id":535},"️-component-기반-home-구조-설계","⚙️ Component 기반 Home 구조 설계",[206,538,539],{},"최종적으로 메인 페이지는 Vue Component 단위로 분리했다.",[206,541,542],{},"구조는 다음과 같다.",[248,544,548],{"className":545,"code":546,"filename":547,"language":254,"meta":255},[251],"Home Page\n\n├── Hero Component\n\n├── Tag Filter Component\n\n├── Post Timeline Component\n\n└── Category Tree Component\n","Component Structure",[257,549,546],{"__ignoreMap":255},[206,551,552],{},"각 기능을 독립적인 컴포넌트로 분리한 덕분에, 추후 새로운 탐색 방식이나 UI 개선이 필요할 때 기존 코드를 건드리지 않고도 쉽게 확장할 수 있도록 구조화했다.",[206,554,555],{},"이러한 컴포넌트들이 유기적으로 결합되어 완성된 Brolog의 최종 메인 화면은 다음과 같다.",[290,557,559],{"className":558},[293,294],[296,560],{"alt":561,"src":562,"width":300},"main","\u002Fimages\u002Fmain.png",[238,564],{},[201,566,568],{"id":567},"개발을-마치며-개발-아카이브로의-도약","💡 개발을 마치며: 개발 아카이브로의 도약",[206,570,571],{},"Docus는 Nuxt Content 기반 문서 사이트를 빠르게 구축할 수 있는 훌륭한 프레임워크다. 하지만 개발 기록을 지속적으로 쌓는 개인 기술 블로그로 운영하기 위해서는 프로젝트 목적에 맞는 독자적인 구조 설계가 필요했다.",[206,573,574],{},"특히 아래의 요소들은 단순히 템플릿을 쓰는 것을 넘어 서비스 목적에 맞게 직접 고민하고 녹여내야 했다.",[248,576,579],{"className":577,"code":578,"filename":253,"language":254,"meta":255},[251],"Content Structure + Metadata 활용 + Navigation Experience + Brand Identity\n",[257,580,578],{"__ignoreMap":255},[206,582,583],{},"이번 메인 페이지 개발을 통해 Brolog는 단순한 문서 뷰어를 넘어, 나의 개발 과정과 기술 성장을 지속적으로 기록하고 관리할 수 있는 진정한 의미의 개인 개발 아카이브로 거듭나게 되었다.",[206,585,586],{},"이 후속 글에서는 이렇게 구성한 Brolog 프로젝트를 실제 서비스 환경에 배포하는 과정에서 마주했던 Nuxt Multi Layer, Vercel Build, AI Assistant 연동 등 다양한 트러블슈팅과 해결 과정을 기록한다.",[588,589,590],"style",{},"html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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":255,"searchDepth":433,"depth":433,"links":592},[593,594,595],{"id":466,"depth":433,"text":467},{"id":477,"depth":433,"text":478},{"id":503,"depth":433,"text":504},"2026-07-19","Nuxt 기반 프로젝트에서 개발 기록을 효과적으로 관리하기 위해 Hero 영역, Timeline, Category Tree, Tag Filter 구조를 직접 구현한 과정을 기록합니다.","md",null,{"tags":601,"image":605},[131,43,602,603,604],"Nuxt Content","Docus","Vue","\u002Fimages\u002Fbrolog-ogimage.png",{"icon":26},{"title":608,"description":609},"Brolog 메인 페이지 개발 과정","Nuxt Content와 Docus Theme을 기반으로 개발 기록 블로그 메인 화면을 구성하고 콘텐츠 탐색 경험을 개선한 과정을 정리합니다.","axcZOR5Z6PrbAj6Bu89Kcw09iaxSStUROwEgFxB0Fz4",[612,614],{"title":161,"path":162,"stem":163,"description":613,"icon":26,"children":-1},"Nuxt 4에서 Vue API, Composable, Components를 별도의 import 없이 사용할 수 있는 Auto-imports 시스템의 동작 방식과 빌드 과정 이해",{"title":169,"path":170,"stem":171,"description":615,"icon":172,"children":-1},"Brolog 캐릭터를 활용해 브랜드 리소스를 제작하고, Nuxt Docus Layer Override 구조를 활용해 Custom Error Page와 게시글 Default Image를 적용한 과정을 기록합니다.",1785305905140]