From b395f0dc46d5275ce27180eda7b5ad609e275150 Mon Sep 17 00:00:00 2001 From: Antigravity Agent Date: Sun, 26 Apr 2026 21:33:58 +0900 Subject: [PATCH] chore: Delete processed raw file (Atomic Design) --- 00_Raw/Atomic Design.md | 18 ----------- .../AI/Atomic-Design-System-Architecture.md | 30 +++++++++++++++++++ 2 files changed, 30 insertions(+), 18 deletions(-) delete mode 100644 00_Raw/Atomic Design.md create mode 100644 10_Wiki/Topics/AI/Atomic-Design-System-Architecture.md diff --git a/00_Raw/Atomic Design.md b/00_Raw/Atomic Design.md deleted file mode 100644 index f2743605..00000000 --- a/00_Raw/Atomic Design.md +++ /dev/null @@ -1,18 +0,0 @@ -# [[Atomic Design]] - -## ๐Ÿ“Œ Brief Summary -Atomic Design์€ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(UI)๋ฅผ ๊ฐ€๋Šฅํ•œ ๊ฐ€์žฅ ์ž‘์€ ์š”์†Œ์ธ ์›์ž(atoms)๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ ๋ถ„์ž(molecules), ์œ ๊ธฐ์ฒด(organisms), ํ…œํ”Œ๋ฆฟ(templates), ๊ทธ๋ฆฌ๊ณ  ํŽ˜์ด์ง€(pages)์™€ ๊ฐ™์€ ์ ์  ๋” ๋ณต์žกํ•œ ๊ตฌ์กฐ๋กœ ์กฐํ•ฉํ•˜์—ฌ ๊ตฌ์ถ•ํ•˜๋Š” UI ์‹œ์Šคํ…œ ์„ค๊ณ„ ๋ชจ๋ธ์ž…๋‹ˆ๋‹ค [1]. ์ด ๋ฐฉ์‹์€ ์ผ๊ด€๋œ ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ๋งŒ๋“ค๊ณ , ์ปดํฌ๋„ŒํŠธ์˜ ์žฌ์‚ฌ์šฉ์„ฑ์„ ์ด‰์ง„ํ•˜๋ฉฐ, ๋””์ž์ด๋„ˆ์™€ ๊ฐœ๋ฐœ์ž ๊ฐ„์˜ ๊ณตํ†ต๋œ ์–ดํœ˜(Shared vocabulary)๋ฅผ ํ™•๋ฆฝํ•˜๋Š” ๋ฐ ํƒ์›”ํ•œ ํšจ๊ณผ๋ฅผ ๋ฐœํœ˜ํ•ฉ๋‹ˆ๋‹ค [2]. - -## ๐Ÿ“– Core Content -- **๊ณ„์ธต์  UI ๊ตฌ์„ฑ:** Atomic Design์€ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ฐ€์žฅ ์ž‘์€ ๋‹จ์œ„(์›์ž)๋กœ ์ชผ๊ฐ  ๋’ค ์ด๋ฅผ ๊ฒฐํ•ฉํ•˜์—ฌ ์ ์  ๋” ํฌ๊ณ  ๋ณต์žกํ•œ ๋ชจ๋“ˆ(๋ถ„์ž, ์œ ๊ธฐ์ฒด ๋“ฑ)๋กœ ํ™•์žฅํ•ด ๋‚˜๊ฐ€๋Š” ๊ตฌ์กฐ์  ์ ‘๊ทผ๋ฒ•์„ ์ทจํ•ฉ๋‹ˆ๋‹ค [1]. -- **์ฃผ์š” ์žฅ์ :** UI์˜ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๊ณ  ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ตฌ์ถ•ํ•˜๋Š” ๋ฐ ๋งค์šฐ ๊ฐ•๋ ฅํ•œ ๋ฐฉ๋ฒ•๋ก ์œผ๋กœ ํ‰๊ฐ€๋ฉ๋‹ˆ๋‹ค [1, 2]. -- **์•„ํ‚คํ…์ฒ˜๋กœ์„œ์˜ ํ•œ๊ณ„:** Atomic Design์€ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์ด๋‚˜ ์ƒํƒœ(state)๋ฅผ ์–ด๋–ป๊ฒŒ ๊ตฌ์„ฑํ•˜๊ณ  ์กฐ์งํ•  ๊ฒƒ์ธ์ง€์— ๋Œ€ํ•ด์„œ๋Š” ์˜๋„์ ์œผ๋กœ ๋ช…์‹œํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค [2]. ๊ทธ ๊ฒฐ๊ณผ, ์ด๋ฅผ ๋‹จ๋…์œผ๋กœ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ๊น”๋”ํ•œ UI ์ปดํฌ๋„ŒํŠธ ๊ณ„์ธต ์ด๋ฉด์— ๋ฌด์งˆ์„œํ•œ ๋กœ์ง ๊ณ„์ธต์ด ์ƒ๊ฒจ๋‚  ์œ„ํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค [2]. ๋”ฐ๋ผ์„œ ๋Œ€๊ทœ๋ชจ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•  ๋•Œ ์ด ๋ชจ๋ธ์€ ํ•„์š”ํ•˜๊ธด ํ•˜์ง€๋งŒ ๋‹จ๋…์œผ๋กœ๋Š” ๋ถˆ์ถฉ๋ถ„(insufficient)ํ•ฉ๋‹ˆ๋‹ค [2]. -- **๋‹ค๋ฅธ ์•„ํ‚คํ…์ฒ˜์™€์˜ ๋ณด์™„ ๋ฐ ๊ณต์กด:** UI์˜ ์ผ๊ด€์„ฑ๊ณผ ์žฌ์‚ฌ์šฉ์„ฑ์— ์ดˆ์ ์„ ๋งž์ถ”๋Š” Atomic Design์˜ ํ•œ๊ณ„๋ฅผ ๋ณด์™„ํ•˜๊ธฐ ์œ„ํ•ด, ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ํ๋ฆ„๊ณผ ๋„๋ฉ”์ธ์˜ ๋ณต์žก์„ฑ, ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์— ์ค‘์ ์„ ๋‘๋Š” [[Feature-Sliced Design]]๊ณผ ๊ฐ™์€ ์•„ํ‚คํ…์ฒ˜์™€ ๋‹จ์ผ ํ”„๋กœ์ ํŠธ ๋‚ด์—์„œ ์ƒํ˜ธ ๋ณด์™„์ ์œผ๋กœ ๊ณต์กดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [1]. - -## ๐Ÿ”— Knowledge Connections -- **Related Topics:** [[Feature-Sliced Design]], [[Component-Based Architecture]], [[React Architecture]] -- **Projects/Contexts:** [[Design Systems]], [[Reusable UI Libraries]] -- **Contradictions/Notes:** ์†Œ์Šค ๋ฌธํ—Œ๋“ค์€ Atomic Design์ด UI ๋””์ž์ธ๊ณผ ์žฌ์‚ฌ์šฉ์„ฑ ์ธก๋ฉด์—์„œ๋Š” ํ›Œ๋ฅญํ•˜์ง€๋งŒ, ๊ทธ ์ž์ฒด๋กœ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง๊ณผ ์ƒํƒœ(state) ๊ด€๋ฆฌ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ด ์ฃผ์ง€ ๋ชปํ•œ๋‹ค๊ณ  ์ง€์ ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋Œ€๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ™•์žฅ์„ ๊ฐ๋‹นํ•˜๊ธฐ ์œ„ํ•ด [[Feature-Sliced Design]]๊ณผ ๊ฐ™์€ ๋„๋ฉ”์ธ/๊ธฐ๋Šฅ ์ค‘์‹ฌ์˜ ์•„ํ‚คํ…์ฒ˜์™€ ๋ณ‘ํ–‰ํ•  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค [1, 2]. - ---- -*Last updated: 2026-04-26* \ No newline at end of file diff --git a/10_Wiki/Topics/AI/Atomic-Design-System-Architecture.md b/10_Wiki/Topics/AI/Atomic-Design-System-Architecture.md new file mode 100644 index 00000000..dcbf36fe --- /dev/null +++ b/10_Wiki/Topics/AI/Atomic-Design-System-Architecture.md @@ -0,0 +1,30 @@ +--- +id: FE-ARCH-ATOMIC-001 +category: "[[10_Wiki/๐Ÿ’ก Topics/AI]]" +confidence_score: 1.0 +tags: [atomic-design, design-system, architecture, react, component-driven, modularity, scalability] +last_reinforced: 2026-04-26 +--- + +# [[Atomic Design System Architecture (์•„ํ† ๋ฏน ๋””์ž์ธ ์‹œ์Šคํ…œ ์•„ํ‚คํ…์ฒ˜)]] + +## ๐Ÿ“Œ ํ•œ ์ค„ ํ†ต์ฐฐ (The Karpathy Summary) +> "์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ชผ๊ฐค ์ˆ˜ ์—†๋Š” ์ตœ์†Œ ๋‹จ์œ„(Atoms)๋ถ€ํ„ฐ ๊ฑฐ๋Œ€ํ•œ ์œ ๊ธฐ์ฒด(Organisms)๊นŒ์ง€ ๋‹จ๊ณ„๋ณ„๋กœ ์กฐ๋ฆฝํ•˜์—ฌ, ์ผ๊ด€์„ฑ๊ณผ ์žฌ์‚ฌ์šฉ์„ฑ์ด๋ผ๋Š” ๋‘ ๊ฐœ์˜ ๊ธฐ๋‘ฅ ์œ„์— ๋ฌดํ•œํžˆ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ UI ์ƒํƒœ๊ณ„๋ฅผ ๊ตฌ์ถ•ํ•˜๋ผ" โ€” ๋ธŒ๋ž˜๋“œ ํ”„๋กœ์ŠคํŠธ์˜ ์•„ํ† ๋ฏน ๋””์ž์ธ์„ ํ˜„๋Œ€์  ํ”„๋ŸฐํŠธ์—”๋“œ ํ™˜๊ฒฝ์œผ๋กœ ์žฌํ•ด์„ํ•œ ์„ค๊ณ„๋ก . + +## ๐Ÿ“– ๊ตฌ์กฐํ™”๋œ ์ง€์‹ (Synthesized Content) +- **์ถ”์ถœ๋œ ํŒจํ„ด:** "Hierarchical Component Composition" โ€” UI ์š”์†Œ๋ฅผ ๋ณต์žก๋„์— ๋”ฐ๋ผ 5๊ฐ€์ง€ ๊ณ„์ธต(Atoms, Molecules, Organisms, Templates, Pages)์œผ๋กœ ๋ถ„๋ฅ˜ํ•˜๊ณ , ํ•˜์œ„ ๊ณ„์ธต์„ ์กฐํ•ฉํ•˜์—ฌ ์ƒ์œ„ ๊ณ„์ธต์„ ๋งŒ๋“œ๋Š” ํŒจํ„ด. +- **๊ณ„์ธต๋ณ„ ์ •์˜:** + - **Atoms (์›์ž):** ๋” ์ด์ƒ ์ชผ๊ฐค ์ˆ˜ ์—†๋Š” ๊ธฐ๋ณธ ํƒœ๊ทธ (Button, Input, Label ๋“ฑ). + - **Molecules (๋ถ„์ž):** ์›์ž๋“ค์˜ ๊ฒฐํ•ฉ์ฒด๋กœ, ํ•˜๋‚˜์˜ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ (SearchForm, FieldGroup ๋“ฑ). + - **Organisms (์œ ๊ธฐ์ฒด):** ๋ถ„์ž์™€ ์›์ž, ํ˜น์€ ๋‹ค๋ฅธ ์œ ๊ธฐ์ฒด์˜ ๊ฒฐํ•ฉ์œผ๋กœ ๊ตฌ์„ฑ๋œ ๋ณต์žกํ•œ ์„น์…˜ (Header, Sidebar, ProductGrid ๋“ฑ). + - **Templates (ํ…œํ”Œ๋ฆฟ):** ๋ฐ์ดํ„ฐ๊ฐ€ ์—†๋Š” ๋ ˆ์ด์•„์›ƒ ์ˆ˜์ค€์˜ ๊ณจ๊ฒฉ. + - **Pages (ํŽ˜์ด์ง€):** ์‹ค์ œ ๋ฐ์ดํ„ฐ๊ฐ€ ์ฃผ์ž…๋˜์–ด ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ง€๋Š” ์ตœ์ข… ๊ฒฐ๊ณผ๋ฌผ. +- **์˜์˜:** UI์˜ ํŒŒํŽธํ™”๋ฅผ ๋ฐฉ์ง€ํ•˜๊ณ , ๋””์ž์ธ๊ณผ ์—”์ง€๋‹ˆ์–ด๋ง ๊ฐ„์˜ ๊ณต์šฉ ์–ธ์–ด๋ฅผ ๊ตฌ์ถ•ํ•˜์—ฌ ๊ฐœ๋ฐœ ์†๋„๋ฅผ ํš๊ธฐ์ ์œผ๋กœ ํ–ฅ์ƒ์‹œํ‚ด. + +## โš ๏ธ ๋ชจ์ˆœ ๋ฐ ์—…๋ฐ์ดํŠธ (Contradictions & RL Update) +- **๊ณผ๊ฑฐ ๋ฐ์ดํ„ฐ์™€์˜ ์ถฉ๋Œ:** ๊ณผ๊ฑฐ์—๋Š” ๋‹จ์ˆœํžˆ ๊ธฐ๋Šฅ๋ณ„๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‚˜๋ˆด์œผ๋‚˜(Shared vs Feature), ํ˜„๋Œ€ ์ •์ฑ…์€ ์•„ํ† ๋ฏน ๋””์ž์ธ์˜ ๊ณ„์ธต ๊ตฌ์กฐ๋ฅผ ํ†ตํ•ด '์ปดํฌ๋„ŒํŠธ์˜ ์ฑ…์ž„ ๋ฒ”์œ„ ์ •์ฑ…'์„ ๋ช…ํ™•ํžˆ ์ •์˜ํ•จ. +- **์ •์ฑ… ๋ณ€ํ™”:** Antigravity ํ”„๋กœ์ ํŠธ๋Š” ์•„ํ† ๋ฏน ๋””์ž์ธ์˜ 5๊ณ„์ธต ์ค‘ Atoms์™€ Molecules๋ฅผ ๊ณต์šฉ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๋ถ„๋ฆฌํ•˜๊ณ , Organisms ์ด์ƒ์€ ์„œ๋น„์Šค๋ณ„ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ ํฌํ•จํ•˜๋„๋ก ๊ฒฉ๋ฆฌํ•˜๋Š” 'Atomic-Logic Separation' ์ •์ฑ…์„ ์‹œํ–‰ํ•จ. + +## ๐Ÿ”— ์ง€์‹ ์—ฐ๊ฒฐ (Graph) +- [[Design-System-Governance]], [[Frontend-Architecture-and-Folder-Structure]], [[Component-Composition-Patterns]], [[Uber-Base-Web-Design-System]] +- **Raw Source:** [[00_Raw/Atomic Design.md]]