모션 프롬프트 ④ 스태거 · 홀드 · 비트 싱크 — 시간을 나누는 법

앞 글까지는 물체 하나를 다뤘습니다. 이번은 여럿을 어떻게 늘어놓느냐, 그리고 언제 멈추느냐입니다.

스태거 — 다 같이 말고 한 줄씩

맨 위 그림에서 왼쪽은 다섯 줄이 동시에 나타납니다. 오른쪽은 0.07초씩 늦게 나타납니다.

왼쪽은 덩어리가 불쑥 튀어나온 느낌이고, 오른쪽은 눈이 위에서 아래로 따라갑니다. 스태거는 시선의 순서를 정하는 기법입니다.

목록, 표의 행, 카드 격자, 메뉴 항목 — 여러 개가 한꺼번에 나타나는 자리면 거의 전부 여기에 해당합니다.

지연 값이 개수에 따라 달라집니다

이게 프롬프트에서 제일 자주 틀리는 자리입니다. 지연을 고정값으로 주면 항목이 많아질 때 마지막이 너무 늦게 나옵니다.

기준은 마지막 항목이 0.5초 안에는 시작되는 것입니다. 그보다 늦으면 기다리는 느낌이 듭니다.

카드 목록이 나타날 때 위에서부터 40ms씩 늦게, 각각 ease-out 280ms로 해 줘. 항목이 열 개가 넘으면 지연을 25ms로 줄여 줘.

홀드 — 아무것도 안 하는 구간

위쪽 점은 쉬지 않고 흐릅니다. 아래쪽은 눈금마다 멈춥니다. 멈추는 순간이 있어야 리듬이 읽힙니다.

홀드는 게을러서 비워 둔 구간이 아니라 앞의 동작을 눈에 새기는 구간입니다. 만화의 한 칸을 오래 보여 주는 것과 같습니다.

화면 UI에서 홀드가 필요한 자리는 대개 이렇습니다.

• 무언가 성공했을 때 — 체크 표시가 나타나고 0.4~0.6초 그대로 있다가 사라짐
• 숫자가 바뀐 뒤 — 새 값이 잠깐 강조된 채 머무름
• 여러 단계를 연달아 보여 줄 때 — 단계 사이에 0.2초씩

비트 싱크 — 박자에 붙입니다

위 그림의 아래쪽은 눈금 네 개에 맞춰 움직입니다. 이게 비트 싱크입니다.

음악이 없어도 씁니다. 일정한 간격이 있으면 그것이 박자입니다. 숫자가 올라갈 때, 단계가 넘어갈 때, 로딩 점이 깜박일 때 전부 같은 원리입니다.

프롬프트에는 간격을 숫자로 줍니다.

세 단계를 500ms 간격으로 하나씩 켜 줘. 켜질 때마다 살짝 튀었다가 제자리.

박자가 있으면 다음이 언제 올지 몸이 예측합니다. 예측이 맞으면 편안하고, 어긋나면 불안합니다. 로딩 표시를 불규칙하게 만들면 안 되는 이유가 이것입니다.

안 되는 것

• 스태거 지연이 0.1초를 넘으면 한 목록이 아니라 따로 노는 조각들로 보입니다
• 모든 목록에 스태거를 넣으면 안 됩니다. 자주 바뀌는 목록(검색 결과, 필터 결과)에 넣으면 매번 기다려야 해서 금세 거슬립니다. 처음 한 번만 넣는 편이 낫습니다
• 홀드가 1초를 넘으면 멈춘 게 아니라 고장 난 것으로 보입니다
• 비트 싱크를 실제 음악에 맞출 때는 BPM을 숫자로 줘야 합니다. "음악에 맞춰"라고만 하면 AI는 임의의 간격을 고릅니다

확인하지 못한 것

위 지연 값은 화면 UI에서 널리 쓰이는 범위입니다. 저사양 기기에서는 같은 값이라도 프레임이 떨어져 다르게 느껴집니다. 실기기로 재 보지 않고는 단정할 수 없습니다.

정리

• 스태거는 시선의 순서를 정합니다. 지연은 항목이 많을수록 짧아야 합니다
• 기준은 마지막 항목이 0.5초 안에 시작되는 것입니다
• 홀드는 앞 동작을 눈에 새기는 구간입니다. 0.4~0.6초, 1초는 넘기지 않습니다
• 비트 싱크는 간격을 숫자로 줍니다. 예측이 맞아야 편안합니다
• 자주 바뀌는 목록에는 스태거를 넣지 않습니다