[G1-Sync] Manual knowledge update
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: 스타일 거버넌스 및 디자인 시스템
|
||||
category: Software Architecture
|
||||
tags: [Styling, Tailwind, CSS-in-JS, Design System, Responsive]
|
||||
category: Software [[Architecture]]
|
||||
tags: [Styling, Tailwind, [[CSS-in-JS]], Design[[ system]], Responsive]
|
||||
created: 2026-04-20
|
||||
---
|
||||
|
||||
@@ -11,11 +11,11 @@ created: 2026-04-20
|
||||
> 디자인은 '예쁜 픽셀'이 아니라 '일관된 약속'이다. 단 하나의 변수가 바뀌었을 때 전체 앱의 조화가 유지되는 구조가 진짜 디자인 시스템이다.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
- **Design Tokens (디자인 토큰)**:
|
||||
- **[[Design Tokens]] (디자인 토큰)**:
|
||||
- 색상(#FF0000 -> `brand-primary`), 여백(16px -> `spacing-md`)을 추상화된 이름으로 정의하라. 그래야 브랜드 리뉴얼 시 코드 한 줄로 대응 가능하다.
|
||||
- **Utility-First vs Runtime Style**:
|
||||
- **Tailwind CSS**: 클래스명으로 스타일을 정의하여 런타임 오버헤드가 없고 개발 속도가 압도적이다.
|
||||
- **Styled-components**: 컴포넌트 중심의 의미론적 스타일링과 동적 Props 처리에 강점이 있다.
|
||||
- **[[Tailwind CSS]]**: 클래스명으로 스타일을 정의하여 런타임 오버헤드가 없고 개발 속도가 압도적이다.
|
||||
- **[[styled-components]]**: 컴포넌트 중심의 의미론적 스타일링과 동적 Props 처리에 강점이 있다.
|
||||
- **Mobile First Responsive**:
|
||||
- 작은 화면부터 디자인을 시작하여 넓은 화면으로 확장하라. 이것이 CSS 코드를 30% 이상 줄이는 지름길이다.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user