# [[Feature-Sliced Design (FSD)]]

## 📌 Brief Summary
Feature-Sliced Design (FSD)는 전반적인 프론트엔드 아키텍처를 체계적으로 구성하기 위한 구조적 방법론입니다 [1]. 애플리케이션을 여러 계층(layers)으로 조직화하여 엄격한 의존성 규칙과 명확한 모듈 경계를 정의하는 것이 특징입니다 [1]. BEM과 같은 컴포넌트 스타일링 방법론과 결합하여 프로젝트 전체의 유지보수성을 높이고 기술 부채를 최소화하는 데 사용됩니다 [2, 3].

## 📖 Core Content
* **프론트엔드 아키텍처의 체계화:** FSD는 CSS의 이름 짓기나 내부 구조에만 집중하는 것을 넘어, 프론트엔드 애플리케이션의 전반적인 아키텍처 방향성을 다루는 구조적 방법론입니다 [1]. 
* **엄격한 계층 및 모듈 경계:** FSD는 애플리케이션을 여러 계층으로 나누어 조직하며, 각 계층에 대해 엄격한 의존성(dependency) 규칙과 명확한 모듈 경계를 부여하여 코드베이스의 복잡도를 제어합니다 [1].
* **BEM과의 역할 분담 (시너지 효과):** FSD의 아키텍처 내부에서 컴포넌트 스타일을 구성할 때 BEM(Block Element Modifier) 구조를 함께 사용할 수 있습니다 [1]. FSD가 프로젝트 수준의 구조를 제공하고 BEM이 CSS 구조와 모듈성을 보장함으로써, 두 방법론은 강력한 아키텍처적 조화를 이룹니다 [2, 3].
* **기술 부채 감소 및 확장성 확보:** 프로젝트 구조(FSD)와 스타일 구조(BEM)를 분리하고 명확히 관리함으로써 대규모 프론트엔드 시스템에서 흔히 발생하는 기술 부채를 획기적으로 줄이고, 확장 가능하며 유지보수하기 쉬운 프로젝트를 구축할 수 있습니다 [2-4].

## 🔗 Knowledge Connections
- **Related Topics:** [[BEM]], [[CSS 구조 설계 방식]], [[프론트엔드 아키텍처]]
- **Projects/Contexts:** [[대규모 프론트엔드 프로젝트의 확장성 있는 구조 및 스타일링 시스템 설계]]
- **Contradictions/Notes:** 제공된 소스에서는 FSD가 애플리케이션을 여러 계층(layers)으로 나눈다는 원칙과 BEM과의 상호보완적 이점은 명확히 설명하고 있으나, FSD에서 정의하는 구체적인 계층들의 이름이나 내부적인 세부 설계 지침에 대한 구체적인 정보는 부족합니다 [1, 2].

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