프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 타다(Tada) 주목 효과를 넣어 줘.
요소가 살짝 작아졌다가 커지면서 빠르게 기울며 좌우로 흔들리고, 원래 크기로 돌아오게 해 줘. 작은 축하처럼.
성공 직후처럼 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 생략해 줘.비슷한 모션
A
요소가 불안정한 물체처럼 기울어지며 좌우로 흔들립니다.
쓰는 곳
아이콘이나 버튼에 시선 모으기
[적용할 곳]에 워블(Wobble) 주목 효과를 넣어 줘.
요소가 기울어지며 좌우로 흔들리게 해 줘. 처음엔 크게, 흔들릴 때마다 작아지다가 멈추게.
트리거되면 한 번만 재생하고, 옆 콘텐츠가 밀리지 않게 해 줘.A
Heartbeat (하트비트)
다른 이름 Heart Beat
요소가 뛰는 심장처럼 두 번씩 박동하는 리듬으로 커졌다 작아집니다.
쓰는 곳
좋아요·즐겨찾기 아이콘, 라이브 표시
[적용할 곳]에 하트비트(Heartbeat) 효과를 넣어 줘. heart beat라고도 불러.
요소가 빠르게 두 번 부풀었다 풀리고, 다음 박동 전에 잠깐 쉬게 해 줘. 뛰는 심장처럼.
박동 사이의 쉼을 유지한 채 끊김 없이 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.A
Jello (젤로)
다른 이름 Jelly
요소가 흔들리는 젤리처럼 좌우로 일그러지며, 흔들림 폭이 점점 줄어듭니다.
쓰는 곳
버튼이나 로고의 재미있는 강조
[적용할 곳]에 젤로(Jello) 주목 효과를 넣어 줘. 젤리(jelly)라고도 불러.
요소가 흔들리는 젤리처럼 좌우로 일그러지게 해 줘. 처음엔 크게, 금방 잦아들며 멈추게.
트리거되면 한 번만 재생하고, 요소가 차지하는 자리는 그대로 둬서 주변 콘텐츠가 밀리지 않게 해 줘.Shake (셰이크)
다른 이름 Shake X, Shake Y, Shake Horizontal, Shake Vertical, shakeX, Error shake, Wiggle, Invalid input shake, Headshake
요소가 한 축을 따라 빠르게 떨리듯 왔다 갔다 합니다.
쓰는 곳
폼 오류 피드백
[적용할 곳]에 셰이크(Shake) 효과를 넣어 줘. 에러 셰이크(error shake), invalid input shake라고도 불러.
요소가 좌우로 몇 번 빠르게 떨리다가 정확히 처음 자리에서 멈추게 해 줘. 빠르고 단호하게.
반복하지 말고 오류가 날 때마다 한 번씩 재생하고, 의미가 움직임에만 기대지 않도록 눈에 보이는 오류 메시지도 함께 보여 줘.Emphasis의 다른 모션
Vibrate (바이브레이트)
다른 이름 Vibration, Buzz
요소가 휴대폰 진동처럼 여러 방향으로 아주 작고 빠르게 떨립니다.
쓰는 곳
알림, 전화 수신 같은 신호
[적용할 곳]에 바이브레이트(Vibrate) 주목 효과를 넣어 줘. 버즈(buzz), 바이브레이션(vibration)이라고도 불러.
요소가 휴대폰 진동처럼 여러 방향으로 아주 작고 빠르게 잠깐 떨리다가 멈추게 해 줘.
내용을 읽을 수 있도록 움직임은 아주 작게 하고, 반복하지 말고 알림마다 한 번씩 재생해 줘.A
Bounce (바운스)
다른 이름 Bounce (attention)
요소가 위아래로 통통 튀며, 튀는 폭이 점점 줄어듭니다.
쓰는 곳
아래로 스크롤 안내, CTA 버튼
[적용할 곳]에 바운스(Bounce) 주목 효과를 넣어 줘.
요소가 위로 튀었다 떨어지기를 몇 번 빠르게 반복하되 점점 작게 튀고, 착지할 때 살짝 눌리게 해 줘.
반복 재생하지 말고 트리거될 때 한 번만 재생하고, 모션 줄이기를 켠 사용자에게는 생략해 줘.