UI 애니메이션을 제작하면서 자주 사용하는 CSS 속성 중 하나가 바로 transition과 animation일 텐데요, 실제로 제가 UI 컴포넌트를 제작하면서 easing 값을 제대로 사용하지 않아 덜 자연스럽고, 반응성이 덜 느껴지게 만드는 실수를 하곤 했었습니다.

ease, ease-in, ease-out 등 CSS가 기본적으로 제공하는 easing 값을 어떤 UI 요소에 적용하면 더 자연스러움을 끌어낼지 아래와 같이 정리했습니다.

Easing을 써야 하는 이유

인간의 뇌는 무의식적으로 물리 법칙을 기대합니다.

이미지 출처

현실 세계에서 엘리베이터는 출발할 때 가속, 도착 직전 감속을 하는 것처럼 UI 애니메이션에서도 같습니다. 모든 가속도가 동일하다면(linear) 사용자 입장에서는 부자연스러운 UX가 됩니다.

또, Linear 애니메이션에서는 시작 → ??? → 끝으로, 사용자가 이 애니메이션이 언제 끝나지? 같은 추적을 계속 해야 해 인지 부담이 증가합니다. 이럴 때 ease-out 같은 값을 추가해 주면 시작 → 빠르게 대부분 이동 → 끝날 때는 천천히 움직여, 뇌는 아, 애니메이션이 거의 끝났구나! 라고 조기에 인지합니다. 다음 행동을 인지할 수 있도록 하기도 하고요.

즉, 같은 duration인 300ms에도 ease-out는 사용자가 애니메이션을 더 짧다라고 인식하고, linear와 ease-in는 실제보다 더 긴 애니메이션이라고 생각합니다.

고작 몇 초 차이로 사용자의 이탈이 이루어질 수 있는 만큼 요즈음의 웹사이트 시장에서는 이런 결과가 상당히(?) 중요할 수 있다고 개인적으로 생각합니다.

그래서 어디에 뭘 써야 해요?

Ease-out

제일 중요합니다. 시작이 빠르고 천천히 끝나는 ease-out은 거의 모든 UI 애니메이션에 쓰인다고 해도 무방한데요,

앞서 말씀 드렸던 것처럼 사용자가 어떠한 행동(클릭, 탭 등)을 했을 때, 뇌는 지금 당장 반응을 기대합니다.

ease-out은 빠른 시작으로 사용자의 행동에 대한 즉각적인 피드백을 주고, 천천히 끝나면서 요소가 어디에 정착할지, 언제 끝날지 예측할 시간을 줍니다.

특히, 모달, 드롭다운, 사이드바 등 등장하는 모든 요소, 알림, 토스트 메시지처럼 중요한 정보를 빠르게 전달합니다.

.button:active {
  transform: scale(0.95);
  transition: transform 100ms ease-out;
}

또 transform: scale에 대해서도 ease-out을 적용시켜 버튼 클릭에 대한 즉각적인 반응도 제공합니다.

Ease-in-out

부드럽게 시작하고, 부드럽게 끝나는 ease-in-out은 요소가 화면에서 위치를 이동하거나 변형할 때 사용하기 좋습니다.

천천히 시작해서 중간에 빨라지고, 다시 천천히 끝나는 패턴은 현실 세계의 물리 법칙과 가장 유사합니다. 엘리베이터가 출발할 때 가속하고 도착 직전 감속하는 것처럼, 자연스럽고 안정적인 느낌을 줍니다.

특히 탭 전환, 슬라이드 이동, 카드 위치 변경 등 요소가 한 곳에서 다른 곳으로 이동할 때 적합합니다. 급작스럽지 않은 시작과 끝이 사용자에게 예측 가능한 움직임을 제공합니다.

Linear

일정한 속도로 시작하고, 일정한 속도로 끝나는 linear는 특수한 상황에서만 사용됩니다.

linear는 앞서 말씀드렸듯이 현실 세계의 물리 법칙을 위반하기 때문에 대부분의 UI 애니메이션에는 부적합하지만, 연속적이고 반복적인 움직임에는 오히려 linear가 적합합니다.

marquee 애니메이션과 같은 일정한 속도로 움직여야 할 때나 시간에 대한 애니메이션을 보여 줄 때 linear를 사용하면 일관된 속도감을 유지할 수 있습니다. 이런 요소들은 시작과 끝이 명확하지 않고, 지속적으로 움직여야 하기 때문입니다.

Ease

ease-in-out와 비슷하지만 비대칭적입니다. 초반 가속이 더 빠르고 끝부분 감속이 더 길어져서 ease-in-out과 ease-out의 중간쯤 되는 속성입니다.

주로 hover 효과나 짧은 피드백에서 사용하면 좋습니다. 사용자가 마우스를 올렸을 때, 빠르게 반응하면서도 부드럽게 끝나는 느낌을 줍니다.

링크나 카드에 마우스를 올렸을 때 색상이나 그림자가 변하는 효과에서도 적합합니다.

.link {
  color: #333;
  transition: color 150ms ease;
}

.link:hover {
  color: #3498db;
}

다만, 기본값이라는 이유로 무분별하게 사용하기보다는, 상황에 맞게 ease-out이나 ease-in-out을 선택하는 것이 더 좋은 경우가 많습니다.

Ease-in

느리게 시작하고 빠르게 끝나는 ease-in은 UI 애니메이션에서 지양해야 할 Easing입니다.

사용자가 제스처를 취했는데, 반응이 느리게 시작되면 오류라는 착각을 부르기도 하고, 클릭 후 즉각적인 피드백을 원하는데, ease-in은 이 기대를 배신합니다.

그렇다면 언제 사용할까요? 요소가 화면에서 사라질 때(이탈) 제한적으로 사용할 수 있습니다. 화면을 떠나는 요소는 사용자의 주의를 끌 필요가 없으므로, 빠르게 가속하여 사라지는 것이 효율적입니다.

하지만 duration을 짧게 (150~200ms) 설정해야 답답함이 덜합니다.

마치며

인터렉션을 작업할 때 (나만 그랬을 수도 있겠지만) easing이 중요하지 않아서 매번 생략해 ease으로 적용하던 적이 많았는데, Button, Toast 처럼 작은 UI부터 Fade-in 같은 애니메이션에도 easing은 중요합니다.

예전 작업물을 지금에서야 다시 보니 duration은 200ms로 할까 300ms로 할까 고민했으면서 정작 easing에는 신경을 쓰지 않았더니 더 어색한 부분이 많은 것 같아요.

다음에 UI 컴포넌트 만들 때 한번 시도해 보면 좋을 것 같습니다. ☺️