[{"data":1,"prerenderedAt":1320},["ShallowReactive",2],{"nav-global-ko":3,"doc-/design/design-system-guide":271,"nav-ko":1236,"surround-/design/design-system-guide":1317},[4,20,34,132,163,252],{"title":5,"path":6,"stem":7,"children":8,"page":19},"Plan","/plan","1.plan",[9,14],{"title":10,"path":11,"stem":12,"icon":13},"Planning","/plan/_dir","1.plan/_dir","i-heroicons-clipboard-document-list",{"title":15,"path":16,"stem":17,"icon":18},"프로젝트 로드맵 작성 가이드","/plan/project-roadmap","1.plan/project-roadmap","i-heroicons-map",false,{"title":21,"path":22,"stem":23,"children":24,"page":19},"Design","/design","2.design",[25,30],{"title":26,"path":27,"stem":28,"icon":29},"디자인 시스템 구축 가이드","/design/design-system-guide","2.design/1.design-system-guide","i-heroicons-book-open",{"title":21,"path":31,"stem":32,"icon":33},"/design/_dir","2.design/_dir","i-vscode-icons-file-type-design",{"title":35,"path":36,"stem":37,"children":38,"page":19},"Develop","/develop","3.develop",[39,53,74,128],{"title":40,"path":41,"stem":42,"children":43,"page":19},"Markdown","/develop/markdown","3.develop/0.markdown",[44,50],{"title":45,"path":46,"stem":47,"redirect":48,"icon":49},"MarkDown","/develop/markdown/_dir","3.develop/0.markdown/_dir","/develop/markdown/markdown","i-vscode-icons-file-type-markdown",{"title":51,"path":48,"stem":52,"icon":49},"Markdown 필수 문법 완전 정복","3.develop/0.markdown/markdown",{"title":54,"path":55,"stem":56,"children":57,"page":19},"Html","/develop/html","3.develop/1.html",[58,71],{"title":59,"path":60,"stem":61,"children":62,"page":19},"References","/develop/html/references","3.develop/1.html/1.references",[63,67],{"title":59,"path":64,"stem":65,"icon":66},"/develop/html/references/_dir","3.develop/1.html/1.references/_dir","i-vscode-icons-file-type-html",{"title":68,"path":69,"stem":70,"icon":66},"HTML이란?","/develop/html/references/html","3.develop/1.html/1.references/html",{"title":54,"path":72,"stem":73,"redirect":60,"icon":66},"/develop/html/_dir","3.develop/1.html/_dir",{"title":75,"path":76,"stem":77,"children":78,"page":19},"Frameworks","/develop/frameworks","3.develop/2.frameworks",[79,88,101,114,124],{"title":80,"path":81,"stem":82,"children":83,"page":19},"Vue","/develop/frameworks/vue","3.develop/2.frameworks/1.vue",[84],{"title":80,"path":85,"stem":86,"icon":87},"/develop/frameworks/vue/_dir","3.develop/2.frameworks/1.vue/_dir","i-logos-vue",{"title":89,"path":90,"stem":91,"children":92,"page":19},"React","/develop/frameworks/react","3.develop/2.frameworks/2.react",[93,97],{"title":89,"path":94,"stem":95,"icon":96},"/develop/frameworks/react/_dir","3.develop/2.frameworks/2.react/_dir","i-logos-react",{"title":98,"path":99,"stem":100,"icon":96},"React 애플리케이션 성능 최적화 기법","/develop/frameworks/react/react-performance-optimization","3.develop/2.frameworks/2.react/react-performance-optimization",{"title":102,"path":103,"stem":104,"children":105,"page":19},"Nuxt","/develop/frameworks/nuxt","3.develop/2.frameworks/3.nuxt",[106,110],{"title":102,"path":107,"stem":108,"icon":109},"/develop/frameworks/nuxt/_dir","3.develop/2.frameworks/3.nuxt/_dir","i-logos-nuxt-icon",{"title":111,"path":112,"stem":113,"icon":87},"Nuxt 3 시작하기 가이드","/develop/frameworks/nuxt/nuxt3-intro-guide","3.develop/2.frameworks/3.nuxt/nuxt3-intro-guide",{"title":115,"path":116,"stem":117,"children":118,"page":19},"Next","/develop/frameworks/next","3.develop/2.frameworks/4.next",[119],{"title":120,"path":121,"stem":122,"icon":123},"Next.js","/develop/frameworks/next/_dir","3.develop/2.frameworks/4.next/_dir","i-logos-nextjs-icon",{"title":75,"path":125,"stem":126,"icon":127},"/develop/frameworks/_dir","3.develop/2.frameworks/_dir","i-heroicons-code-bracket-square",{"title":129,"path":130,"stem":131,"icon":127},"Development","/develop/_dir","3.develop/_dir",{"title":133,"path":134,"stem":135,"children":136,"page":19},"Devops","/devops","4.devops",[137,159],{"title":138,"path":139,"stem":140,"children":141,"icon":143},"Operation System 설정","/devops/os","4.devops/1.os/index",[142,144,154],{"title":138,"path":139,"stem":140,"icon":143},"i-heroicons-cog-8-tooth",{"title":145,"path":146,"stem":147,"children":148,"page":19},"Linux","/devops/os/linux","4.devops/1.os/1.linux",[149],{"title":150,"path":151,"stem":152,"icon":153},"운영 체제 비교 - 윈도우, 리눅스, 맥OS","/devops/os/linux/windows_linux_macos","4.devops/1.os/1.linux/windows_linux_macOS","i-logos-linux-tux",{"title":155,"path":156,"stem":157,"icon":158},"OS","/devops/os/_dir","4.devops/1.os/_dir","i-vscode-icons-folder-type-tools",{"title":160,"path":161,"stem":162,"icon":158},"Env","/devops/_dir","4.devops/_dir",{"title":164,"path":165,"stem":166,"children":167,"page":19},"Ai","/ai","5.ai",[168,192,247],{"title":169,"path":170,"stem":171,"children":172,"page":19},"Prompt","/ai/prompt","5.ai/3.prompt",[173],{"title":174,"path":175,"stem":176,"children":177,"page":19},"Claude","/ai/prompt/claude","5.ai/3.prompt/1.claude",[178],{"title":179,"path":180,"stem":181,"children":182,"page":19},"Claude Code","/ai/prompt/claude/claude-code","5.ai/3.prompt/1.claude/claude-code",[183,187],{"title":179,"path":184,"stem":185,"redirect":180,"icon":186},"/ai/prompt/claude/claude-code/_dir","5.ai/3.prompt/1.claude/claude-code/_dir","i-logos-anthropic-icon",{"title":188,"path":189,"stem":190,"icon":191},"Claude Code MCP 서버 자동 실행 설정","/ai/prompt/claude/claude-code/mcp-server-autostart-configuration","5.ai/3.prompt/1.claude/claude-code/mcp-server-autostart-configuration","i-heroicons-server",{"title":193,"path":194,"stem":195,"children":196,"page":19},"Personas","/ai/personas","5.ai/4.personas",[197,202,206,210,214,218,222,226,230,234,238,242],{"title":198,"path":199,"stem":200,"icon":201},"🏗️ System Architect 페르소나","/ai/personas/01-system-architect","5.ai/4.personas/01-system-architect","i-heroicons-cpu-chip",{"title":203,"path":204,"stem":205},"🎨 ui-accessibility-expert persona","/ai/personas/02-ui-accessibility-expert","5.ai/4.personas/02-ui-accessibility-expert",{"title":207,"path":208,"stem":209},"⚙️ Backend API Infrastructure Specialist Persona","/ai/personas/03-backend-api-infrastructure","5.ai/4.personas/03-backend-api-infrastructure",{"title":211,"path":212,"stem":213},"🛡️ Security Threat Modeling Expert System Prompt","/ai/personas/04-security-threat-modeling-expert","5.ai/4.personas/04-security-threat-modeling-expert",{"title":215,"path":216,"stem":217},"⚡ Performance-Optimizer AI Assist Prompt","/ai/personas/05-performance-optimizer","5.ai/4.personas/05-performance-optimizer",{"title":219,"path":220,"stem":221},"🔍 Root Cause Analyzer AI Persona Prompt","/ai/personas/11-root-cause-analyzer","5.ai/4.personas/11-root-cause-analyzer",{"title":223,"path":224,"stem":225},"🧪 QA Testing Expert AI Assistant Prompt","/ai/personas/12-quality-assurance-testing-expert","5.ai/4.personas/12-quality-assurance-testing-expert",{"title":227,"path":228,"stem":229},"🔄 Code Refactoring Specialist AI Assistant Prompt","/ai/personas/13-code-refactoring-specialist","5.ai/4.personas/13-code-refactoring-specialist",{"title":231,"path":232,"stem":233},"🚀 DevOps Infrastructure Expert AI Assistant Prompt","/ai/personas/14-infra-automation-expert","5.ai/4.personas/14-infra-automation-expert",{"title":235,"path":236,"stem":237},"👨‍🏫 Educational-Guidance-Mentor Persona System Prompt","/ai/personas/21-educational-guidance-mentor","5.ai/4.personas/21-educational-guidance-mentor",{"title":239,"path":240,"stem":241},"✍️ Documentation Expert AI Assistant Prompt","/ai/personas/22-technical-documentation-expert","5.ai/4.personas/22-technical-documentation-expert",{"title":243,"path":244,"stem":245,"redirect":199,"icon":246},"AI Personas","/ai/personas/_dir","5.ai/4.personas/_dir","i-heroicons-users",{"title":248,"path":249,"stem":250,"icon":251},"AI","/ai/_dir","5.ai/_dir","i-heroicons-sparkles",{"title":253,"path":254,"stem":255,"children":256,"page":19},"Blog","/blog","6.blog",[257,267],{"title":258,"path":259,"stem":260,"children":261,"page":19},"2024","/blog/2024","6.blog/2024",[262],{"title":263,"path":264,"stem":265,"icon":266},"기록의 중요성","/blog/2024/2024-02-15-blog","6.blog/2024/2024-02-15-blog","i-heroicons-pencil-square",{"title":253,"path":268,"stem":269,"icon":270},"/blog/_dir","6.blog/_dir","i-heroicons-newspaper",{"id":272,"title":26,"authors":273,"body":274,"description":1227,"draft":19,"extension":1228,"head":273,"icon":273,"image":1229,"meta":1230,"navigation":1232,"path":27,"publishedAt":273,"seo":1233,"stem":28,"tags":273,"updatedAt":1234,"__hash__":1235},"docs_ko/2.design/1.design-system-guide.md",null,{"type":275,"value":276,"toc":1209},"minimark",[277,281,286,289,324,328,333,336,356,360,363,368,669,672,873,877,1018,1022,1025,1045,1048,1062,1066,1069,1086,1090,1094,1097,1117,1121,1153,1157,1161,1175,1179,1199,1202,1205],[278,279,280],"p",{},"디자인 시스템은 제품의 일관성을 유지하고 디자인 및 개발 프로세스를 가속화하는 핵심 요소입니다. 이 가이드에서는 효과적인 디자인 시스템 구축을 위한 단계와 구성 요소를 설명합니다.",[282,283,285],"h2",{"id":284},"디자인-시스템의-정의","디자인 시스템의 정의",[278,287,288],{},"디자인 시스템은 다음 요소들의 집합입니다:",[290,291,292,300,306,312,318],"ul",{},[293,294,295,299],"li",{},[296,297,298],"strong",{},"디자인 원칙",": 제품 디자인을 이끄는 핵심 가치",[293,301,302,305],{},[296,303,304],{},"컴포넌트 라이브러리",": 재사용 가능한 UI 요소",[293,307,308,311],{},[296,309,310],{},"패턴 라이브러리",": 사용자 문제를 해결하는 UI 패턴",[293,313,314,317],{},[296,315,316],{},"스타일 가이드",": 색상, 타이포그래피, 아이콘 등의 시각적 언어",[293,319,320,323],{},[296,321,322],{},"문서화",": 사용 지침과 예시",[282,325,327],{"id":326},"디자인-시스템-구축-단계","디자인 시스템 구축 단계",[329,330,332],"h3",{"id":331},"_1-현황-분석","1. 현황 분석",[278,334,335],{},"현재 제품의 UI를 분석하여 일관성이 없는 부분을 파악합니다.",[290,337,338,344,350],{},[293,339,340,343],{},[296,341,342],{},"UI 감사",": 현재 사용 중인 모든 UI 요소 수집",[293,345,346,349],{},[296,347,348],{},"패턴 식별",": 반복되는 디자인 패턴 찾기",[293,351,352,355],{},[296,353,354],{},"불일치 식별",": 비슷한 기능에 다른 디자인이 적용된 부분 찾기",[329,357,359],{"id":358},"_2-디자인-토큰-정의","2. 디자인 토큰 정의",[278,361,362],{},"디자인 시스템의 기초가 되는 토큰을 정의합니다.",[364,365,367],"h4",{"id":366},"색상-시스템","색상 시스템",[369,370,375],"pre",{"className":371,"code":372,"language":373,"meta":374,"style":374},"language-scss shiki shiki-themes github-light github-dark","// 주요 브랜드 색상\n$primary-50: #E3F2FD;\n$primary-100: #BBDEFB;\n$primary-200: #90CAF9;\n$primary-300: #64B5F6;\n$primary-400: #42A5F5;\n$primary-500: #2196F3;  // 메인 색상\n$primary-600: #1E88E5;\n$primary-700: #1976D2;\n$primary-800: #1565C0;\n$primary-900: #0D47A1;\n\n// 중립 색상\n$neutral-50: #FAFAFA;\n$neutral-100: #F5F5F5;\n$neutral-200: #EEEEEE;\n$neutral-300: #E0E0E0;\n$neutral-400: #BDBDBD;\n$neutral-500: #9E9E9E;\n$neutral-600: #757575;\n$neutral-700: #616161;\n$neutral-800: #424242;\n$neutral-900: #212121;\n","scss","",[376,377,378,387,405,418,431,444,457,474,487,500,513,526,533,539,552,565,578,591,604,617,630,643,656],"code",{"__ignoreMap":374},[379,380,383],"span",{"class":381,"line":382},"line",1,[379,384,386],{"class":385},"sJ8bj","// 주요 브랜드 색상\n",[379,388,390,394,398,402],{"class":381,"line":389},2,[379,391,393],{"class":392},"s4XuR","$primary-50",[379,395,397],{"class":396},"sVt8B",": ",[379,399,401],{"class":400},"sj4cs","#E3F2FD",[379,403,404],{"class":396},";\n",[379,406,408,411,413,416],{"class":381,"line":407},3,[379,409,410],{"class":392},"$primary-100",[379,412,397],{"class":396},[379,414,415],{"class":400},"#BBDEFB",[379,417,404],{"class":396},[379,419,421,424,426,429],{"class":381,"line":420},4,[379,422,423],{"class":392},"$primary-200",[379,425,397],{"class":396},[379,427,428],{"class":400},"#90CAF9",[379,430,404],{"class":396},[379,432,434,437,439,442],{"class":381,"line":433},5,[379,435,436],{"class":392},"$primary-300",[379,438,397],{"class":396},[379,440,441],{"class":400},"#64B5F6",[379,443,404],{"class":396},[379,445,447,450,452,455],{"class":381,"line":446},6,[379,448,449],{"class":392},"$primary-400",[379,451,397],{"class":396},[379,453,454],{"class":400},"#42A5F5",[379,456,404],{"class":396},[379,458,460,463,465,468,471],{"class":381,"line":459},7,[379,461,462],{"class":392},"$primary-500",[379,464,397],{"class":396},[379,466,467],{"class":400},"#2196F3",[379,469,470],{"class":396},";  ",[379,472,473],{"class":385},"// 메인 색상\n",[379,475,477,480,482,485],{"class":381,"line":476},8,[379,478,479],{"class":392},"$primary-600",[379,481,397],{"class":396},[379,483,484],{"class":400},"#1E88E5",[379,486,404],{"class":396},[379,488,490,493,495,498],{"class":381,"line":489},9,[379,491,492],{"class":392},"$primary-700",[379,494,397],{"class":396},[379,496,497],{"class":400},"#1976D2",[379,499,404],{"class":396},[379,501,503,506,508,511],{"class":381,"line":502},10,[379,504,505],{"class":392},"$primary-800",[379,507,397],{"class":396},[379,509,510],{"class":400},"#1565C0",[379,512,404],{"class":396},[379,514,516,519,521,524],{"class":381,"line":515},11,[379,517,518],{"class":392},"$primary-900",[379,520,397],{"class":396},[379,522,523],{"class":400},"#0D47A1",[379,525,404],{"class":396},[379,527,529],{"class":381,"line":528},12,[379,530,532],{"emptyLinePlaceholder":531},true,"\n",[379,534,536],{"class":381,"line":535},13,[379,537,538],{"class":385},"// 중립 색상\n",[379,540,542,545,547,550],{"class":381,"line":541},14,[379,543,544],{"class":392},"$neutral-50",[379,546,397],{"class":396},[379,548,549],{"class":400},"#FAFAFA",[379,551,404],{"class":396},[379,553,555,558,560,563],{"class":381,"line":554},15,[379,556,557],{"class":392},"$neutral-100",[379,559,397],{"class":396},[379,561,562],{"class":400},"#F5F5F5",[379,564,404],{"class":396},[379,566,568,571,573,576],{"class":381,"line":567},16,[379,569,570],{"class":392},"$neutral-200",[379,572,397],{"class":396},[379,574,575],{"class":400},"#EEEEEE",[379,577,404],{"class":396},[379,579,581,584,586,589],{"class":381,"line":580},17,[379,582,583],{"class":392},"$neutral-300",[379,585,397],{"class":396},[379,587,588],{"class":400},"#E0E0E0",[379,590,404],{"class":396},[379,592,594,597,599,602],{"class":381,"line":593},18,[379,595,596],{"class":392},"$neutral-400",[379,598,397],{"class":396},[379,600,601],{"class":400},"#BDBDBD",[379,603,404],{"class":396},[379,605,607,610,612,615],{"class":381,"line":606},19,[379,608,609],{"class":392},"$neutral-500",[379,611,397],{"class":396},[379,613,614],{"class":400},"#9E9E9E",[379,616,404],{"class":396},[379,618,620,623,625,628],{"class":381,"line":619},20,[379,621,622],{"class":392},"$neutral-600",[379,624,397],{"class":396},[379,626,627],{"class":400},"#757575",[379,629,404],{"class":396},[379,631,633,636,638,641],{"class":381,"line":632},21,[379,634,635],{"class":392},"$neutral-700",[379,637,397],{"class":396},[379,639,640],{"class":400},"#616161",[379,642,404],{"class":396},[379,644,646,649,651,654],{"class":381,"line":645},22,[379,647,648],{"class":392},"$neutral-800",[379,650,397],{"class":396},[379,652,653],{"class":400},"#424242",[379,655,404],{"class":396},[379,657,659,662,664,667],{"class":381,"line":658},23,[379,660,661],{"class":392},"$neutral-900",[379,663,397],{"class":396},[379,665,666],{"class":400},"#212121",[379,668,404],{"class":396},[364,670,671],{"id":671},"타이포그래피",[369,673,675],{"className":371,"code":674,"language":373,"meta":374,"style":374},"// 폰트 패밀리\n$font-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;\n$font-secondary: 'Noto Sans KR', sans-serif;\n\n// 폰트 크기 (rem 기준)\n$font-size-xs: 0.75rem;    // 12px\n$font-size-sm: 0.875rem;   // 14px\n$font-size-base: 1rem;     // 16px\n$font-size-lg: 1.125rem;   // 18px\n$font-size-xl: 1.25rem;    // 20px\n$font-size-2xl: 1.5rem;    // 24px\n$font-size-3xl: 1.875rem;  // 30px\n$font-size-4xl: 2.25rem;   // 36px\n",[376,676,677,682,707,723,727,732,752,770,788,805,822,839,856],{"__ignoreMap":374},[379,678,679],{"class":381,"line":382},[379,680,681],{"class":385},"// 폰트 패밀리\n",[379,683,684,687,689,693,696,699,702,705],{"class":381,"line":389},[379,685,686],{"class":392},"$font-primary",[379,688,397],{"class":396},[379,690,692],{"class":691},"sZZnC","'Pretendard'",[379,694,695],{"class":396},", ",[379,697,698],{"class":400},"-apple-system",[379,700,701],{"class":396},", BlinkMacSystemFont, ",[379,703,704],{"class":400},"sans-serif",[379,706,404],{"class":396},[379,708,709,712,714,717,719,721],{"class":381,"line":407},[379,710,711],{"class":392},"$font-secondary",[379,713,397],{"class":396},[379,715,716],{"class":691},"'Noto Sans KR'",[379,718,695],{"class":396},[379,720,704],{"class":400},[379,722,404],{"class":396},[379,724,725],{"class":381,"line":420},[379,726,532],{"emptyLinePlaceholder":531},[379,728,729],{"class":381,"line":433},[379,730,731],{"class":385},"// 폰트 크기 (rem 기준)\n",[379,733,734,737,739,742,746,749],{"class":381,"line":446},[379,735,736],{"class":392},"$font-size-xs",[379,738,397],{"class":396},[379,740,741],{"class":400},"0.75",[379,743,745],{"class":744},"szBVR","rem",[379,747,748],{"class":396},";    ",[379,750,751],{"class":385},"// 12px\n",[379,753,754,757,759,762,764,767],{"class":381,"line":459},[379,755,756],{"class":392},"$font-size-sm",[379,758,397],{"class":396},[379,760,761],{"class":400},"0.875",[379,763,745],{"class":744},[379,765,766],{"class":396},";   ",[379,768,769],{"class":385},"// 14px\n",[379,771,772,775,777,780,782,785],{"class":381,"line":476},[379,773,774],{"class":392},"$font-size-base",[379,776,397],{"class":396},[379,778,779],{"class":400},"1",[379,781,745],{"class":744},[379,783,784],{"class":396},";     ",[379,786,787],{"class":385},"// 16px\n",[379,789,790,793,795,798,800,802],{"class":381,"line":489},[379,791,792],{"class":392},"$font-size-lg",[379,794,397],{"class":396},[379,796,797],{"class":400},"1.125",[379,799,745],{"class":744},[379,801,766],{"class":396},[379,803,804],{"class":385},"// 18px\n",[379,806,807,810,812,815,817,819],{"class":381,"line":502},[379,808,809],{"class":392},"$font-size-xl",[379,811,397],{"class":396},[379,813,814],{"class":400},"1.25",[379,816,745],{"class":744},[379,818,748],{"class":396},[379,820,821],{"class":385},"// 20px\n",[379,823,824,827,829,832,834,836],{"class":381,"line":515},[379,825,826],{"class":392},"$font-size-2xl",[379,828,397],{"class":396},[379,830,831],{"class":400},"1.5",[379,833,745],{"class":744},[379,835,748],{"class":396},[379,837,838],{"class":385},"// 24px\n",[379,840,841,844,846,849,851,853],{"class":381,"line":528},[379,842,843],{"class":392},"$font-size-3xl",[379,845,397],{"class":396},[379,847,848],{"class":400},"1.875",[379,850,745],{"class":744},[379,852,470],{"class":396},[379,854,855],{"class":385},"// 30px\n",[379,857,858,861,863,866,868,870],{"class":381,"line":535},[379,859,860],{"class":392},"$font-size-4xl",[379,862,397],{"class":396},[379,864,865],{"class":400},"2.25",[379,867,745],{"class":744},[379,869,766],{"class":396},[379,871,872],{"class":385},"// 36px\n",[364,874,876],{"id":875},"공간-시스템","공간 시스템",[369,878,880],{"className":371,"code":879,"language":373,"meta":374,"style":374},"// 스페이싱 단위 (rem 기준)\n$space-1: 0.25rem;   // 4px\n$space-2: 0.5rem;    // 8px\n$space-3: 0.75rem;   // 12px\n$space-4: 1rem;      // 16px\n$space-6: 1.5rem;    // 24px\n$space-8: 2rem;      // 32px\n$space-12: 3rem;     // 48px\n$space-16: 4rem;     // 64px\n",[376,881,882,887,904,921,936,952,967,984,1001],{"__ignoreMap":374},[379,883,884],{"class":381,"line":382},[379,885,886],{"class":385},"// 스페이싱 단위 (rem 기준)\n",[379,888,889,892,894,897,899,901],{"class":381,"line":389},[379,890,891],{"class":392},"$space-1",[379,893,397],{"class":396},[379,895,896],{"class":400},"0.25",[379,898,745],{"class":744},[379,900,766],{"class":396},[379,902,903],{"class":385},"// 4px\n",[379,905,906,909,911,914,916,918],{"class":381,"line":407},[379,907,908],{"class":392},"$space-2",[379,910,397],{"class":396},[379,912,913],{"class":400},"0.5",[379,915,745],{"class":744},[379,917,748],{"class":396},[379,919,920],{"class":385},"// 8px\n",[379,922,923,926,928,930,932,934],{"class":381,"line":420},[379,924,925],{"class":392},"$space-3",[379,927,397],{"class":396},[379,929,741],{"class":400},[379,931,745],{"class":744},[379,933,766],{"class":396},[379,935,751],{"class":385},[379,937,938,941,943,945,947,950],{"class":381,"line":433},[379,939,940],{"class":392},"$space-4",[379,942,397],{"class":396},[379,944,779],{"class":400},[379,946,745],{"class":744},[379,948,949],{"class":396},";      ",[379,951,787],{"class":385},[379,953,954,957,959,961,963,965],{"class":381,"line":446},[379,955,956],{"class":392},"$space-6",[379,958,397],{"class":396},[379,960,831],{"class":400},[379,962,745],{"class":744},[379,964,748],{"class":396},[379,966,838],{"class":385},[379,968,969,972,974,977,979,981],{"class":381,"line":459},[379,970,971],{"class":392},"$space-8",[379,973,397],{"class":396},[379,975,976],{"class":400},"2",[379,978,745],{"class":744},[379,980,949],{"class":396},[379,982,983],{"class":385},"// 32px\n",[379,985,986,989,991,994,996,998],{"class":381,"line":476},[379,987,988],{"class":392},"$space-12",[379,990,397],{"class":396},[379,992,993],{"class":400},"3",[379,995,745],{"class":744},[379,997,784],{"class":396},[379,999,1000],{"class":385},"// 48px\n",[379,1002,1003,1006,1008,1011,1013,1015],{"class":381,"line":489},[379,1004,1005],{"class":392},"$space-16",[379,1007,397],{"class":396},[379,1009,1010],{"class":400},"4",[379,1012,745],{"class":744},[379,1014,784],{"class":396},[379,1016,1017],{"class":385},"// 64px\n",[329,1019,1021],{"id":1020},"_3-핵심-컴포넌트-설계","3. 핵심 컴포넌트 설계",[278,1023,1024],{},"가장 자주 사용되는 컴포넌트부터 설계를 시작합니다:",[290,1026,1027,1030,1033,1036,1039,1042],{},[293,1028,1029],{},"버튼 (Button)",[293,1031,1032],{},"입력 필드 (Input)",[293,1034,1035],{},"카드 (Card)",[293,1037,1038],{},"내비게이션 (Navigation)",[293,1040,1041],{},"다이얼로그 (Dialog)",[293,1043,1044],{},"드롭다운 (Dropdown)",[278,1046,1047],{},"각 컴포넌트는 다음 항목을 포함하여 문서화합니다:",[290,1049,1050,1053,1056,1059],{},[293,1051,1052],{},"사용 목적",[293,1054,1055],{},"변형 및 상태",[293,1057,1058],{},"접근성 고려사항",[293,1060,1061],{},"예시 코드",[329,1063,1065],{"id":1064},"_4-패턴-라이브러리-구축","4. 패턴 라이브러리 구축",[278,1067,1068],{},"컴포넌트를 조합하여 더 복잡한 UI 패턴을 만듭니다:",[290,1070,1071,1074,1077,1080,1083],{},[293,1072,1073],{},"검색 기능",[293,1075,1076],{},"페이지네이션",[293,1078,1079],{},"필터링 및 정렬",[293,1081,1082],{},"데이터 표시 (테이블, 리스트)",[293,1084,1085],{},"양식 검증",[282,1087,1089],{"id":1088},"디자인-시스템-관리","디자인 시스템 관리",[329,1091,1093],{"id":1092},"버전-관리","버전 관리",[278,1095,1096],{},"Semantic Versioning을 사용하여 변경사항을 관리합니다:",[290,1098,1099,1105,1111],{},[293,1100,1101,1104],{},[296,1102,1103],{},"Major (1.0.0)",": 이전 버전과 호환되지 않는 변경",[293,1106,1107,1110],{},[296,1108,1109],{},"Minor (0.1.0)",": 이전 버전과 호환되는 기능 추가",[293,1112,1113,1116],{},[296,1114,1115],{},"Patch (0.0.1)",": 버그 수정",[329,1118,1120],{"id":1119},"협업-프로세스","협업 프로세스",[1122,1123,1124,1130,1136,1142,1147],"ol",{},[293,1125,1126,1129],{},[296,1127,1128],{},"제안",": 새로운 컴포넌트나 변경 사항 제안",[293,1131,1132,1135],{},[296,1133,1134],{},"검토",": 디자인 및 개발 팀의 검토",[293,1137,1138,1141],{},[296,1139,1140],{},"테스트",": 접근성 및 사용성 테스트",[293,1143,1144,1146],{},[296,1145,322],{},": 사용 가이드라인 작성",[293,1148,1149,1152],{},[296,1150,1151],{},"배포",": 버전 업데이트 및 배포",[282,1154,1156],{"id":1155},"디자인-시스템-도구","디자인 시스템 도구",[329,1158,1160],{"id":1159},"디자인-도구","디자인 도구",[290,1162,1163,1169],{},[293,1164,1165,1168],{},[296,1166,1167],{},"Figma",": 컴포넌트 디자인 및 공유",[293,1170,1171,1174],{},[296,1172,1173],{},"Storybook",": 컴포넌트 문서화 및 테스트",[329,1176,1178],{"id":1177},"개발-도구","개발 도구",[290,1180,1181,1187,1193],{},[293,1182,1183,1186],{},[296,1184,1185],{},"Style Dictionary",": 디자인 토큰 관리",[293,1188,1189,1192],{},[296,1190,1191],{},"Tailwind CSS",": 유틸리티 기반 스타일링",[293,1194,1195,1198],{},[296,1196,1197],{},"CSS-in-JS",": 컴포넌트 스타일링 (Emotion, Styled Components)",[282,1200,1201],{"id":1201},"결론",[278,1203,1204],{},"효과적인 디자인 시스템은 디자인 및 개발 생산성을 높이고, 제품의 일관성을 유지하며, 협업을 촉진합니다. 처음부터 완벽한 시스템을 구축하려 하기보다는 점진적으로 발전시켜 나가는 것이 중요합니다. 팀의 필요에 맞게 지속적으로 개선하고 확장해 나가세요.",[1206,1207,1208],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":374,"searchDepth":389,"depth":389,"links":1210},[1211,1212,1218,1222,1226],{"id":284,"depth":389,"text":285},{"id":326,"depth":389,"text":327,"children":1213},[1214,1215,1216,1217],{"id":331,"depth":407,"text":332},{"id":358,"depth":407,"text":359},{"id":1020,"depth":407,"text":1021},{"id":1064,"depth":407,"text":1065},{"id":1088,"depth":389,"text":1089,"children":1219},[1220,1221],{"id":1092,"depth":407,"text":1093},{"id":1119,"depth":407,"text":1120},{"id":1155,"depth":389,"text":1156,"children":1223},[1224,1225],{"id":1159,"depth":407,"text":1160},{"id":1177,"depth":407,"text":1178},{"id":1201,"depth":389,"text":1201},"효율적인 디자인 시스템 구축 방법과 주요 구성 요소","md","/images/content/2.design/design-system.png",{"createdAt":1231},"2024-02-18",{"icon":29},{"title":26,"description":1227},"2024-02-20","TaPwE_wI4K42WxrKiKrCFyTcbB0r8_ETJ-PdvzDyNrw",[1237,1241,1245,1276,1286,1311],{"title":5,"path":6,"stem":7,"children":1238,"page":19},[1239,1240],{"title":10,"path":11,"stem":12,"icon":13},{"title":15,"path":16,"stem":17,"icon":18},{"title":21,"path":22,"stem":23,"children":1242,"page":19},[1243,1244],{"title":26,"path":27,"stem":28,"icon":29},{"title":21,"path":31,"stem":32,"icon":33},{"title":35,"path":36,"stem":37,"children":1246,"page":19},[1247,1251,1258,1275],{"title":40,"path":41,"stem":42,"children":1248,"page":19},[1249,1250],{"title":45,"path":46,"stem":47,"redirect":48,"icon":49},{"title":51,"path":48,"stem":52,"icon":49},{"title":54,"path":55,"stem":56,"children":1252,"page":19},[1253,1257],{"title":59,"path":60,"stem":61,"children":1254,"page":19},[1255,1256],{"title":59,"path":64,"stem":65,"icon":66},{"title":68,"path":69,"stem":70,"icon":66},{"title":54,"path":72,"stem":73,"redirect":60,"icon":66},{"title":75,"path":76,"stem":77,"children":1259,"page":19},[1260,1263,1267,1271,1274],{"title":80,"path":81,"stem":82,"children":1261,"page":19},[1262],{"title":80,"path":85,"stem":86,"icon":87},{"title":89,"path":90,"stem":91,"children":1264,"page":19},[1265,1266],{"title":89,"path":94,"stem":95,"icon":96},{"title":98,"path":99,"stem":100,"icon":96},{"title":102,"path":103,"stem":104,"children":1268,"page":19},[1269,1270],{"title":102,"path":107,"stem":108,"icon":109},{"title":111,"path":112,"stem":113,"icon":87},{"title":115,"path":116,"stem":117,"children":1272,"page":19},[1273],{"title":120,"path":121,"stem":122,"icon":123},{"title":75,"path":125,"stem":126,"icon":127},{"title":129,"path":130,"stem":131,"icon":127},{"title":133,"path":134,"stem":135,"children":1277,"page":19},[1278,1285],{"title":138,"path":139,"stem":140,"children":1279,"icon":143},[1280,1281,1284],{"title":138,"path":139,"stem":140,"icon":143},{"title":145,"path":146,"stem":147,"children":1282,"page":19},[1283],{"title":150,"path":151,"stem":152,"icon":153},{"title":155,"path":156,"stem":157,"icon":158},{"title":160,"path":161,"stem":162,"icon":158},{"title":164,"path":165,"stem":166,"children":1287,"page":19},[1288,1296,1310],{"title":169,"path":170,"stem":171,"children":1289,"page":19},[1290],{"title":174,"path":175,"stem":176,"children":1291,"page":19},[1292],{"title":179,"path":180,"stem":181,"children":1293,"page":19},[1294,1295],{"title":179,"path":184,"stem":185,"redirect":180,"icon":186},{"title":188,"path":189,"stem":190,"icon":191},{"title":193,"path":194,"stem":195,"children":1297,"page":19},[1298,1299,1300,1301,1302,1303,1304,1305,1306,1307,1308,1309],{"title":198,"path":199,"stem":200,"icon":201},{"title":203,"path":204,"stem":205},{"title":207,"path":208,"stem":209},{"title":211,"path":212,"stem":213},{"title":215,"path":216,"stem":217},{"title":219,"path":220,"stem":221},{"title":223,"path":224,"stem":225},{"title":227,"path":228,"stem":229},{"title":231,"path":232,"stem":233},{"title":235,"path":236,"stem":237},{"title":239,"path":240,"stem":241},{"title":243,"path":244,"stem":245,"redirect":199,"icon":246},{"title":248,"path":249,"stem":250,"icon":251},{"title":253,"path":254,"stem":255,"children":1312,"page":19},[1313,1316],{"title":258,"path":259,"stem":260,"children":1314,"page":19},[1315],{"title":263,"path":264,"stem":265,"icon":266},{"title":253,"path":268,"stem":269,"icon":270},[1318,1319],{"title":15,"path":16,"stem":17,"icon":18,"children":-1},{"title":21,"path":31,"stem":32,"icon":33,"children":-1},1773760864974]