Feature-Sliced Design

Feature-Sliced Design이란

Feature-Sliced Design(FSD)은 프론트엔드 코드를 비즈니스 기준으로 쪼개는 아키텍처 방법론이다. 목표는 모듈 사이의 낮은 결합도와 높은 응집도, 그리고 커져도 무너지지 않는 구조다. 특정 프레임워크에 묶이지 않는다.

src/
├── app/                  ← 레이어 (Layer): 표준화된 최상위 폴더
├── pages/
├── widgets/
├── features/
│   └── like-post/        ← 슬라이스 (Slice): 비즈니스 도메인별 폴더
│       ├── api/          ← 세그먼트 (Segment): 용도별 폴더
│       ├── ui/
│       ├── model/
│       └── index.ts      ← Public API
├── entities/
└── shared/

레이어: 위에서 아래로만 의존한다

레이어는 최대 7개로 이름이 정해져 있다. 모두 쓸 필요는 없고, 대부분의 프로젝트는 최소 shared·pages·app을 두며 나머지는 값을 할 때 더한다. 새 레이어를 만들지는 않는다. 위에 있을수록 비즈니스에 가깝고, 아래로 갈수록 추상적이고 재사용성이 높다.

레이어는 자기보다 아래 레이어만 가져다 쓴다. entities는 features를 쓸 수 없고, features는 widgets를 쓸 수 없다. 그래서 아래 레이어일수록 고치기 위험하다. shared의 UI 키트는 어디서나 쓰이기 때문이다.

슬라이스와 세그먼트

슬라이스는 레이어 안의 두 번째 단계로, 이름은 프로젝트의 도메인이 정한다(SNS라면 post, user, newsfeed). 밀접한 슬라이스는 폴더로 묶어도 되지만, 묶인 슬라이스끼리도 서로의 내부를 공유하지 않는다.

세그먼트는 슬라이스 안을 코드의 용도별로 나눈다.

const addProductToCart = (cart: Cart, product: Product) => [...cart, product]; // model
const addItem = <T,>(arr: T[], item: T) => [...arr, item];                     // lib

Public API: index 파일로만 드나든다

슬라이스마다 index.ts를 두고 밖에 보여 줄 것만 export한다. 바깥은 Public API에 있는 것만 가져다 쓰고, 내부 구조를 바꿔도 index만 유지하면 바깥의 import를 고칠 필요가 없다.

// features/like-post/index.ts
export { LikeButton } from './ui/LikeButton';
export { useLikePost } from './model/useLikePost';
// api/ 내부 함수는 export하지 않는다

다른 구조와 비교

규칙을 어긴 코드가 바로 눈에 띈다는 점은 단점이자 장점이다. 문제를 나중이 아니라 지금 풀게 만든다.

Next.js와 함께 쓸 때

Next.js의 app/(App Router)·pages/(Pages Router) 폴더는 라우팅을 맡아 FSD의 app·pages 레이어와 이름이 겹친다. 공식 가이드의 해법은 이렇다.

경계 찾기와 점진적 도입

처음 도입하면 "이건 entity인가 feature인가"에서 막힌다. 공식 문서도 딱 맞는 답을 주지 않는다. 그래서 경계는 규칙이 아니라 이미 아는 경계에서 출발한다.

프로젝트 시기·성격(관리자 콘솔, 앱형, 대형 웹사이트형)에 따라 어떤 레이어를 많이 쓰는지는 프론트엔드 폴더 구조의 진화에 정리했다.

정리

• 코드는 레이어(표준) → 슬라이스(도메인) → 세그먼트(용도)로 나눈다.
• 위 레이어만 아래 레이어를 쓴다. 아래 레이어일수록 많이 쓰이니 신중히 고친다.
• 슬라이스는 index.ts Public API로만 드나든다.
• 경계가 애매하면 이미 아는 경계로 먼저 나누고, 처음부터 모든 레이어를 만들지 않는다.
• 작은 프로젝트·MVP에는 과하다. 도입 전에 팀 규모와 프로젝트 수명에 맞는지부터 따진다.

관련 노트: 프론트엔드에서 의존성 관리하기, 프론트엔드와 SOLID 원칙, Next.js App Router의 내비게이션과 데이터 가져오기, 프론트엔드 폴더 구조의 진화, 프론트엔드에서 관심사의 분리