GN⁺: 내가 가장 좋아하는 애니메이션 기법: 지수 평활화 (2023)

지수 평활화를 이용한 애니메이션 트릭

• 애니메이션에 관련된 작업을 시작한 이래로 거의 항상 사용해온 간단한 애니메이션 기법이 있음.
• 이 기법은 카메라 회전 및 이동, 턴 기반 게임 내 인물 이동, UI 요소 이동, 오디오 라이브러리의 볼륨 변화 평활화 등 다양한 곳에 사용됨.
• 이 기법은 새로운 것은 아니며, 이미 들어보거나 사용해본 적이 있을 수 있지만, 몇 가지 예시와 수학적 원리를 설명할 예정임.

토글 버튼

• UI 구성 요소를 만들 때, 예를 들어 토글 버튼을 만든다고 가정함.
• 토글 버튼의 스위치 위치는 상태에 따라 계산되며, 켜져 있으면 max_x, 꺼져 있으면 min_x로 설정됨.
• 이 방식은 잘 작동하지만, 애니메이션 없이는 다소 생명력이 없어 보임.
• 애니메이션은 시각적인 멋을 더하는 것뿐만 아니라 사용자가 무슨 일이 일어나고 있는지 이해하는 데 도움을 줌.
• 토글 표시기를 즉시 새 위치로 이동시키는 대신 부드럽게 이동시키도록 변경함.
• 이제 애니메이션을 업데이트해야 하며, 이는 일정한 속도로 이동하는 것처럼 보이는 단점이 있음.
• 여기에 이징 함수를 추가하여, 예를 들어 3t^2-2t^3 또는 sqrt(t)와 같은 함수를 사용할 수 있음.
• 이러한 이징 함수의 차이점은 느리게 애니메이션을 재생할 때 더 잘 보임.
• 이제 스위치 위치를 업데이트하는 대신 애니메이션 상태를 추적해야 함.
• sqrt를 사용할 때는 애니메이션 방향에 따라 다른 이징 함수를 명시적으로 사용해야 함.
• 어떤 것이 가장 좋아 보이는지는 취향의 문제이지만, sqrt가 가장 좋아 보임. 이는 스위치가 매우 빠르게 시작되지만 목적지에 가까워짐에 따라 잘 느려짐.
• 이 버전의 단점은 가장 간단한 경우에도 상당한 양의 관리가 필요하며, 사용자가 애니메이션 중간에 클릭하면 갑자기 뛰어오르는 불연속성이 있음.

카메라 이동

• 지도와 카메라가 주변을 스크롤하거나 이동하는 상황을 가정함.
• 여기에도 애니메이션을 추가하는 것이 좋음.
• 상수 속도로 보간하는 코드를 제시함.
• 애니메이션이 완료된 후에 발생하는 떨림은 target.x - position.x가 양수와 음수 사이를 번갈아 가며 바뀌기 때문임.
• sign(delta) 대신 델타를 클램핑하는 함수가 필요함.
• 이 방법은 간단한 것에 대해 상당히 복잡함.
• 애니메이션 속도가 애니메이션 완료보다 빠를 때 이상해 보임.
• 사용자의 입력을 애니메이션이 활성화되어 있는 동안 무시할 수도 있지만, 이는 사용자에게 매우 짜증나는 경험을 제공함.
• 완벽한 해결책은 물론 지수 평활화임.
• 코드는 토글 버튼 예제와 비교해 거의 변하지 않음.

내부 원리

• 1 - exp(- speed * dt)가 무엇인지, 어떻게 작동하는지 설명함.
• 간단한 버전부터 시작하여, 현재 position과 이동해야 하는 새 위치 target 사이의 속도를 비례적으로 만들어 이동 속도를 빠르게 함.
• 이 방법은 현재 위치와 목표 위치 외에는 어떠한 상태도 유지할 필요가 없으며, target이 갑자기 변경되어도 자동으로 조정됨.
• 그러나 작은 문제가 있음. speed * dt가 1보다 크면 위치가 목표를 초과하여 이동함.
• 이 문제를 해결하기 위해 값을 1로 클램핑할 수 있음.
• speed * dt가 너무 큰 이유는 speed 값이 너무 크거나 dt가 너무 크기 때문임.
• 애니메이션의 경우, dt를 적용할 때 모든 것이 완벽하게 작동하면 좋을 것임.

미분 방정식 (오, 아니)

• 문제를 해결하고자 하는 두 단계 접근법을 제시함.
• position += (target - position) * speed * dt가 작은 dt에 대해 작동하지만 큰 dt에 대해서는 실패하는 것은 미분 방정식의 수치 해법에 대한 전형적인 문제임.
• 이 방정식이 무엇을 해결하는지 알아봄.
• position += (target - position) * (1 - exp(- speed * dt))가 모든 dt에 대해 올바른 공식임을 설명함.

속도 선택

• 애니메이션을 일반적으로 지속 시간 측면에서 생각함.
• 지수 공식을 사용하면 애니메이션은 기술적으로 무한 시간 동안 완료됨.
• speed 매개변수가 의미하는 바는 1 / speed가 position이 target에 e = 2.71828...만큼 더 가까워지는 시간임.

지수 평활화

• "지수 평활화"를 검색하면 완전히 관련 없는 것처럼 보이는 위키 문서를 찾을 수 있지만, 실제로는 이 게시물에서 논의한 것과 매우 유사한 공식을 특징으로 함.
• dt가 항상 동일하고 target이 매 반복마다 변경된다고 가정하면, 반복 번호로 값을 색인화하여 position[i] = (target[i] - position[i - 1]) * factor와 같은 것을 계산함.

마지막 단락 제목

• 이 게시물에 대한 아이디어를 몇 달 동안 가지고 있었고, 마침내 완성하게 되어 기쁨.
• 개발 로그를 시청하고 읽어주셔서 감사함.

GN⁺의 의견

• 이 기사는 애니메이션을 부드럽고 자연스럽게 만드는 데 사용되는 지수 평활화 기법에 대해 설명함. 이 기법은 사용자 경험을 향상시키고 인터페이스의 직관성을 높이는 데 기여함.
• 지수 평활화는 물리적인 움직임을 시뮬레이션하는 데 있어서도 유용할 수 있으며, 예를 들어 게임 개발에서 캐릭터의 움직임이나 카메라 이동을 더 자연스럽게 만드는 데 사용될 수 있음.
• 이 기법은 특히 사용자 인터페이스의 요소가 상태 변화를 겪을 때, 그 변화를 시각적으로 표현하는 데 매우 효과적임. 예를 들어, 슬라이더나 스위치의 움직임을 더욱 부드럽게 표현할 수 있음.
• 비판적인 시각에서 보면, 지수 평활화는 애니메이션의 속도와 지속 시간을 정확히 제어하기 어려울 수 있음. 이는 디자이너가 특정한 애니메이션 효과를 정밀하게 조정하고자 할 때 제한이 될 수 있음.
• 유사한 기능을 제공하는 다른 애니메이션 라이브러리나 프레임워크로는 GreenSock Animation Platform(GSAP)이나 anime.js 등이 있으며, 이들은 다양한 이징 함수와 함께 더 세밀한 애니메이션 제어를 제공함.
• 지수 평활화 기법을 도입할 때는 애니메이션의 자연스러움과 제어의 정밀성 사이에서 균형을 찾아야 함. 이 기법을 선택함으로써 얻는 이점은 사용자 경험의 향상이며, 단점은 애니메이션의 정밀한 타이밍 조절이 어려울 수 있다는 점임.

[neo]

Hacker News 의견

• 첫 번째 댓글 요약:

  • 이 방법은 단순한 이징(easing) 곡선이나 smoothstep() 함수가 아니라, 다양한 입력을 일관되게 처리하는 무상태(stateless) 방법임을 강조.
  • CSS 전환을 사용한 경험이 있다면, 이 기술이 해결하는 문제에 대해 이해할 수 있음.
  • 지수 평활(exponential smoothing)은 목적지에 접근하지만 결코 도달하지 않는 문제가 있음.
  • 관성 스크롤(inertial scrolling)에 유사한 방법을 사용할 때, (가짜)마찰 항을 추가하는 것이 유용했다고 언급.

• 두 번째 댓글 요약:

  • 게임 개발자로서, 대부분의 UI 상황에는 미리 설정된 지속 시간을 가진 이징 트윈(eased tweens)을 선호함.
  • 그러나 시작/끝 지점이 명확하지 않은 연속적이고 예측 불가능한 움직임을 부드럽게 할 때는 이 기술이 매우 유용함.
  • 지수 선형 보간(exponential lerp)은 유용하지만 널리 알려지지 않았으며, 일부 게임에서는 덜 정확한 선형 보간을 사용하여 애니메이션 문제를 겪음.
  • 이러한 이유로 기사에 감사함을 표시하며, 이러한 특정 지식에 접근하기 어려운 경우가 많음.

• 세 번째 댓글 요약:

  • 저자가 토글 스위치에 대해 제곱근(sqrt)이 세제곱(cubic)보다 낫다고 주장하는 것에 대해 이견을 제시함.
  • 실제 토글 스위치의 작동 방식을 고려할 때 세제곱 함수가 더 적합하다고 주장함.
  • 애니메이션이 사용자 경험을 향상시킬 수 있음을 잘 보여주는 기사라고 평가함.

• 네 번째 댓글 요약:

  • 온라인 상호작용에 즐거움을 더하는 간단한 비선형 트릭에 대해 감탄함.
  • 색상 인식에서 중요한 역할을 하며, 사람들이 가속도를 항상 이해하지 못한다는 점을 언급함.

• 다섯 번째 댓글 요약:

  • 기사를 좋아하며, 거의 10년 전에 'lazy-easy'라는 이름으로 동일한 기술을 작성했다고 언급함.
  • 상태 관리 없이 부드러운 애니메이션을 원할 때 이 기술을 여전히 사용한다고 함.

• 여섯 번째 댓글 요약:

  • 이징에 대한 기사가 각 세대마다 새롭게 발견해야 하는 것처럼 보임을 언급함.
  • 90년대 후반 유고 나카무라(Yugo Nakamura)의 실험적인 웹사이트가 이징을 자유롭게 사용하여 유기적인 느낌을 준 최초의 사례 중 하나였다고 회상함.

• 일곱 번째 댓글 요약:

  • 터치/클릭을 유지하는 동안 천천히 움직이다가 놓으면 나머지 부분이 빠르게 스냅되는 토글에 대한 아이디어를 제시함.
  • UX 측면에서 이것이 의미하는 바에 대한 확신은 없으나, 설정이 적용되거나 저장되는 시점을 나타낼 수 있음을 생각함.

• 여덟 번째 댓글 요약:

  • 이 기술이 스위치뿐만 아니라 다양한 용도로 유용하다고 평가함.
  • Flickity와 관련된 데모를 언급하며, 이 기술이 생산 준비 단계에 필요한 여러 최적화를 포함하지 않았음을 지적함.
  • 댓글에서 사람들이 기사를 제대로 읽지 않았거나, 중요한 내용을 놓치고 있다고 비판함.

• 아홉 번째 댓글 요약:

  • 기사에 대한 긍정적인 평가를 하며, 데모가 크롬에서는 잘 작동하지만 파이어폭스에서는 페이지가 멈추는 문제를 겪었다고 언급함.

• 열 번째 댓글 요약:

  • 작은 애니메이션이 감정적 디자인의 최고 형태로서 많은 이야기를 담고 있다고 평가함.