Scale
인터랙티브 요소의 크기 변환 토큰입니다. 누름 피드백(0.98), 모달 등장 애니메이션(0.95), 컴포넌트 등장 시작 배율(0.5/0.75)을 정의합니다.
Scale Tokens
누름 피드백, 모달 등장, 컴포넌트 등장 애니메이션용 배율 값
scale-pressedButton active버튼 활성/누름 상태
scale-95Modal enter모달 콘텐츠 등장 애니메이션
scale-50Enter animation애니메이션 시작 배율 (Radio dot 등)
scale-75Enter animation애니메이션 시작 배율 (Checkbox 등)
Why This Value?
각 배율 값의 설계 근거
0.99
0.99인식 어려움0.98
0.98최적 ★0.95
0.95Modal 등장scale-pressedButton / Card2% 축소는 느껴지지만 자연스럽습니다. 0.99는 변화가 너무 작고, 0.95는 요소가 튀어오르는 것처럼 보입니다.
0%비가시
50%시작점 ★
100%완료
scale-50Radio dot절반 크기에서 등장합니다. 작은 점에는 큰 배율 변화로 '팝' 느낌을 연출합니다.
0%비가시
75%시작점 ★
100%완료
scale-75Checkbox75%에서 등장합니다. 체크마크는 형태가 복잡하므로 작은 배율 변화로 자연스럽게 표현합니다.
Modal
90%과도함Modal
95%시작점 ★Modal
100%완료scale-95Modal content95%에서 등장합니다. 모달처럼 큰 요소는 작은 배율 변화(5%)만으로 충분한 시각 효과를 냅니다. translateY와 조합하여 자연스러운 등장감을 연출합니다.
Interactive Demo
각 박스를 클릭하여 스케일 효과를 체험해보세요.
Component Demo
실제 UI 컴포넌트에서 스케일 효과를 체험해보세요
Button1.00
active:scale-pressed
Icon Button1.00
active:scale-pressed
Clickable Card1.00
active:scale-pressed
Use Cases
스케일 토큰의 일반적인 사용 패턴
버튼 누름0.98
active:scale-pressed버튼을 클릭/탭할 때의 시각적 피드백
카드 누름0.98
active:scale-pressed클릭 가능한 카드의 활성 상태
아이콘 버튼0.98
active:scale-pressed아이콘 버튼의 누름 피드백
| 패턴 | 값 | Tailwind | 설명 |
|---|---|---|---|
| 버튼 누름 | 0.98 | active:scale-pressed | 버튼을 클릭/탭할 때의 시각적 피드백 |
| 카드 누름 | 0.98 | active:scale-pressed | 클릭 가능한 카드의 활성 상태 |
| 아이콘 버튼 | 0.98 | active:scale-pressed | 아이콘 버튼의 누름 피드백 |
Best Practices
✓
권장
- ✓단독 버튼에 scale-pressed 사용
- ✓duration-micro와 함께 사용
- ✓클릭 가능한 요소에만 적용
- ✓active: 의사 클래스로 적용
✕
지양
- ✗그룹/연결된 버튼에 scale 사용
- ✗0.95 미만의 극단적인 배율
- ✗느린 duration과의 조합
- ✗hover 상태에서 축소