셰이크Shake

Shake

셰이크

다른 이름Also known as · Wiggle oscillation · 좌우 흔들림 · CustomWiggle · Wobble · Shake and Vibrate · 흔들기와 진동 · Wiggle indication · 좌우 흔들기 강조 · Wiggle · WiggleOutThenIn · 사용자 진동

083

도판Fig. 083. 셰이크 · Shake · sine.inOut

재생 속도Speed

요소가 기준 위치나 각도의 양쪽을 오가다가 멈춘다An element oscillates on both sides of its rest position or angle, then stops.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

주의를 끌거나 거부, 불안정, 오류를 표현한다. 작은 요소에 국소적으로 쓰는 시선 신호다Draws attention or signals refusal, instability or error. A local eye-catching cue for small elements.

언제 쓰나Use whenUSE WHEN

입력 오류나 거부 상태를 폼 필드가 흔들려 알릴 때
알림 아이콘이 주의를 끌어야 할 때

Shake a form field to signal an input error.
Get a notification icon noticed.

과용 주의AvoidAVOID

진폭 10px 초과 금지
한 화면에서 동시에 여러 요소가 흔들리지 않게 한다

분류TagsTAGS

강조·주의Emphasis 주목 끌기Attention 피드백Feedback 웹 UIWeb UI 제품 시연Product demo 숏폼Short-form 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

600ms 동안 위치 진폭 6px로 4번 왕복하고 감쇠 0.6으로 줄며 멈춘다

과용 · 나쁜 사례OVERUSE

감쇠 없이 계속 진동하거나 진폭 30px로 흔들어 화면이 무너진 것처럼 보인다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	600ms	400~800ms
위치 진폭	6px	4~10px	또는 회전 6도
왕복	4회	3~5회
감쇠	0.6	0.5~0.7	다음 진폭 배율

GSAP

const amps = [6, -3.6, 2.2, -1.3, 0]; // 감쇠 0.6
amps.forEach((x, i) => tl.to('.field', { x, duration: 0.12, ease: 'sine.inOut' }, 0.5 + i * 0.12));

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 입력 필드에 셰이크를 넣어줘. x를 6, -3.6, 2.2, -1.3, 0px 순으로 0.12초씩 sine.inOut으로 옮겨 총 0.6초 동안 감쇠 진동하게 하고 시작은 0.5초야. 끝은 정확히 x 0.

Add a shake to the input field in <target>. Move x through 6, -3.6, 2.2, -1.3, 0px in 0.12-second sine.inOut steps for a damped 0.6-second oscillation starting at 0.5 seconds. End at exactly x 0.

Codex

<파일>의 오류 표시에 shake를 적용해. amps [6, -3.6, 2.2, -1.3, 0], 구간 0.12초, ease sine.inOut, 시작 0.5초. 0.5초, 0.62초, 0.74초, 1.1초를 캡처해 좌우 진폭이 줄고 1.1초에 x가 정확히 0인지 확인해.

Apply shake to the error state in <file>: amps [6, -3.6, 2.2, -1.3, 0], segment 0.12s, ease sine.inOut, start 0.5s. Capture at 0.5s, 0.62s, 0.74s and 1.1s and verify the amplitude decays and x is exactly 0 at 1.1s.