Antigravity Agent
54 lines
7.7 KiB
Markdown
54 lines
7.7 KiB
Markdown
---
|
|
category: Unified
|
|
tags: [auto-consolidated, technical-documentation]
|
|
title: [[Feature-Driven Architecture|Feature-Driven Architecture]]
|
|
last_updated: 2026-05-02
|
|
---
|
|
|
|
# [[Feature-Driven Architecture|Feature-Driven Architecture]]
|
|
|
|
## 📌 Brief Summary
|
|
Feature-Driven [[Architecture|Architecture]](또는 기능 주도 아키텍처, [[Feature-Sliced Design|Feature-Sliced Design]])는 파일 유형이 아닌 실제 비즈니스 기능이나 도메인을 기준으로 프론트엔드 프로젝트 코드를 그룹화하는 구조 설계 방식입니다 [1-3]. 특정 기능에 필요한 UI 컴포넌트, 비즈니스 로직, 스타일(CSS)을 독립적인 기능 폴더(예: `features/`) 내에 함께 캡슐화하여 관리합니다 [4, 5]. 이를 통해 결합도를 낮추고 모듈 경계를 명확히 하여 대규모 애플리케이션에서의 유지보수성, 확장성 및 팀 간 병렬 협업을 획기적으로 개선합니다 [1, 3].
|
|
|
|
---
|
|
|
|
기능 중심 아키텍처(Feature-Driven [[Architecture|Architecture]])는 프로젝트를 파일의 유형(컴포넌트, 훅, 스타일 등)이 아닌 비즈니스 기능(Feature)이나 도메인을 기준으로 코드를 그룹화하는 프론트엔드 구조 설계 방식이다 [1-3]. 이 방식에서는 특정 기능과 관련된 컴포넌트, 비즈니스 로직, 스타일시트가 하나의 기능별 디렉터리 내에 함께 병치(co-located)된다 [1, 4]. 이를 통해 코드의 모듈성과 캡슐화를 높이고, 대규모 애플리케이션이 확장됨에 따라 발생할 수 있는 복잡성을 제어하여 유지보수성을 극대화한다 [1, 2, 5].
|
|
|
|
## 📖 Core Content
|
|
* **기능 기반의 코드 분리와 캡슐화**
|
|
초기 웹 개발이나 소규모 프로젝트에서 흔히 쓰이는 컴포넌트(components), 훅(hooks), 유틸(utils) 등 파일 유형별 폴더 그룹화 대신 비즈니스 기능이나 도메인을 기준으로 구조를 구성합니다 [3, 6]. 예를 들어, [[Next.js|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|CSS Modules]], [[SCSS|SCSS]] 파일을 같은 기능 디렉토리 내에 함께 위치시킵니다(co-location) [5]. 이러한 모듈화는 애플리케이션에서 특정 기능을 삭제할 때 해당 기능의 스타일 코드 역시 자동으로 폐기될 수 있게 보장하여, 레거시 프로젝트에 쌓이기 쉬운 사용되지 않는 '유령 스타일(ghost styles)'이나 데드 코드의 축적을 방지합니다 [5].
|
|
전반적인 프로젝트 구조를 Feature-Sliced Design(FSD) 같은 기능 기반으로 구성하고, 개별 CSS 구조는 BEM 같은 방법론을 통해 관리하면 기술 부채를 크게 줄일 수 있는 강력한 아키텍처가 형성됩니다 [1, 8].
|
|
|
|
---
|
|
|
|
- **구조적 특징 및 모듈성:** 기능 중심 아키텍처에서는 코드를 앱의 실제 도메인(예: `market-data`, `user-profile`, `auth` 등)을 기반으로 `features/` 디렉터리에 분리하여 관리한다 [6]. 이러한 모듈성 덕분에 애플리케이션에서 특정 기능이 제거될 때 관련된 스타일과 코드도 자동으로 정리되므로, 레거시 코드베이스에 사용되지 않는 유령 스타일(ghost styles)이 축적되는 것을 방지할 수 있다 [4].
|
|
- **관심사의 분리와 캡슐화:** 라우트 파일(예: [[Next.js|Next.js]]의 `app/` 디렉터리)은 라우팅과 레이아웃 생성 등 최소한의 역할만 수행하도록 유지하고, 실제 비즈니스 로직과 상태 관리는 기능 폴더로 이동시킨다 [1, 6]. 이를 통해 버그가 발생했을 때 거대한 전역 컴포넌트 폴더를 뒤질 필요 없이 특정 기능 폴더 내부만 확인하면 되는 캡슐화(Encapsulation) 이점을 얻을 수 있다 [6].
|
|
- **[[Feature-Sliced Design|Feature-Sliced Design]] (FSD) 연계:** 전반적인 프론트엔드 아키텍처를 다루는 Feature-Sliced Design (FSD) 방법론은 애플리케이션을 여러 계층(layer)으로 구성하고 각 계층의 엄격한 의존성 규칙과 명확한 모듈 경계를 정의한다 [7]. FSD를 통해 프로젝트 구조를 관리하고 그 내부에서 BEM 또는 [[CSS Modules|CSS Modules]]를 활용하여 CSS 구조를 캡슐화하면 기술 부채를 크게 줄이는 강력하고 유지보수하기 쉬운 아키텍처가 형성된다 [7, 8].
|
|
- **확장성 및 팀 협업:** 코드가 비즈니스 기능별로 그룹화되어 있으므로 여러 팀이 동시에 작업하는 병렬 워크플로우(Parallel team workflows)가 가능해진다 [3]. 또한, 각 기능에 대한 코드 소유권(Ownership)이 명확해져 장기적인 유지보수와 리팩토링을 훨씬 안전하게 수행할 수 있다 [3].
|
|
|
|
## ⚖️ Trade-offs & Caveats
|
|
No trade-offs available.
|
|
|
|
## 🔗 Knowledge Connections
|
|
- **Related Topics:** [[Feature-Sliced Design (FSD)|Feature-Sliced Design (FSD]], CSS Modules, [[BEM|BEM]]
|
|
- **Projects/Contexts:** [[Next.js Modular and Scalable Project Structure|Next.js Modular and Scalable Project Structure]], Large Frontend Projects
|
|
- **Contradictions/Notes:** 소스에 따르면 애플리케이션 초기에는 파일 유형별 구성이 빠르고 편할 수 있으나, 데이터 대시보드나 복잡한 사용자 흐름을 다루게 될수록 관리 불능 상태에 빠지게 됩니다. 따라서 프로젝트 장기 스케일링을 위해 일찍부터 Feature-Driven Architecture 멘탈 모델을 채택하는 것이 거대한 리팩토링의 두통을 막는 방법으로 강력하게 권장됩니다 [2, 6, 9].
|
|
|
|
---
|
|
*Last updated: 2026-04-26*
|
|
|
|
---
|
|
|
|
- **Related Topics:** [[Feature-Sliced Design (FSD)|Feature-Sliced Design (FSD]], Domain-Driven Architecture, BEM (Block Element Modifier), [[CSS Modules|CSS Modules]]
|
|
- **Projects/Contexts:** 대규모 프론트엔드 프로젝트의 아키텍처 설계, 대형 엔터프라이즈 환경의 유지보수 가능한 스타일 시스템 엔지니어링, 확장 가능한 Next.js 프로젝트 구조 수립 [2, 4, 5].
|
|
- **Contradictions/Notes:** 많은 개발자들이 컴포넌트, 훅, 로직 등을 같은 파일 유형끼리 묶는 전역 폴더 방식을 사용하지만, 애플리케이션이 성장하여 대시보드나 복잡한 사용자 흐름을 다루게 되면 이 방식은 관리가 불가능(unmanageable)해지므로 대규모 프로젝트에서는 기능 중심 아키텍처가 전역 스타일 디렉터리보다 우수하다고 평가받는다 [2, 5, 9].
|
|
|
|
---
|
|
*Last updated: 2026-04-26*
|