모션 프롬프트 ② 예비동작 · 팔로스루 · 오버랩 — 움직임의 앞뒤에 시간을 붙입니다

앞 글에서 이징을 봤습니다. 한 물체가 A에서 B까지 어떤 속도로 가느냐였습니다.

이번 셋은 다릅니다. 그 움직임의 앞뒤에 무엇을 붙이느냐입니다.

예비동작 — 가기 전에 반대로 당깁니다

맨 위 그림에서 공 둘은 같은 자리에 같은 시각에 도착합니다. 아래쪽만 출발 직전에 왼쪽으로 잠깐 물러납니다.

그 짧은 순간이 있고 없고가 이렇게 다릅니다.

• 없으면 — 갑자기 사라진 것처럼 보입니다
• 있으면 — 힘이 실려 날아간 것처럼 보입니다

사람은 준비 동작을 보고 다음을 예측합니다. 야구 투수가 팔을 뒤로 빼는 것, 점프하기 전에 무릎을 굽히는 것이 전부 예비동작입니다. 예측할 틈이 없으면 움직임이 아니라 순간이동으로 읽힙니다.

화면에서는 아주 작아도 됩니다. 전체 거리의 5~8% 정도를 반대로, 전체 시간의 15% 정도만 쓰면 충분합니다. 이 그림은 700px 가는 데 52px을 뒤로 뺐습니다.

팔로스루와 오버랩 — 끝이 같이 멈추지 않습니다

같은 물체를 네 조각으로 나눠 봤습니다. 위쪽은 네 조각이 한 덩어리로 움직입니다. 아래쪽은 조각마다 출발이 0.07초씩 늦습니다.

위쪽이 판자 같아 보이는 이유가 여기 있습니다. 현실에서 한 물체의 모든 부위가 동시에 출발하고 동시에 멈추는 일은 없습니다. 팔이 멈춰도 소매는 더 가고, 차가 서도 안테나는 흔들립니다.

두 말은 자주 같이 쓰이지만 가리키는 것이 다릅니다.

그림의 아래쪽은 둘 다 들어 있습니다. 출발이 어긋나고(오버랩), 앞 조각이 선 뒤에도 뒤 조각이 살짝 지나쳤다가 돌아옵니다(팔로스루).

프롬프트에 어떻게 적나

목록이 나타날 때 각 줄이 60ms씩 늦게 시작하게 해 줘. (오버랩) 카드가 멈출 때 그림자와 글자가 20ms 늦게 따라와 멈추게. (팔로스루) 버튼을 누르면 눌리기 전에 2px 살짝 커졌다가 들어가게. (예비동작)

숫자를 적는 것이 핵심입니다. "자연스럽게 시간차를 둬"라고 하면 AI가 고르는 값은 대개 너무 큽니다. 시간차는 생각보다 작아야 합니다.

안 되는 것

• 예비동작을 크게 하면 망설이는 것처럼 보입니다. 힘이 실린 게 아니라 머뭇거린 것이 됩니다
• 오버랩 지연이 100ms를 넘으면 한 물체가 아니라 따로 노는 여러 물체로 보입니다
• 팔로스루를 아무 데나 붙이면 안 됩니다. 단단한 물체(버튼, 카드 테두리)는 팔로스루가 없어야 단단해 보입니다. 늘어지는 것은 부드러운 것입니다 — 그림자, 긴 목록, 글자 꼬리
• 조각을 나눌 수 없는 것에는 오버랩이 없습니다. 한 덩어리인 아이콘에 억지로 넣으면 부서져 보입니다

확인하지 못한 것

위 숫자는 화면 UI에서 널리 쓰이는 범위입니다. 캐릭터 애니메이션이나 큰 화면 연출은 기준이 다릅니다. 저도 화면 UI 바깥에서는 재 보지 않았습니다.

정리

• 예비동작은 가기 전에 반대로 당기는 것. 사람은 준비 동작을 보고 다음을 예측합니다
• 오버랩은 시작을 어긋나게, 팔로스루는 끝을 어긋나게 하는 것입니다
• 셋 다 더 오래 움직이게 하는 게 아니라 시작과 끝을 어긋나게 하는 것입니다
• 시간차는 생각보다 작습니다. 40~120ms 사이입니다
• 단단해야 하는 것에는 붙이지 않습니다