Swing (스윙)

요소가 불안정한 물체처럼 기울어지며 좌우로 흔들립니다.

[적용할 곳]에 워블(Wobble) 주목 효과를 넣어 줘.
요소가 기울어지며 좌우로 흔들리게 해 줘. 처음엔 크게, 흔들릴 때마다 작아지다가 멈추게.
트리거되면 한 번만 재생하고, 옆 콘텐츠가 밀리지 않게 해 줘.

요소가 살짝 회전하며 좌우로 흔들려, 고개를 저어 아니라고 하는 느낌을 줍니다.

[적용할 곳]에 헤드 셰이크(Head Shake) 주목 효과를 넣어 줘. headshake, no shake라고도 불러.
요소가 고개를 젓듯 살짝 비틀면서 좌우로 빠르게 돌고, 한 번 돌 때마다 폭이 줄어들다가 멈추게 해 줘.
동작이 거절됐을 때처럼 트리거될 때마다 한 번씩 재생하고, 주변 레이아웃은 움직이지 않게 해 줘.

요소가 왼쪽 위 모서리를 경첩 삼아 흔들리며 매달렸다가 화면 밖으로 떨어집니다.

[적용할 곳]에 힌지(Hinge) 퇴장 애니메이션을 넣어 줘.
나사가 풀린 것처럼 요소가 왼쪽 위 모서리를 축으로 아래로 늘어지고, 앞뒤로 흔들리다가 사라지면서 화면 밖으로 떨어지게 해 줘. 느리고 코믹하게, 의도적으로.
레이아웃을 밀거나 스크롤바를 만들지 않고 다른 내용 위로 떨어지게 하고, 다 떨어지면 없애고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

마우스를 올리면 요소가 몇 도 정도 회전합니다.

[적용할 곳]에 로테이트(Rotate) 호버 효과를 넣어 줘.
포인터가 올라가 있는 동안 요소가 시계 방향으로 살짝 돌고, 벗어나면 돌아오게 해 줘. 부드럽고 은은하게.
주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

요소가 커지면서 회전하듯 흔들린 뒤 원래 크기로 돌아와, 축하하는 느낌을 줍니다.

[적용할 곳]에 타다(Tada) 주목 효과를 넣어 줘.
요소가 살짝 작아졌다가 커지면서 빠르게 기울며 좌우로 흔들리고, 원래 크기로 돌아오게 해 줘. 작은 축하처럼.
성공 직후처럼 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 생략해 줘.

요소가 휴대폰 진동처럼 여러 방향으로 아주 작고 빠르게 떨립니다.

[적용할 곳]에 바이브레이트(Vibrate) 주목 효과를 넣어 줘. 버즈(buzz), 바이브레이션(vibration)이라고도 불러.
요소가 휴대폰 진동처럼 여러 방향으로 아주 작고 빠르게 잠깐 떨리다가 멈추게 해 줘.
내용을 읽을 수 있도록 움직임은 아주 작게 하고, 반복하지 말고 알림마다 한 번씩 재생해 줘.