Antigravity Agent
7dc7e0436c
Processed 70+ files covering Skybound mechanics, Frontend mastery, and Business strategy.
2.4 KiB
2.4 KiB
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