# Micro-interactions — 디자인 스타일 가이드
## 기본 정보
- **ID**: micro-interactions
- **카테고리**: ui-pattern
- **연도**: 2013
## 설명
작은 애니메이션과 피드백으로 사용자 경험을 향상시킵니다.
## 핵심 원칙
- 피드백
- 즐거움
- 직관성
## 주요 특징
- 버튼 호버 효과
- 로딩 애니메이션
- 상태 변화 피드백
- 제스처 응답
- 미묘한 모션
## 컬러 시스템 가이드
인터랙션 상태별 색상 변화가 시스템의 핵심. 상태 피드백 색상 명확히
### 색상 역할
- default: 기본 상태
- hover: 마우스 올림 — primary 색 약하게
- active/pressed: 클릭 중 — primary 색 강하게
- focus: 포커스 — focus ring 색상
- disabled: 비활성 — 회색·낮은 opacity
- error: 오류 상태 — 빨강
- success: 성공 상태 — 초록
### 색상 제약 조건
- 상태 전환 시 색상 급변 금지 — transition으로 부드럽게
- 색상만으로 상태 구분 금지 — 형태 변화 병행
### 다크모드 전략
상태 색상 모두 다크 버전으로 정의
### 대비 요구사항
모든 상태에서 WCAG AA 이상
## 타이포그래피 가이드
- **폰트 성격**: 상태 변화 레이블 가독성 최우선
- **권장 폰트 수**: 최대 1개
- **타입 스케일**: 1.2 (Minor Third)
### 타이포그래피 제약
- 상태 레이블 폰트 크기 일정하게 유지
## 하면 안 되는 것 (안티패턴)
- 상태 변화 없는 정적 UI 금지 — 모든 인터랙션에 피드백
- 즉각 반응 없이 1초 이상 지연 후 피드백 금지
## 반드시 포함해야 하는 것
- hover/focus/active 3가지 상태 최소 정의
- transition 100~300ms
- loading 상태 (spinner 또는 skeleton)
## 모션 가이드
상태 전환 transition 100~200ms. hover는 빠르게, 성공/오류는 조금 더 느리게. spring 또는 ease-out.
## 사용 사례
- 버튼·토글 피드백
- 폼 유효성 검사
- 좋아요·즐겨찾기 애니메이션
- 로딩 상태 표시
## 추천 프로젝트 유형
- 소셜 앱
- 게임화 서비스
- 대화형 폼
- 모바일 앱
## 장점
- 사용자 만족도와 몰입감 향상
- 기능 상태 즉각 피드백
- 작은 투자로 큰 UX 개선
## 단점·한계
- 과도하면 집중력 분산
- 애니메이션 성능 최적화 필요
- 모션 민감 사용자 고려 필요 (prefers-reduced-motion)
## 관련 스타일
- [material-design](https://ui.buildersgate.com/styles/material-design)
- [storytelling-design](https://ui.buildersgate.com/styles/storytelling-design)
- [accessibility-first](https://ui.buildersgate.com/styles/accessibility-first)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #10B981
- secondary: #059669
- accent: #34D399
- background: #ECFDF5
- surface: #FFFFFF
- text: #064E3B
- textSecondary: #6B7280
- border: #A7F3D0
### 헤더
- background: linear-gradient(135deg, #10B981 0%, #065F46 100%)
- textColor: #FFFFFF
- accentColor: #34D399
### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 0 1px 4px rgba(16,185,129,0.10)
- md: 0 4px 14px rgba(16,185,129,0.14)
- lg: 0 8px 28px rgba(16,185,129,0.18)
- xl: 0 16px 48px rgba(16,185,129,0.22)
### Border Radius
- none: 0
- sm: 6px
- md: 10px
- lg: 16px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #A7F3D0
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.15s ease
### 애니메이션
- duration: 150ms
- easing: ease-out
### 컴포넌트 토큰
- 버튼: shape=pill / hoverEffect=scale / textTransform=none
- 카드: style=elevated / hoverEffect=glow
- 인풋: style=outlined / focusEffect=glow
- 배지: shape=pill / style=solid
- 아이콘: package=lucide / strokeWidth=2 / defaultSize=20
### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: true
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Micro-interactions이란 무엇인가요?
A: 작은 애니메이션과 피드백으로 사용자 경험을 향상시킵니다.
### Q: Micro-interactions의 핵심 디자인 원칙은 무엇인가요?
A: Micro-interactions의 핵심 원칙은 피드백, 즐거움, 직관성입니다.
### Q: Micro-interactions은 어떤 프로젝트에 적합한가요?
A: Micro-interactions은 버튼·토글 피드백, 폼 유효성 검사, 좋아요·즐겨찾기 애니메이션, 로딩 상태 표시, 소셜 앱, 게임화 서비스, 대화형 폼, 모바일 앱 등의 프로젝트에 적합합니다.
### Q: Micro-interactions의 장단점은 무엇인가요?
A: 장점으로는 사용자 만족도와 몰입감 향상, 기능 상태 즉각 피드백, 작은 투자로 큰 UX 개선이 있습니다. 단점으로는 과도하면 집중력 분산, 애니메이션 성능 최적화 필요, 모션 민감 사용자 고려 필요 (prefers-reduced-motion)이 있습니다.
### Q: Micro-interactions에서 색상은 어떻게 사용하나요?
A: 인터랙션 상태별 색상 변화가 시스템의 핵심. 상태 피드백 색상 명확히 색상 역할은 default: 기본 상태, hover: 마우스 올림 — primary 색 약하게, active/pressed: 클릭 중 — primary 색 강하게입니다. 주의사항: 상태 전환 시 색상 급변 금지 — transition으로 부드럽게, 색상만으로 상태 구분 금지 — 형태 변화 병행.
### Q: Micro-interactions에 어울리는 폰트 스타일은 무엇인가요?
A: Micro-interactions에는 상태 변화 레이블 가독성 최우선 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 상태 레이블 폰트 크기 일정하게 유지.
### Q: Micro-interactions 디자인에서 하면 안 되는 것은 무엇인가요?
A: Micro-interactions에서 피해야 할 것: 상태 변화 없는 정적 UI 금지 — 모든 인터랙션에 피드백, 즉각 반응 없이 1초 이상 지연 후 피드백 금지.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=micro-interactions
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=micro-interactions&merged=true
Micro-interactions은 버튼·토글 피드백, 폼 유효성 검사, 좋아요·즐겨찾기 애니메이션, 로딩 상태 표시, 소셜 앱, 게임화 서비스, 대화형 폼, 모바일 앱 등의 프로젝트에 적합합니다.
Micro-interactions의 장단점은 무엇인가요?
장점으로는 사용자 만족도와 몰입감 향상, 기능 상태 즉각 피드백, 작은 투자로 큰 UX 개선이 있습니다. 단점으로는 과도하면 집중력 분산, 애니메이션 성능 최적화 필요, 모션 민감 사용자 고려 필요 (prefers-reduced-motion)이 있습니다.
Micro-interactions에서 색상은 어떻게 사용하나요?
인터랙션 상태별 색상 변화가 시스템의 핵심. 상태 피드백 색상 명확히 색상 역할은 default: 기본 상태, hover: 마우스 올림 — primary 색 약하게, active/pressed: 클릭 중 — primary 색 강하게입니다. 주의사항: 상태 전환 시 색상 급변 금지 — transition으로 부드럽게, 색상만으로 상태 구분 금지 — 형태 변화 병행.
Micro-interactions에 어울리는 폰트 스타일은 무엇인가요?
Micro-interactions에는 상태 변화 레이블 가독성 최우선 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 상태 레이블 폰트 크기 일정하게 유지.
Micro-interactions 디자인에서 하면 안 되는 것은 무엇인가요?
Micro-interactions에서 피해야 할 것: 상태 변화 없는 정적 UI 금지 — 모든 인터랙션에 피드백, 즉각 반응 없이 1초 이상 지연 후 피드백 금지.