Front/react

FSD (Feature-Sliced Design)구조란?

Suldo 2026. 1. 26. 15:49
728x90

개요

SSL_Viewer 프로젝트 진행 중 프론트엔드 아키텍처를 고민하다가 FSD 구조에 대해 조금 더 진지하게 공부하여보고 해당 과정 진행중 느낀점과 공유하고 싶은 내용들에 대해 작성한다.

FSD란?

FSD란 (Feature-Sliced Design)
프론트엔드에서 기능 중심으로 확장 가능하게 폴더로 나누어서 설계하자는 방식이며 이게 나오게 된 곳도 Feature Driven Development 이라는 FDD에서 나왔기 때문에 "기능에 대해 중요하게 생각하며 더해서 확장성을 중요하게 생각하며 개발하자" 라는 취지라고 보면 된다

따라서 기능 중심 + 확장성 키워드를 머리 속에 두고 생각하면 된다

이전과 다른 점은 뭘까?

이전에는 component/, api/, hooks/ 처럼 기술별 폴더로 나누었는데
이럴 경우 '로그인 기능'에 관한 api를 찾고 컴포넌트 찾고 훅 찾고 하는 과정에서 번거로움이 있었으며, 재사용 및 의존관계가 꼬이는 경우가 생길 수 있었다.

이를 해결하기 위해 FSD는 기능 중심으로 묶고 의존 방향을 정해 꼬이지 않게 하며 규모가 커져도 기능 단위로 확장되게 만들었다.

FSD의 구조 - 6 Layer

- **app**: 앱 시작점(라우팅, 전역 Provider, 전역 스타일 등)

- **pages**: 페이지 단위(예: `/login`, `/dashboard`)

- **widgets**: 페이지를 구성하는 큰 덩어리 UI(예: 헤더, 사이드바, 대시보드 패널)

- **features**: 사용자의 “행동/기능” 단위(예: 로그인, 상품 검색, 장바구니 담기)

- **entities**: 비즈니스 핵심 데이터 단위(예: User, Product, Order)

- **shared**: 공용 유틸/공용 UI 버튼/공용 API 클라이언트 등(아무데서나 쓰는 것)

**위에서 아래는 참조가 가능하나 아래에서 위는 참조가 되지 않는다.**

또한 각각의 Layer에서 1) 기능별로 폴더를 만들고 해당 기능 하위에 2) ui/api/model 등 필요한 폴더를 각각 만들어서 사용하는 것이 관습이다.

FSD 흐름 예시 (쇼핑몰 화면 예시)

  1. **App 레이어**에서 라우팅과 전역 설정을 준비한다. (예: 로그인 상태, 장바구니 상태, 전역 Provider/에러 처리/테마 등)
  2. 사용자가 **`/products/123`** 같은 URL로 들어오면 → **상품 상세 Page**가 선택되어 화면이 열린다.
  3. **상품 상세 Page**는 “화면을 조립”만 하고, 보통 여러 **Widget**을 배치해서 큰 덩어리 화면을 만든다.
    • 예: **HeaderWidget**, **MainProductWidget**, **CartPreviewWidget(장바구니 미리보기)**
  4. **MainProductWidget**은 내부에서 필요한 **Feature**들을 끼워 넣어 실제 사용자의 행동을 만든다.
    • 예: **장바구니 담기 Feature**, **바로 구매 Feature**, **찜하기 Feature**(관리자라면 삭제 Feature도 가능)
    • 그리고 상품명/가격/이미지 같은 “상품 데이터 표현”은 보통 **Product(Entity)**를 기반으로 보여주며, 이미지 컴포넌트나 포맷팅 같은 공용 요소는 **Shared(ui/lib)**를 쓴다.
  5. 사용자가 “장바구니 담기” 버튼을 누르면 → 해당 **Feature**가 동작해서 **Cart(Entity)**를 업데이트하고, 필요하면 서버에 동기화 요청을 보낸다. 이때 HTTP 호출/공용 유틸은 **Shared(api/lib)**가 담당한다.
  6. **Cart(Entity)** 상태가 바뀌면 → 이를 구독하고 있는 **CartPreviewWidget**(또는 Header의 장바구니 카운트) 같은 **Widget**들이 자동으로 갱신되어 “장바구니 수량/금액”이 바로 화면에 반영된다.

예제 코드 및 예제 URL : https://github.com/noveogroup-amorgunov/nukeapp

적용하며 느낀점

프론트엔드에서는 눈에 가시적으로 보이는 것들을 코드로 짜다보니 백엔드에서 사용하던 아키텍처들 보다는 훨씬 이해하기 쉬웠던 것 같다.
FSD의 기본인 기능 중심은 잘 지킨 것 같지만 확장성에 대해 더 잘 지킬 수 있을지에 대해 좀 더 고민해볼 수 있는 시간을 가져봐야겠다고 느꼈다.

조금씩 Featured와 Widget에 있는 요소들을 Shared와 Entity레벨로 내릴 수 있는 것들이 있을 것 같은데 해당부분을 찾고 적용하는 것이 어려운 것 같고 konva와 같은 라이브러리를 사용하다보니 클래스 하나가 좀 커지는 경우가 있는 것 같다.

728x90
저작자표시 비영리 (새창열림)