Antigravity Agent
2.5 KiB
2.5 KiB
id, category, confidence_score, tags, last_reinforced
| id | category | confidence_score | tags | last_reinforced | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| FE-STYLE-ATOMIC-001 | 10_Wiki/💡 Topics/AI | 1.0 |
|
2026-04-26 |
Atomic Styling and Design Systems (아토믹 스타일링과 디자인 시스템)
📌 한 줄 통찰 (The Karpathy Summary)
"스타일을 더 이상 '페이지' 단위로 설계하지 말고, 더 이상 쪼갤 수 없는 '원자(Utility)' 단위로 파편화하여 조합함으로써 전역 스타일의 오염을 방지하고 개발 속도를 무한히 확장하라" — Tailwind CSS 등으로 대변되는 유틸리티 퍼스트(Utility-first) 스타일링 패러다임.
📖 구조화된 지식 (Synthesized Content)
- 추출된 패턴: "Composition Over Cascading" — CSS의 전통적인 상속(Cascading)과 복잡한 선택자 구조를 배제하고, 클래스 하나가 하나의 스타일 속성만을 담당하게 하여 컴포넌트 레벨에서 스타일을 조합하는 패턴.
- 주요 특징:
- Single Responsibility Class:
flex,p-4,text-center등 명확한 기능을 가진 클래스 사용. - No Side Effects: 한 곳의 스타일 수정이 다른 곳에 영향을 주지 않는 격리된 환경 제공.
- Minimal Bundle Size: 사용된 유틸리티 클래스만 빌드 결과물에 포함하여 CSS 파일 크기 최소화.
- Constraint-based Design: 정의된 디자인 토큰(Spacing, Colors) 내에서만 스타일을 선택하게 강제하여 디자인 일관성 유지.
- Single Responsibility Class:
- 의의: 대규모 프로젝트에서 CSS의 복잡도를 선형적으로 유지하며, 디자인 시스템의 컴포넌트를 빠르고 안전하게 구축할 수 있게 함.
⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- 과거 데이터와의 충돌: 과거에는 HTML과 CSS의 분리(Separation of Concerns)를 지향했으나, 아토믹 스타일링 정책은 스타일과 구조를 한곳에 모으는 '결합(Co-location)'을 통한 유지보수 효율 정책으로 전향함.
- 정책 변화: Antigravity 프로젝트는 UI 개발 시 Tailwind CSS v4 기반의 아토믹 스타일링을 기본 정책으로 채택하며, 인라인 스타일 사용을 금지하고 오직 사전 정의된 원자 클래스만을 활용함.