[G1-Sync] Manual knowledge update

10_Wiki/Topics/Frontend_Mastery/엔터프라이즈급 플랫폼 개발.md

@@ -1,21 +1,21 @@
 # [[엔터프라이즈급 플랫폼 개발]]
 
-## 📌 Brief Summary
-엔터프라이즈급 플랫폼의 CSS 실전 설계는 단순한 시각적 구현("예쁘게")을 넘어 시스템의 장기적인 "유지보수성"과 "확장성"을 확보하는 것을 핵심 목적으로 합니다 [1, 2]. 이를 위해 BEM, CSS Modules, Tailwind와 같은 모듈화된 CSS 구조 설계 방식을 상황에 맞게 적용하고, Flexbox와 Grid를 활용하여 예측 가능한 레이아웃을 구성합니다 [3-5]. 또한 최신 반응형 디자인(Container Queries, Fluid Typography)과 디자인 시스템 토큰(Design Tokens)을 도입하며, 렌더링 성능(Reflow/Repaint 최소화)을 고려한 애니메이션을 적용하여 견고하고 일관된 프론트엔드 아키텍처를 구축합니다 [6-9].
+## 📌[[ brief]] Summary
+엔터프라이즈급 플랫폼의 CSS 실전 설계는 단순한 시각적 구현("예쁘게")을 넘어 시스템의 장기적인 "유지보수성"과 "확장성"을 확보하는 것을 핵심 목적으로 합니다 [1, 2]. 이를 위해 BEM, [[CSS Modules]], Tailwind와 같은 모듈화된 CSS 구조 설계 방식을 상황에 맞게 적용하고, [[Flexbox]]와 Grid를 활용하여 예측 가능한 레이아웃을 구성합니다 [3-5]. 또한 최신 반응형 디자인([[Container Queries]], [[Fluid Typography]])과 디자인 시스템 토큰([[Design Tokens]])을 도입하며, 렌더링 성능(Reflow/Repaint 최소화)을 고려한 애니메이션을 적용하여 견고하고 일관된 프론트엔드 아키텍처를 구축합니다 [6-9].
 
 ## 📖 Core Content
 
 **1. CSS 구조 설계 방식 및 실무 관리 전략 (BEM, CSS Modules, Tailwind)**
 대규모 프론트엔드 프로젝트에서 전역 범위(Global Scope)를 가지는 CSS의 특성은 스타일 충돌과 코드 비대화(CSS Bloat)를 유발합니다 [1, 10]. 이를 해결하기 위해 실무에서는 다음과 같은 구조화 및 캡슐화 전략을 활용합니다.
-*   **BEM (Block Element Modifier):** `block__element--modifier`라는 엄격한 네이밍 규칙을 통해 독립적인 컴포넌트를 구성하고, CSS 선택자의 중첩을 최소화하여 렌더링 성능과 가독성을 높입니다 [11-13]. 하지만 개발자의 수동적인 규칙 준수에 의존하며 안 쓰는 코드를 자동으로 제거하기 어렵다는 단점이 있습니다 [14, 15].
+*   **[[BEM (Block Element Modifier)]]:** `block__element--modifier`라는 엄격한 네이밍 규칙을 통해 독립적인 컴포넌트를 구성하고, CSS 선택자의 중첩을 최소화하여 렌더링 성능과 가독성을 높입니다 [11-13]. 하지만 개발자의 수동적인 규칙 준수에 의존하며 안 쓰는 코드를 자동으로 제거하기 어렵다는 단점이 있습니다 [14, 15].
 *   **CSS Modules:** 빌드 과정에서 CSS 클래스 이름에 고유한 해시값을 부여하여 자동으로 로컬 스코프(Local Scope)를 생성합니다 [16, 17]. React와 같은 컴포넌트 기반 환경에서 자연스럽게 캡슐화를 달성하면서도 표준 CSS의 기능을 그대로 사용할 수 있어 강력한 유지보수성을 제공합니다 [15, 18, 19].
-*   **Tailwind CSS (Utility-first):** 단일 목적의 유틸리티 클래스를 HTML/JSX에 직접 조합하여 사용하는 방식입니다 [20, 21]. 사용된 클래스만 빌드에 포함하므로 프로젝트가 커져도 CSS 파일 크기가 일정하게 유지되는 장점이 있으나, HTML 코드가 길어지고 가독성이 떨어질 수 있습니다 [5, 21, 22].
-*   **실무 관리 방법론론:** 2025~2026년의 대규모 엔터프라이즈 팀들은 하이브리드 전략을 채택하는 추세입니다. 전반적인 레이아웃과 간격에는 개발 속도가 빠른 Tailwind를 사용하고, 복잡한 애니메이션이나 정밀한 제어가 필요한 컴포넌트에는 CSS Modules(또는 SCSS)를 혼합하여 사용하는 방식이 권장됩니다 [23, 24].
+*   **[[Tailwind CSS]] (Utility-first):** 단일 목적의 유틸리티 클래스를 HTML/JSX에 직접 조합하여 사용하는 방식입니다 [20, 21]. 사용된 클래스만 빌드에 포함하므로 프로젝트가 커져도 CSS 파일 크기가 일정하게 유지되는 장점이 있으나, HTML 코드가 길어지고 가독성이 떨어질 수 있습니다 [5, 21, 22].
+*   **실무 관리 방법론론:** 2025~2026년의 대규모 엔터프라이즈 팀들은 하이브리드 전략을 채택하는 추세입니다. 전반적인 레이아웃과 간격에는 개발 속도가 빠른 Tailwind를 사용하고, 복잡한 애니메이션이나 정밀한 제어가 필요한 컴포넌트에는 CSS Modules(또는 [[SCSS]])를 혼합하여 사용하는 방식이 권장됩니다 [23, 24].
 
 **2. 레이아웃: Flexbox / Grid 완전 이해**
 현대의 CSS 레이아웃은 목적에 따라 1차원(Flexbox)과 2차원(Grid) 시스템을 조합하여 사용해야 합니다 [3].
 *   **Flexbox (1차원 레이아웃):** 콘텐츠 크기를 기반으로 작동(Content-out)하며, 행(Row) 또는 열(Column) 한 방향으로 요소를 정렬하고 공간을 분배하는 데 특화되어 있습니다 [25-28]. 내비게이션 바, 버튼 그룹 등 소규모 컴포넌트 내의 정렬에 매우 적합합니다 [29, 30].
-*   **CSS Grid (2차원 레이아웃):** 행과 열을 동시에 제어하며, 전체적인 구조를 먼저 정의한 후 콘텐츠를 배치(Layout-in)합니다 [27, 31-33]. 대시보드나 복잡한 갤러리와 같은 전체 페이지 구조를 잡는 데 이상적입니다 [31, 34].
+*   **[[CSS Grid]] (2차원 레이아웃):** 행과 열을 동시에 제어하며, 전체적인 구조를 먼저 정의한 후 콘텐츠를 배치(Layout-in)합니다 [27, 31-33]. 대시보드나 복잡한 갤러리와 같은 전체 페이지 구조를 잡는 데 이상적입니다 [31, 34].
 *   **실전 적용:** 웹 애플리케이션의 뼈대(주요 레이아웃)는 CSS Grid로 잡고, 그 Grid 셀 내부에 들어가는 세부 요소들의 정렬은 Flexbox로 처리하는 것이 모범 사례입니다 [35-37].
 
 **3. 최신 반응형 디자인 (Responsive Design)**
@@ -31,7 +31,7 @@
 **5. 디자인 시스템 개념과 디자인 토큰 (Design Tokens)**
 대규모 조직에서 디자인 일관성을 유지하기 위해서는 '디자인 시스템'이 필수적이며, 그 핵심에는 디자인 토큰이 있습니다 [8, 57].
 *   **토큰 계층 구조:** 색상, 타이포그래피, 간격 등의 원시 값을 저장하는 'Global 토큰', 특정 의도를 부여한 'Alias(의미론적) 토큰', 특정 UI 요소에 직접 매핑되는 'Component 토큰'의 3단계로 구성됩니다 [58-60].
-*   **유지보수 확장성:** Style Dictionary와 같은 도구를 활용하면 JSON으로 정의된 디자인 토큰을 웹용 CSS 변수, iOS용 Swift, Android용 XML로 자동 변환할 수 있습니다. 이는 "단일 진실 공급원(Single Source of Truth)"을 제공하여 엔터프라이즈 플랫폼 전반의 디자인 동기화 및 유지보수 비용을 획기적으로 낮춥니다 [61-63].
+*   **유지보수 확장성:** [[Style Dictionary]]와 같은 도구를 활용하면 JSON으로 정의된 디자인 토큰을 웹용 CSS 변수, iOS용 Swift, Android용 XML로 자동 변환할 수 있습니다. 이는 "단일 진실 공급원([[Single Source of Truth]])"을 제공하여 엔터프라이즈 플랫폼 전반의 디자인 동기화 및 유지보수 비용을 획기적으로 낮춥니다 [61-63].
 
 ## 🔗 Knowledge Connections
 - **Related Topics:** [[BEM]], [[CSS Modules]], [[Tailwind CSS]], [[Flexbox]], [[CSS Grid]], [[Container Queries]], [[Fluid Typography]], [[Reflow & Repaint]], [[Design Tokens]]