스킬 자체의 표현으로
이 스킬은 마이크로인터랙션, 모션 디자인, 전환 효과, 사용자 피드백 패턴을 설계하고 구현하여 사용성을 높이고 사용자에게 즐거움을 제공합니다. 구체적인 타이밍 가이드라인을 제공합니다: 호버·클릭 같은 마이크로 피드백에는 100-150ms, 토글·드롭다운 같은 작은 전환에는 200-300ms, 모달·페이지 전환 같은 중간 전환에는 300-500ms, 복잡하게 안무된 애니메이션에는 500ms 이상.
이 스킬은 스켈레톤 화면과 진행 표시기를 사용한 로딩 상태, 스와이프로 닫기 같은 제스처 기반 인터랙션, 페이지 전환, 리플 효과 같은 피드백 패턴을 다룹니다. 장식이 아니라 의미를 전달하는 목적 있는 모션을 강조하며, 네 가지 원칙을 사용합니다: 동작을 확인시키는 피드백, 요소의 이동을 보여주는 방향성, 주의를 끄는 초점, 전환 중 맥락을 유지하는 연속성.
산출물
- 호버, 탭, 스프링 애니메이션이 적용된 버튼 마이크로인터랙션
- 로딩 상태를 위한 펄스 애니메이션이 적용된 스켈레톤 화면
- 부드러운 스프링 기반 상태 전환이 적용된 토글 컴포넌트
- AnimatePresence를 사용한 불투명도 및 수직 이동 기반 페이지 전환
작동 방식
- 01인터랙션 규모에 따라 타이밍 가이드라인을 따르십시오
호버·클릭 같은 마이크로 피드백에는 100-150ms, 토글 같은 작은 전환에는 200-300ms, 모달 같은 중간 전환에는 300-500ms, 복잡한 애니메이션에는 500ms 이상을 사용하십시오.
- 02적절한 이징 함수를 선택하십시오
진입하는 요소에는 ease-out(감속), 퇴장하는 요소에는 ease-in(가속), 상태 간 이동에는 ease-in-out, 재미있는 오버슈트 효과에는 spring을 사용하십시오.
- 03접근성 설정 존중하기
prefers-reduced-motion 미디어 쿼리를 확인하고, 사용자가 모션 감소를 요청한 경우 애니메이션 지속 시간을 0.01ms로 줄여 애니메이션이 불편함을 유발하지 않도록 합니다.