Refactor: Consolidate directory structure into 5 main categories and update metadata
This commit is contained in:
Antigravity Agent
@@ -1,39 +0,0 @@
|
||||
# [[대규모 프론트엔드 아키텍처(Scalable Frontend Architecture)|대규모 프론트엔드 아키텍처(Scalable Frontend Architecture]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
대규모 프론트엔드 아키텍처에서 CSS 실전 설계의 핵심 목적은 단순히 화면을 "예쁘게" 만드는 것을 넘어, 다수의 개발자가 협업하고 시스템이 확장되어도 "유지보수가 가능하게" 만드는 것입니다 [1, 2]. 이를 위해 글로벌 네임스페이스 충돌을 방지하는 모듈화 기법(BEM, [[CSS Modules|CSS Modules]], Tailwind)과, 재사용 가능한 디자인 시스템 및 디자인 토큰을 활용하여 코드베이스의 무질서함을 통제합니다 [3-5]. 또한, 레이아웃의 효율적인 제어를 위한 [[Flexbox|Flexbox]]/Grid의 분리 사용, 컴포넌트 단위의 반응형 웹 구현, 브라우저 성능(Reflow/Repaint)을 고려한 애니메이션 최적화가 이 아키텍처의 성공을 결정하는 필수 요소입니다 [6-8].
|
||||
|
||||
## 📖 Core Content
|
||||
|
||||
**1. 실무에서의 CSS 구조 설계 방식 (BEM, CSS Modules, Tailwind 전략)**
|
||||
* **[[BEM (Block Element Modifier)|BEM (Block Element Modifier]]:** 컴포넌트를 독립적인 블록(Block), 하위 요소(Element), 그리고 상태를 나타내는 변경자(Modifier)로 나누어 명명하는 고전적인 아키텍처입니다 [9-11]. 선택자의 중첩을 피하고 코드를 읽기 쉽게 만들어 유지보수성을 높이지만, 클래스명이 길어지고 개발자의 수동적인 규칙 준수에 의존해야 한다는 한계가 있습니다 [12-14].
|
||||
* **CSS Modules:** 빌드 시점에 고유한 해시 클래스명을 생성하여 CSS 파일에 로컬 스코프를 자동으로 부여합니다 [15, 16]. 전역 네임스페이스 충돌을 완벽히 방지하고 표준 CSS의 기능(가상 선택자, 미디어 쿼리 등)을 그대로 사용할 수 있어 복잡한 스타일링에 매우 유리합니다 [16-18].
|
||||
* **[[Tailwind CSS|Tailwind CSS]] (Utility-first):** 미리 정의된 작은 유틸리티 클래스들을 HTML/JSX에 직접 조합하여 스타일링하는 방식입니다 [19, 20]. 개발 속도가 빠르고 디자인 시스템의 일관성을 강제하기 쉬우며, 빌드 시 사용하지 않는 클래스를 제거해 최종 CSS 파일 크기가 획기적으로 줄어듭니다 [21, 22]. 단, 마크업이 복잡해질 수 있습니다 [21, 23].
|
||||
* **실무 전략:** 현대 대규모 프로젝트에서는 레이아웃과 간격 등 빠른 구현이 필요한 곳에는 **Tailwind**를 사용하고, 복잡한 커스텀 로직이나 정교한 애니메이션이 필요한 특정 컴포넌트에는 **CSS Modules**를 혼합하는 하이브리드 전략이 효과적입니다 [24-26].
|
||||
|
||||
**2. 레이아웃: Flexbox와 [[CSS Grid|CSS Grid]] 완전 이해**
|
||||
* **Flexbox (1차원 레이아웃):** 행(Row) 또는 열(Column) 중 하나의 방향으로 요소를 정렬하고 공간을 분배하는 데 특화되어 있습니다 [27-29]. 내비게이션 바 등 내부 콘텐츠의 크기에 따라 유연하게 크기를 조정해야 하는 컴포넌트 수준의 정렬(Content-out)에 적합합니다 [30-32].
|
||||
* **CSS Grid (2차원 레이아웃):** 행과 열을 동시에 제어하는 페이지나 대규모 구조(Layout-in) 설계에 사용됩니다 [32-34]. 복잡한 격자 구조나 겹치는 요소 배치에 탁월합니다 [6, 35, 36].
|
||||
* **실무 적용:** 전체 페이지의 주요 레이아웃 골격은 Grid로 잡고, 해당 그리드 셀 내부에 들어가는 세부 UI 요소들의 정렬은 Flexbox를 사용하는 것이 이상적인 패턴입니다 [37-39].
|
||||
|
||||
**3. 반응형 디자인 (Responsive Design)의 진화**
|
||||
* **모바일 우선주의 (Mobile-First):** 작은 화면을 먼저 설계하고 화면이 커질 때(`min-width`) 스타일을 추가하여 필수적인 콘텐츠를 우선순위화하는 것이 뷰포트 관리의 표준입니다 [40-42].
|
||||
* **컨테이너 쿼리 ([[Container Queries|Container Queries]]):** 2026년 기준 핵심 기술로, 화면(뷰포트)의 크기가 아니라 **부모 컨테이너의 크기**에 따라 UI가 반응하도록 만듭니다 [43-45]. 이를 통해 컴포넌트의 진정한 재사용성을 확보할 수 있습니다 [43, 46].
|
||||
* **유동적 타이포그래피 ([[Fluid Typography|Fluid Typography]]):** `clamp(min, preferred, max)` 함수를 사용하여 하드코딩된 브레이크포인트 없이도 폰트 크기가 브라우저 너비에 비례해 부드럽게 조정되도록 구현합니다 [47-49].
|
||||
|
||||
**4. 의미 있는 애니메이션과 성능 최적화**
|
||||
* **목적성 (UX 개선):** 애니메이션은 사용자의 시선을 유도하고 시스템의 상태(로딩, 성공/실패 등)를 피드백하며, UI 변화의 인과관계를 명확히 설명하는 기능적인 역할을 수행해야 합니다 [50-52]. 자연스러운 모션을 위해 200~500ms의 짧은 지속 시간과 이징(Easing)을 적용합니다 [53-55].
|
||||
* **리플로우(Reflow)와 리페인트(Repaint) 회피:** `width`, `height`, `margin` 등 레이아웃을 변경시키는 속성을 애니메이션하면 브라우저의 레이아웃 재계산(Reflow)을 유발해 성능이 심각하게 저하됩니다 [56-58].
|
||||
* **해결책:** 반드시 `transform`과 `opacity` 속성을 사용하여 애니메이션을 구현해야 합니다. 이는 브라우저의 GPU 가속(Compositing)을 활용하게 하여 성능 저하 없는 60fps의 부드러운 전환을 보장합니다 [59, 60].
|
||||
|
||||
**5. 디자인 시스템 개념과 토큰([[Design Tokens|Design Tokens]])**
|
||||
* 디자인 시스템은 제품 간 일관성을 확보하고 디자인-개발 간 협업을 가속화하는 핵심 기반입니다 [4, 61].
|
||||
* **디자인 토큰:** 색상, 간격, 타이포그래피 같은 디자인 속성을 저장하는 플랫폼 독립적인 명명 단위입니다 [61, 62]. 보통 'Global(원시 색상/값) -> Alias(의미적/의도적 변수) -> Component(특정 컴포넌트 적용)'의 3단계 계층 구조를 가집니다 [63-65]. 이를 통해 테마(Dark Mode 등) 변경 시 전역적인 스타일 업데이트를 쉽게 관리할 수 있습니다 [66, 67].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[BEM|BEM]], CSS Modules, Tailwind CSS, [[Flexbox|Flexbox]], CSS Grid, [[Container Queries|Container Queries]], Reflow와 Repaint, [[디자인 토큰 (Design Tokens)|디자인 토큰(Design Tokens]]
|
||||
- **Projects/Contexts:** [[대규모 엔터프라이즈 프론트엔드|대규모 엔터프라이즈 프론트엔드]], 디자인 시스템 구축, 컴포넌트 기반 아키텍처, [[반응형 웹 UI 구현|반응형 웹 UI 구현]]
|
||||
- **Contradictions/Notes:** Tailwind CSS는 빠른 개발과 성능(사용하지 않는 클래스 제거) 측면에서 뛰어나지만 HTML 마크업이 지저분해지는 단점이 있습니다 [21, 23]. 반면 BEM과 같은 수동적인 네이밍 컨벤션은 유지보수에 피로도를 유발하므로, 최근에는 CSS Modules와 같은 자동화된 로컬 스코핑 도구나 Tailwind의 유틸리티 방식이 그 자리를 대체하거나 보완하는 추세입니다 [5, 14, 16]. [[CSS-in-JS|CSS-in-JS]](Runtime 기반)는 컴포넌트 관리에 용이하지만 번들 크기와 성능 오버헤드, React 서버 컴포넌트(RSC)와의 호환성 문제로 인해 대규모 프로젝트에서는 Zero-runtime 방식([[vanilla-extract|vanilla-extract]] 등)이나 CSS Modules/Tailwind로 회귀하는 양상을 보입니다 [68-71].
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-26*
|
||||
Reference in New Issue
Block a user