2nd/10_Wiki/Topics/Frontend_Mastery/프론트엔드 아키텍처.md

# [[프론트엔드 아키텍처|프론트엔드 아키텍처]]

## 📌 Brief Summary
프론트엔드 아키텍처에서 CSS 설계의 핵심 목적은 단순한 시각적 구현("예쁘게")을 넘어, 복잡한 프로젝트와 팀 협업에서도 지속적인 확장이 가능한 "유지보수성"을 확보하는 것입니다 [1]. 이를 위해 BEM, [[CSS Modules|CSS Modules]], Tailwind CSS와 같은 구조적 방법론이 적용되며, Flexbox와 [[CSS Grid|CSS Grid]]를 목적에 맞게 활용하여 체계적인 레이아웃을 구성합니다 [2-5]. 또한 반응형 디자인, 디자인 시스템 적용, 그리고 렌더링 성능(리플로우 최소화)을 고려한 애니메이션 최적화를 통해 견고하고 확장 가능한 스타일 시스템을 구축합니다 [6-9].

## 📖 Core Content

**1. 실무 CSS 구조 설계 방식 및 관리 전략**
과거의 글로벌 CSS는 애플리케이션이 커짐에 따라 이름 충돌(Namespace collisions)과 명시성(Specificity) 문제를 야기했습니다 [1, 10, 11]. 현대 프론트엔드에서는 이를 해결하기 위해 다음과 같은 아키텍처 방법론을 사용합니다.
*   **[[BEM (Block Element Modifier)|BEM (Block Element Modifier]]:** 컴포넌트를 독립적인 블록(Block), 하위 요소(Element), 상태/변형(Modifier)으로 나누어 평면적인 클래스명(`block__element--modifier`)을 작성하는 명명 규칙입니다 [12-15]. 캡슐화와 결합도를 낮추는 데 유용하지만, 사람의 규칙 준수에 의존하므로 규모가 커질수록 관리 비용이 증가할 수 있습니다 [16, 17].
*   **CSS Modules:** 빌드 시 고유한 해시값 클래스명을 생성하여 스타일을 컴포넌트 단위로 완벽하게 로컬 스코프에 캡슐화합니다 [18-20]. 기존 CSS 문법의 이점을 그대로 살리면서도 이름 충돌 문제를 자동화된 방식으로 해결합니다 [19, 21].
*   **Tailwind CSS (Utility-first):** 미리 정의된 단일 목적의 유틸리티 클래스(`flex`, `pt-4` 등)를 HTML/JSX 마크업에 직접 작성하는 방식입니다 [22, 23]. 프로젝트 규모가 커져도 생성되는 CSS 파일의 크기가 일정하게 유지되며(사용된 클래스만 포함됨), 디자인 시스템의 일관성을 빠르게 강제할 수 있습니다 [23-25].

**2. 레이아웃: Flexbox / Grid 완전 이해**
CSS 레이아웃을 다룰 때는 두 가지 시스템을 목적에 맞게 결합하여 사용하는 것이 좋습니다 [26, 27].
*   **Flexbox (1차원 레이아웃):** 행(Row) 또는 열(Column)의 단방향 정렬 및 공간 배분에 최적화되어 있습니다 [5, 28-31]. 콘텐츠 크기를 기반으로 늘어나거나 줄어드는 '콘텐츠 중심(Content-out)' 설계에 적합하여 버튼 그룹, 내비게이션 바 등의 소규모 컴포넌트 정렬에 사용됩니다 [32-34].
*   **CSS Grid (2차원 레이아웃):** 행과 열을 동시에 제어할 수 있어 복잡한 전체 페이지 구조나 대시보드 뷰를 만드는 데 강력합니다 [5, 35-37]. 구조를 먼저 정의하고 요소를 배치하는 '레이아웃 중심(Layout-in)' 설계에 적합합니다 [34, 38]. 
*   **핵심 요약:** 전체적인 페이지 레이아웃 구조는 Grid로 잡고, 그 안의 개별 UI 컴포넌트 정렬은 Flexbox를 사용하는 것이 현대적인 모범 사례입니다 [27, 39].

**3. 반응형 디자인의 현대적 접근 (2026)**
*   **유동적 그리드와 미디어 쿼리:** 모바일 우선(Mobile-First) 원칙에 따라 작은 화면에서 시작해 화면 크기(`min-width`)가 커짐에 따라 레이아웃을 점진적으로 강화합니다 [40, 41].
*   **컨테이너 쿼리 ([[Container Queries|Container Queries]]):** 현재 뷰포트 너비가 아닌 "부모 컨테이너의 가용 너비"에 반응하는 `@container` 방식이 2026년 기준 표준으로 자리 잡았습니다 [42-45]. 이를 통해 컴포넌트는 어떤 위치(사이드바, 전체 화면 등)에 놓여도 독립적으로 반응형을 유지할 수 있습니다 [42, 45].
*   **유동적 타이포그래피 ([[Fluid Typography|Fluid Typography]]):** 하드 브레이크포인트 대신 CSS `clamp(min, preferred, max)` 함수를 사용하여, 최소 크기와 최대 크기 사이에서 화면 비율에 따라 부드럽게 글꼴 크기가 조정되도록 설계합니다 [46-49].

**4. 성능을 고려한 애니메이션 (Transition / Keyframes)**
애니메이션은 시각적 계층을 형성하고 UX를 강화하지만, 성능을 저하시키는 주요 원인이 될 수 있습니다 [9, 50, 51].
*   **피해야 할 속성 ([[Reflow & Repaint|Reflow & Repaint]] 유발):** `width`, `height`, `margin`, `box-shadow` 등의 레이아웃 기하학적 속성을 애니메이션화하면 브라우저가 화면을 계속 재계산(Reflow)하여 심각한 프레임 저하(Jank)가 발생합니다 [7, 9, 52-54].
*   **권장 속성 (GPU 가속):** `transform`(이동, 크기 조절)과 `opacity`(투명도) 속성만 사용하여 애니메이션을 구현해야 합니다 [55-57]. 이는 컴포지팅(Compositing) 단계만 거치며 GPU 가속을 받기 때문에 60FPS의 부드러운 렌더링이 가능합니다 [56-58]. 성능 최적화를 위해 브라우저에 변경을 예고하는 `will-change`를 활용할 수도 있습니다 [59, 60].

**5. 디자인 시스템과 디자인 토큰 ([[Design Tokens|Design Tokens]])**
디자인 시스템은 브랜드의 시각적 정체성을 프로그램화한 것이며, **디자인 토큰**이 그 기반이 됩니다 [61, 62].
*   색상, 간격, 타이포그래피와 같은 값을 하드코딩하지 않고, 플랫폼에 독립적인 변수 이름으로 저장합니다 [62, 63].
*   **3단계 토큰 계층:** 맥락 없는 원시 값인 글로벌 토큰(Global Tokens), 특정한 목적을 부여한 시맨틱 별칭 토큰(Alias Tokens), 그리고 개별 컴포넌트에 적용되는 컴포넌트 토큰(Component Tokens)으로 구성됩니다 [64-68]. 이를 통해 테마 변경(예: 다크 모드)과 유지보수가 한 곳에서 일관되게 관리될 수 있습니다 [65, 69].

## 🔗 Knowledge Connections
- **Related Topics:** `[[CSS Modules|CSS Modules]]`, `Tailwind CSS`, `BEM (Block Element Modifier)`, `[[Flexbox|Flexbox]]`, `CSS Grid`, `[[컨테이너 쿼리 (Container Queries)|컨테이너 쿼리 (Container Queries]]`, `유동적 타이포그래피 (Fluid Typography)`, `디자인 토큰 (Design Tokens)`, `[[리플로우 및 리페인트 (Reflow & Repaint)|리플로우 및 리페인트 (Reflow & Repaint]]`
- **Projects/Contexts:** `[[엔터프라이즈 프론트엔드 아키텍처|엔터프라이즈 프론트엔드 아키텍처]]`, `모바일 우선주의 (Mobile-First) 디자인`, `피처 슬라이스 디자인 ([[Feature-Sliced Design|Feature-Sliced Design]]`
- **Contradictions/Notes:** Tailwind CSS vs 일반 CSS/CSS Modules 비교: Tailwind는 일관성 유지와 CSS 번들 최적화 및 빠른 개발 속도를 제공하지만, JSX 마크업이 지나치게 길어지는(Verbose) 단점이 있습니다 [24]. 이로 인해 일부 개발자들은 과도한 추상화나 인라인 스타일로의 회귀처럼 느낀다고 비판하며, 로컬 스코핑과 순수 CSS 작성의 유연성을 제공하는 CSS Modules를 더 선호하는 경우도 많아 팀의 숙련도와 프로젝트 특성에 따라 호불호와 선택이 갈립니다 [18, 70-73]. [[SCSS|SCSS]]와 Tailwind를 혼합하는 방법도 가능하지만, 설정의 복잡도와 파일 크기가 증가하는 트레이드오프가 존재합니다 [74].

---
*Last updated: 2026-04-26*