FSD (Feature-Sliced Design) 아키텍처 도입을 통한 프론트엔드 레포지토리 구조 개선

FSD 아키텍처의 핵심 개념 및 도입 배경

• FSD는 Layers, Slices, Segments 3가지 차원으로 코드를 분리하여 재사용 가능한 로직을 통제하는 프론트엔드 아키텍처 방법론입니다.
• Layers는 코드의 기능과 의존성에 따른 가장 큰 범위의 구분이며, 단방향 의존성을 가집니다.
• Slices는 레이어 내에서 비즈니스 도메인별로 코드를 분할하여 높은 응집도와 낮은 결합도를 유지합니다.
• Segments는 코드의 기술적 목적에 따른 세분화 계층 (예: ui, api, model) 입니다.
• 기존 프로젝트의 복잡한 의존성과 낮은 개발 생산성 문제를 해결하고, 확장성 및 유지보수성을 높이기 위해 FSD를 도입했습니다.

FSD 아키텍처 적용 과정의 주요 의사결정

• 점진적 도입을 위해 pages > features > entities > shared 순서의 상향식 (Bottom-Up) 방식을 채택하여 팀원들이 의존성 흐름을 자연스럽게 체득하도록 했습니다.
• widgets 레이어는 재사용 UI 컴포넌트 비중이 낮아 features 레이어 내에서 통합 관리하기로 결정했습니다.
• 동일 도메인의 페이지가 많아지는 문제를 해결하기 위해 Slice Grouping을 허용하여 과도한 슬라이스 생성을 방지하고 작업 속도를 유지했습니다.
• API 코드는 재사용 범위에 따라 pages/[slice]/api, features/[slice]/api, entities/[domain]/api로 명확히 구분하여 배치했습니다.

FSD 도입 후 얻은 주요 성과 및 결론

• 명확한 코드 위치 파악 및 재사용 통제가 가능해져 개발자가 코드를 어디에 둘지 고민하는 시간이 크게 줄어들고 개발 생산성이 향상되었습니다.
• 레이어 규칙을 통해 잘못된 의존성을 사전에 방지하고 사이드 이펙트 발생 확률을 감소시켰습니다.
• 슬라이스 기준의 비즈니스 도메인 명확화로 코드의 응집도가 높아지고 유지보수성이 향상되었습니다.
• 초기 학습 비용에도 불구하고, FSD는 장기적인 관점에서 서비스의 일관성, 확장성, 유지보수성을 크게 향상시키는 전략적 도구임을 확인했습니다.