시스매

Feature-Sliced Design (FSD) 아키텍처

12 min read

Feature-Sliced Design (FSD) 아키텍처

Feature-Sliced Design (FSD)은 대규모 프론트엔드 애플리케이션의 구조를 체계적으로 관리하기 위한 현대적인 아키텍처 방법론입니다. 직역하면 ‘기능 분할 설계’로, 애플리케이션을 기능 단위로 분할하여 프로젝트의 규모가 커져도 유지보수에 유리하도록 설계된 구조화된 접근방식입니다.123

FSD 아키텍처의 핵심 구조

FSD는 세 가지 핵심 개념으로 구성됩니다: 레이어(Layers), 슬라이스(Slices), 세그먼트(Segments).14

FSD 아키텍처의 6개 레이어 구조

FSD 아키텍처의 6개 레이어 구조

레이어 (Layers) - 계층적 구조

FSD의 레이어는 총 6개로 표준화되어 있으며, 각각 고유한 책임 영역을 가집니다:15

1. App 레이어: 애플리케이션의 진입점으로 전역 설정을 관리합니다. 라우팅, 글로벌 스타일, 최상위 프로바이더 등이 포함됩니다. 애플리케이션 전체의 전역 설정만 담당하므로 슬라이스 없이 세그먼트만 포함합니다.2

2. Pages 레이어: 특정 URL에 매핑되는 개별 페이지를 정의합니다. /home, /profile, /settings와 같은 각 페이지의 최상위 컴포넌트들이 위치합니다.2

3. Widgets 레이어: 페이지 내에서 독립적으로 작동하는 큰 기능 단위의 UI 컴포넌트를 포함합니다. 검색 바, 대시보드, 사이드바 메뉴 등이 해당되며, 여러 페이지에서 재사용 가능합니다.2

4. Features 레이어: 재사용 가능한 비즈니스 기능을 위한 레이어로, 독립적으로 동작할 수 있는 특정 기능을 정의합니다. 사용자 팔로우, 로그인, 장바구니 기능 등이 포함됩니다.62

5. Entities 레이어: 비즈니스의 핵심 데이터를 나타내는 레이어로, 데이터 모델과 해당 데이터에 대한 로직을 포함합니다. User, Product, Order와 같은 비즈니스 엔티티가 위치합니다.2

6. Shared 레이어: 프로젝트 전반에서 재사용할 수 있는 유틸리티, 기본 컴포넌트, 스타일 등을 포함합니다. Button 컴포넌트, API 클라이언트, 유틸리티 함수 등이 해당됩니다.2

슬라이스 (Slices) - 비즈니스 도메인 분리

슬라이스는 애플리케이션을 비즈니스 도메인별로 코드를 분리하는 두 번째 수준의 계층 구조입니다. 예를 들어, 이커머스 프로젝트라면 product, cart, order와 같은 슬라이스를, 소셜 네트워크 프로젝트라면 post, user, newsfeed 슬라이스를 만들 수 있습니다.2

중요한 원칙은 같은 레이어 내의 슬라이스들은 서로를 참조할 수 없다는 것입니다. 이는 각 기능을 독립적으로 개발하고 유지보수할 수 있도록 보장합니다.2

세그먼트 (Segments) - 기능별 분리

슬라이스 내에서 기능별로 분리된 세그먼트들이 각각의 세부 기능을 담당합니다. 일반적인 세그먼트는 다음과 같습니다:2

  • model: 상태 관리, 훅, 비즈니스 로직
  • ui: React 컴포넌트
  • api: API 호출 로직
  • lib: 유틸리티 함수
  • config: 설정값, 상수

FSD 프로젝트의 실제 폴더 구조 예시

FSD 프로젝트의 실제 폴더 구조 예시

단방향 의존성 규칙

FSD의 핵심 원칙 중 하나는 단방향 의존성입니다. 상위 레이어는 하위 레이어의 구성 요소만 참조할 수 있으며, 반대는 불가능합니다. 예를 들어, Features 레이어는 Shared나 Entities 레이어의 구성 요소를 참조할 수 있지만, Widgets 레이어의 구성 요소는 참조할 수 없습니다.2

이러한 규칙을 통해 코드의 결합도를 낮추고, 특정 레이어에서 발생한 변경이 다른 레이어로 확산되지 않도록 방지합니다.2

FSD의 장점과 단점

주요 장점

확장성과 유지보수성: 프로젝트가 커져도 각 모듈이 독립적으로 동작할 수 있어 유지보수가 용이합니다. 각 기능 단위로 역할과 책임이 명확하게 분리되어 있어 협업에 유리합니다.789

재사용성과 독립성: 기능별로 캡슐화되어 있어 코드 재사용성이 높고, 특정 기능 수정 시 다른 부분에 영향을 주지 않습니다.89

표준화와 일관성: 표준화된 아키텍처 구조로 일관된 개발 패턴을 제공하며, 새로운 팀원의 온보딩이 수월합니다.67

주요 단점

높은 진입 장벽: 초기 설정이 복잡하고 학습 곡선이 가파릅니다. 일반적으로 경력 2년 미만의 개발자는 FSD를 접해본 경험이 드뭅니다.1079

개발 속도 저하: 간단한 파일 추가도 어느 레이어와 슬라이스에 배치할지 고민해야 하므로 초기 개발 속도가 느려질 수 있습니다.11

소규모 프로젝트에는 과함: MVP나 단기 프로젝트의 경우 FSD는 오버엔지니어링일 수 있습니다.7910

프론트엔드 아키텍처 비교표

프론트엔드 아키텍처 비교표

다른 아키텍처와의 비교

전통적인 페이지별 구조: 단순하지만 코드 중복이 많고, 확장성과 유지보수성이 떨어집니다.8

Atomic Design: UI 컴포넌트 계층에 집중하지만 비즈니스 로직과 상태 관리에 한계가 있습니다.128

MVC/MVP: 전통적인 아키텍처 패턴이지만 대규모 프로젝트에서는 확장성이 부족합니다.1314

FSD는 이러한 기존 아키텍처들의 한계를 극복하고, 특히 대규모 프로젝트에서 기능과 도메인에 집중한 현대적인 접근방식을 제공합니다.9

실제 적용 사례와 Best Practices

Next.js와 FSD 결합

FSD는 Next.js App Router와 잘 결합됩니다. Server Components와 Client Components의 역할을 명확히 분리하고, 코드 재사용성과 유지보수성을 극대화할 수 있습니다.6

// features/auth/model/hooks/use-logout.ts
export function useLogout() {
  const queryClient = useQueryClient()
  const router = useRouter()
  
  const logoutMutation = useLogoutMutation({
    onSuccess: () => {
      removeAuthToken()
      queryClient.invalidateQueries({
        queryKey: [QUERY_KEYS.USER_ATTRIBUTES]
      })
      router.push('/')
    }
  })
  
  return {
    logout: logoutMutation.mutateAsync,
    isLoggingOut: logoutMutation.isPending,
  }
}

공개 API 패턴

각 슬라이스는 index.ts 파일을 통해 공개 API를 정의하여 외부에서 접근할 수 있는 요소들을 명확하게 관리합니다. 이는 내부 구조를 캡슐화하고 리팩토링을 용이하게 만듭니다.2

도구 지원

FSD는 실제 개발을 지원하는 다양한 도구들을 제공합니다:2

  • 프로젝트 아키텍처 검증을 위한 린터 (steiger)
  • ESLint 규칙 (eslint-config)
  • CLI 도구와 IDE 기반 폴더 생성기

적용 권장사항

FSD는 다음과 같은 프로젝트에 적합합니다:107

권장하는 경우:

  • 복잡하거나 어느 정도 규모가 있는 프로젝트
  • 장기간 유지보수가 필요한 프로젝트
  • 팀 단위로 협업하는 프로젝트
  • 명확한 비즈니스 도메인이 있는 프로젝트

권장하지 않는 경우:

  • MVP나 단기 프로토타입 프로젝트
  • 매우 단순한 정적 웹사이트
  • 개발 리소스와 시간이 제한적인 프로젝트

결론

Feature-Sliced Design은 현대적인 대규모 프론트엔드 애플리케이션을 위한 강력한 아키텍처 방법론입니다. 높은 학습 곡선과 초기 복잡성이라는 단점이 있지만, 장기적으로 유지보수성, 확장성, 협업 효율성에서 뛰어난 이점을 제공합니다.121078

프로젝트의 규모와 복잡성, 팀의 기술 수준, 장기적인 유지보수 필요성을 종합적으로 고려하여 도입을 결정하는 것이 중요합니다. FSD를 제대로 활용하면 코드의 중복을 줄이고, 기능 추가 및 수정 시 영향 범위가 명확해져 전체적인 개발 생산성을 크게 향상시킬 수 있습니다.78 151617181920212223242526272829303132

⁂

Footnotes

  1. https://velog.io/@clydehan/FSDFeature-Sliced-Design-완벽-가이드 ↩ ↩2 ↩3

  2. https://emewjin.github.io/feature-sliced-design/ ↩ ↩2 ↩3 ↩4 ↩5 ↩6 ↩7 ↩8 ↩9 ↩10 ↩11 ↩12 ↩13 ↩14

  3. https://velog.io/@xxyeon129/기능-분할-설계Feature-Sliced-Design-FSD-아키텍처 ↩

  4. https://j-ho.dev/28/ ↩

  5. https://blog.bizspring.co.kr/테크/효율적인-프론트엔드-설계를-위한-feature-sliced-designfsd의-이해/ ↩

  6. https://joonfluence.tistory.com/906 ↩ ↩2 ↩3

  7. https://seo-tory.tistory.com/91 ↩ ↩2 ↩3 ↩4 ↩5 ↩6 ↩7

  8. https://onlyoliy.tistory.com/56 ↩ ↩2 ↩3 ↩4 ↩5 ↩6

  9. https://velog.io/@min_jae/Feature-Sliced-Design ↩ ↩2 ↩3 ↩4 ↩5

  10. https://y9s2n6.tistory.com/74 ↩ ↩2 ↩3 ↩4

  11. https://velog.io/@kimja01/FSD-아키텍처-migration ↩

  12. https://www.codecentric.de/en/knowledge-hub/blog/feature-sliced-design-and-good-frontend-architecture ↩ ↩2

  13. https://beomy.tistory.com/43 ↩

  14. https://lietenant-k.tistory.com/112 ↩

  15. https://github.com/feature-sliced ↩

  16. https://xionwcfm.tistory.com/462 ↩

  17. https://angelo-lima.fr/en/2025-01-14-feature-sliced-design-scalable-frontend-architecture/ ↩

  18. https://www.fredpope.com/blog/machine-learning/tesla-fsd-12 ↩

  19. https://www.linkedin.com/pulse/understanding-frontend-architectures-classic-atomic-design-gasparyan-9y87f ↩

  20. https://en.wikipedia.org/wiki/Tesla_Autopilot ↩

  21. https://doohyeong.tistory.com/255 ↩

  22. https://github.com/feature-sliced/documentation ↩

  23. https://lucylog.tistory.com/15 ↩

  24. https://velog.io/@fddsgt123/FSD-OAG ↩

  25. https://world-developer.tistory.com/87 ↩

  26. https://like-while.tistory.com/33 ↩

  27. https://brunch.co.kr/@endurance/346 ↩

  28. https://www.clien.net/service/board/cm_car/18790365 ↩

  29. https://developers.hyundaimotorgroup.com/blog/399 ↩

  30. https://www.clien.net/service/board/cm_car/18772032 ↩

  31. https://nhahan.tistory.com/154 ↩

  32. https://www.pgr21.com/freedom/104054 ↩

그래프 뷰

백링크