Emphasis

요소가 위아래로 통통 튀며, 튀는 폭이 점점 줄어듭니다.

[적용할 곳]에 바운스(Bounce) 주목 효과를 넣어 줘.
요소가 위로 튀었다 떨어지기를 몇 번 빠르게 반복하되 점점 작게 튀고, 착지할 때 살짝 눌리게 해 줘.
반복 재생하지 말고 트리거될 때 한 번만 재생하고, 모션 줄이기를 켠 사용자에게는 생략해 줘.

요소가 불투명도를 빠르게 바꾸며 깜박입니다.

[적용할 곳]에 플래시(Flash) 주목 효과를 넣어 줘. 블링크(blink)라고도 불러.
요소가 빠르게 사라졌다 나타나기를 두 번 반복하며 깜박인 뒤, 완전히 보이는 상태로 남게 해 줘.
끝없이 깜박이지 말고 한 번만 재생하고, 빠른 깜박임은 불편할 수 있으니 모션 줄이기를 켠 사용자에게는 생략해 줘.

요소의 불투명도가 고장 난 전등처럼 불규칙하게 깜박거립니다.

[적용할 곳]에 플리커(Flicker) 효과를 넣어 줘. flickering이라고도 불러.
요소가 대부분은 안정적으로 있다가, 고장 난 네온사인처럼 짧고 불규칙하게 끊기며 어두워지게 해 줘.
타이밍은 일정한 간격이 아니라 불규칙하게 하고, 최대 밝기로 빠르게 번쩍이는 건 피하고, 모션 줄이기를 켠 사용자에게는 멈춰 줘.

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

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

요소가 뛰는 심장처럼 두 번씩 박동하는 리듬으로 커졌다 작아집니다.

[적용할 곳]에 하트비트(Heartbeat) 효과를 넣어 줘. heart beat라고도 불러.
요소가 빠르게 두 번 부풀었다 풀리고, 다음 박동 전에 잠깐 쉬게 해 줘. 뛰는 심장처럼.
박동 사이의 쉼을 유지한 채 끊김 없이 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.

요소가 흔들리는 젤리처럼 좌우로 일그러지며, 흔들림 폭이 점점 줄어듭니다.

[적용할 곳]에 젤로(Jello) 주목 효과를 넣어 줘. 젤리(jelly)라고도 불러.
요소가 흔들리는 젤리처럼 좌우로 일그러지게 해 줘. 처음엔 크게, 금방 잦아들며 멈추게.
트리거되면 한 번만 재생하고, 요소가 차지하는 자리는 그대로 둬서 주변 콘텐츠가 밀리지 않게 해 줘.

요소의 복사본이 레이더 파동처럼 커지며 사라지기를 반복합니다.

[적용할 곳]에 핑(Ping) 효과를 넣어 줘. 레이더 핑(radar ping), 펄스 링(pulse ring)이라고도 불러.
요소의 복사본이 바깥으로 커지며 사라지는 동작을 일정한 속도로 계속 반복하고, 요소 자체는 가만히 있게 해 줘.
링은 별도 레이어에 그려서 레이아웃이 절대 바뀌지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 반복을 멈춰 줘.

요소가 부드럽게 커졌다 작아지거나 흐려졌다 선명해지기를 반복합니다.

[적용할 곳]에 펄스(Pulse) 효과를 넣어 줘. 펄싱(pulsing)이라고도 불러.
요소가 느리고 일정한 리듬으로 부드럽게 부풀었다 돌아오게 해 줘. 은은하게, 튕기는 느낌 없이.
주변 레이아웃을 밀지 않고 끊김 없이 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.

요소가 가로로 늘어나고 세로로 눌리는 탄성 있는 동작을 몇 번 거친 뒤 원래대로 돌아옵니다.

[적용할 곳]에 러버 밴드(Rubber Band) 주목 효과를 넣어 줘. rubberband라고도 불러.
요소가 가로로 늘어나고 세로로 눌렸다가, 점점 작아지는 탄성 동작을 몇 번 거쳐 원래 크기로 자리 잡게 해 줘.
트리거되면 한 번만 재생하고, 늘어나는 동안 주변 레이아웃이 밀리지 않게 해 줘.

요소가 한 축을 따라 빠르게 떨리듯 왔다 갔다 합니다.

[적용할 곳]에 셰이크(Shake) 효과를 넣어 줘. 에러 셰이크(error shake), invalid input shake라고도 불러.
요소가 좌우로 몇 번 빠르게 떨리다가 정확히 처음 자리에서 멈추게 해 줘. 빠르고 단호하게.
반복하지 말고 오류가 날 때마다 한 번씩 재생하고, 의미가 움직임에만 기대지 않도록 눈에 보이는 오류 메시지도 함께 보여 줘.

요소가 일정한 속도로 계속 회전합니다.

[적용할 곳]에 스핀(Spin) 효과를 넣어 줘. 스피너(spinner), 로테이트 루프(rotate loop)라고도 불러.
요소가 일정하고 고른 속도로 계속 돌게 하고, 회전 사이에 이징은 넣지 마.
루프는 끊김 없이 이어지게 하고, 스피너에 접근성 있는 로딩 레이블을 달고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 느리게 하거나 멈춰 줘.

요소가 위쪽 가장자리를 축으로 진자처럼 좌우로 흔들리며, 흔들림 폭이 점점 줄어듭니다.

[적용할 곳]에 스윙(Swing) 주목 효과를 넣어 줘.
요소가 매달린 간판처럼 좌우로 흔들리게 해 줘. 처음엔 크게 흔들리다가 금방 잦아들게.
가운데가 아니라 위쪽 가장자리를 축으로 흔들고, 트리거되면 한 번만 재생해 줘.

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

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

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

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

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

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