# 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 ## API 엔드포인트 - 스타일 상세: https://ui.buildersgate.com/api/styles?id=micro-interactions - 디자인 토큰: https://ui.buildersgate.com/api/themes?id=micro-interactions&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

Micro-interactions

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

연도

2013

#10B981

핵심 원칙

피드백

즐거움

직관성

주요 특징

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

장단점

장점

+사용자 만족도와 몰입감 향상
+기능 상태 즉각 피드백
+작은 투자로 큰 UX 개선

단점 / 한계

−과도하면 집중력 분산
−애니메이션 성능 최적화 필요
−모션 민감 사용자 고려 필요 (prefers-reduced-motion)

적합한 사용처

사용 사례

버튼·토글 피드백
폼 유효성 검사
좋아요·즐겨찾기 애니메이션
로딩 상태 표시

이런 프로젝트에 추천

소셜 앱게임화 서비스대화형 폼모바일 앱

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

Hover Interactions

마우스 호버 시 반응하는 버튼

Like Button Animation

좋아요 버튼 인터랙션

Loading State

로딩 상태를 보여주는 버튼

Animated Toggle

부드러운 애니메이션의 토글 스위치

Off

Animated Progress

진행 상태를 보여주는 프로그레스 바

Upload Progress75%

Download Progress45%

Toast Notification

알림 메시지 애니메이션

Success! Changes saved.

New message received