애니메이션 이징: 이즈 인, 이즈 아웃, 그리고 곡선
이징은 애니메이션 값이 일정한 속도로 움직이는 대신, 키프레임 사이에서 어떻게 가속하고 감속하는지를 나타냅니다. 이징을 통해 움직임은 부드럽게 시작하고, 부드럽게 멈추거나, 또는 둘 다 되도록 할 수 있습니다 — 무게가 있는 물체가 실제로 움직이는 방식처럼 말이죠 — 이는 두 키 사이의 보간 곡선에 의해 설정됩니다.
간단한 답변
이징은 키프레임 사이의 가속도를 제어합니다. 리니어(선형) 움직임은 일정한 속도로 움직이며 갑자기 멈추지만, 이징이 적용된 움직임은 한 키에서 가속하고 다음 키로 감속합니다. 도구마다 「이즈 인」의 의미가 다르기 때문에, 「느린 시작」(가속) 또는 「느린 끝」(감속)이라고 말하는 것이 가장 명확합니다. 각 키의 베지어 핸들은 이징을 정확하게 형성하며, 키 값을 넘어 당겨진 핸들은 오버슈트를 만듭니다.
일정한 속도가 부자연스러워 보이는 이유
실제 물체는 질량을 가집니다. 자동차는 움직이는 즉시 순항 속도에 도달하지 않으며, 문은 프레임에서 갑자기 멈추지 않습니다. 최고 속도로 시작하고 멈추는 움직임은 관객이 그 이유를 정확히 말할 수 없을 때조차도 기계적이거나, 무게가 없거나, 컴퓨터로 생성된 것처럼 보입니다.
Disney 애니메이터들은 이 원리를 슬로우 인(slow in)과 슬로우 아웃(slow out)이라고 명명했습니다 — 이는 『The Illusion of Life』에 제시된 애니메이션 12가지 원칙 중 하나입니다. 움직임의 시작과 끝 부분에 더 많은 드로잉을, 중간 부분에 더 적은 드로잉을 배치하여 가속 및 감속 효과를 만듭니다. 3D 소프트웨어에서는 추가 드로잉 대신 키 사이의 곡선에서 동일한 효과를 얻을 수 있습니다.
이즈 인과 이즈 아웃은 반대 의미를 가집니다
이것은 가장 흔한 혼란의 원인이며, 여러분의 잘못이 아닙니다. CSS와 Robert Penner의 널리 복제된 이징 함수에서 이즈 인은 움직임이 느리게 시작하여 빨라지는 것을 의미하고, 이즈 아웃은 빠르게 시작하여 멈추는 것을 의미합니다. 이 곡선은 두 키 사이의 전체 움직임에 적용됩니다.
After Effects와 많은 키 기반 도구에서는 이징이 키에 속합니다. 키로 이징하는 것은 움직임이 키에 도달할 때 속도를 늦추는 것을 의미하고, 키에서 이징하는 것은 움직임이 키를 떠날 때 느리게 시작하는 것을 의미합니다. 따라서 마지막 키에 적용된 After Effects의 이즈 인과 움직임에 적용된 CSS의 이즈 아웃은 반대되는 이름에도 불구하고 동일한 감속 효과를 냅니다. 움직임을 「느린 시작」, 「느린 끝」, 「양쪽 끝에서 느리게」와 같이 설명하면 이러한 모호함을 피할 수 있습니다.
보간 유형과 베지어 핸들
리니어(선형) 보간은 키 사이에 직선을 그립니다. 이는 일정한 속도와 각 키에서의 갑작스러운 변화를 의미합니다. 콘스턴트(일정), 스텝(계단식) 또는 홀드(유지) 보간은 다음 키까지 값을 유지한 다음 점프하며, 이는 블로킹, 깜빡임, 그리고 갑자기 전환되어야 하는 모든 것에 유용합니다. 베지어 또는 스플라인 보간은 키를 통해 부드러운 곡선을 그리며, 이징이 적용되는 곳입니다.
베지어 키에는 두 개의 핸들이 있습니다. 하나는 키에 도달하는 곡선을 제어하고, 다른 하나는 키를 떠나는 곡선을 제어합니다. 평평한 핸들은 키에서 속도가 0임을 의미합니다 — 즉, 이징입니다. 핸들이 길수록 움직임의 더 많은 부분에서 그 느림을 유지합니다. 일직선상의 핸들은 키를 부드럽게 통과하고, 분리된 핸들은 바운스처럼 급격한 방향 변화를 만듭니다. 핸들을 당겨 곡선이 키 값을 넘어 오버슈트하게 만들면, 움직임이 목표를 지나쳤다가 다시 돌아옵니다.
표준 이징 패밀리
2000년대 초에 발표된 Penner의 이징 방정식은 이름 있는 곡선들의 공통 어휘가 되었습니다. 사인(sine), 쿼드(quad), 큐빅(cubic), 쿼트(quart), 퀸트(quint), 엑스포(expo), 서크(circ)가 있으며, 각각 인(in), 아웃(out), 인-아웃(in-out) 형태로 존재합니다. 거의 느껴지지 않는(사인) 것부터 격렬한(엑스포) 것까지 다양합니다. 백(Back)은 안정화되기 전에 목표를 오버슈트합니다. 대부분의 모션 도구와 CSS 라이브러리는 이 세트의 일부 버전을 제공하며, 일반적으로 큐빅 베지어 곡선으로 근사화됩니다.
엘라스틱(Elastic)과 바운스(Bounce)는 예외입니다. 이들은 한 번의 움직임 내에서 여러 번 진동하는데, 이는 단일 큐빅 베지어로는 불가능합니다. 따라서 도구들은 여러 키로 이들을 구성하거나 절차적으로 생성합니다.
어떤 이징을 사용할까
시작하고 멈추는 대부분의 움직임에는 양쪽 끝에 이징을 적용하세요. 카메라 푸시, 제자리로 미끄러져 들어가는 물체, 고개 돌리기 등입니다. 도착하여 안정화되는 것에는 느린 끝을 사용하고, 발사되는 것에는 느린 시작을 사용하세요. 일정한 움직임 — 회전하는 선풍기, 컨베이어, 반복 사이클의 중간 — 에는 리니어를 유지하고, 움직임이 곧바로 통과해야 하는 키에도 리니어를 사용하세요. 스냅, 깜빡임, 블로킹에는 홀드를 사용하세요.
Mixos Studio에서의 이징
키를 선택하면 타임라인 헤더에 Linear, Ease in, Ease out, Ease, Hold 옵션이 나타납니다. 이들은 키 기반 규칙을 따릅니다. Ease in은 키에 도달하는 움직임을 늦추고, Ease out은 키를 떠나는 움직임을 늦추며, Ease는 이 둘 모두를 수행합니다 — After Effects의 Easy Ease와 같습니다. 타임라인이 활성화된 상태에서 F9는 Ease를, ⇧F9는 Ease in을, ⌘⇧F9는 Ease out을 적용합니다.
「곡선…」을 클릭하면 Penner의 사인(Sine)부터 백(Back)까지의 패밀리가 열리며, 이름뿐만 아니라 느낌으로도 검색할 수 있고, 저장된 모든 곡선도 함께 표시됩니다. 곡선 모드는 트랙을 베지어 핸들로 직접 드래그할 수 있는 곡선으로 그리며, 오버슈트도 포함됩니다. 엘라스틱(Elastic)과 바운스(Bounce)는 의도적으로 곡선 목록에 없습니다. 대신 「+ Motion」 아래의 스프링 및 바운스 생성기가 그러한 종류의 움직임을 만듭니다.
자주 묻는 질문
이즈 인(ease in)과 이즈 아웃(ease out)은 무엇을 의미하나요?
둘 다 점진적인 속도 변화를 설명하지만, 도구마다 반대 의미로 사용됩니다. CSS와 Penner의 함수에서는 ease-in이 느린 시작, ease-out이 느린 끝을 의미합니다. After Effects 및 다른 키 기반 도구에서는 키로 들어갈 때(easing into) 움직임이 느려지고, 키에서 나갈 때(easing out) 움직임이 느려집니다.
선형 보간과 베지어 보간의 차이점은 무엇인가요?
선형 보간은 값을 일정한 속도로 이동시키고 각 키에서 갑자기 변경됩니다. 베지어 보간은 키를 통해 부드러운 곡선을 그리며, 핸들을 사용하여 움직임이 가속 및 감속되는 방식을 제어하는데, 이것이 이징을 가능하게 합니다.
홀드 키(hold key)는 무엇인가요?
상수(계단식) 보간이 적용된 키: 값은 다음 키까지 정확히 그 자리에 머물다가 갑자기 점프합니다. 이는 블로킹, 깜빡임, 컷 등 이동보다는 즉각적인 변화가 필요한 모든 것에 사용됩니다.
애니메이션을 오버슈트하려면 어떻게 해야 하나요?
목표 지점을 넘어선 키와 그 뒤에 안정화 키를 추가하거나, 베지어 핸들을 당겨 곡선이 키 값을 넘어섰다가 돌아오도록 합니다. 백 스타일 이징 곡선은 프리셋과 동일한 역할을 합니다.
제 애니메이션이 왜 로봇처럼 보이나요?
보통 리니어(선형)이기 때문입니다. 일정한 속도로 움직이며, 각 키에서 갑작스럽게 시작하고 멈춥니다. 시작과 정지에 이징을 적용하고, 움직임의 일부를 몇 프레임씩 오프셋하여 모든 부분이 동시에 움직이지 않도록 하면 대부분의 문제를 해결할 수 있습니다.
움직임에 키를 설정한 다음, 동일한 두 키에 Linear, Ease, Back을 적용해 보세요 — 차이점은 설명하는 것보다 직접 보는 것이 더 쉽습니다.