# [[피처 슬라이스 디자인 ([[Feature-Sliced Design]])]]

## 📌[[ brief]] Summary
피처 슬라이스 디자인(Feature-Sliced Design, FSD)은 전반적인 프론트엔드 아키텍처를 체계적으로 다루고 구성하기 위한 구조적 방법론입니다 [1]. 이 방법론은 애플리케이션을 여러 계층(layers)으로 분류하고, 엄격한 의존성 규칙과 명확한 모듈 경계를 정의하는 것이 특징입니다 [1]. 주로 BEM과 같은 CSS 방법론과 결합하여 사용되며, FSD는 프로젝트 전체의 구조를 관리하고 BEM은 스타일 구조를 관리함으로써 대규모 프로젝트의 기술 부채를 크게 줄여줍니다 [2, 3].

## 📖 Core Content
- **프론트엔드 아키텍처의 전반적 관리**: BEM이 CSS 구조와 클래스 명명 규칙에 초점을 맞추는 반면, 피처 슬라이스 디자인(FSD)은 프론트엔드 아키텍처의 전반적인 청사진을 다루는 방법론입니다 [1]. 
- **계층과 규칙의 분리**: FSD는 애플리케이션을 여러 계층(Layers)을 사용하여 조직화합니다 [1]. 각 계층에는 명확한 모듈 경계가 설정되며, 계층 간의 상호작용을 제어하는 엄격한 의존성 규칙(dependency rules)이 정의됩니다 [1].
- **BEM과의 강력한 시너지**: FSD 아키텍처 내부에서 컴포넌트의 스타일 구조를 잡기 위해 BEM을 통합하여 사용할 수 있습니다 [1]. FSD가 전체적인 '프로젝트 수준의 구조(project-level structure)'를 제공하고, BEM이 CSS가 모듈화되고 이해하기 쉽도록 보장함으로써 매우 강력한 프론트엔드 아키텍처를 형성합니다 [2, 3].
- **기술 부채(Technical Debt) 감소 및 확장성**: 명확한 역할 분담을 통해 확장 가능하고(scalable) 유지보수하기 좋은(maintainable) 프론트엔드 프로젝트를 구축할 수 있으며, 이 구조적 접근은 장기적으로 기술 부채를 현저히 감소시킵니다 [2-4].

## 🔗 Knowledge Connections
- **Related Topics:** [[BEM (Block Element Modifier)]], [[CSS Architecture]], [[Frontend]] [[Architecture]]
- **Projects/Contexts:** 대규모 프론트엔드 개발 ([[Large Frontend Projects]]), 유지보수 가능한 프론트엔드 구축 (Maintainable Frontend Architecture)
- **Contradictions/Notes:** 소스에 관련 정보가 부족하여 피처 슬라이스 디자인 자체의 내부 계층 구조(어떤 계층들이 존재하는지 등)에 대한 구체적이고 깊이 있는 설명은 포함할 수 없습니다.

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