오버슛 & 셋틀 커브
목표치를 살짝 초과한 뒤 복귀 — 생동감의 비밀 무기.
오버슛(Overshoot)은 디즈니 12원칙 중 Follow-through의 디지털 구현이다. 공이 착지할 때 살짝 눌렸다가 올라오듯, 모든 자연스러운 움직임에는 '넘침과 복귀'가 있다. 이 패턴 하나만 추가해도 모션의 생동감이 급상승한다.
오버슛(Overshoot)은 값이 최종 목표를 넘어선 뒤 되돌아오는 패턴이다. 예: Position 500px로 이동할 때, 520px까지 갔다가 500px로 돌아온다. 셋틀(Settle)은 오버슛 후 미세한 진동이 감쇠하며 안정되는 과정이다.
| 단계 | Value Graph 모양 | 키프레임 값 예시 (목표: 500) |
|---|---|---|
| 접근 | 급상승 커브 | 0 → 500 (빠르게) |
| 오버슛 | 목표선 초과 | 500 → 520 |
| 1차 복귀 | 목표선 아래로 살짝 | 520 → 495 |
| 셋틀 | 목표선 수렴 | 495 → 500 |
오버슛 양: Scale이면 5~10%, Position이면 전체 이동 거리의 3~5%가 적당하다. 너무 크면 만화 같고, 너무 작으면 눈에 안 띈다. 오버슛 후 셋틀까지 포함하면 보통 키프레임 3~4개가 필요하다.
AE에서 오버슛을 만드는 두 가지 방법이 있다. ① 수동 키프레임: 목표값 → 초과값 → 복귀값 순서로 3~4개 키프레임을 찍고 각각 Bezier로 다듬기. ② 표현식: `elasticOut` 또는 커스텀 `overshoot` 표현식을 적용. 수동이 더 정밀하고, 표현식이 더 빠르다.
간단 오버슛 표현식 — Value Graph를 수동으로 만들기 귀찮다면, 키프레임 2개만 찍고 이 표현식을 적용한다: AE에서 Position 등 속성에 `loopOut("continue")` 대신 커뮤니티에서 공유되는 `Inertial Bounce` 표현식을 쓰면 자동 오버슛+감쇠가 생긴다. 단, 원리를 이해하고 쓸 것.
오버슛 패턴은 디즈니 12원칙 중 어떤 원칙의 디지털 구현인가?