[{"data":1,"prerenderedAt":525},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-project-brolog-custom-error-and-default-thumbnail":181,"-ko-project-brolog-custom-error-and-default-thumbnail-surround":520},[4,114,167],{"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],{"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},"Project (개발일지)","icon-park-solid:branch-two","\u002Fko\u002Fproject","ko\u002F2.project",[120],{"title":121,"icon":122,"path":123,"stem":124,"children":125,"page":27},"Brolog","custom:symbol","\u002Fko\u002Fproject\u002Fbrolog","ko\u002F2.project\u002F1.brolog",[126,130,134,138,142,146,150,154,159,163],{"title":127,"path":128,"stem":129,"icon":26},"Brolog 프로젝트 개요","\u002Fko\u002Fproject\u002Fbrolog\u002Foutline","ko\u002F2.project\u002F1.brolog\u002F1.outline",{"title":131,"path":132,"stem":133,"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":135,"path":136,"stem":137,"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":139,"path":140,"stem":141,"icon":26},"Brolog 프로젝트 구조","\u002Fko\u002Fproject\u002Fbrolog\u002Fstructure","ko\u002F2.project\u002F1.brolog\u002F2.structure",{"title":143,"path":144,"stem":145,"icon":26},"[Nuxt Content] 네비게이션 아이콘 커스텀 빌드","\u002Fko\u002Fproject\u002Fbrolog\u002Fcustom-icon","ko\u002F2.project\u002F1.brolog\u002F3.custom-icon",{"title":147,"path":148,"stem":149,"icon":26},"[Nuxt 4] Auto-imports 동작 원리와 자동 import 시스템 이해","\u002Fko\u002Fproject\u002Fbrolog\u002Fnuxt-auto-import","ko\u002F2.project\u002F1.brolog\u002F4.nuxt-auto-import",{"title":151,"path":152,"stem":153,"icon":26},"[Brolog] 개발 블로그 메인 페이지 구현","\u002Fko\u002Fproject\u002Fbrolog\u002Fdevelop-main","ko\u002F2.project\u002F1.brolog\u002F5.develop-main",{"title":155,"path":156,"stem":157,"icon":158},"[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":160,"path":161,"stem":162,"icon":26},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (1)","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy1","ko\u002F2.project\u002F1.brolog\u002F8.vercel-deploy1",{"title":164,"path":165,"stem":166,"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":168,"icon":169,"path":170,"stem":171,"children":172,"page":27},"Error (트러블슈팅)","emojione:stop-sign","\u002Fko\u002Ftrouble-shooting","ko\u002F3.trouble-shooting",[173],{"title":121,"icon":122,"path":174,"stem":175,"children":176,"page":27},"\u002Fko\u002Ftrouble-shooting\u002Fbrolog","ko\u002F3.trouble-shooting\u002F1.brolog",[177],{"title":178,"path":179,"stem":180,"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":182,"title":155,"body":183,"date":506,"description":507,"extension":508,"links":509,"meta":510,"navigation":515,"path":156,"seo":516,"stem":157,"__hash__":519},"docs_ko\u002Fko\u002F2.project\u002F1.brolog\u002F6.custom-error-and-default-thumbnail.md",{"type":184,"value":185,"toc":504},"minimark",[186,500],[187,188,190,195,199,202,205,208,211,214,217,221,224,227,230,233,244,247,249,253,256,259,317,320,323,326,333,345,348,350,354,357,360,363,370,373,376,379,386,389,392,394,398,401,404,411,414,421,432,435,438,440,444,447,450,457,460,462,466,469,472,485,488,491,494,497],"u-page-card",{":spotlight":189},"true",[191,192,194],"h1",{"id":193},"brolog-브랜드-아이덴티티-적용","🎨 Brolog 브랜드 아이덴티티 적용",[196,197,198],"p",{},"이전 글에서는 Brolog 메인 페이지를 구성하면서 개발 기록을 위한 화면 구조와 콘텐츠 탐색 환경을 구축했다.",[196,200,201],{},"메인 화면과 게시글 구조를 정리한 이후 프로젝트를 실제 서비스 형태로 발전시키면서 한 가지 아쉬운 부분이 있었다.",[196,203,204],{},"기능적으로는 정상적으로 동작하고 있었지만, 이미지가 없는 게시글이나 존재하지 않는 페이지처럼 예외 상황에서는 Docus 기본 UI가 그대로 노출되고 있었다.",[196,206,207],{},"Brolog는 단순히 Markdown 문서를 보여주는 블로그가 아니라 개발 과정과 프로젝트 경험을 기록하는 개인 플랫폼으로 확장하는 것을 목표로 하고 있다.",[196,209,210],{},"따라서 프로젝트를 대표하는 디자인 요소가 필요하다고 판단했고, Brolog 캐릭터를 제작한 뒤 이를 기반으로 공통 이미지 리소스와 Error Page를 구성했다.",[196,212,213],{},"이번 글에서는 Brolog 브랜드 리소스를 제작하고, Nuxt Docus Layer 구조를 활용해 Custom 404 페이지와 Default No Image를 적용한 과정을 기록한다.",[215,216],"hr",{},[191,218,220],{"id":219},"️-프로젝트-캐릭터와-디자인-리소스-제작","🖌️ 프로젝트 캐릭터와 디자인 리소스 제작",[196,222,223],{},"Brolog의 대부분의 콘텐츠는 Markdown 기반 문서로 관리되고 있다.",[196,225,226],{},"개발 문서 중심의 사이트에서는 텍스트 비중이 높기 때문에 작은 이미지 요소라도 프로젝트의 인상을 결정하는 중요한 요소가 될 수 있다고 판단했다.",[196,228,229],{},"그래서 프로젝트를 대표하는 캐릭터와 로고를 제작하고, 이를 다양한 상황에서 활용할 수 있도록 리소스를 구성했다.",[196,231,232],{},"제작한 주요 리소스는 다음과 같다.",[234,235,241],"pre",{"className":236,"code":238,"language":239,"meta":240},[237],"language-text","Project Logo\n\n+\n\nHeader Logo\n\n+\n\nDefault No Image\n\n+\n\n404 Not Found Image\n","text","",[242,243,238],"code",{"__ignoreMap":240},[196,245,246],{},"각 이미지는 단순한 장식 목적이 아니라 사용자가 현재 어떤 상황인지 자연스럽게 이해할 수 있도록 상태를 표현하는 용도로 활용했다.",[215,248],{},[191,250,252],{"id":251},"️-게시글-thumbnail-fallback-처리","🖼️ 게시글 Thumbnail Fallback 처리",[196,254,255],{},"Brolog의 게시글은 Nuxt Content 기반으로 Markdown 파일을 관리하고 있으며, Frontmatter metadata를 통해 게시글 정보를 정의한다.",[196,257,258],{},"예:",[234,260,265],{"className":261,"code":262,"filename":263,"language":264,"meta":240,"style":240},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","---\ntitle: 'Example Post'\nimage: '\u002Fimages\u002Fexample.png'\n---\n","Markdown Frontmatter","yaml",[242,266,267,276,297,312],{"__ignoreMap":240},[268,269,272],"span",{"class":270,"line":271},"line",1,[268,273,275],{"class":274},"sBMFI","---\n",[268,277,279,283,287,290,294],{"class":270,"line":278},2,[268,280,282],{"class":281},"swJcz","title",[268,284,286],{"class":285},"sMK4o",":",[268,288,289],{"class":285}," '",[268,291,293],{"class":292},"sfazB","Example Post",[268,295,296],{"class":285},"'\n",[268,298,300,303,305,307,310],{"class":270,"line":299},3,[268,301,302],{"class":281},"image",[268,304,286],{"class":285},[268,306,289],{"class":285},[268,308,309],{"class":292},"\u002Fimages\u002Fexample.png",[268,311,296],{"class":285},[268,313,315],{"class":270,"line":314},4,[268,316,275],{"class":274},[196,318,319],{},"기본적으로 게시글별 대표 이미지를 직접 지정할 수 있지만, 모든 글에서 이미지를 관리하는 것은 번거로운 작업이 될 수 있다.",[196,321,322],{},"따라서 이미지 정보가 없는 게시글은 프로젝트 기본 이미지를 자동으로 표시하도록 fallback 구조를 적용했다.",[196,324,325],{},"동작 방식은 다음과 같다.",[234,327,331],{"className":328,"code":329,"filename":330,"language":239,"meta":240},[237],"게시글 Image 존재\n\n↓\n\n등록된 이미지 사용\n\n\n게시글 Image 없음\n\n↓\n\nDefault No Image 적용\n","Thumbnail Fallback Flow",[242,332,329],{"__ignoreMap":240},[334,335,339],"div",{"className":336},[337,338],"flex","justify-center",[340,341],"img",{"alt":342,"src":343,"width":344},"Brolog No Image","\u002Fimages\u002FnoImage.png",400,[196,346,347],{},"이를 통해 게시글 목록에서 이미지가 없는 경우에도 동일한 UI 구조를 유지할 수 있었고, 프로젝트 전체 디자인 방향성도 유지할 수 있었다.",[215,349],{},[191,351,353],{"id":352},"nuxt-error-page-구조-확인","🚧 Nuxt Error Page 구조 확인",[196,355,356],{},"존재하지 않는 주소로 접근했을 때는 기존 Docus에서 제공하는 기본 Error Page가 표시되고 있었다.",[196,358,359],{},"기능적으로는 문제가 없었지만, 프로젝트 전체 UI와는 다소 다른 느낌을 주고 있었다.",[196,361,362],{},"그래서 Brolog 전용 Custom 404 페이지를 제작하고 적용하기로 했다.",[334,364,366],{"className":365},[337,338],[340,367],{"alt":368,"src":369,"width":344},"Brolog 404 Page","\u002Fimages\u002F404.png",[196,371,372],{},"구현 과정에서 확인한 점은 Nuxt Layer 구조였다.",[196,374,375],{},"Brolog는 Nuxt Docus를 Layer 형태로 사용하고 있기 때문에 기본 Error Page 역시 Layer 내부에서 제공되고 있었다.",[196,377,378],{},"기존 구조는 다음과 같다.",[234,380,384],{"className":381,"code":382,"filename":383,"language":239,"meta":240},[237],"layer\n\n└── app\n\n    └── error.vue\n","Layer Structure",[242,385,382],{"__ignoreMap":240},[196,387,388],{},"처음에는 Layer 내부 파일을 직접 수정하는 방법을 생각했지만,",[196,390,391],{},"Nuxt Layer 구조에서는 extends 된 Layer 파일을 직접 변경하지 않고 프로젝트 영역에서 동일한 경로의 파일을 생성하면 Override가 가능하다.",[215,393],{},[191,395,397],{"id":396},"docus-layer-override를-활용한-custom-404-구현","🔄 Docus Layer Override를 활용한 Custom 404 구현",[196,399,400],{},"기존 Layer 파일을 수정하는 대신 서비스 프로젝트 영역에 새로운 Error Page를 추가했다.",[196,402,403],{},"구조는 다음과 같다.",[234,405,409],{"className":406,"code":407,"filename":408,"language":239,"meta":240},[237],"docs\n\n└── app\n\n    └── error.vue\n","Override Structure",[242,410,407],{"__ignoreMap":240},[196,412,413],{},"Nuxt Layer 우선순위는 다음과 같이 동작한다.",[234,415,419],{"className":416,"code":417,"filename":418,"language":239,"meta":240},[237],"현재 프로젝트\n\n↓\n\nextends 된 Layer\n\n↓\n\n기본 Nuxt 파일\n","Nuxt Layer Priority",[242,420,417],{"__ignoreMap":240},[196,422,423,424,427,428,431],{},"따라서 ",[242,425,426],{},"docs\u002Fapp\u002Ferror.vue","가 존재하면 Layer 내부의 ",[242,429,430],{},"layer\u002Fapp\u002Ferror.vue","보다 우선 적용된다.",[196,433,434],{},"결과적으로 Docus 기본 Error Page는 유지하면서,\nBrolog 프로젝트에서 필요한 Custom Error 화면만 교체할 수 있었다.",[196,436,437],{},"이 과정을 통해 Nuxt Layer 구조에서는 Framework 내부 파일을 직접 수정하기보다 Override 방식을 활용하는 것이 유지보수 측면에서 더 적합하다는 점을 확인했다.",[215,439],{},[191,441,443],{"id":442},"️-header-logo와-브랜드-요소-적용","🏷️ Header Logo와 브랜드 요소 적용",[196,445,446],{},"추가적으로 프로젝트 Header 영역의 Logo도 Brolog 전용 이미지로 변경했다.",[196,448,449],{},"Docus에서 제공하는 검색 기능과 Navigation 구조는 그대로 활용하고,\n브랜드 정체성이 필요한 영역만 교체하는 방식으로 구성했다.",[234,451,455],{"className":452,"code":453,"filename":454,"language":239,"meta":240},[237],"Docus 기본 기능\n\n+\n\nCustom Logo\n\n+\n\nCustom Error Page\n\n+\n\nCustom Thumbnail\n","Customization Scope",[242,456,453],{"__ignoreMap":240},[196,458,459],{},"Framework가 제공하는 기능은 유지하면서 필요한 부분만 확장하는 방식으로 프로젝트를 구성할 수 있었다.",[215,461],{},[191,463,465],{"id":464},"이번-작업에서-확인한-점","💡 이번 작업에서 확인한 점",[196,467,468],{},"이번 작업은 단순히 이미지를 추가하는 작업이 아니라 프로젝트 전체 경험을 정리하는 과정이었다.",[196,470,471],{},"사용자가 정상적인 페이지뿐 아니라,",[473,474,475,479,482],"ul",{},[476,477,478],"li",{},"이미지가 없는 게시글",[476,480,481],{},"존재하지 않는 페이지",[476,483,484],{},"프로젝트 첫 화면",[196,486,487],{},"등 다양한 상황에서 Brolog만의 일관된 경험을 제공할 수 있도록 구성했다.",[196,489,490],{},"또한 Nuxt Docus 기반 프로젝트에서는 모든 기능을 직접 구현하기보다,",[196,492,493],{},"기존 Framework 구조를 이해하고 필요한 부분만 Override 하는 방식이 효율적이라는 점을 확인했다.",[196,495,496],{},"Docus가 제공하는 Content 관리, 검색, Navigation 구조는 유지하면서,\n프로젝트 목적에 맞는 UI와 브랜드 요소는 Custom Component와 Layer Override를 통해 확장할 수 있었다.",[196,498,499],{},"앞으로 Brolog에서도 Framework가 제공하는 기본 기능은 활용하고,\n서비스 목적에 필요한 영역은 직접 확장하는 방식으로 프로젝트를 발전시켜 나갈 예정이다.",[501,502,503],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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":240,"searchDepth":278,"depth":278,"links":505},[],"2026-07-20","Brolog 캐릭터를 활용해 브랜드 리소스를 제작하고, Nuxt Docus Layer Override 구조를 활용해 Custom Error Page와 게시글 Default Image를 적용한 과정을 기록합니다.","md",null,{"tags":511},[121,43,512,513,514],"Docus","Branding","Vue",{"icon":158},{"title":517,"description":518},"Brolog Custom 404 페이지와 Default No Image 적용 과정","Nuxt Docus Layer 구조를 이해하고 Error Page Override, 이미지 fallback 처리, 프로젝트 브랜드 리소스 적용 과정을 정리합니다.","rfSspgOwbkvAt0Yt0s3Xf082u0vcQoHT6kRXYgh89eo",[521,523],{"title":151,"path":152,"stem":153,"description":522,"icon":26,"children":-1},"Nuxt 기반 프로젝트에서 개발 기록을 효과적으로 관리하기 위해 Hero 영역, Timeline, Category Tree, Tag Filter 구조를 직접 구현한 과정을 기록합니다.",{"title":160,"path":161,"stem":162,"description":524,"icon":26,"children":-1},"Nuxt Multi Layer 구조로 구성된 Brolog 프로젝트를 Vercel에 배포하며 발생한 빌드 오류와 해결 과정을 기록",1785297529788]