FSD : Layers

안녕하세요! FSD(Feature-Sliced Design)에서 가장 중요하고, 또 가장 멋진 부분인 **"계층(Layers)"**에 대해 설명해 드릴게요.

이건 마치 **"거대한 레고 성(Castle)"**을 쌓는 것과 비슷합니다. 레고를 아무렇게나 쌓으면 나중에 무너집니다. 튼튼하고 멋진 성을 쌓으려면 바닥부터 차근차근 규칙을 지켜 쌓아야 하죠.

FSD에는 6개의 계층이 있고, 아주 중요한 절대 규칙이 하나 있습니다.

---

📏 절대 규칙: "물은 위에서 아래로 흐른다"

설명을 시작하기 전에 이 규칙부터 기억해야 합니다.
"위쪽 계층은 아래쪽 계층을 가져다 쓸 수 있지만, 반대는 절대 안 된다!"

• ✅ 가능: 3층에서 1층 부품 쓰기 (O)
• ❌ 불가: 1층에서 3층 부품 가져오기 (X) -> 이러면 건물이 무너집니다! (순환 참조 에러)

자, 그럼 **가장 밑바닥(기초)**부터 **꼭대기(완성)**까지 올라가면서 설명할게요.

---

1층. 🧱 Shared (공용 자원): "가장 기초적인 레고 블록"

• 어떤 곳? 이 프로젝트 어디서든 쓸 수 있는 가장 단순하고 멍청한(?) 부품들입니다.
• 특징: 여기 있는 애들은 "비즈니스 로직(우리 앱이 뭐 하는 앱인지)"을 전혀 모릅니다.
• 예시:
  • 빨간색 2x4 레고 블록 (Button, Input 같은 UI 컴포넌트)
  • 블록을 끼우는 방법 설명서 (formatDate 같은 유틸리티 함수)
  • 외부 API랑 통신하는 전선 (axios 설정)
• 비유: 철물점의 나사, 못, 망치입니다. 이 망치는 학교를 짓든 병원을 짓든 다 쓸 수 있죠?

2층. 👤 Entities (데이터/본질): "주인공 캐릭터"

• 어떤 곳? 우리 앱에서 다루는 **핵심 데이터(주제)**를 정의합니다.
• 특징: "이건 사과야", "이건 학생이야"라고 정의는 하지만, 아직 이걸로 뭘 하진 않습니다. '존재' 그 자체입니다.
• 예시:
  • User: 사용자 정보 (이름, 아이디, 프로필 사진 보여주기)
  • Post: 게시글 (제목, 내용 보여주기)
• 비유: 레고 **미니피규어(사람 인형)**입니다. 그냥 서 있는 기사님, 농부 아저씨 그 자체죠. 아직 칼을 휘두르거나 농사를 짓진 않아요.

3층. ⚔️ Features (기능/행동): "캐릭터가 하는 행동"

• 어떤 곳? 사용자가 앱을 쓰면서 **상호작용(클릭, 입력)**하는 가치가 발생하는 곳입니다.
• 특징: 2층의 주인공(Entities)을 데려와서 실제로 움직이게 만듭니다.
• 예시:
  • Login: 사용자(User)가 로그인 버튼을 누른다.
  • AddToCart: 상품(Product)을 장바구니에 넣는다.
  • LikePost: 게시글(Post)에 좋아요를 누른다.
• 비유: 미니피규어에게 검을 쥐여주고 휘두르게 하는 것입니다. "공격!", "점프!" 같은 동작이 여기서 일어납니다.

4층. 🧩 Widgets (조립된 덩어리): "완성된 방 한 칸"

• 어떤 곳? 2층(Entities)과 3층(Features)을 적절히 섞어서 만든 독립적인 큰 덩어리입니다.
• 특징: 이 덩어리만 떼어가도 어디서든 제구실을 합니다.
• 예시:
  • Header: 로고도 있고, 검색창(Feature)도 있고, 내 프로필(Entity)도 있는 상단 바.
  • PostCard: 게시글 내용(Entity)과 좋아요 버튼(Feature)이 합쳐진 카드 한 장.
• 비유: 레고 성의 **'성문 세트'**나 **'알현실 세트'**입니다. 문도 있고 문지기도 있고 깃발도 달려있는 완성된 한 구역이죠.

5층. 📄 Pages (페이지): "성 전체의 설계도"

• 어떤 곳? 사용자가 모니터에서 보는 화면 그 자체입니다.
• 특징: 4층(Widgets)들을 배치해서 화면을 구성합니다.
• 예시:
  • LoginPage: 로그인 폼 위젯을 중앙에 배치한 화면.
  • MainPage: 헤더 위젯, 배너 위젯, 상품 목록 위젯을 차례로 쌓은 화면.
• 비유: **'전투 장면'**이나 **'마을 풍경'**입니다. "왼쪽엔 성문을 두고, 오른쪽엔 감시탑을 둬라"라고 배치하는 단계입니다.

6층. 🛡️ App (앱): "레고 테이블과 조명"

• 어떤 곳? 앱을 실행하기 위한 전역 설정들이 모인 곳입니다.
• 특징: 실제 화면 내용은 거의 없고, 앱을 감싸는 껍데기 역할을 합니다.
• 예시:
  • 전역 스타일(CSS Reset), 라우터 설정, 상태 관리(Provider) 초기화.
• 비유: 레고를 조립하는 작업 테이블입니다. 조명을 켜고, 설명서를 펼치고, 바닥판을 까는 기초 공사 단계입니다.

---

💡 요약: "쇼핑몰의 상품 카드"를 만든다면?

1. Shared: '네모난 카드 모양', '빨간색 하트 아이콘'을 만듭니다. (재료)
2. Entities: '상품 가격', '상품 이름', '상품 사진' 데이터를 가져와서 보여줍니다. (정보)
3. Features: 하트 아이콘을 누르면 '찜 목록에 추가'하는 기능을 만듭니다. (동작)
4. Widgets: 위 1, 2, 3을 합쳐서 "찜 기능이 있는 상품 카드" 덩어리를 만듭니다. (조립)
5. Pages: "메인 페이지"에 상품 카드 위젯을 10개 진열합니다. (화면)
6. App: 이 모든 게 작동하도록 인터넷을 연결하고 앱을 킵니다. (구동)

📝 고등학생을 위한 한 줄 정리

"레고 블록(Shared)으로 미니피규어(Entities)를 만들고, 무기(Features)를 쥐여준 다음, 세트장(Widgets)을 꾸며서 멋진 장면(Pages)을 연출해라!"

이 순서만 지키면 아무리 복잡한 프로그램도 깔끔하게 정리할 수 있습니다.

 

* 본 문서는 google ai studio 를 통해 작성되었습니다.