Files
2nd/01_Archive/2026-04-20/09_Styling-Architecture_Governance.md
T

819 B

🎨 [LEVEL 9] 스타일 거버넌스: 디자인 시스템 구축하기

1. CSS-in-JS vs Utility-First

  • Styled-components: 컴포넌트 중심의 스타일링. 가독성이 좋다.
  • Tailwind CSS: 클래스 기반의 빠른 개발. 생산성이 미쳤다.
  • 중급의 선택: 팀의 규모와 프로젝트 성격에 맞는 도구를 제안할 줄 알아야 한다.

2. Design Tokens: 마법의 변수

  • #FF5733 이라고 직접 쓰지 마라.
  • theme.primary 라고 변수(Token)를 써라.
  • 회장님이 "빨간색 다 파란색으로 바꿔!" 라고 할 때 1초 만에 끝낼 수 있다.

3. 반응형 디자인 (Responsive)

  • 모바일 우선(Mobile First)으로 생각하라.
  • 작은 화면에서 먼저 짜고 큰 화면으로 넓혀가는 것이 논리적으로 훨씬 간결하다.