FSD : overview

안녕하세요! Feature-Sliced Design (FSD), 이름만 들으면 되게 어렵고 거창해 보이죠?

하지만 이걸 고등학생인 우리가 학교에서 **"엄청 큰 동아리 프로젝트"**를 진행한다고 상상하면 아주 쉽게 이해할 수 있어요.

자, 우리가 친구들 10명이서 '인스타그램' 같은 앱을 만든다고 가정해볼게요. 처음엔 그냥 막 코드를 짰는데, 나중에 기능이 많아지니까 파일이 1000개가 넘어가고, 친구 A가 고친 코드가 친구 B가 짠 기능을 망가뜨리는 대혼란(스파게티 코드)이 벌어졌어요.

이걸 해결하기 위해 **"파일과 폴더를 정리하는 절대적인 규칙"**을 만든 게 바로 FSD예요.

---

1. FSD의 핵심: "정리의 3단계 규칙"

FSD는 코드를 정리할 때 딱 3가지만 기억하면 돼요. 큰 것부터 작은 순서대로 Layer(계층) → Slice(주제) → Segment(역할) 입니다.

🏢 1단계: Layer (계층) - "아파트 층수"

코드를 역할의 중요도와 범위에 따라 **층(Layer)**으로 나눕니다.

• 규칙: 위층은 아래층을 쓸 수 있지만, 아래층은 위층을 절대 모르게 해야 해요. (물이 위에서 아래로 흐르는 것처럼요!)

🍕 2단계: Slice (슬라이스) - "방의 이름"

같은 층 안에서도 **주제(도메인)**별로 쪼갭니다.

• 예: 사용자(User), 게시물(Post), 결제(Payment) 처럼요.

📂 3단계: Segment (세그먼트) - "서랍 칸"

그 주제 안에서 코드의 성격에 따라 파일을 나눕니다.

• ui (화면), model (데이터 처리), api (서버 통신) 등.

---

2. 가장 중요한 "7가지 계층(Layer)" 설명 (인스타그램 예시)

FSD에서 가장 중요한 건 **Layer(계층)**입니다. 밑바닥부터 옥상까지 순서대로 설명해 줄게요. (아래로 갈수록 더 기초적이고 재사용이 쉬운 친구들이에요.)

🧱 1. Shared (공용) - "가장 기초적인 레고 블록"

• 설명: 앱 어디서든 쓸 수 있는 아주 기본적인 것들이에요. 비즈니스 로직(인스타만의 기능)은 전혀 없어요.
• 예시: 버튼(Button), 입력창(Input), 날짜 계산 함수, 색상 코드.
• 특징: "좋아요 버튼"이 아니라 그냥 "버튼"이어야 해요.

👤 2. Entities (엔티티) - "주인공(데이터) 모델"

• 설명: 우리 앱에서 다루는 핵심 데이터 개념들이에요.
• 예시:
  • User (사용자 정보: 이름, 프사)
  • Post (게시물 정보: 사진, 글 내용)
  • Comment (댓글)
• 특징: 여기엔 "데이터를 어떻게 보여줄지(PostCard)"는 있어도, "좋아요를 누르는 동작" 같은 복잡한 기능은 넣지 않아요.

⚙️ 3. Features (기능) - "사용자가 하는 행동"

• 설명: 사용자에게 가치를 주는 구체적인 동작이에요.
• 예시:
  • AuthByPhone (휴대폰으로 로그인하기)
  • LikePost (게시물 좋아요 누르기)
  • AddComment (댓글 달기)
• 특징: 여기서부터 진짜 "기능"이 작동해요.

🧩 4. Widgets (위젯) - "기능 + 데이터의 조합"

• 설명: Entities와 Features를 조립해서 만든 독립적인 큰 덩어리예요.
• 예시:
  • NewsFeed (게시물 리스트 + 좋아요 기능 + 댓글 기능이 합쳐진 덩어리)
  • Header (로고 + 검색창 + 내 프로필 버튼)
• 특징: 이거 하나만 떼어다 놓으면 화면의 한 구역이 완성돼요.

📄 5. Pages (페이지) - "완성된 화면 한 장"

• 설명: 위젯들을 배치해서 만든 실제 화면이에요.
• 예시:
  • MainPage (메인 피드 화면)
  • ProfilePage (내 정보 화면)
  • LoginPage (로그인 화면)

🚀 6. App (앱) - "건물의 기초 공사 및 설정"

• 설명: 앱을 실행하기 위한 설정들이 모여 있어요.
• 예시: 글로벌 스타일 설정, 라우터(페이지 이동 규칙), 초기 세팅.
• 특징: 여기서 모든 페이지를 불러와서 앱을 시작해요.

(참고: Processes라는 계층도 있는데, 요즘은 잘 안 쓰고 Pages나 App에 합치는 추세라 몰라도 돼요!)

---

3. 절대 어기면 안 되는 규칙: "단방향 의존성"

이게 FSD의 알파이자 오메가입니다.

"위층은 아래층을 수입(Import)해서 쓸 수 있다. 하지만 아래층은 위층을 절대 쓰면 안 된다."

• ⭕ 가능: Page가 Widget을 가져다 쓴다. (화면이 게시물 덩어리를 보여준다.)
• ⭕ 가능: Feature가 Entity를 가져다 쓴다. (좋아요 기능이 게시물 데이터를 쓴다.)
• ❌ 불가능: Shared(버튼)가 Feature(좋아요 기능)를 안다?
  • 말이 안 되죠? 그냥 '네모난 버튼'인데 클릭하면 무조건 '좋아요'가 되면 안 되잖아요. 버튼은 멍청해야 어디든 갖다 씁니다.

4. 요약: 왜 이렇게 할까?

고등학생 친구들끼리 프로젝트 할 때 이렇게 정리하면 이런 점이 좋아요.

1. 레고 조립하듯 개발 가능: "야, 너는 Feature 층에서 '좋아요 기능'만 만들어. 난 Widget 층에서 그거 가져다가 조립만 할게." 분업이 확실해져요.
2. 수정이 쉬움: "로그인 디자인만 바꾸고 싶어?" 그러면 Shared나 Entities는 건드릴 필요 없이 해당 Feature만 고치면 돼요.
3. 뇌 과부하 방지: 파일이 1000개여도 "게시물 관련 기능"은 무조건 Entities/Post나 Features/LikePost에 있다는 걸 바로 알 수 있어요.

🏫 한 줄 정리

FSD는 "기초 부품(Shared/Entities)"부터 시작해서 "기능(Features)", "덩어리(Widgets)", "화면(Pages)" 순으로 차곡차곡 쌓아 올리는 레고 조립 설명서 같은 설계 방법이다!

 

* 본 글은 구글 제미나이를 통해 생성된 글입니다.