Feature-Sliced Design(FSD)은 최근 프론트엔드 개발 커뮤니티에서 주목받고 있는 핫한 아키텍처 패턴입니다. 이 패턴은 애플리케이션을 기능(Feature) 단위로 분할하여 확장성과 유지보수성을 크게 향상시키는 전략을 제공하는데요.

기존 구조의 한계

전통적인 레이어 기반 폴더 구조(components, services, utils 등)는 프로젝트 규모가 커질수록 여러 문제점을 노출합니다. 컴포넌트간 암묵적 의존성 증가, 모듈간 경계가 모호해짐 등의 이유 때문인데요.

FSD 패턴의 개념

1. 기능(Feature) 단위의 구조화

FSD는 기능별로 모든 관련 파일을 아래와 같이 한 폴더에 모아 둡니다.

features/auth/
├── model/       # 상태 관리, 비즈니스 로직
├── api/         # API 요청 관련 코드
├── ui/          # 로그인 폼, 버튼 등 UI 컴포넌트
└── index.ts     # 퍼블릭 API

이렇게 로그인 관련 코드가 한 폴더에 집중되어 있어, 가독성이 뛰어나고 유지보수와 확장성이 용이해집니다. 다른 기능과 의존성을 최소화(de-coupling)항, 독립적인 개발이 가능합니다.

2. FSD의 계층 구조 (Layers, Slices, Segments)

FSD는 기능별 구조를 체계적으로 관리하기 위해 계층(Layers), 슬라이스(Slices), 세그먼트(Segments) 개념을 적용합니다.

• Layers(레이어): 프로젝트를 역할별 계층으로 분리하여 코드의 책임을 명확히 구분

• Slices(슬라이스): 개별 기능을 독립적인 모듈로 유지

• Segments(세그먼트): 기능 내부에서도 역할별로 코드 분리

이러한 구조를 통해 기능별 역할이 명확해지고 코드가 섞이는 문제를 방지할 수 있습니다.

3. Private & Public Components 규칙

FSD에서는 컴포넌트의 접근 범위를 명확히 구분하여 유지보수성을 높입니다.

• Public Component: 여러 곳에서 재사용 가능 (공통 UI, Button, Modal 등)

• Private Component: 특정 기능 내부에서만 사용 (로그인 폼 내부의 입력 필드 등)

이를 통해 컴포넌트 간 불필요한 의존성을 줄이고, 재사용성과 유지보수성을 극대화할 수 있습니다.

FSD 패턴과 모노레포의 시너지

최근 프론트엔드 프로젝트에서 모노레포(Monorepo) 구조가 증가하고 있는데요 FSD 패턴과의 결합은 아래와 같은 여러 장점을 가질 수 있습니다.

✔ 기능별 패키지 관리 용이 → 개별 패키지로 독립적인 기능 관리 가능
✔ 기능 단위 개발 & 배포 가능 → 특정 기능만 별도 패키지로 분리하여 재사용
✔ 빌드 최적화 가능 → Turborepo 같은 빌드 시스템과 결합해 패키지 단위 캐싱 적용

FSD 패턴은 기능 중심의 구조화로 명확한 아키텍처를 제공하여 유지보수성과 확장성을 극대화하는 설계 방식입니다. 폴더 구조를 체계적으로 정리하고, 기능 간 결합도를 낮춰 코드 관리와 개발 생산성을 향상시킵니다.
특히 중대형 프로젝트에서 폴더 구조와 모듈화를 고민하고 있다면, FSD는 효율적이고 확장 가능한 선택이 될 수 있습니다.

https://emewjin.github.io/feature-sliced-design/