2nd/10_Wiki/Topics/Feature-Driven Architecture.md

Feature-Driven Architecture

📌 Brief Summary

Feature-Driven Architecture(또는 기능 주도 아키텍처, Feature-Sliced Design)는 파일 유형이 아닌 실제 비즈니스 기능이나 도메인을 기준으로 프론트엔드 프로젝트 코드를 그룹화하는 구조 설계 방식입니다 [1-3]. 특정 기능에 필요한 UI 컴포넌트, 비즈니스 로직, 스타일(CSS)을 독립적인 기능 폴더(예: features/) 내에 함께 캡슐화하여 관리합니다 [4, 5]. 이를 통해 결합도를 낮추고 모듈 경계를 명확히 하여 대규모 애플리케이션에서의 유지보수성, 확장성 및 팀 간 병렬 협업을 획기적으로 개선합니다 [1, 3].

📖 Core Content

• 기능 기반의 코드 분리와 캡슐화 초기 웹 개발이나 소규모 프로젝트에서 흔히 쓰이는 컴포넌트(components), 훅(hooks), 유틸(utils) 등 파일 유형별 폴더 그룹화 대신 비즈니스 기능이나 도메인을 기준으로 구조를 구성합니다 [3, 6]. 예를 들어, Next.js 환경에서는 라우터 기능을 담당하는 폴더(app/)는 라우팅과 레이아웃 용도로만 최소화하여 사용하고, 실제 비즈니스 로직과 복잡한 상태 관리는 features/ 디렉토리(예: market-data, user-profile, auth) 내부로 이동시킵니다 [4, 6]. 이러한 캡슐화는 버그 발생 시 개발자가 방대한 전역 폴더를 탐색할 필요 없이 해당 기능 폴더만 확인하게 해주어 문제 해결을 직관적으로 만듭니다 [4].

• 유지보수성 및 확장성 향상 관심사의 분리([[뇌와 팔다리의 분리 - 관심사의 분리 (Separation of Concerns)|Separation of Concerns]])를 실현하는 이 구조는 대규모 프로젝트 확장에 매우 유리합니다 [2-4]. 기능 단위로 코드가 분리되어 있어 코드 소유권이 명확해지고, 여러 팀이 병렬로 작업하기 쉬워지며 리팩토링이 안전해집니다 [3]. 또한, 네트워크 호출 등 API 연동 로직도 기능 폴더 내의 전용 서비스로 묶어 두어 프론트엔드 요소와 백엔드 API 간의 의존성을 깔끔하게 분리할 수 있습니다 [4, 6].

• CSS 구조 설계와의 강력한 시너지 (스타일 모듈화) 기능 주도 아키텍처는 스타일 시스템의 확장성을 설계하는 데 필수적입니다 [7]. 비즈니스 관련 컴포넌트와 그에 연결된 CSS Modules, SCSS 파일을 같은 기능 디렉토리 내에 함께 위치시킵니다(co-location) [5]. 이러한 모듈화는 애플리케이션에서 특정 기능을 삭제할 때 해당 기능의 스타일 코드 역시 자동으로 폐기될 수 있게 보장하여, 레거시 프로젝트에 쌓이기 쉬운 사용되지 않는 '유령 스타일(ghost styles)'이나 데드 코드의 축적을 방지합니다 [5]. 전반적인 프로젝트 구조를 Feature-Sliced Design(FSD) 같은 기능 기반으로 구성하고, 개별 CSS 구조는 BEM 같은 방법론을 통해 관리하면 기술 부채를 크게 줄일 수 있는 강력한 아키텍처가 형성됩니다 [1, 8].

🔗 Knowledge Connections

• Related Topics: Feature-Sliced Design (FSD), CSS Modules, BEM
• Projects/Contexts: Next.js Modular and Scalable Project Structure, Large Frontend Projects
• Contradictions/Notes: 소스에 따르면 애플리케이션 초기에는 파일 유형별 구성이 빠르고 편할 수 있으나, 데이터 대시보드나 복잡한 사용자 흐름을 다루게 될수록 관리 불능 상태에 빠지게 됩니다. 따라서 프로젝트 장기 스케일링을 위해 일찍부터 Feature-Driven Architecture 멘탈 모델을 채택하는 것이 거대한 리팩토링의 두통을 막는 방법으로 강력하게 권장됩니다 [2, 6, 9].

---

Last updated: 2026-04-26