인터랙션 6가지 · 아이콘 300개

애니메이션 아이콘 인터랙션

모든 아이콘에는 디자인할 때 정한 마이크로 인터랙션이 있습니다. 반복 재생되거나, 클릭하면 전환되거나 다시 재생되거나, 호버하면 재생됩니다. React 컴포넌트가 이를 연결하고 동작 줄이기 설정을 존중하며, interaction prop으로 어떤 아이콘이든 다른 인터랙션으로 바꿀 수 있습니다.

interaction="loop"루프 애니메이션 아이콘아이콘 21개계속 재생됩니다. 동작 줄이기가 설정되어 있으면 정지된 첫 프레임에 머뭅니다.루프 아이콘은 주로 로딩 스피너, 활성 경고, 울리는 벨, 아래로 스크롤 안내에 쓰입니다.
interaction="click-toggle"클릭 토글 애니메이션 아이콘아이콘 37개클릭하면 두 상태 사이를 전환합니다. 동작 줄이기가 설정되어 있으면 즉시 전환됩니다.클릭 토글 아이콘은 주로 음소거/해제, 비밀번호 표시/숨기기, 메뉴/닫기, 재생/일시정지, 좋아요 버튼에 쓰입니다.
interaction="click-replay"클릭 애니메이션 아이콘아이콘 64개클릭할 때마다 처음부터 한 번 재생됩니다. 동작 줄이기가 설정되어 있으면 재생되지 않습니다.클릭 아이콘은 주로 보내기, 저장, 새로고침, 다운로드, 장바구니 담기, 서식 버튼의 동작을 확인해 줍니다.
interaction="hover"호버 애니메이션 아이콘아이콘 21개mouseenter에서 정방향으로, mouseleave에서 역방향으로 재생됩니다.호버 아이콘은 주로 내비게이션 항목, 삭제 버튼, 설정, 확대·축소 컨트롤, 소셜 링크에 쓰입니다.
interaction="hover-replay"호버 재생 애니메이션 아이콘아이콘 144개mouseenter에서 한 번 재생됩니다(동작 줄이기가 설정되어 있으면 재생되지 않음). 포인터가 벗어나도 멈추지 않고, 재생 중에 다시 들어와도 처음부터 다시 시작하지 않습니다.호버 재생 아이콘은 주로 화살표 링크, 기능 목록, 툴바 버튼, 랜딩 페이지 카드에 생기를 더합니다.
interaction="hover-loop"호버 루프 애니메이션 아이콘아이콘 13개호버하는 동안 반복 재생되고, mouseleave 후에는 현재 사이클을 마저 끝냅니다. 동작 줄이기가 설정되어 있으면 정지 상태로 있습니다.호버 루프 아이콘은 주로 소셜 링크, 커뮤니티 초대, 포트폴리오 링크, 언어 선택기에 쓰입니다.

인터랙션 고르기

지속되는 상태(로딩, 활성 경고 등): 루프.
켜기·끄기 컨트롤(음소거, 메뉴, 비밀번호 표시 등): 클릭 토글. 상태를 직접 제어하려면 active를 쓰세요.
일회성 동작(보내기, 저장, 새로고침 등): 클릭 재생.
링크가 무엇을 여는지 암시할 때: 호버. 포인터가 벗어나면 되돌아갑니다.
포인터가 훑고 지나가는 툴바와 목록: 호버 재생. 스스로 끝까지 재생됩니다.
오래 머물러 보게 하는 링크(소셜 아이콘 등): 호버 루프.

동작 줄이기

React 컴포넌트는 prefers-reduced-motion을 따르고 설정이 바뀌면 바로 반영합니다. 터치스크린에서 탭해도 호버 애니메이션은 시작되지 않습니다.

loop: 아이콘이 자동 재생되지 않고 정지된 첫 프레임에 머뭅니다.
click-toggle: 클릭하면 중간 애니메이션 없이 바로 다른 상태로 전환됩니다.
click-replay: 클릭은 여전히 핸들러에 전달되지만 애니메이션은 재생되지 않습니다.
hover: 호버해도 애니메이션이 재생되지 않습니다.
hover-replay: 호버해도 애니메이션이 재생되지 않습니다.
hover-loop: 호버하는 동안에도 아이콘이 움직이지 않습니다.