애니메이션, 언제 어떻게 얼마나 써야 할까

애니메이션은 잘 쓰면 인터페이스를 더 빠르고 예측 가능하게 만들어준다. 버튼을 눌렀을 때 살짝 눌리는 느낌, 토스트가 자연스럽게 올라오는 움직임 이런 것들이 쌓여서 "이 서비스 왠지 좋다"는 인상을 만든다. 하지만 반대로도 작용한다. 목적 없이 넣은 애니메이션은 인터페이스를 느리고 답답하게 만들고, 심하면 사용자가 제품을 신뢰하지 않게 된다. 그렇다면 애니메이션을 언제, 어떻게, 얼마나 써야 할까?

좋은 애니메이션 vs 훌륭한 애니메이션

애니메이션을 만들었는데 뭔가 어색한 느낌이 들 때가 있다. 코드는 맞는데 느낌이 안 산다. 그 차이를 만드는 요소들이 있다. 애니메이션을 잘 만드는 것만큼 중요한 게 언제 안 써야 하는지 아는 것이다.

애니메이션을 추가하기 전에 먼저 물어봐야 한다. "이 애니메이션의 목적이 뭔가?"

어떤 버튼을 눌렀을 때 morphing되는 애니메이션이 가끔 볼 때는 즐거운 놀라움이지만, 매일 여러 번 쓰는 기능이라면 금방 짜증이 된다. 사용 빈도가 핵심이다.

Easing의 중요성

같은 애니메이션도 easing에 따라 느낌이 완전히 달라진다. 이미 화면에 있는 요소가 이동할 때는 ease-in-out이 자연스럽다. 자동차처럼 서서히 가속하고 서서히 멈추는 움직임이기 때문이다.

그리고 CSS 기본 easing(ease, ease-in-out)은 대부분 너무 약하다. easing.dev나 easings.co에서 커스텀 곡선을 가져다 쓰는 게 훨씬 낫다.

버튼에 scale 효과 주기

인터페이스가 내 행동을 듣고 있다는 느낌을 주려면 모든 액션에 즉각적인 피드백이 있어야 한다. 버튼을 눌렀을 때 살짝 눌리는 느낌을 주는 것만으로도 체감이 달라진다.

button:active {
  transform: scale(0.97);
}

Blur 활용

easing을 바꿔도 뭔가 어색한 느낌이 남을 때가 있다. 그럴 때 filter: blur()를 살짝 추가하면 두 상태 사이의 시각적 간격을 메워줘서 훨씬 자연스러워진다. 2px 정도면 충분하다.

두 상태가 그냥 교차되면 별개의 오브젝트처럼 보이는데, blur가 그 사이를 블렌딩해서 눈을 속이는 원리다.

자주 쓰는 기능의 애니메이션

매일 수십 번 쓰는 기능이라면 애니메이션이 오히려 마찰이 된다. 사용자는 빠르게 목적을 달성하고 싶을 뿐인데, 애니메이션은 그 사이에 끼어드는 불필요한 대기 시간이 된다.

키보드 액션엔 애니메이션을 넣지 말자

방향키로 리스트를 빠르게 내리다 보면, 애니메이션이 있을 때와 없을 때 체감이 완전히 다르다. 애니메이션이 있으면 키를 연타할수록 화면이 따라오지 못하는 느낌이 난다. 즉각 반응해야 할 동작일수록 애니메이션은 오히려 느린 앱처럼 보이게 만든다.

300ms 이하로 빠르게

마케팅 사이트가 아니라면 UI 애니메이션은 무조건 빨라야 한다. 400ms 드롭다운과 180ms 드롭다운은 체감 속도가 완전히 다르다.

빠른 애니메이션은 앱이 내 행동에 즉각 반응한다는 느낌을 준다. 300ms를 넘기지 않는 것이 좋다.

최고의 애니메이션이란

애니메이션을 잘 만드는 것과 애니메이션을 잘 쓰는 것은 다른 얘기다.

easing을 고르고, spring을 튜닝하고, transform-origin을 맞추는 것도 중요하지만 그 전에 "이게 정말 필요한가?"를 먼저 물어봐야 한다. 목적 없이 넣은 애니메이션은 아무리 잘 만들어도 사용자를 피곤하게 만든다.

결국 좋은 인터페이스의 목표는 애니메이션을 보여주는 게 아니라, 사용자가 원하는 걸 빠르고 편하게 할 수 있게 하는 것이다. 때로는 아무것도 움직이지 않는 게 최선일 수 있다.

참고

• CSS Transforms
• Good vs Great Animations
• You Don't Need Animations
• Animation Tips