같은 여정이 다르게 느껴지는 이유

진행은 프레임 수가 아니라 함수다

애니메이션 시간 동안 u가 0에서 1로 간다고 하자. 진행 함수는 u를 이동한 거리 비율로 바꾼다. 선형 보간은 u 자체를 써 같은 시간에 같은 거리를 간다. 예측하기 쉽고 일정하게 변하는 다른 양과 동기화하기 좋다.

비교는 거리 1단위와 시간 1초로 단위를 명시한다. 세 곡선은 모두 위치 0에서 출발해 1에서 끝나며 넘어서지 않는다. 누가 먼저 도착하느냐가 아니라 같은 예정된 여정에서 위치, 속도, 가속도가 어떤지가 질문이다.

정규화된 시간은 구현에서도 중요한 차이를 만든다. 프레임이 그려질 때마다 일정량을 더하기보다, 실제 경과 시간을 예정된 지속 시간으로 나누어 진행률을 계산하는 것이다. 한 프레임이 늦어도 다음 표본은 예정된 시점을 나타낼 수 있다. 시간 관계는 유지되지만, 놓친 위치를 건너뛰면서 눈에 띄는 점프가 생길 수 있다. 시계가 정확하다고 모든 중간 화면이 표시되었다는 뜻은 아니다.

Smoothstep은 출발을 바꾼다

3차 smoothstep은 3u 제곱에서 2u 세제곱을 뺀 곡선이다. 양 끝 기울기가 0이라 정지 위치와 연결할 때 속도가 순간적으로 뛰지 않는다. 처음에는 천천히 올라가고 중간에서 빨라졌다가 다시 느려진다.

이 예의 최고 속도는 초당 1.5 거리 단위로 선형의 1보다 크다. 느리게 움직이는 데 시간을 더 쓰면서 총 거리와 시간을 유지하려면 어느 구간에서는 반드시 더 빨라져야 한다. 부드러워 보이는 움직임이 낮은 최고 속도를 뜻하지는 않는다.

5차 곡선은 경계를 한 단계 더 부드럽게 한다

여기서 최소 저크 곡선은 10u 세제곱에서 15u 네제곱을 빼고 6u 다섯제곱을 더한다. 양 끝 속도와 가속도가 0이다. 최고 속도는 초당 1.875단위로 3차보다 높다. 부드러운 진입과 종료에 더 많은 시간을 쓰기 때문이다.

저크는 가속도의 변화율이다. 양 끝 위치와 시간, 끝점 속도 및 가속도 0을 고정하면 이 다항식은 1차원 운동에서 저크 제곱의 적분을 최소화한다. 이름은 이 정확한 수학 성질에서 온다. 모든 인터페이스가 이를 써야 하거나 모든 인간 운동이 이를 따른다는 뜻은 아니다.

최소 저크는 모든 순간의 저크가 0이라는 뜻이 아니다. 5차 곡선을 세 번 미분하면 정규화된 단위에서 60 − 360u + 360u²가 된다. 양 끝의 값은 60이지만, 구간 밖에서 정지해 있는 물체의 저크는 0이다. 위치와 속도, 가속도가 연속적으로 이어져도 저크는 뛰어오를 수 있다. 최소화하는 것은 이동 전체에 대한 적분이지, 매 순간 모든 도함수가 가능한 최솟값이라는 약속이 아니다.

예쁜 곡선뿐 아니라 미분을 본다

위치 그래프는 모두 단정해 보인다. 속도 그래프는 다른 최고값을, 가속도 그래프는 다른 끝점 행동을 보여 준다. 선형 운동은 구간 안 가속도가 0이지만 정지와 연결하려면 시작과 끝에서 속도가 급변한다. 그 경계 충격은 유한값으로 그래프에 그리지 않았다.

Smoothstep의 끝점 가속도는 초 제곱당 거리 단위로 +6과 −6이다. 구간 밖에서 정지한다면 연결점에서 가속도가 뛴다. 5차는 0 가속도에 매끄럽게 연결되지만 더 높은 미분에는 별도 경계 특성이 있다. 부드러움에는 항상 차수와 연결 조건이 필요하다.

시간이 물리적 요구를 바꾼다

그래프는 정규화 예시이며 모든 거리의 고정 조리법이 아니다. 거리를 D, 시간을 T로 바꾸면 속도는 D/T, 가속도는 D/T의 제곱이 아니라 D/T²로 스케일된다. 같은 경로와 곡선에서 시간을 절반으로 하면 속도는 두 배, 가속도는 네 배다.

물리적 운동 제어에서는 예쁜 이징 모양만으로 한계를 판단할 수 없기에 중요하다. 시각적으로도 긴 전환에서 차분한 곡선이 짧게 압축되면 급해 보일 수 있다. 프레임 간격과 화면 응답도 제약을 더하지만 연속 방정식은 이를 모델링하지 않는다.

화면 크기의 예로 0.6초 동안 300픽셀을 이동시켜 보자. 연속 곡선의 최고 속도는 선형이 초당 500픽셀, smoothstep이 750픽셀, 최소 저크가 937.5픽셀이다. 뒤의 두 곡선에서 가속도 크기의 최댓값은 각각 약 5,000과 4,811픽셀/초²이다. 최고 속도의 순서와 다르다. 이는 지정한 곡선이 요구하는 값이지, 디스플레이 측정치나 물리적 구동기에 권장하는 설정이 아니다.

움직임이 전달할 내용을 고른다

움직이는 타임라인이나 일정하게 보일 과정에는 등속이 적절할 수 있다. 부드럽게 자리 잡는 동작은 물체가 도착해 멈춘다는 인상을 준다. 오버슈트와 바운스는 다른 규칙이 필요하며 기계적에서 자연스러움으로 이어지는 보편적 순위보다 맥락이 중요하다.

계산은 지각 실험을 주장하지 않고 선택을 위한 언어를 준다. 위치로 어디 있는지, 속도로 얼마나 빨리 가는지, 가속도로 속도가 어떻게 바뀌는지 보자. 이를 나누면 이징은 이름만 보고 고르는 장식 프리셋이 아니라 의도적인 운동 배분이 된다.

유한한 프레임 시퀀스는 무엇을 표본으로 삼을까?

300픽셀 이동을 초당 정확히 60번의 등간격 시점에서 표본화한다. 0.6초 구간에는 36개의 이동 간격과 양 끝을 포함한 37개의 위치가 있다. 선형은 한 간격에 약 8.333픽셀씩 이동한다. smoothstep의 첫 이동은 0.682픽셀, 최소 저크의 첫 이동은 약 0.062픽셀뿐이다. 소수 위치는 이 계산에서 의미가 있지만, 실제 렌더러는 이를 다른 방식으로 표현하거나 반올림할 수 있다.

중간 구간은 초반에 적게 움직인 거리를 만회한다. 표본 사이의 가장 큰 이동량은 smoothstep이 약 12.487픽셀, 최소 저크가 약 15.593픽셀이다. 이 유한 차이는 한 시점의 연속 속도가 아니라 일정 시간 구간 동안의 이동을 나타낸다. 새 그림은 36개의 이동량을 모두 그려 부드러운 양 끝과 더 큰 이동을 요구하는 중간을 함께 살필 수 있게 한다. 총 프레임 수만 세면 움직임의 중요한 부분을 놓치는 이유이기도 하다.

100밀리초가 지나면 세 곡선은 같은 순서로 50.000, 22.222, 10.648픽셀 이동한다. 따라서 도착 시각이 같아도 매우 완만한 출발은 눈에 보이는 진행을 늦출 수 있다. 조작에 빠르게 응답해야 하는 컨트롤이라면 마무리뿐 아니라 초반 궤적도 고려하자. 물리적 이동에서는 속도, 가속도, 저크와 실제 기구를 각각 확인해야 한다. 이 계산은 상충 관계를 드러내지만, 어느 한 곡선이 언제나 더 반응성이 좋거나 편안하다고 단정하지 않는다.