프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 펄스(Pulse) 효과를 넣어 줘. 펄싱(pulsing)이라고도 불러.
요소가 느리고 일정한 리듬으로 부드럽게 부풀었다 돌아오게 해 줘. 은은하게, 튕기는 느낌 없이.
주변 레이아웃을 밀지 않고 끊김 없이 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.비슷한 모션
A
Heartbeat (하트비트)
다른 이름 Heart Beat
요소가 뛰는 심장처럼 두 번씩 박동하는 리듬으로 커졌다 작아집니다.
쓰는 곳
좋아요·즐겨찾기 아이콘, 라이브 표시
[적용할 곳]에 하트비트(Heartbeat) 효과를 넣어 줘. heart beat라고도 불러.
요소가 빠르게 두 번 부풀었다 풀리고, 다음 박동 전에 잠깐 쉬게 해 줘. 뛰는 심장처럼.
박동 사이의 쉼을 유지한 채 끊김 없이 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.A
Ping (핑)
다른 이름 Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
요소의 복사본이 레이더 파동처럼 커지며 사라지기를 반복합니다.
쓰는 곳
알림 점, 실시간 상태 표시
[적용할 곳]에 핑(Ping) 효과를 넣어 줘. 레이더 핑(radar ping), 펄스 링(pulse ring)이라고도 불러.
요소의 복사본이 바깥으로 커지며 사라지는 동작을 일정한 속도로 계속 반복하고, 요소 자체는 가만히 있게 해 줘.
링은 별도 레이어에 그려서 레이아웃이 절대 바뀌지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 반복을 멈춰 줘.Pulse Placeholder (펄스 플레이스홀더)
다른 이름 Skeleton pulse, placeholder-glow
회색 자리 표시 블록이 은은하게 밝아졌다 어두워지며 로딩 중임을 알려 줍니다.
쓰는 곳
스켈레톤 화면
[적용할 곳]에 펄스 플레이스홀더(Pulse Placeholder)를 넣어 줘. 스켈레톤 펄스(skeleton pulse)라고도 불러.
곧 나올 콘텐츠 모양의 회색 블록들이 다 함께 천천히 밝아졌다 돌아오게 해 줘. 부드럽고 일정한 리듬으로.
자리 표시 블록은 실제 레이아웃에 맞춰서 콘텐츠가 들어올 때 아무것도 튀지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 가만히 두어 줘.Flash (플래시)
다른 이름 Blink
요소가 불투명도를 빠르게 바꾸며 깜박입니다.
쓰는 곳
새 콘텐츠 알림
[적용할 곳]에 플래시(Flash) 주목 효과를 넣어 줘. 블링크(blink)라고도 불러.
요소가 빠르게 사라졌다 나타나기를 두 번 반복하며 깜박인 뒤, 완전히 보이는 상태로 남게 해 줘.
끝없이 깜박이지 말고 한 번만 재생하고, 빠른 깜박임은 불편할 수 있으니 모션 줄이기를 켠 사용자에게는 생략해 줘.Emphasis의 다른 모션
A
Rubber Band (러버 밴드)
다른 이름 Rubberband
요소가 가로로 늘어나고 세로로 눌리는 탄성 있는 동작을 몇 번 거친 뒤 원래대로 돌아옵니다.
쓰는 곳
버튼 피드백, 시선 끌기
[적용할 곳]에 러버 밴드(Rubber Band) 주목 효과를 넣어 줘. rubberband라고도 불러.
요소가 가로로 늘어나고 세로로 눌렸다가, 점점 작아지는 탄성 동작을 몇 번 거쳐 원래 크기로 자리 잡게 해 줘.
트리거되면 한 번만 재생하고, 늘어나는 동안 주변 레이아웃이 밀리지 않게 해 줘.Shake (셰이크)
다른 이름 Shake X, Shake Y, Shake Horizontal, Shake Vertical, shakeX, Error shake, Wiggle, Invalid input shake, Headshake
요소가 한 축을 따라 빠르게 떨리듯 왔다 갔다 합니다.
쓰는 곳
폼 오류 피드백
[적용할 곳]에 셰이크(Shake) 효과를 넣어 줘. 에러 셰이크(error shake), invalid input shake라고도 불러.
요소가 좌우로 몇 번 빠르게 떨리다가 정확히 처음 자리에서 멈추게 해 줘. 빠르고 단호하게.
반복하지 말고 오류가 날 때마다 한 번씩 재생하고, 의미가 움직임에만 기대지 않도록 눈에 보이는 오류 메시지도 함께 보여 줘.Spin (스핀)
다른 이름 Rotate Loop, Spinner
요소가 일정한 속도로 계속 회전합니다.
쓰는 곳
로딩 스피너
[적용할 곳]에 스핀(Spin) 효과를 넣어 줘. 스피너(spinner), 로테이트 루프(rotate loop)라고도 불러.
요소가 일정하고 고른 속도로 계속 돌게 하고, 회전 사이에 이징은 넣지 마.
루프는 끊김 없이 이어지게 하고, 스피너에 접근성 있는 로딩 레이블을 달고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 느리게 하거나 멈춰 줘.