topic★★★★★난이도 · 약 10분
오버슛 & 셋틀
목표 지점을 살짝 지나쳤다 되돌아오는 안착 — 스프링 느낌의 생동감.
#오버슛#셋틀#overshoot#settle#스프링
왜 배우는가
요소가 정확히 목표 위치에 딱 멈추면 기계적이다. 살짝 지나쳤다 되돌아오면(overshoot) 탄성과 관성이 느껴져 '살아 있는' 모션이 된다. 이 패턴은 Anticipation → Action → Settle의 마지막 단계이며, 모션에 마침표를 찍는 역할을 한다.
자동차가 급정거하면 앞으로 쏠렸다 뒤로 돌아오고, 시계추는 중심을 지나쳤다 되돌아온다. Overshoot은 이 자연스러운 관성을 모션에 적용한 것이다. 목표값(예: position 500px)을 살짝 넘어 510px까지 갔다가 500px로 안착(settle)한다.
오버슛 크기 = 에너지 표현. 5% 오버슛은 부드러운 안착, 15% 오버슛은 강한 에너지, 30% 이상은 바운스/탄성. 일반적인 UI 모션에서는 5~10%가 가장 자연스럽다. 예: 100px 이동이면 105~110px까지 갔다 100px로 복귀.
| 오버슛 크기 | 체감 | 적합한 상황 |
|---|---|---|
| 3~5% | 미세, 거의 무의식 | 텍스트 안착, 미묘한 고급감 |
| 5~10% | 명확한 탄성, 자연스러움 | 카드 등장, 로워서드, 모달 |
| 10~20% | 강한 에너지, 활기 | 알림 배지, 게임 UI |
| 20%+ | 코믹, 과장 | 이모지 반응, 캐릭터 모션 |
AE에서 오버슛 구현: 키프레임 3개면 된다. ① 시작값 → ② 목표를 5~10% 초과한 값(0.5~1프레임 체류) → ③ 최종 목표값. ②→③ 구간에 ease-out을 적용하면 자연스러운 settle이 된다. 더 정교하게 하려면 바운스 Expression을 사용한다.
실기 드릴 1문항
edit실기 드릴 · 단답형
일반적인 UI 모션에서 오버슛의 적절한 크기는 목표값의 몇 %인가?