# Micro-interactions

> 작은 애니메이션과 피드백으로 사용자 경험을 향상시킵니다.

- 층: 아카이브 (UI 패턴)
- ID: micro-interactions
- 연도: 2013
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/micro-interactions

## 정의

작은 애니메이션과 피드백으로 사용자 경험을 향상시킵니다.

## 주요 특징

- 버튼 호버 효과
- 로딩 애니메이션
- 상태 변화 피드백
- 제스처 응답
- 미묘한 모션

## 핵심 원칙

- 피드백
- 즐거움
- 직관성

## 컬러 시스템

인터랙션 상태별 색상 변화가 시스템의 핵심. 상태 피드백 색상 명확히

### 색상 역할

- 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)

## 자주 묻는 질문

### Q1. Micro-interactions이란 무엇인가요?

작은 애니메이션과 피드백으로 사용자 경험을 향상시킵니다.

### Q2. Micro-interactions의 핵심 디자인 원칙은 무엇인가요?

Micro-interactions의 핵심 원칙은 피드백, 즐거움, 직관성입니다.

### Q3. Micro-interactions은 어떤 프로젝트에 적합한가요?

Micro-interactions은 버튼·토글 피드백, 폼 유효성 검사, 좋아요·즐겨찾기 애니메이션, 로딩 상태 표시, 소셜 앱, 게임화 서비스, 대화형 폼, 모바일 앱 등의 프로젝트에 적합합니다.

### Q4. Micro-interactions의 장단점은 무엇인가요?

장점으로는 사용자 만족도와 몰입감 향상, 기능 상태 즉각 피드백, 작은 투자로 큰 UX 개선이 있습니다. 단점으로는 과도하면 집중력 분산, 애니메이션 성능 최적화 필요, 모션 민감 사용자 고려 필요 (prefers-reduced-motion)이 있습니다.

### Q5. Micro-interactions에서 색상은 어떻게 사용하나요?

인터랙션 상태별 색상 변화가 시스템의 핵심. 상태 피드백 색상 명확히 색상 역할은 default: 기본 상태, hover: 마우스 올림 — primary 색 약하게, active/pressed: 클릭 중 — primary 색 강하게입니다. 주의사항: 상태 전환 시 색상 급변 금지 — transition으로 부드럽게, 색상만으로 상태 구분 금지 — 형태 변화 병행.

### Q6. Micro-interactions에 어울리는 폰트 스타일은 무엇인가요?

Micro-interactions에는 상태 변화 레이블 가독성 최우선 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 상태 레이블 폰트 크기 일정하게 유지.

### Q7. Micro-interactions 디자인에서 하면 안 되는 것은 무엇인가요?

Micro-interactions에서 피해야 할 것: 상태 변화 없는 정적 UI 금지 — 모든 인터랙션에 피드백, 즉각 반응 없이 1초 이상 지연 후 피드백 금지.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #10B981
- secondary: #059669
- accent: #34D399
- background: #ECFDF5
- surface: #FFFFFF
- text: #064E3B
- textSecondary: #6B7280
- border: #A7F3D0

### 타이포그래피

- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 6px / md 10px / lg 16px / full 9999px
- shadow sm: 0 1px 4px rgba(16,185,129,0.10)
- shadow md: 0 4px 14px rgba(16,185,129,0.14)
- shadow lg: 0 8px 28px rgba(16,185,129,0.18)
- border: 1px solid #A7F3D0

### 컴포넌트 형태

- button: pill / hover scale / text none
- card: elevated / hover glow
- input: outlined / focus glow
- badge: pill / solid
- icon: lucide / stroke 2 / size 20px
- layout: boxed / section normal
- animation: 150ms ease-out
- specialEffects: animatedBackground

## 관련 링크

### 관련 스타일

- [Material Design](https://ui.buildersgate.com/styles/material-design)
- [Storytelling Design](https://ui.buildersgate.com/styles/storytelling-design)
- [Accessibility-First Design](https://ui.buildersgate.com/styles/accessibility-first)

---

HTML 버전: https://ui.buildersgate.com/styles/micro-interactions

이 문서는 https://ui.buildersgate.com/styles/micro-interactions.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.