Antigravity Agent
34 lines
2.5 KiB
Markdown
34 lines
2.5 KiB
Markdown
---
|
|
id: [[P-Reinforce|P-Reinforce]]-AUTO-DESY-001
|
|
category: Unified
|
|
confidence_score: 0.96
|
|
tags: [auto-reinforced, design-system, ui-ux, [[Frontend|Frontend]], consistency, [[Scalability|Scalability]]]
|
|
last_reinforced: 2026-04-20
|
|
---
|
|
|
|
# [[Design-System|Design-System]]
|
|
|
|
## 📌 한 줄 통찰 (The Karpathy Summary)
|
|
> "조직의 시각적 언어: 단순한 UI 가이드를 넘어, 재사용 가능한 컴포넌트와 명확한 표준(심볼, 컬러, 간격 등)을 정의함으로써 디자이너와 개발자가 동일한 속도로 고품질의 사용자 경험을 양산하게 돕는 공유 지식 체계."
|
|
|
|
## 📖 구조화된 지식 (Synthesized Content)
|
|
디자인 시스템(Design-System)은 제품 개발 프로세스에서 일관성을 유지하기 위한 컴포넌트 라이브러리와 스타일 가이드의 집합입니다.
|
|
|
|
1. **핵심 구성 요소**:
|
|
* **[[Design Tokens|Design Tokens]]**: 색상, 폰트 크기, 간격 등을 변수화한 최소 단위.
|
|
* **Pattern Library**: 버튼, 입력창 등 재사용 가능한 UI 컴포넌트들.
|
|
* **Guidelines**: '어떤 상황에 어떤 컴포넌트를 사용해야 하는가'에 대한 원칙.
|
|
2. **왜 중요한가?**:
|
|
* **[[Efficiency|Efficiency]]**: 매번 새로 디자인/코딩할 필요 없이 기존 자산을 조립.
|
|
* **Scalability**: 수백 명의 개발자가 작업해도 하나의 앱처럼 느껴지는 일관성 유지.
|
|
* **Communication**: "그 파란색" 대신 "Primary-500"이라는 명확한 명칭으로 협업.
|
|
|
|
## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
|
|
- **과거 데이터와의 충돌**: 과거에는 종이에 인쇄된 '스타일 가이드 정책'이었으나, 현대 정책은 코드와 디자인 도구([[Figma|Figma]] 등)가 실시간 동기화되는 '디지털 자산 정책'으로 진화함(RL Update).
|
|
- **정책 변화(RL Update)**: 생성 AI가 디자인 시스템의 가이드라인을 학습하여 자동으로 UI를 생성하거나 코드로 변환해주는 'Gen-UI 기반 자동 설계 정책'이 도입되며 디자이너의 역할이 '시스템 관리자 정책'으로 변화 중임.
|
|
|
|
## 🔗 지식 연결 (Graph)
|
|
- [[Scalability|Scalability]], [[Branding|Branding]], [[클린 아키텍처 (Clean Architecture)|Clean-[[Architecture]]-TypeScript]], User Experience (UX), [[Frontend|Frontend]]
|
|
- **Modern Tech/Tools**: Figma, Storybook, Material UI (MUI), [[Tailwind CSS|Tailwind CSS]], [[Headless UI|Headless UI]].
|
|
---
|