docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links

10_Wiki/Topics_Art/UI_UX_Assets/확장 가능한 스타일 시스템.md

@@ -1,4 +1,4 @@
-# [[확장 가능한 스타일 시스템]]
+# [[확장 가능한 스타일 시스템|확장 가능한 스타일 시스템]]
 
 ## 📌 Brief Summary
 확장 가능한 스타일 시스템은 CSS를 단순한 시각적 장식이 아닌 엄격한 엔지니어링 규율로 취급하여 대규모 프로젝트에서 발생하는 'CSS 비대화(bloat)' 및 글로벌 네임스페이스 충돌을 방지하는 프론트엔드 아키텍처입니다 [1]. 이 시스템은 BEM, CSS Modules, Tailwind CSS 등 구조화된 CSS 설계 방식을 통해 컴포넌트를 모듈화하며, 디자인 토큰과 최신 레이아웃(Grid/Flexbox), 컨테이너 쿼리를 결합해 일관되고 유지보수 가능한 UI를 구축하는 것을 핵심 목적으로 합니다 [2-5].
@@ -27,8 +27,8 @@
   * 아키텍처 측면에서는 기능 주도(Feature-driven) 또는 도메인 주도로 폴더를 구조화하여, 특정 기능 삭제 시 관련 CSS도 쉽게 함께 폐기(Dead code elimination)할 수 있도록 설계해야 유지보수가 수월합니다 [37, 38].
 
 ## 🔗 Knowledge Connections
-- **Related Topics:** [[CSS 구조 설계 방식]], [[BEM 방법론]], [[CSS Modules]], [[Tailwind CSS 전략]], [[디자인 토큰(Design Tokens)]], [[Flexbox와 CSS Grid 아키텍처]], [[컨테이너 쿼리(Container Queries)]], [[유동적 타이포그래피(Fluid Typography)]], [[리플로우 및 리페인트(Reflow & Repaint)]]
-- **Projects/Contexts:** [[대규모 엔터프라이즈 프론트엔드 환경]], [[디자인 시스템 구축 파이프라인]], [[기능 주도 아키텍처(Feature-driven Architecture)]]
+- **Related Topics:** [[CSS 구조 설계 방식|CSS 구조 설계 방식]], BEM 방법론, [[CSS Modules|CSS Modules]], Tailwind CSS 전략, [[디자인 토큰(Design Tokens)|디자인 토큰(Design Tokens)]], Flexbox와 CSS Grid 아키텍처, [[컨테이너 쿼리(Container Queries)|컨테이너 쿼리(Container Queries)]], [[유동적 타이포그래피(Fluid Typography)|유동적 타이포그래피(Fluid Typography)]], [[리플로우 및 리페인트(Reflow & Repaint)|리플로우 및 리페인트(Reflow & Repaint)]]
+- **Projects/Contexts:** 대규모 엔터프라이즈 프론트엔드 환경, 디자인 시스템 구축 파이프라인, 기능 주도 아키텍처(Feature-driven Architecture)
 - **Contradictions/Notes:** Tailwind CSS와 같은 유틸리티 우선(Utility-first) 접근 방식은 개발 속도 향상, 일관성 유지, CSS 번들 사이즈 최적화에 탁월하지만 긴 클래스 이름으로 인해 HTML 마크업이 장황해지고 가독성이 떨어지는 단점이 있습니다 [15, 16]. 반면, SCSS나 CSS Modules는 마크업을 깔끔하게 유지해주지만, 클래스 작명에 따른 피로도와 별도 파일 이동 등 컨텍스트 전환(Context switching) 비용이 발생합니다 [16, 39]. 따라서 현대의 실무 환경에서는 전반적인 레이아웃과 간격에는 Tailwind를 사용하고, 미세하고 복잡한 스타일링이 필요한 컴포넌트에는 CSS Modules를 결합하여 사용하는 하이브리드(Hybrid) 전략이 채택되기도 합니다 [40-43].
 
 ---