# [[Large Frontend Projects|Large Frontend Projects]]

## 📌Brief 대요
대규모 프론트엔드 프로젝트(Large Frontend Projects)란 수백 개의 컴포넌트, 동적인 상태 관리, 재사용 가능한 디자인 시스템을 포함하며 다수의 개발 팀이 동시에 참여하는 복잡한 규모의 애플리케이션을 의미합니다 [1]. 이러한 프로젝트에서는 UI를 단순히 "예쁘게" 렌더링하는 것을 넘어, 다수 개발자의 협업과 지속적인 반복 작업, 기술 부채의 축적을 견뎌낼 수 있는 견고한 아키텍처적 무결성과 유지보수성이 핵심 목표가 됩니다 [2]. 따라서 전역 네임스페이스 충돌이나 '스파게티 스타일(spaghetti styles)'과 같은 CSS 비대화(CSS bloat) 현상을 방지하기 위해 BEM, [[CSS Modules|CSS Modules]], [[Tailwind CSS|Tailwind CSS]] 등과 같은 체계적인 CSS 아키텍처와 명확한 폴더 구조 설계가 필수적입니다 [1-4].

## 📖 Core Content

*   **대규모 프로젝트에서의 CSS 엔지니어링 문제**
    대규모 시스템에서는 CSS가 전역적으로 적용된다는 특성 때문에 예기치 않은 스타일 덮어쓰기(Overrides), 선택자 특이성(Specificity) 충돌, 중복 스타일, 그리고 새로운 개발자의 온보딩 지연 등의 문제가 발생합니다 [1, 5]. 이는 개발 생산성과 장기적인 확장성에 직접적인 악영향을 미치므로, CSS를 단순한 데코레이션 레이어가 아닌 엄격한 엔지니어링 규율로 접근해야 합니다 [2, 5].

*   **확장 가능한 폴더 구조 및 아키텍처 ([[Feature-Sliced Design|Feature-Sliced Design]])**
    대규모 프로젝트가 통제 불능 상태가 되는 것을 막기 위해 명확한 폴더 구조(예: API, Components, Context, Hooks, Pages, Services 등 역할별 분리)가 요구됩니다 [6-11]. 더 나아가 **[[Feature-Sliced Design (FSD)|Feature-Sliced Design (FSD]]** 같은 아키텍처를 도입하여 애플리케이션을 여러 계층으로 나누고 각 계층에 엄격한 의존성 규칙을 적용해 모듈 간 경계를 명확히 설정합니다 [12]. 관련 로직과 CSS 컴포넌트를 기능(Feature) 기반 디렉토리에 함께 배치하면, 특정 기능을 제거할 때 관련 스타일도 자동으로 제거되어 레거시 코드(Ghost styles)가 쌓이는 것을 막을 수 있습니다 [13].

*   **유지보수성을 위한 CSS 구조 설계 방식**
    대규모 프로젝트에서는 스타일에 캡슐화를 제공하여 전역 네임스페이스 충돌을 방지하는 전략이 필수적입니다 [2]. 
    *   **[[BEM (Block Element Modifier)|BEM (Block Element Modifier]]:** 컴포넌트를 독립적인 블록(Block), 하위 요소(Element), 상태(Modifier)로 나누어 직관적이고 평면적인(Flat) 클래스 명명 규칙을 적용합니다 [5, 14-16]. 깊은 DOM 중첩에 의존하지 않으므로 결합도가 낮고 컴포넌트 응집도를 높여주지만, 사람의 수동 관리에 의존하므로 실수로 인한 충돌 위험이 존재합니다 [17, 18].
    *   **CSS Modules:** 빌드 타임에 고유한 해시(Hashed) 클래스명을 자동으로 생성하여 완전한 로컬 스코핑(Local scoping)을 보장합니다 [19-22]. 표준 CSS 문법의 장점을 그대로 유지하면서도 개발자의 명명 규칙 기억 부담을 덜어주어 대규모 협업에 유리합니다 [19, 21].
    *   **Tailwind CSS (Utility-First):** 유틸리티 클래스를 사용하여 일관된 디자인 시스템을 강제하고, 사용된 클래스만 빌드에 포함시켜 대규모 프로젝트에서도 CSS 파일 크기가 일정 수준에서 유지되도록(Plateau) 돕습니다 [23, 24]. 다만 HTML 코드가 길어지는 단점이 있어, 최근 엔터프라이즈 팀들은 **레이아웃과 간격에는 Tailwind를 사용하고 복잡한 개별 컴포넌트에는 CSS Modules나 [[SCSS|SCSS]]를 결합하는 하이브리드 전략**을 많이 채택합니다 [25-27].

*   **성능 최적화 및 레이아웃 관리 (Performance & Layout)**
    대규모 시스템에서는 렌더링 파이프라인 최적화가 필수입니다. 레이아웃 리플로우(Reflows)와 리페인트(Repaints)를 최소화하기 위해 DOM 조작을 일괄 처리하거나 위치/크기 변경 대신 GPU 가속이 가능한 `transform`이나 `opacity` 위주로 애니메이션을 구성해야 합니다 [28-32]. 또한 예측 가능한 UI 구조를 잡기 위해 컴포넌트 내부 정렬에는 **[[Flexbox|Flexbox]](1차원)**를, 전체 페이지 뼈대 및 구조에는 **[[CSS Grid|CSS Grid]](2차원)**를 조합하여 불필요한 래퍼(Wrapper) 요소 중첩을 줄입니다 [33-35]. 

## 🔗 Knowledge Connections
- **Related Topics:** [[CSS 구조 설계 방식|CSS 구조 설계 방식]], BEM, CSS Modules, Tailwind 전략, [[디자인 시스템 개념|디자인 시스템 개념]], [[Feature-Sliced Design|Feature-Sliced Design]]
- **Projects/Contexts:** 대규모 엔터프라이즈 플랫폼 개발, 컴포넌트 기반 프레임워크(React, Vue 등) 환경의 협업
- **Contradictions/Notes:** Tailwind CSS의 유틸리티 클래스 방식은 빌드 크기를 최적화하고 일관된 디자인 시스템 적용에 뛰어나 대규모 프로젝트에 이상적이라는 주장이 있습니다 [23, 24]. 그러나 과도하게 길어지는 클래스명으로 인해 HTML 가독성이 떨어지고 컴포넌트 유지보수가 힘들어질 수 있다는 반론도 존재합니다 [36, 37]. 이 때문에 대규모 환경에서는 전역 레이아웃 및 디자인 토큰에는 Tailwind를, 세밀하고 복잡한 스타일 제어에는 CSS Modules 또는 SCSS를 결합하는 하이브리드 방식이 실무적 타협안으로 제시되고 있습니다 [26, 27, 38]. BEM 역시 유용하나 인적 오류로 인한 한계 때문에 점차 CSS Modules나 Zero-runtime [[CSS-in-JS|CSS-in-JS]] 같은 자동화 캡슐화 툴로 대체되는 경향을 보입니다 [18, 21, 39].

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