[{"data":1,"prerenderedAt":881},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-project-brolog-custom-icon":195,"-ko-project-brolog-custom-icon-surround":876},[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":157,"body":197,"date":860,"description":861,"extension":862,"links":863,"meta":864,"navigation":871,"path":158,"seo":872,"stem":159,"__hash__":875},"docs_ko\u002Fko\u002F2.project\u002F1.brolog\u002F3.custom-icon.md",{"type":198,"value":199,"toc":846},"minimark",[200,842],[201,202,204,209,226,244,259,265,380,402,409,412,420,432,437,448,450,454,458,461,641,645,656,669,676,686,815,817,821],"u-page-card",{":spotlight":203},"true",[205,206,208],"h2",{"id":207},"_1-내가-직접-만든-이미지를-메뉴-아이콘으로-넣고-싶다","🧐 1. 내가 직접 만든 이미지를 메뉴 아이콘으로 넣고 싶다",[210,211,217,223],"div",{"className":212},[213,214,215,216],"flex","items-center","justify-center","gap-10",[218,219],"img",{"alt":220,"src":221,"width":222},"brolog symbol","\u002Flogo\u002Fsymbol.png",100,[218,224],{"alt":220,"src":225,"width":222},"\u002Flogo\u002Fsymbol-dark.png",[227,228,229,230,234,235,239,240,243],"p",{},"현재 개발 중인 ",[231,232,233],"code",{},"brolog"," 프로젝트는 ",[236,237,238],"strong",{},"Nuxt 4 프레임워크와 Nuxt Content 모듈","을 기반으로 구축된 기술 블로그\u002F문서화 시스템이다. 이 환경에서는 사이드바 메뉴를 구성하기 위해 Nuxt Content가 제공하는 전용 네비게이션 설정 파일인 ",[231,241,242],{},"navigation.yml","을 활용하게 된다.",[227,245,246,247,250,251,254,255,258],{},"메인 사이드바 메뉴 구조를 설계하던 중, 메뉴명 앞에 흔한 오픈소스 아이콘(",[231,248,249],{},"lucide:*",", ",[231,252,253],{},"mdi:*",") 대신 ",[236,256,257],{},"내가 직접 디자인하고 제작한 brolog만의 전용 브랜드 로고와 커스텀 그래픽 이미지","를 넣고 싶다는 니즈가 생겼다.",[227,260,261,262,264],{},"하지만 기본적으로 Nuxt Content의 ",[231,263,242],{}," 구조는 철저히 정형화된 외부 아이콘셋 명칭만 인식하는 스펙을 가지고 있다.",[266,267,272],"pre",{"className":268,"code":269,"filename":242,"language":270,"meta":271,"style":271},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# navigation.yml (기존 형태)\n- title: \"대시보드\"\n  path: \u002Fdashboard\n  icon: \"lucide:layout\" # 오픈소스 아이콘 이름만 지원됨\n- title: \"내가 만든 전용 로고 메뉴\"\n  path: \u002Fbrand\n  icon: \"\u002Fimages\u002Fmy-logo.png\" # ❌ 엑스박스 발생 및 컴포넌트 깨짐 현상\n","yaml","",[231,273,274,283,307,318,337,353,363],{"__ignoreMap":271},[275,276,279],"span",{"class":277,"line":278},"line",1,[275,280,282],{"class":281},"sHwdD","# navigation.yml (기존 형태)\n",[275,284,286,290,294,297,300,304],{"class":277,"line":285},2,[275,287,289],{"class":288},"sMK4o","-",[275,291,293],{"class":292},"swJcz"," title",[275,295,296],{"class":288},":",[275,298,299],{"class":288}," \"",[275,301,303],{"class":302},"sfazB","대시보드",[275,305,306],{"class":288},"\"\n",[275,308,310,313,315],{"class":277,"line":309},3,[275,311,312],{"class":292},"  path",[275,314,296],{"class":288},[275,316,317],{"class":302}," \u002Fdashboard\n",[275,319,321,324,326,328,331,334],{"class":277,"line":320},4,[275,322,323],{"class":292},"  icon",[275,325,296],{"class":288},[275,327,299],{"class":288},[275,329,330],{"class":302},"lucide:layout",[275,332,333],{"class":288},"\"",[275,335,336],{"class":281}," # 오픈소스 아이콘 이름만 지원됨\n",[275,338,340,342,344,346,348,351],{"class":277,"line":339},5,[275,341,289],{"class":288},[275,343,293],{"class":292},[275,345,296],{"class":288},[275,347,299],{"class":288},[275,349,350],{"class":302},"내가 만든 전용 로고 메뉴",[275,352,306],{"class":288},[275,354,356,358,360],{"class":277,"line":355},6,[275,357,312],{"class":292},[275,359,296],{"class":288},[275,361,362],{"class":302}," \u002Fbrand\n",[275,364,366,368,370,372,375,377],{"class":277,"line":365},7,[275,367,323],{"class":292},[275,369,296],{"class":288},[275,371,299],{"class":288},[275,373,374],{"class":302},"\u002Fimages\u002Fmy-logo.png",[275,376,333],{"class":288},[275,378,379],{"class":281}," # ❌ 엑스박스 발생 및 컴포넌트 깨짐 현상\n",[227,381,382,383,386,387,390,391,394,395,250,398,401],{},"Nuxt Content 내부 스펙상 ",[231,384,385],{},"icon"," 필드는 무조건 ",[231,388,389],{},"@nuxt\u002Ficon"," 모듈의 ",[231,392,393],{},"\u003CIcon name=\"...\" \u002F>"," 컴포넌트와 긴밀하게 결합해 내부적으로 파싱된다. 이 때문에 저 자리에 일반 이미지 웹 경로(",[231,396,397],{},"png",[231,399,400],{},"jpg",")를 무작정 적으면 렌더링 규격이 맞지 않아 아예 화면에 출려되지 않는 한계가 존재했다.",[227,403,404,405,408],{},"내부 컴포넌트를 커스텀하여 이미지도 사용이 가능하도록 수정하려다, 관점을 조금 바꾸어 보았다.\n",[406,407],"br",{}," \"기존 내장 컴포넌트 코드를 인위적으로 수정하여 이미지 태그 분기문으로 제어하는 대신, 내가 제작한 그래픽 리소스 자체를 Nuxt 아이콘 시스템이 다룰 수 있는 규격화된 아이콘 패키지로 빌드하여 매핑하는 방법이 없을까?\" 라는 궁금증이 떠올랐고, 그에 맞는 해법을 찾아냈다.",[410,411],"hr",{},[205,413,415,416,419],{"id":414},"️-2-해결-전략-내가-만든-이미지를-customcollections로-규격화","🛠️ 2. 해결 전략: 내가 만든 이미지를 ",[231,417,418],{},"customCollections","로 규격화",[227,421,422,423,426,427,431],{},"해답은 Nuxt 4의 핵심 아키텍처인 멀티 레이어 구조에서 풀렸다. 하위 레이어(",[231,424,425],{},"layer\u002Fnuxt.config.ts",")에 이미 마중물처럼 뚫려 있던 ",[236,428,429],{},[231,430,418],{}," 인프라 설정을 발견하면서 명쾌하게 가닥이 잡혔다.",[433,434,436],"h3",{"id":435},"핵심-메커니즘","💡 핵심 메커니즘",[227,438,439,440,443,444,447],{},"내가 직접 만든 그래픽 이미지를 순수 ",[236,441,442],{},"SVG 포맷","으로 저장한 뒤, 모듈이 지정한 로컬 아이콘 디렉토리에 정적 배치하는 방식이다. 이렇게 하면 Nuxt Icon 엔진이 빌드(또는 개발 서버 구동) 시점에 해당 폴더 안의 SVG 파일들을 스캔하여, 마치 Lucide나 Material Design Icons처럼 ",[236,445,446],{},"우리가 직접 커스텀한 독립 아이콘셋","으로 빌드 컨텍스트에 포함시킨다.",[410,449],{},[205,451,453],{"id":452},"_3-실제-적용-및-해결-프로세스","📦 3. 실제 적용 및 해결 프로세스",[433,455,457],{"id":456},"_1단계-레이어-설정의-커스텀-디렉토리-경로-확인","① 1단계: 레이어 설정의 커스텀 디렉토리 경로 확인",[227,459,460],{},"Nuxt 4 구조에 맞게 세팅된 하위 레이어 설정 파일에 로컬 아이콘 소스 디렉토리가 다음과 같이 명시되어 있는 상태였다.",[266,462,466],{"className":463,"code":464,"filename":425,"language":465,"meta":271,"style":271},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F layer\u002Fnuxt.config.ts\nexport default defineNuxtConfig({\n  icon: {\n    customCollections: [\n      {\n        prefix: 'custom', \u002F\u002F 👈 내가 만든 아이콘들을 호출할 고유 접두사(네임스페이스)\n        dir: resolve('.\u002Fapp\u002Fassets\u002Ficons'), \u002F\u002F 👈 내가 만든 SVG 파일들을 모아둘 보관소\n      },\n    ],\n    clientBundle: {\n      scan: true,\n      includeCustomCollections: true, \u002F\u002F 로컬 커스텀 번들에 포함 처리\n    }\n  },\n})\n","typescript",[231,467,468,473,493,502,512,517,539,566,572,581,591,605,620,626,632],{"__ignoreMap":271},[275,469,470],{"class":277,"line":278},[275,471,472],{"class":281},"\u002F\u002F layer\u002Fnuxt.config.ts\n",[275,474,475,479,482,486,490],{"class":277,"line":285},[275,476,478],{"class":477},"s7zQu","export",[275,480,481],{"class":477}," default",[275,483,485],{"class":484},"s2Zo4"," defineNuxtConfig",[275,487,489],{"class":488},"sTEyZ","(",[275,491,492],{"class":288},"{\n",[275,494,495,497,499],{"class":277,"line":309},[275,496,323],{"class":292},[275,498,296],{"class":288},[275,500,501],{"class":288}," {\n",[275,503,504,507,509],{"class":277,"line":320},[275,505,506],{"class":292},"    customCollections",[275,508,296],{"class":288},[275,510,511],{"class":488}," [\n",[275,513,514],{"class":277,"line":339},[275,515,516],{"class":288},"      {\n",[275,518,519,522,524,527,530,533,536],{"class":277,"line":355},[275,520,521],{"class":292},"        prefix",[275,523,296],{"class":288},[275,525,526],{"class":288}," '",[275,528,529],{"class":302},"custom",[275,531,532],{"class":288},"'",[275,534,535],{"class":288},",",[275,537,538],{"class":281}," \u002F\u002F 👈 내가 만든 아이콘들을 호출할 고유 접두사(네임스페이스)\n",[275,540,541,544,546,549,551,553,556,558,561,563],{"class":277,"line":365},[275,542,543],{"class":292},"        dir",[275,545,296],{"class":288},[275,547,548],{"class":484}," resolve",[275,550,489],{"class":488},[275,552,532],{"class":288},[275,554,555],{"class":302},".\u002Fapp\u002Fassets\u002Ficons",[275,557,532],{"class":288},[275,559,560],{"class":488},")",[275,562,535],{"class":288},[275,564,565],{"class":281}," \u002F\u002F 👈 내가 만든 SVG 파일들을 모아둘 보관소\n",[275,567,569],{"class":277,"line":568},8,[275,570,571],{"class":288},"      },\n",[275,573,575,578],{"class":277,"line":574},9,[275,576,577],{"class":488},"    ]",[275,579,580],{"class":288},",\n",[275,582,584,587,589],{"class":277,"line":583},10,[275,585,586],{"class":292},"    clientBundle",[275,588,296],{"class":288},[275,590,501],{"class":288},[275,592,594,597,599,603],{"class":277,"line":593},11,[275,595,596],{"class":292},"      scan",[275,598,296],{"class":288},[275,600,602],{"class":601},"sfNiH"," true",[275,604,580],{"class":288},[275,606,608,611,613,615,617],{"class":277,"line":607},12,[275,609,610],{"class":292},"      includeCustomCollections",[275,612,296],{"class":288},[275,614,602],{"class":601},[275,616,535],{"class":288},[275,618,619],{"class":281}," \u002F\u002F 로컬 커스텀 번들에 포함 처리\n",[275,621,623],{"class":277,"line":622},13,[275,624,625],{"class":288},"    }\n",[275,627,629],{"class":277,"line":628},14,[275,630,631],{"class":288},"  },\n",[275,633,635,638],{"class":277,"line":634},15,[275,636,637],{"class":288},"}",[275,639,640],{"class":488},")\n",[433,642,644],{"id":643},"_2단계-내가-만든-커스텀-svg-파일-배치","② 2단계: 내가 만든 커스텀 SVG 파일 배치",[227,646,647,648,651,652,655],{},"메뉴 아이콘으로 사용하고 싶은 나만의 로고나 심볼 이미지를 피그마(Figma)나 일러스트레이터에서 ",[236,649,650],{},"순수 SVG 포맷","으로 추출했다. 그 후 레이어에 지정된 로컬 경로(",[231,653,654],{},"app\u002Fassets\u002Ficons\u002F",") 안에 원하는 아이콘 명칭으로 파일을 투하했다.",[657,658,659],"ul",{},[660,661,662,663,250,666],"li",{},"파일 저장 예시: ",[231,664,665],{},"app\u002Fassets\u002Ficons\u002Fbrolog-logo.svg",[231,667,668],{},"app\u002Fassets\u002Ficons\u002Frocket-fire.svg",[433,670,672,673,675],{"id":671},"_3단계-navigationyml에서-내-아이콘-호출하기","③ 3단계: ",[231,674,242],{},"에서 내 아이콘 호출하기",[227,677,678,679,682,683,685],{},"이제 일반 외부 오픈소스 아이콘을 불러 쓰던 방식과 100% 동일하게 ",[231,680,681],{},"설정한접두사(prefix):내가만든파일명"," 구조로 ",[231,684,242],{},"에 선언해 주기만 하면 끝이다.",[266,687,689],{"className":268,"code":688,"language":270,"meta":271,"style":271},"# navigation.yml (최종 최적화 형태)\n- title: \"브랜드 소개\"\n  path: \u002Fbrand\n  icon: \"custom:brolog-logo\" # 👈 내가 만든 brolog-logo.svg가 시스템 아이콘처럼 완벽 매핑!\n- title: \"출시 가이드\"\n  path: \u002Flaunch\n  icon: \"custom:rocket-fire\" # 👈 직접 디자인한 전용 론칭 그래픽 SVG 즉시 적용\n- title: \"일반 설정\"\n  path: \u002Fsettings\n  icon: \"lucide:settings\"   # 👈 기존 글로벌 오픈소스 아이콘과도 아무런 충돌 없이 혼용 가능\n",[231,690,691,696,711,719,735,750,759,775,790,799],{"__ignoreMap":271},[275,692,693],{"class":277,"line":278},[275,694,695],{"class":281},"# navigation.yml (최종 최적화 형태)\n",[275,697,698,700,702,704,706,709],{"class":277,"line":285},[275,699,289],{"class":288},[275,701,293],{"class":292},[275,703,296],{"class":288},[275,705,299],{"class":288},[275,707,708],{"class":302},"브랜드 소개",[275,710,306],{"class":288},[275,712,713,715,717],{"class":277,"line":309},[275,714,312],{"class":292},[275,716,296],{"class":288},[275,718,362],{"class":302},[275,720,721,723,725,727,730,732],{"class":277,"line":320},[275,722,323],{"class":292},[275,724,296],{"class":288},[275,726,299],{"class":288},[275,728,729],{"class":302},"custom:brolog-logo",[275,731,333],{"class":288},[275,733,734],{"class":281}," # 👈 내가 만든 brolog-logo.svg가 시스템 아이콘처럼 완벽 매핑!\n",[275,736,737,739,741,743,745,748],{"class":277,"line":339},[275,738,289],{"class":288},[275,740,293],{"class":292},[275,742,296],{"class":288},[275,744,299],{"class":288},[275,746,747],{"class":302},"출시 가이드",[275,749,306],{"class":288},[275,751,752,754,756],{"class":277,"line":355},[275,753,312],{"class":292},[275,755,296],{"class":288},[275,757,758],{"class":302}," \u002Flaunch\n",[275,760,761,763,765,767,770,772],{"class":277,"line":365},[275,762,323],{"class":292},[275,764,296],{"class":288},[275,766,299],{"class":288},[275,768,769],{"class":302},"custom:rocket-fire",[275,771,333],{"class":288},[275,773,774],{"class":281}," # 👈 직접 디자인한 전용 론칭 그래픽 SVG 즉시 적용\n",[275,776,777,779,781,783,785,788],{"class":277,"line":568},[275,778,289],{"class":288},[275,780,293],{"class":292},[275,782,296],{"class":288},[275,784,299],{"class":288},[275,786,787],{"class":302},"일반 설정",[275,789,306],{"class":288},[275,791,792,794,796],{"class":277,"line":574},[275,793,312],{"class":292},[275,795,296],{"class":288},[275,797,798],{"class":302}," \u002Fsettings\n",[275,800,801,803,805,807,810,812],{"class":277,"line":583},[275,802,323],{"class":292},[275,804,296],{"class":288},[275,806,299],{"class":288},[275,808,809],{"class":302},"lucide:settings",[275,811,333],{"class":288},[275,813,814],{"class":281},"   # 👈 기존 글로벌 오픈소스 아이콘과도 아무런 충돌 없이 혼용 가능\n",[410,816],{},[205,818,820],{"id":819},"_4-경험을-통해-얻은-인사이트-및-결론","🧠 4. 경험을 통해 얻은 인사이트 및 결론",[657,822,823,829,839],{},[660,824,825,828],{},[236,826,827],{},"Nuxt Content 컴포넌트 무결성 유지:"," 네비게이션 링크를 렌더링하는 Nuxt Content 모듈 내부의 복잡한 UI 소스 코드를 단 한 줄도 수정하거나 커스텀 오버라이딩하지 않고, 순수하게 설정과 정적 파일 배치만으로 원하는 커스텀 비주얼을 완벽히 녹여냈다.",[660,830,831,834,835,838],{},[236,832,833],{},"디자인 시스템과의 융합:"," 일반 PNG\u002FJPG 이미지를 썼을 때 발생하는 해상도 깨짐이나 크기 조절의 번거로움이 사라졌다. 내가 만든 이미지가 정식 벡터(SVG) 아이콘으로 취급되면서 기존 UI의 다크모드 대응이나 폰트 크기(",[231,836,837],{},"w-4 h-4"," 등) 규칙에 유연하게 동기화되는 높은 완성도를 보여주었다.",[660,840,841],{},"Nuxt 4 멀티 레이어 기반의 프로젝트에서 전용 에셋을 서비스 전체에 가볍고 효율적으로 전파하고자 할 때, 일반 이미지를 아이콘 컬렉션으로 승격시키는 이 방식은 결합도를 낮추는 가장 영리한 해법임을 실무적으로 경험했다.",[843,844,845],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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 .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);}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":271,"searchDepth":285,"depth":285,"links":847},[848,849,853,859],{"id":207,"depth":285,"text":208},{"id":414,"depth":285,"text":850,"children":851},"🛠️ 2. 해결 전략: 내가 만든 이미지를 customCollections로 규격화",[852],{"id":435,"depth":309,"text":436},{"id":452,"depth":285,"text":453,"children":854},[855,856,857],{"id":456,"depth":309,"text":457},{"id":643,"depth":309,"text":644},{"id":671,"depth":309,"text":858},"③ 3단계: navigation.yml에서 내 아이콘 호출하기",{"id":819,"depth":285,"text":820},"2026-07-09","Nuxt Content v3의 navigation.yml 제한을 극복하고, customCollections를 활용해 직접 제작한 커스텀 SVG 이미지를 메뉴 아이콘으로 바인딩한 개발 경험 공유","md",null,{"tags":865,"image":870},[43,866,867,868,869],"Nuxt-Content","Nuxt-Icon","Custom","brolog-log","\u002Fimages\u002Fbro-thumbnail.png",{"icon":26},{"title":873,"description":874},"Nuxt Content 커스텀 아이콘 적용 방법","Nuxt Icon customCollections를 활용해 직접 제작한 SVG 아이콘을 navigation 메뉴에 적용하는 과정","5WEyQULmkb9k4k_I8A49yaca5saTqiom3g4PdloYhy0",[877,879],{"title":153,"path":154,"stem":155,"description":878,"icon":26,"children":-1},"개발 기록을 위한 개인 블로그 프로젝트의 정보 및 기술스택",{"title":161,"path":162,"stem":163,"description":880,"icon":26,"children":-1},"Nuxt 4에서 Vue API, Composable, Components를 별도의 import 없이 사용할 수 있는 Auto-imports 시스템의 동작 방식과 빌드 과정 이해",1785305905111]