2nd/10_Wiki/Topics/04_Governance_Reliability/Styling_Governance.md

title, category, tags, created

title	category	tags	created
스타일 거버넌스 및 디자인 시스템	Software Architecture	Styling Tailwind CSS-in-JS|CSS-in-JS DesignSystem Responsive	2026-04-20

Styling_Governance (스타일 매니지먼트)

📌 한 줄 통찰 (The Karpathy Summary)

디자인은 '예쁜 픽셀'이 아니라 '일관된 약속'이다. 단 하나의 변수가 바뀌었을 때 전체 앱의 조화가 유지되는 구조가 진짜 디자인 시스템이다.

📖 구조화된 지식 (Synthesized Content)

• Design Tokens (디자인 토큰):
  • 색상(#FF0000 -> brand-primary), 여백(16px -> spacing-md)을 추상화된 이름으로 정의하라. 그래야 브랜드 리뉴얼 시 코드 한 줄로 대응 가능하다.
• Utility-First vs Runtime Style:
  • Tailwind CSS: 클래스명으로 스타일을 정의하여 런타임 오버헤드가 없고 개발 속도가 압도적이다.
  • styled-components: 컴포넌트 중심의 의미론적 스타일링과 동적 Props 처리에 강점이 있다.
• Mobile First Responsive:
  • 작은 화면부터 디자인을 시작하여 넓은 화면으로 확장하라. 이것이 CSS 코드를 30% 이상 줄이는 지름길이다.

⚠️ 모순 및 업데이트 (RL Update)

• 과도한 '공통 컴포넌트'화는 오히려 독이 될 수 있다. 버튼 하나에 옵션이 20개가 달리는 순간, 그 버튼은 유지보수의 재앙이 된다. 적절한 '복제'와 '분리'의 균형을 유지하라.

🔗 지식 연결 (Graph)

• Related: Component_Design_Patterns , Accessibility_Inclusivity
• Best Practice: React_Clean_Code_Best_Practices