K
KRYFT Problem Bank
UI/UX 디자인 보통 코딩

마이크로 인터랙션 디자인

UI 마이크로 인터랙션 설계 및 구현

40분
80점
#3739

문제 설명

사용자 경험을 향상시키는 마이크로 인터랙션을 설계하고 구현하세요.

구현할 인터랙션

  1. 좋아요 버튼
    • 클릭 시 하트 애니메이션
    • 파티클 효과
    • 숫자 카운트 애니메이션
  2. 알림 벨
    • 새 알림 시 흔들림
    • 배지 숫자 바운스
  3. 로딩 버튼
    • 클릭 → 로딩 → 완료 상태 전환
    • 체크마크 드로잉 애니메이션
  4. 삭제 확인
    • 스와이프 삭제
    • 되돌리기 토스트

평가 기준

  • 자연스러운 움직임
  • 피드백 명확성
  • 성능 (60fps)
  • 접근성
실행 버튼을 눌러 코드를 실행하세요.