애니메이션을 부드럽게 만들고 가중치를 부여하는 방법을 알아보세요.
자연에서 한 지점에서 다른 지점으로 선형으로 이동하는 것은 없습니다. 실제로는 움직일 때 가속되거나 감속되는 경향이 있습니다. 인간의 뇌는 이러한 움직임을 예상하도록 되어 있으므로 애니메이션을 만들 때 이를 활용해야 합니다. 자연스러운 모션은 사용자가 앱을 더 편안하게 느끼게 하여 전반적인 환경을 개선합니다.
요약
- 이징을 사용하면 애니메이션이 더 자연스럽게 느껴집니다.
- UI 요소에 서서히 사라지는 애니메이션을 선택합니다.
- 짧게 유지할 수 없는 한 서서히 시작 또는 서서히 시작 및 종료 애니메이션은 피하세요. 최종 사용자에게 느리게 느껴지는 경향이 있습니다.
클래식 애니메이션에서 느리게 시작하여 가속되는 모션을 '슬로우 인'이라고 하고, 빠르게 시작하여 감속되는 모션을 '슬로우 아웃'이라고 합니다. 웹에서 가장 흔히 사용되는 용어는 각각 'ease in'과 'ease out'입니다. 두 가지가 결합되는 경우도 있으며 이를 'ease in out'이라고 합니다. 따라서 이징은 실제로 애니메이션을 덜 심각하거나 덜 두드러지게 만드는 프로세스입니다.
Easing 키워드
CSS 전환과 애니메이션 모두 애니메이션에 사용할 이징 유형을 선택할 수 있습니다. 해당 애니메이션의 이징(또는 timing)에 영향을 미치는 키워드를 사용할 수 있습니다. 완전히 맞춤설정된 이징을 사용하여 앱의 개성을 훨씬 더 자유롭게 표현할 수도 있습니다.
CSS에서 사용할 수 있는 키워드는 다음과 같습니다.
linearease-inease-outease-in-out
출처: CSS 전환, W3C
steps 키워드를 사용하여 개별 단계가 있는 전환을 만들 수도 있지만, 위에 나열된 키워드가 자연스러운 애니메이션을 만드는 데 가장 유용합니다.
선형 애니메이션
어떤 종류의 이징도 없는 애니메이션을 선형이라고 합니다. 선형 전환의 그래프는 다음과 같습니다.
시간이 지남에 따라 값이 동일한 양만큼 증가합니다. 선형 모션을 사용하면 사물이 로봇처럼 부자연스럽게 느껴지며, 이는 사용자에게 거슬리는 요소입니다. 일반적으로 선형 모션은 피해야 합니다.
CSS 또는 JavaScript를 사용하여 애니메이션을 코딩하는 경우 항상 선형 모션 옵션이 있습니다.
CSS로 위와 같은 효과를 얻으려면 코드는 다음과 같습니다.
transition: transform 500ms linear;
서서히 사라지는 애니메이션
서서히 감속하면 애니메이션이 선형 애니메이션보다 더 빠르게 시작되고 끝에서 감속됩니다.
빠른 시작은 애니메이션에 반응성을 부여하면서도 끝부분에서 자연스러운 감속을 허용하므로, 일반적으로 사용자 인터페이스 작업에는 감속이 가장 좋습니다.
감속 효과를 얻는 방법은 여러 가지가 있지만 가장 간단한 방법은 CSS의 ease-out 키워드입니다.
transition: transform 500ms ease-out;
서서히 나타나는 애니메이션
서서히 시작 애니메이션은 느리게 시작하여 빠르게 끝나며, 이는 서서히 종료 애니메이션과 반대입니다.
이러한 유형의 애니메이션은 무거운 돌이 떨어지는 것과 같습니다. 천천히 시작하여 빠르게 땅에 떨어지며 둔탁한 소리를 냅니다.
그러나 상호작용 관점에서 보면, 서서히 시작은 갑작스러운 종료로 인해 약간 이상하게 느껴질 수 있습니다. 실제 세계에서 움직이는 물체는 단순히 갑자기 멈추는 것이 아니라 감속하는 경향이 있습니다. 서서히 시작하는 효과는 시작할 때 느리게 느껴지는 부정적인 효과도 있어 사이트나 앱의 반응성에 대한 인식에 부정적인 영향을 미칩니다.
서서히 나타나기 애니메이션을 사용하려면 서서히 사라지기 및 선형 애니메이션과 마찬가지로 키워드를 사용하면 됩니다.
transition: transform 500ms ease-in;
서서히 시작하고 서서히 끝나는 애니메이션
서서히 시작 및 종료는 자동차가 가속 및 감속하는 것과 유사하며, 신중하게 사용하면 서서히 종료보다 더 극적인 효과를 제공할 수 있습니다.
애니메이션의 ease-in 시작이 느려지므로 애니메이션 지속 시간을 너무 길게 사용하지 마세요. 일반적으로 300~500ms 범위가 적합하지만 정확한 숫자는 프로젝트의 느낌에 따라 크게 달라집니다. 하지만 느린 시작, 빠른 중간, 느린 종료로 인해 애니메이션의 대비가 증가하여 사용자에게 만족감을 줄 수 있습니다.
ease-in-out 애니메이션을 가져오려면 ease-in-out CSS 키워드를 사용하면 됩니다.
transition: transform 500ms ease-in-out;