(1) FSD란 무엇인가?

소프트웨어 개발에서 구조화의 중요성

개발을 하다 보면 코드가 점점 커지고 복잡해지면서 유지보수가 어려워지는 순간이 옵니다. 작은 프로젝트라면 괜찮겠지만, 기능이 추가되고 팀원이 늘어나면서 코드의 일관성과 재사용성을 유지하는 것이 점점 힘들어집니다.

 

전통적으로 MVC, MVVM, Clean Architecture 같은 다양한 패턴을 사용해 왔습니다. 하지만 이러한 패턴에도 모호한 부분이 존재하고, 기능이 많아질수록 구조를 유지하는 것이 어려워집니다. 여기서 등장하는 것이 바로 Feature-Sliced Design (FSD)입니다.

 

Feature-Sliced Design —modern Front End Architectural Methodology on Angular. ❘ by Oleh Sypiahin ❘ Medium

 

FSD는 기능 중심으로 코드를 정리하는 방법론으로, 코드의 위치를 명확히 정의하고, 유지보수성과 확장성을 극대화하는 데 초점을 맞춥니다. 이제, 기존 아키텍처와 비교하며 FSD가 왜 도움이 되는지 살펴보겠습니다.

---

기존 아키텍처와 FSD 비교

(1) MVVM (Model-View-ViewModel)

디렉토리 구조 예시

/project
├── model
│   ├── User.kt
│   ├── Product.kt
│   └── ...
├── view
│   ├── MainActivity.kt
│   ├── LoginFragment.kt
│   └── ...
├── viewmodel
│   ├── MainViewModel.kt
│   ├── LoginViewModel.kt
│   └── ...
└── ...

특징 및 모호한 부분

• UI와 비즈니스 로직을 분리하지만, ViewModel이 점점 비대해질 수 있음
• 기능 중심이 아닌 계층 중심으로 구성되어 있어 확장 시 모호한 경계가 발생
• 재사용성이 제한적이며 ViewModel 내부에서만 로직을 공유하는 경우가 많음

(2) 클린 아키텍처 (Clean Architecture)

디렉토리 구조 예시

/project
├── presentation
│   ├── ui
│   │   ├── MainActivity.kt
│   │   ├── LoginFragment.kt
│   │   └── ...
│   ├── viewmodel
│   │   ├── MainViewModel.kt
│   │   ├── LoginViewModel.kt
│   │   └── ...
│   └── ...
├── domain
│   ├── model
│   │   ├── User.kt
│   │   ├── Product.kt
│   │   └── ...
│   ├── usecase
│   │   ├── GetUserUseCase.kt
│   │   ├── GetProductUseCase.kt
│   │   └── ...
│   └── ...
├── data
│   ├── repository
│   │   ├── UserRepositoryImpl.kt
│   │   ├── ProductRepositoryImpl.kt
│   │   └── ...
│   ├── datasource
│   │   ├── RemoteDataSource.kt
│   │   ├── LocalDataSource.kt
│   │   └── ...
│   └── ...
└── ...

특징 및 모호한 부분

• 책임 분리가 명확하지만, 초기 설계가 복잡하여 부담이 큼
• UseCase를 통한 재사용성이 있지만, 계층 간 데이터 흐름이 다소 복잡
• 기능보다는 역할 중심으로 분리되며, 기능 간 결합도가 높아지는 경우가 있음

(3) Feature-Sliced Design (FSD)

디렉토리 구조 예시

/project
├── app
│   ├── Application.kt
│   ├── Navigation.kt
│   └── ...
├── pages
│   ├── HomePage.kt
│   ├── LoginPage.kt
│   └── ...
├── features
│   ├── auth
│   │   ├── ui
│   │   │   ├── LoginScreen.kt
│   │   │   └── ...
│   │   ├── domain
│   │   │   ├── AuthUseCase.kt
│   │   │   └── ...
│   │   ├── data
│   │   │   ├── AuthRepository.kt
│   │   │   └── ...
│   │   └── ...
│   ├── product
│   │   ├── ui
│   │   │   ├── ProductListScreen.kt
│   │   │   └── ...
│   │   ├── domain
│   │   │   ├── ProductUseCase.kt
│   │   │   └── ...
│   │   ├── data
│   │   │   ├── ProductRepository.kt
│   │   │   └── ...
│   │   └── ...
│   └── ...
├── widgets
│   ├── Button.kt
│   ├── InputField.kt
│   └── ...
├── shared
│   ├── utils
│   │   ├── NetworkUtils.kt
│   │   └── ...
│   ├── models
│   │   ├── User.kt
│   │   ├── Product.kt
│   │   └── ...
│   └── ...
└── ...

FSD의 장점

• 기능 중심으로 구조화하여 코드 응집도를 높이고 유지보수가 쉬움
• 각 Feature를 독립적으로 설계할 수 있어 병렬 개발이 용이함
• 코드 재사용성이 극대화되어 다른 프로젝트에서도 쉽게 활용 가능

---

FSD의 이점

1. 더 쉬운 구조화 – 기존 아키텍처에서 명확하지 않은 부분을 기능 중심으로 정리하여 가이드 제공
2. 확장성 증가 – 새로운 기능을 추가할 때 기존 코드에 영향을 최소화하면서 점진적 확장 가능
3. 코드 재사용성 강화 – Feature 단위로 독립적으로 관리하여 유지보수성과 재사용성을 동시에 고려
4. 비즈니스 요구사항 대응 용이 – 기능별 코드가 한 곳에 모여 있어 변경이 필요한 부분을 쉽게 찾을 수 있음

FSD는 기존 아키텍처를 대체하려는 것이 아니라, 이를 보완하고 좀 더 실용적으로 프로젝트를 구성할 수 있도록 돕는 가이드라인입니다. 프로젝트의 규모가 커질수록 그 가치를 더욱 실감할 수 있을 것입니다.

 

이제 FSD의 기본 개념을 이해했으니, 다음 글에서는 FSD의 계층별 역할을 상세히 분석해보겠습니다.