FSD 공식 문서: https://feature-sliced.design/kr/
Feature-Sliced Design은 특히 React 생태계를 위해 설계된 현대적 프론트엔드 아키텍처 방법론이다. 핵심 아이디어는 프로젝트 구조를 “기술적 레이어(component, service, style 등)” 중심이 아니라 애플리케이션의 기능(Feature) 중심으로 구성하는 데 있다. 전통적인 구조에서는 코드가 기술별로 분리되면서 파일이 비대해지고 의존성이 복잡해지는 문제가 자주 발생한다. Feature-Sliced Design은 이러한 한계를 해결하기 위해 프로젝트의 구조를 기능 단위로 재편한다. 이를 통해 협업과 유지보수가 훨씬 직관적이고 단순해지며, React 커뮤니티에서도 널리 인정되는 베스트 프랙티스라는 점에서 EEAT(전문성, 경험, 권위, 신뢰성) 측면에서도 높은 가치를 가진다. 기능 중심 사고방식은 각 기능을 더 명확하고 확장하기 쉽게 만들고, 궁극적으로 더 견고하고 신뢰할 수 있는 코드베이스 형성에 기여한다.
Feature-Sliced Design의 기원은 대규모 프론트엔드 프로젝트의 복잡성을 효과적으로 관리하는 방법을 찾으려는 커뮤니티 논의에서 비롯된다. 개발자들은 컴포넌트·컨테이너·서비스 등 기술적 관점으로 파일을 나누는 기존 구조가 시간이 지날수록 확장성에 취약하다는 점을 깨달았다. 이후 여러 오픈소스 기여자와 커뮤니티 리더들의 의견을 통해, UI 구성 요소 중심인 React의 특성을 반영한 보다 직관적이고 비즈니스 중심적인 구조가 필요하다는 공감대가 형성되었다. FSD는 도메인 주도 설계(Domain-Driven Design)나 모듈러 아키텍처와 유사한 개념을 가지고 있지만, React 컴포넌트 기반 구조의 특성에 최적화된 형태로 발전해왔다.
Feature-Sliced Design은 크게 레이어(Layer), 슬라이스(Slice), 세그먼트(Segment) 라는 구성 요소로 이루어진다. • 레이어는 사용자 흐름과 비즈니스 로직을 기준으로 애플리케이션을 구분하는 상위 구조이다. • 슬라이스는 각 주요 기능을 기준으로 나눈 도메인 단위다. • 세그먼트는 슬라이스 내부의 하위 영역(로직, 컴포넌트, API 등)을 의미한다.
이러한 구조는 프로젝트의 기능, 도메인, UI를 자연스럽게 정리해주며, 코드 가독성, 테스트 효율, 팀원 온보딩 속도를 크게 향상시킨다.
FSD의 가장 큰 장점은 확장성이다.
React로 대규모 프로젝트를 개발하다 보면 기능이 추가되면서 의존성이 얽히고, 수정 시 회귀(regression) 버그가 잦아지는 문제가 발생한다. Feature-Sliced Design은 기능 단위로 애플리케이션을 구성하기 때문에: • 버그 위치를 파악하기 쉽고 • 새로운 기능 추가가 단순해지며 • 기존 기능 수정 시 다른 기능에 영향을 줄 위험이 낮아지고 • 팀원끼리 병렬 작업이 매우 쉬워진다
이 구조적 명확함은 유지보수성, 개발 속도, 협업 품질을 크게 높인다.
Feature-Sliced Design은 모든 규모의 프로젝트에 사용할 수 있지만, 특히 다음과 같은 상황에서 효과가 크다: • 페이지나 기능 수가 빠르게 증가하는 경우 • 여러 팀이 동시에 프로젝트에 참여하는 경우 • 코드 구조의 예측 가능성과 규칙성이 중요한 경우
규모가 작은 프로젝트라도 일부 FSD 원칙을 적용하면 더 깔끔하고 미래 확장에 유리한 코드베이스를 유지할 수 있다.
MVC(Model-View-Controller)나 MVP(Model-View-Presenter) 같은 고전적인 아키텍처는 레이어별 책임 분리에 초점을 둔다. 그러나 이러한 구조는 백엔드 또는 데스크톱 환경에 더 최적화되어 있으며, 컴포넌트 기반 UI 라이브러리인 React의 특성과는 맞지 않는 경우가 많다.
반면 FSD는 React의 모듈형 구조에 맞춰 전체 코드를 기능 중심으로 정렬한다. 즉, MVC처럼 백엔드 중심 사고방식을 React에 억지로 끼워 맞추는 것이 아니라, React의 강점을 극대화하는 방식이다.