**FSD (Feature-Sliced Design)**는 기능(feature) 중심으로 폴더와 코드를 구성하는 프론트엔드 아키텍처 방식입니다.
단순히 "컴포넌트/페이지" 폴더 구조를 넘어서, 관심사 분리 + 확장성 + 유지보수성을 목적으로 하는 설계 방식입니다.
FSD는 기본적으로 다음과 같은 5단계 계층 구조를 가집니다:
src/
├── app/ # 앱 초기화 및 글로벌 설정
├── pages/ # 라우팅 단위 (Next.js의 page처럼)
├── widgets/ # 페이지를 구성하는 큰 UI 블록 (작은 피처들의 조합)
├── features/ # 도메인 단위의 기능 (예: 로그인, 댓글, 좋아요 등)
├── entities/ # 핵심 도메인 모델 (예: User, Post, Product)
├── shared/ # 공통 유틸, 타입, 컴포넌트, 디자인 토큰 등
| 폴더 | 설명 |
|---|---|
app/ |
앱 초기화, 전역 Provider, 라우팅, 테마 등 (엔트리포인트) |
pages/ |
라우트별 페이지 파일들 (/login, /dashboard 등) |
widgets/ |
페이지에 쓰이는 큰 UI 덩어리 (상단바, 사이드바 등) |
features/ |
독립적인 기능 단위 (댓글쓰기, 유저 팔로우 등) |
entities/ |
핵심 도메인 모델 (User, Post) + CRUD 관련 상태/스토어 |
shared/ |
재사용 가능한 공통 요소들 (UI, hook, lib, config 등) |
| 항목 | 설명 |
|---|---|
| ✅ 기능 단위 관심사 분리 | UI 중심이 아닌 도메인 중심 구조 |
| ✅ 확장성 | 기능 추가/변경이 국소적으로 이루어져 대규모 개발에 유리 |
| ✅ 리팩토링 용이 | 각 레이어가 명확히 분리되어 있어 유지보수 효율 ↑ |
| ✅ 협업 최적화 | 팀 단위 작업 분배에 적합 (역할/기능 단위 분리) |
src/
├── app/
│ ├── App.tsx
│ └── providers/
├── pages/
│ └── DashboardPage/
├── widgets/
│ └── Navbar/
├── features/
│ └── auth/
│ ├── model/ # store, slice, service
│ ├── ui/ # 컴포넌트
│ └── api/ # 비즈니스 API
├── entities/
│ └── user/
│ ├── model/
│ ├── ui/
│ └── lib/
├── shared/
│ ├── ui/ # Button, Input 등 공용 UI
│ ├── lib/ # fetcher, formatter 등
│ ├── config/
│ └── types/
| 구조 | 설명 |
|---|---|
| FSD | 기능 중심. 도메인 설계와 잘 맞음 |
| Atomic Design | UI 구성 중심. 디자인 시스템에 적합 |
| Layered (MVC) | 계층 기반. 백엔드 스타일 구조 |
| By-type (components/pages/utils) | 초보자 친화적이나 확장성 낮음 |