# [[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]. ## ๐Ÿ“– 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]. ## ๐Ÿ”— 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*