Micro-interactions
작은 애니메이션과 피드백으로 사용자 경험을 향상시킵니다.
- YEAR
- 2013
#10B981
- 둥근 모서리
- 가는 테두리
- 보통 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
Hover Interactions
마우스 호버 시 반응하는 버튼
Like Button Animation
좋아요 버튼 인터랙션
Loading State
로딩 상태를 보여주는 버튼
Animated Toggle
부드러운 애니메이션의 토글 스위치
Animated Progress
진행 상태를 보여주는 프로그레스 바
Toast Notification
알림 메시지 애니메이션
이웃 스타일
어디에 쓰나
사용 사례
- 버튼·토글 피드백
- 폼 유효성 검사
- 좋아요·즐겨찾기 애니메이션
- 로딩 상태 표시
이런 프로젝트에 맞습니다
- 소셜 앱
- 게임화 서비스
- 대화형 폼
- 모바일 앱
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
핵심 원칙
- 피드백
- 즐거움
- 직관성
주요 특징
- 버튼 호버 효과
- 로딩 애니메이션
- 상태 변화 피드백
- 제스처 응답
- 미묘한 모션
장점과 한계
장점
- 사용자 만족도와 몰입감 향상
- 기능 상태 즉각 피드백
- 작은 투자로 큰 UX 개선
한계
- 과도하면 집중력 분산
- 애니메이션 성능 최적화 필요
- 모션 민감 사용자 고려 필요 (prefers-reduced-motion)
컬러 시스템
인터랙션 상태별 색상 변화가 시스템의 핵심. 상태 피드백 색상 명확히
색의 역할
- default: 기본 상태
- hover: 마우스 올림 — primary 색 약하게
- active/pressed: 클릭 중 — primary 색 강하게
- focus: 포커스 — focus ring 색상
- disabled: 비활성 — 회색·낮은 opacity
- error: 오류 상태 — 빨강
- success: 성공 상태 — 초록
제약
- 상태 전환 시 색상 급변 금지 — transition으로 부드럽게
- 색상만으로 상태 구분 금지 — 형태 변화 병행
다크모드 — 상태 색상 모두 다크 버전으로 정의
명도 대비 — 모든 상태에서 WCAG AA 이상
타이포그래피
상태 변화 레이블 가독성 최우선
글꼴은 최대 1종 · 스케일 비율 1.2 (Minor Third)
- 상태 레이블 폰트 크기 일정하게 유지
설계 제약
반드시 포함
- hover/focus/active 3가지 상태 최소 정의
- transition 100~300ms
- loading 상태 (spinner 또는 skeleton)
하지 말 것
- 상태 변화 없는 정적 UI 금지 — 모든 인터랙션에 피드백
- 즉각 반응 없이 1초 이상 지연 후 피드백 금지
모션 — 상태 전환 transition 100~200ms. hover는 빠르게, 성공/오류는 조금 더 느리게. spring 또는 ease-out.
자주 묻는 질문
Micro-interactions이란 무엇인가요?
작은 애니메이션과 피드백으로 사용자 경험을 향상시킵니다.
Micro-interactions의 핵심 디자인 원칙은 무엇인가요?
Micro-interactions의 핵심 원칙은 피드백, 즐거움, 직관성입니다.
Micro-interactions은 어떤 프로젝트에 적합한가요?
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초 이상 지연 후 피드백 금지.