Desegmentation

Desegmentation은 파일을 비즈니스 도메인이 아니라 기술적 역할을 기준으로 묶는 코드 구성 방식입니다.
즉, 코드가 어떤 비즈니스 로직을 다루는지와 관계없이 components, utils, stores처럼 기술적으로 “같은 종류”라는 이유만으로 한 위치에 모아두는 방식을 말합니다.

이 패턴은 Next나 Nuxt 같은 프레임워크에서 진입 장벽이 낮아 자주 사용됩니다.
자동 import나 파일 기반 라우팅 같은 기능을 활용하기에도 편리하기 때문입니다.

디렉터리app
- 디렉터리components
  - DeliveryCard.jsx
  - DeliveryChoice.jsx
  - RegionSelect.jsx
  - UserAvatar.jsx
- 디렉터리actions
  - delivery.js
  - region.js
  - user.js
- 디렉터리composables
  - delivery.js
  - region.js
  - user.js
- 디렉터리constants
  - delivery.js
  - region.js
  - user.js
- 디렉터리utils
  - delivery.js
  - region.js
  - user.js
- 디렉터리stores
  - 디렉터리delivery
    getters.js
    actions.js

이 패턴은 FSD 코드베이스에서도 기술적 역할로만 묶인 폴더 형태로 나타나곤 합니다.

디렉터리features
- 디렉터리delivery
  - 디렉터리ui
    components ⚠️
디렉터리entities
- 디렉터리recommendations
  - utils ⚠️

폴더 구조뿐 아니라 파일 단위에서도 Desegmentation이 발생할 수 있습니다.
types.ts 처럼 도메인 구분 없이 여러 비즈니스 로직을 한 파일에 담으면 코드 탐색이 어려워지고 이후 리팩터링 비용도 커집니다.
특히 pages나 widgets 같은 Layer에서 이런 문제가 자주 나타납니다.

디렉터리pages
- 디렉터리delivery
  - index.ts
  - 디렉터리ui
    DeliveryCard.tsx
    DeliveryChoice.tsx
    UserAvatar.tsx
  - 디렉터리model
    types.ts ⚠️
    utils.ts ⚠️
  - 디렉터리api
    endpoints.ts ⚠️

// ❌ 나쁜 예: 도메인 구분 없이 여러 비즈니스 로직이 한 파일에 혼재
export interface DeliveryOption {
  id: string;
  name: string;
  price: number;
}

export interface UserInfo {
  id: string;
  name: string;
  avatar: string;
}

// ❌ 나쁜 예: 도메인 구분 없이 여러 비즈니스 로직이 한 파일에 혼재
export function formatDeliveryPrice(price: number) {
  return `$${price.toFixed(2)}`;
}

export function getUserInitials(name: string) {
  return name.split(' ').map(n => n[0]).join('');
}

// ❌ 나쁜 예: 도메인 구분 없이 여러 비즈니스 로직이 한 파일에 혼재
export async function fetchDeliveryOptions() { /* ... */ }
export async function fetchUserInfo() { /* ... */ }

문제점

이 구조는 프로젝트 초기에는 시작하기 쉽지만, 규모가 커질수록 다음과 같은 문제가 생깁니다.

낮은 응집도: 하나의 기능을 수정하려면 pages, components, stores처럼 서로 다른 폴더를 오가며 파일을 함께 수정해야 하는 경우가 많습니다.
높은 결합도: 컴포넌트 간에 의도치 않은 의존성이 생기기 쉬워, 의존 관계가 복잡하게 얽히게 됩니다.
리팩터링 어려움: 특정 도메인과 관련된 코드만 분리하려면, 관련 코드를 일일이 찾아 분리해야 합니다.

해결 방법

특정 도메인과 관련된 코드는 같은 위치에 모아둡니다. types, components, utils 같이 기술적 역할로만 구분된 폴더명이나 types.ts, utils.ts, helpers.ts 같이 도메인이 드러나지 않는 파일명은 가능한 피하세요.
대신 “무엇을 다루는 코드인지(도메인)” 가 드러나는 이름을 사용합니다.

특히 여러 도메인이 섞이기 쉬운 Slice에서는 types.ts 같이 도메인이 드러나지 않는 파일명 대신, 도메인별로 파일을 분리하는 편이 좋습니다.

디렉터리pages
- 디렉터리delivery
  - index.tsx
  - 디렉터리ui
    DeliveryPage.tsx
    DeliveryCard.tsx
    DeliveryChoice.tsx
    UserInfo.tsx
  - 디렉터리model
    delivery.ts
    user.ts

Desegmentation

문제점

해결 방법

참고 자료