제품 모션 그래픽에 맞는 이징을 고르는 법

두 패널이 같은 거리를 같은 시간에 이동해도 느낌은 완전히 다를 수 있습니다. 하나는 누군가 조심스럽게 놓은 듯 도착합니다. 다른 하나는 보이지 않는 벽에 부딪히는 것처럼 보입니다. 또 다른 패널은 목적지를 지나쳤다가 돌아오면서 평범한 인터페이스 변화를 작은 공연처럼 만듭니다.

그 차이는 흔히 애니메이션 이징(easing)에서 나옵니다. 이징은 경과 시간을 시작 상태와 끝 상태 사이의 진행률로 바꾸는 함수입니다. 하지만 유행하는 프리셋 목록에서 이징을 고르는 방식으로는 제품 모션을 안정적으로 연출하기 어렵습니다. 장식용 카드에서는 멋져 보이는 곡선이 가격을 읽기 어렵게 만들거나, 커서 동작과 그 결과가 서로 무관해 보이게 할 수 있습니다.

더 나은 출발점은 움직임의 역할입니다. 정보를 화면 안으로 가져오는 것인지, 무언가를 치우는 것인지, 두 상태를 연결하는 것인지, 실제 값을 추적하는 것인지, 배경 움직임을 이어 가는 것인지부터 정하세요. 그러면 곡선은 스타일 이름이 아니라 실용적인 도구가 됩니다.

인터페이스 전환은 도중에 끊기는 상황도 처리해야 하지만 렌더링된 영상은 고정된 타임라인을 따릅니다. 인터랙티브 예시에서 시각적 판단의 원리를 가져오되, 자신의 장면에서 다음에 일어날 동작을 기준으로 평가하세요.

이징 함수가 무엇을 제어하는지 이해하기

간단한 움직임을 생각하며 0에서 시작해 1에서 끝나는 진행률 값을 떠올려 보세요. 물체가 왼쪽 가장자리에서 중앙으로 이동할 수도 있고, 작은 카드에서 큰 패널로 커질 수도 있으며, 투명한 상태에서 불투명해질 수도 있습니다. 이징은 각 순간에 진행률이 얼마나 빠르게 변하는지 결정합니다.

선형 진행은 같은 시간 동안 같은 양만큼 변합니다. ease-out은 처음에 빠르게 진행하다가 목적지 근처에서 느려집니다. ease-in은 그 반대입니다. ease-in-out은 양 끝에서 느리고 중간에서 더 빠르게 진행합니다. 이 설명은 진행률에 관한 것이며, 특정 거리나 시각 효과 자체를 뜻하지는 않습니다.

마지막 구분은 중요합니다. 곡선마다 고정된 체감 속도가 있는 것은 아닙니다. 같은 곡선이라도 패널을 0.5초에 600픽셀 이동시키는 것과 60픽셀 이동시키는 것은 인상이 다릅니다. 마찬가지로 같은 곡선으로 불투명도를 바꾸는 것과 위치를 크게 바꾸는 것도 지각적으로 같지 않습니다.

MDN의 이징 문서는 3차 베지에 함수와 계단 함수를 포함해 시간 진행률과 애니메이션 값의 관계를 설명합니다. 프리셋 이름에 의존하기보다 작동 원리를 살펴보는 데 예시가 유용합니다. 기술적 정의는 MDN의 easing-function 문서에서 확인할 수 있습니다.

화려함보다 도착 방식을 먼저 정하기

제품 영상의 요소는 대체로 시청자가 내용을 살펴봐야 하기 때문에 등장합니다. 따라서 이동이 얼마나 화려한지보다 어떻게 도착하는지가 더 중요합니다.

새 보고서가 담긴 패널을 생각해 보세요. ease-out으로 등장시키면 패널을 신속하게 보여 주면서 마지막에는 차분하게 자리를 잡도록 할 수 있습니다. 시청자는 일찍부터 내용의 위치를 찾기 시작하고, 이후 안정적인 결과를 보게 됩니다. ease-in으로 등장시키면 패널이 출발 지점 근처에 더 오래 머물다가 읽을 위치에 도착할 무렵 가장 빠르게 움직일 수 있습니다. 곧바로 다음 지시가 시작된다면 갑작스럽게 느껴질 수 있습니다.

어느 곡선이 본질적으로 정답인 것은 아닙니다. 다음에 해야 할 지각적 과제를 움직임이 돕는지가 중요합니다. 작업을 마친 작은 표시가 퇴장한다면 가속하며 사라지는 것이 적절할 수 있습니다. 정확히 읽어야 하는 제목이 등장한다면 마지막에 갑자기 멈추는 방식은 정당화하기가 더 어렵습니다.

상태 변화를 명확히 보여 주는 가장 단순한 등장부터 시작하세요. 그런 다음 자리를 잡은 화면을 살펴봅니다. 내레이션이 그 텍스트에 의존하기 전에 글자가 완전히 읽히나요? 패널이 원래 컨트롤과의 관계를 유지하는 위치에 멈추나요? 위치가 고정된 뒤에도 그림자나 흐림이 계속 변하나요? 이런 부차적인 속성 때문에 실제로 읽을 수 있는 순간이 늦어질 수 있습니다.

애니메이션은 세련되게 느껴지면서도 정작 내용으로 주의를 넘겨주는 데는 실패할 수 있습니다. 목표는 단순히 매끄럽게 만드는 것이 아니라 도착하는 순간을 유용하게 만드는 것입니다.

거리, 시간, 곡선을 함께 평가하기

등장이 너무 거칠게 느껴지면 흔히 먼저 시간을 늘리려 합니다. 도움이 될 수 있지만 장면 전체가 굼떠질 수도 있습니다. 적어도 세 가지를 조절할 수 있습니다. 요소가 얼마나 멀리 이동하는지, 얼마나 오래 걸리는지, 진행률을 어떻게 배분하는지입니다.

레이블이 화면 바깥 먼 곳에서 미끄러져 들어온다고 해 봅시다. 긴 경로는 그 레이블에 필요한 것보다 더 큰 시각적 소란을 만들 수 있습니다. 이동 거리를 줄이면 장면의 빠른 흐름을 유지하면서 움직임을 차분하게 만들 수 있습니다. 이어서 절제된 곡선으로 마무리하면 긴 지연을 추가할 필요도 없습니다.

큰 UI 확대에서는 반대 문제가 생길 수 있습니다. 짧은 시간에 크기가 크게 변하면 시청자는 내용의 위치를 갑자기 다시 찾아야 합니다. 이징을 조금 바꾸는 것만으로는 부족할 수 있습니다. 확대 폭을 줄이거나, 맥락을 보여 주는 중간 화면을 넣거나, 전환을 늘린 뒤 실제 유지 구간을 제공해야 할 수 있습니다.

비교할 때는 변수 두 개를 고정하세요. 먼저 거리와 시간을 같게 두고 곡선을 비교합니다. 다음에는 고른 곡선을 유지한 채 시간을 바꿉니다. 마지막으로 경로 자체가 과도하지 않은지 묻습니다. 세 가지를 한꺼번에 바꾸면 결과는 더 좋아져도 무엇이 문제를 해결했는지는 배우기 어렵습니다.

완벽한 시간을 정리한 보편적인 표는 필요하지 않습니다. 눈앞의 움직임을 통제된 방식으로 이해할 방법이 필요합니다. 유용한 모션 브리프는 이동의 느낌과 함께 목적지, 그리고 원하는 읽기 시작 시점도 설명합니다.

의미에 무리가 없을 때만 오버슈트 사용하기

오버슈트(overshoot)는 움직임에 탄력, 장난스러움, 활기를 줄 수 있습니다. 동시에 사건 하나를 더 만듭니다. 물체가 목적지를 넘어갔다가 돌아옵니다. 그 사건은 주의를 소모하며, 암시하는 동작의 의미도 바꿀 수 있습니다.

장식용 배지에는 바운스가 잘 맞을 수 있습니다. 하지만 차트 값, 커서 위치, 진행률 표시줄, 가격에는 그렇지 않을 수 있습니다. 막대가 최종값을 잠깐 넘어서면 시청자가 일시적인 상태를 데이터로 오해할 수 있습니다. 커서가 작은 컨트롤을 지나쳤다가 돌아오면 녹화된 동작이 부정확해 보일 수 있습니다. 숫자가 크게 커졌다가 자리를 잡으면 단위나 조건 문구가 시각적으로 분리될 수 있습니다.

그 오버슈트가 물체의 성격에 맞는지, 아니면 타임라인이 밋밋해 보여서 추가했는지 물어보세요. 물리적 비유는 관계를 명확히 할 때 유용합니다. 모든 요소가 목적과 관계없이 같은 스프링처럼 움직이면 오히려 산만해집니다.

스프링 시뮬레이션과 출력이 목적지를 넘는 고정 이징 곡선도 구분하세요. 둘 다 탄력적으로 보일 수 있지만 작동 원리는 다릅니다. 스프링은 강성이나 감쇠 같은 속성으로 설명할 수 있고, 동작은 구현에 따라 달라집니다. 3차 베지에 곡선은 정해진 진행 구간을 매핑합니다. 한 도구의 매개변수 이름이 다른 도구에도 그대로 통한다고 가정하지 마세요.

Material의 최신 모션 지침에는 M3 Expressive를 위한 물리 기반 시스템이 포함되어 있습니다. 실제 사용 가능 여부와 적용 방식은 사용하는 구현에 따라 다릅니다. 이는 ‘Material 이징’이 영원히 고정된 하나의 곡선이 아닌 이유를 보여 주는 좋은 예입니다. 참고 자료가 어느 세대와 구현에 속하는지 확인하세요. Material의 모션 개요는 현재 시스템의 범위를 설명합니다.

연속적인 움직임의 의미 유지하기

선형 움직임은 기계적으로 보일 때가 많지만, 바로 그 기계적인 느낌이 필요한 경우도 있습니다. 일정한 속도의 회전, 컨베이어 같은 패턴, 타임라인 표시기는 일정한 진행이 필요할 수 있습니다. 반복마다 ease-in-out을 넣으면 연결 지점에서 눈에 띄는 머뭇거림이 생길 수 있습니다.

값을 애니메이션으로 보여 줄 때도 같은 문제가 생깁니다. 숫자가 경과 시간을 나타낸다면 장식적인 이징 때문에 시간 자체가 빨라졌다 느려지는 것처럼 보일 수 있습니다. 영상이 실시간을 측정하는 것이 아니라 카운트의 예시를 보여 주는 것이라면 허용될 수 있지만, 그 차이를 의식적으로 선택해야 합니다.

데이터 전환에서는 중간 상태가 무엇을 뜻하는지 결정하세요. 두 값 사이의 보간은 변화를 따라가는 데 도움이 될 수 있지만, 그 사이의 값이 데이터셋에서 관측한 값인 것은 아닐 수 있습니다. 매끄러운 움직임이 실제 과정도 그 지점들에서 연속적으로 측정되었다는 인상을 주어서는 안 됩니다.

커서를 따라가는 카메라 움직임에서는 카메라 곡선과 커서 곡선도 서로 영향을 줍니다. 둘이 독립적으로 이징되면 커서가 화면 안에서 떠다니고 대상이 달아나는 것처럼 보일 수 있습니다. 동작 중에는 카메라를 고정하고 결과 상태로 나중에 이동하는 편이 더 나은 해법일 때도 있습니다.

실제로 원하는 시각적 사건을 설명하는 데 이징을 쓰세요. 일정한 움직임, 정보를 전달하는 전환, 장식적인 강조는 역할이 서로 다릅니다. 하나의 브랜드 프리셋으로 일관성을 만들 수는 있지만, 움직임이 전달하는 의미에 따라 예외는 여전히 필요합니다.

관련 요소를 하나의 사건으로 조율하기

패널, 제목, 그림자 각각에 아름다운 곡선을 적용해도 함께 보면 따로 노는 느낌이 날 수 있습니다. 제목이 자신을 담는 표면보다 먼저 도착하거나, 그림자가 너무 늦게 따라와 패널의 깊이가 갑자기 변하는 것처럼 보일 수 있습니다.

관련 속성은 하나의 지각적 사건으로 다루세요. 시청자가 무엇을 먼저 이해해야 하는지, 어떤 요소가 한 단위로 움직여야 하는지 정합니다. 문장을 담은 패널은 이동 중에도 내부 관계를 안정적으로 유지하는 편이 도움이 될 때가 많습니다. 주된 표면이 자리를 잡은 뒤에는 의도적인 시차로 부차적인 내용을 드러낼 수 있습니다.

도구에서 쉽게 할 수 있다는 이유로 모든 자식 요소에 개별 등장을 주는 것은 실수입니다. 그러면 시청자는 목적지 하나 대신 여러 궤적을 추적해야 합니다. 애니메이션이 더 많다고 반드시 위계가 더 강해지는 것은 아닙니다.

제품 시연에서는 커서 동작과 UI 결과를 세심하게 조율하세요. 버튼을 누른 뒤 상관없는 탄성 효과가 나타나면 장면이 인위적으로 느껴질 수 있습니다. 동작, 반응, 안정된 결과라는 인과관계를 유지하세요. 원본 녹화에 이미 인터페이스 자체의 전환이 들어 있다면 큰 효과를 또 추가할 경우 이를 중복하거나 모순되게 만들 수 있습니다.

전체 사건을 정상 속도로 검토하세요. 천천히 타임라인을 훑는 것은 겹침을 찾는 데 유용하지만, 각 요소를 살펴볼 시간이 생겨 과도한 시차도 우아하게 느껴질 수 있습니다. 실제 시청자는 내레이션과 다른 정보가 주의를 놓고 경쟁하는 가운데 시퀀스를 한 번 봅니다.

AI 에이전트가 실행할 수 있는 지시 주기

‘애니메이션을 더 매끄럽게 해 줘’라고 하면 많은 변수가 열려 있습니다. 에이전트는 장면을 늘리거나, 바운스를 넣거나, 거리를 줄이거나, 모든 곡선을 바꾸거나, 움직이는 내용에 흐림을 넣을 수 있습니다. 이 중 일부는 원래 목표를 해칠 수 있습니다.

더 유용한 지시는 사건과 원하는 결과를 구체적으로 말합니다. ‘보고서 패널을 읽을 위치로 빠르게 가져오고, 멈추기 전에 감속해 줘. 텍스트는 패널에 대해 고정된 위치를 유지해 줘. 현재 최종 위치와 2초 유지 구간은 보존해 줘.’ 이렇게 하면 에이전트가 수정할 움직임과 지켜야 할 경계가 명확해집니다.

비교를 요청할 때는 시간과 경로가 같은 대안들을 요청하세요. 그러면 이징에 관한 판단만 분리할 수 있습니다. 시퀀스의 나머지를 바꾸기 전에 대안부터 검토하세요. 동작 방식을 고른 뒤에는 곡선 이름만 적기보다 어떤 사건을 위한 것인지 함께 기록하세요.

소스로 정의한 애니메이션을 쓰는 프로젝트라면 타이밍 제어 근처에 이름 있는 값으로 곡선을 두세요. 나중에 무엇이 바뀌었는지 추적하기 쉬워집니다. 코드 구조 자체가 창작 결과는 아니지만, 작은 이징 수정이 무관한 장면으로 예측 불가능하게 번지는 것을 막을 수 있습니다.

수치 비교를 신중하게 해석하기

예시로 400픽셀을 0.6초에 이동하는 움직임을 생각해 보세요. 이징 곡선과 관계없이 평균 속도는 초당 약 667픽셀입니다. 곡선이 바꾸는 것은 그 속도가 시간에 따라 배분되는 방식입니다.

정규화한 시간에 대해 ‘1에서 시간 값을 뺀 뒤 세제곱한 값을 다시 1에서 빼는’ 단순한 3차 ease-out을 사용하면, 초기 속도는 평균의 세 배이며 목적지에서 0으로 줄어듭니다. 선형 움직임은 내내 평균 속도를 유지합니다.

이 비교는 ease-out이 빠르면서도 절제되어 보일 수 있는 이유를 설명합니다. 변위의 더 많은 부분을 초반에 이동하고 목적지에는 더 부드럽게 접근하기 때문입니다. 같은 곡선이라도 경로가 길면 과도해질 수 있는 이유도 설명됩니다. 시간이 고정되어 있으면 거리가 늘어날수록 초반의 빠른 움직임도 커집니다.

400픽셀 이동에서 시간이 절반 지난 화면을 보세요. 0.3초 후 선형 진행은 200픽셀을 이동했습니다. 3차 ease-out은 350픽셀을 이동해 나머지 절반의 시간에는 50픽셀만 남습니다. 길이는 같지만 패널은 이미 목적지에 훨씬 가까이 있습니다.

목적지를 빨리 알아볼 수 있어야 한다면 이 차이가 유용합니다. 시청자가 정확한 경로를 따라가거나 이동 중 정보를 살펴봐야 한다면 덜 유용할 수 있습니다. 어느 순간에 안정감이 필요한지 결정하고, 그 순간에 실제 유지 구간을 주세요. ease-out으로 바꾼다고 유지 구간이 저절로 생기는 것은 아닙니다. 목적지에 접근하는 방식이 달라질 뿐입니다.

숫자는 움직임의 문제를 진단하는 데 사용하고, 보편적인 목표 속도를 고르는 데 쓰지는 마세요. 패널이 처음에 너무 거칠게 움직인다면 마지막 감속을 더 늘리는 것보다 경로를 줄이는 편이 효과적일 수 있습니다. 시간이 짧은데도 굼떠 보인다면 거의 움직이지 않는 데 구간의 얼마나 많은 부분을 쓰는지 살펴보세요. 곡선, 경로, 목적지는 하나의 사건으로 판단해야 합니다.

최종 움직임을 실제 크기로 판단하기

큰 미리보기에서는 과도한 이동도, 최종 화면의 작은 글씨도 눈에 덜 띌 수 있습니다. 내보낸 장면을 실제 플레이어 크기로 보세요. 애니메이션이 끝나는 순간뿐 아니라 어디를 봐야 할지 알게 되는 순간에 주목하세요.

그다음 효과를 덜어낸 버전을 시험해 보세요. 오버슈트를 없애거나, 경로를 줄이거나, 표면은 고정한 채 강조만 바꿔 보세요. 제품을 이해하기 쉬워진다면 더 단순한 버전을 쓸 이유가 생긴 것입니다. 더 풍부한 움직임이 중요한 관계를 설명한다면 유지하되, 시청자가 그 결과를 활용할 시간을 충분히 주세요.

모션 그래픽에 가장 좋은 이징은 사건을 일관되게 느끼도록 만들고, 중요한 정보를 살펴볼 수 있는 상태로 남겨 두는 이징입니다. 시청자가 곡선 자체를 의식하지 않고 동작을 따라갈 수 있다면 그 곡선은 제 역할을 한 것입니다.