[G1-Sync] Manual knowledge update

10_Wiki/Topics/Frontend_Mastery/유지보수 가능한 CSS 아키텍처(CSS Modules & Tailwind).md

@@ -1,7 +1,7 @@
-# [[유지보수 가능한 CSS 아키텍처(CSS Modules & Tailwind)]]
+# [[유지보수 가능한 CSS 아키텍처([[CSS Modules]] & Tailwind)]]
 
-## 📌 Brief Summary
-현대 프론트엔드 개발에서 CSS는 단순한 시각적 장식을 넘어 장기적인 유지보수성과 아키텍처 무결성이 중요한 엔지니어링 영역으로 진화했습니다 [1]. 이를 위해 등장한 **CSS Modules**는 빌드 타임에 고유한 클래스명을 생성하여 스타일 충돌을 방지하고 캡슐화를 자동화하며, **Tailwind CSS**는 유틸리티 퍼스트(Utility-first) 접근 방식을 통해 마크업 내에서 직접 스타일을 조합하여 개발 속도와 일관성을 높입니다 [2-5]. 대규모 프로젝트에서는 이 두 접근 방식을 적절히 결합하여, 레이아웃에는 Tailwind를 적용하고 복잡한 컴포넌트에는 CSS Modules를 활용하는 하이브리드 전략이 유지보수성을 극대화하는 모범 사례로 사용되고 있습니다 [6-8].
+## 📌[[ brief]] Summary
+현대 프론트엔드 개발에서 CSS는 단순한 시각적 장식을 넘어 장기적인 유지보수성과 아키텍처 무결성이 중요한 엔지니어링 영역으로 진화했습니다 [1]. 이를 위해 등장한 **CSS Modules**는 빌드 타임에 고유한 클래스명을 생성하여 스타일 충돌을 방지하고 캡슐화를 자동화하며, **[[Tailwind CSS]]**는 유틸리티 퍼스트(Utility-first) 접근 방식을 통해 마크업 내에서 직접 스타일을 조합하여 개발 속도와 일관성을 높입니다 [2-5]. 대규모 프로젝트에서는 이 두 접근 방식을 적절히 결합하여, 레이아웃에는 Tailwind를 적용하고 복잡한 컴포넌트에는 CSS Modules를 활용하는 하이브리드 전략이 유지보수성을 극대화하는 모범 사례로 사용되고 있습니다 [6-8].
 
 ## 📖 Core Content
 
@@ -10,7 +10,7 @@
 
 *   **CSS Modules의 특징과 유지보수성**
     *   **자동 캡슐화(Auto-scoping):** CSS 파일이 자바스크립트 컴포넌트로 임포트될 때 `Button_button__x9KdL`과 같은 고유한 해시 식별자를 자동으로 생성하여, 스타일 누수 및 네이밍 충돌을 완벽히 방지합니다 [3, 4, 12].
-    *   **표준 CSS 활용 및 제로 런타임:** 런타임 오버헤드 없이 정적 CSS를 출력하며, 가상 요소(Pseudo-elements), 애니메이션, 미디어 쿼리 등 기존 표준 CSS 기능과 SCSS 같은 전처리기를 그대로 사용할 수 있습니다 [3, 13-15].
+    *   **표준 CSS 활용 및 제로 런타임:** 런타임 오버헤드 없이 정적 CSS를 출력하며, 가상 요소(Pseudo-elements), 애니메이션, 미디어 쿼리 등 기존 표준 CSS 기능과 [[SCSS]] 같은 전처리기를 그대로 사용할 수 있습니다 [3, 13-15].
     *   **단점:** 스타일 파일과 컴포넌트 마크업 파일을 오가며 작업해야 하는 컨텍스트 스위칭이 발생하며, 복잡한 동적 스타일링 처리를 위해 추가적인 작업이 필요합니다 [14].
 
 *   **Tailwind CSS의 특징과 유지보수성**
@@ -22,8 +22,8 @@
     2025년 이후의 엔지니어링 팀은 두 기술의 장점을 모두 취하는 혼합(Hybrid) 방식을 자주 채택합니다 [6-8]. 레이아웃이나 간격 배치 등 속도와 일관성이 중요한 영역에서는 Tailwind CSS를 적용하고, 복잡한 애니메이션이나 정밀한 커스텀 스타일링이 필요한 특정 컴포넌트에서는 CSS Modules나 SCSS를 사용하는 방식입니다 [7, 8, 21]. 이러한 전략은 개발 경험(DX)을 높이고 유지보수를 용이하게 하며 런타임 성능 저하 없이 대규모 애플리케이션을 지탱할 수 있게 합니다 [22, 23].
 
 ## 🔗 Knowledge Connections
-- **Related Topics:** [[BEM (Block Element Modifier)]], 유틸리티 퍼스트 CSS(Utility-first CSS), [[디자인 토큰(Design Tokens)]], [[CSS-in-JS]], [[React Server Components (RSC)]]
-- **Projects/Contexts:** 대규모 프론트엔드 프로젝트(Enterprise Frontend Projects), [[컴포넌트 기반 아키텍처(Component-based Architecture)]]
+- **Related Topics:** [[BEM (Block Element Modifier)]], 유틸리티 퍼스트 CSS([[Utility-first CSS]]), [[디자인 토큰([[Design Tokens]])]], [[CSS-in-JS]], [[React [[Server Components]] (RSC)]]
+- **Projects/Contexts:** 대규모 프론트엔드 프로젝트(Enterprise [[Frontend]] Projects), [[컴포넌트 기반 아키텍처([[Component-Based Architecture]])]]
 - **Contradictions/Notes:** Tailwind CSS를 사용할 때 과거의 인라인 스타일(Inline Styles) 작성 방식으로 회귀하는 것 같아 마크업이 지저분해진다고 비판하는 시각이 존재합니다. 하지만 실제로는 사전 정의된 디자인 시스템을 활용하고 번들 사이즈 최적화가 보장되기 때문에 인라인 스타일과는 근본적으로 다른 아키텍처 이점을 갖는다고 소스들은 평가합니다 [2, 5, 24-26].
 
 ---