You Don't Need Animations
TMT적절하게 사용된 애니메이션은 인터페이스를 예측 가능하고, 더 빠르며, 사용하기 즐겁게 만듭니다. 또한 당신과 당신의 제품을 돋보이게 해줍니다.
하지만 그 반대의 효과도 낼 수 있습니다. 애니메이션은 인터페이스를 예측 불가능하고, 느리며, 짜증나게 만들 수 있습니다. 심지어 사용자가 제품에 대한 신뢰를 잃게 만들 수도 있습니다.
그렇다면 언제, 어떻게 애니메이션을 적용해야 경험이 더 좋아질까요?
첫 번째 단계는 애니메이션에 목적이 있는지 확인하는 것입니다.
목적이 있는 애니메이션
애니메이션을 시작하기 전에, 이 애니메이션의 목적이 무엇인지 스스로에게 물어보세요.
예를 들어, 우리가 Linear에서 만든 이 마케팅 애니메이션의 목적은 무엇일까요?
전체 애니메이션은 linear.app/ai에서 볼 수 있습니다.
이 애니메이션은 Product Intelligence(Linear의 기능)가 어떻게 작동하는지 설명합니다. 정적인 이미지를 사용할 수도 있었지만, 애니메이션 버전은 사용자가 이 기능이 무엇을 하는지 페이지의 첫 화면에서 바로 이해할 수 있도록 도와줍니다.
또 다른 목적이 있는 애니메이션은 버튼을 누를 때의 미묘한 축소 효과입니다. 아주 작은 변화지만, 인터페이스가 더 생동감 있고 반응성이 좋아진 느낌을 줍니다.
반면 Sonner의 등장 애니메이션은 두 가지 목적이 있습니다:
- 토스트가 갑자기 나타나면 어색하게 느껴지기 때문에, 등장 애니메이션을 적용합니다.
- 같은 방향에서 나타나고 사라지기 때문에 공간적 일관성이 생기고, 아래로 스와이프해서 닫는 제스처가 더 직관적으로 느껴집니다.
하지만 때로는 애니메이션의 목적이 단순히 즐거움을 주는 것일 수도 있습니다.
아래 피드백 컴포넌트의 형태 변화는 경험을 더 독특하고 기억에 남게 만듭니다. 사용자가 이 기능을 자주 사용하지 않는다면, 이는 기분 좋은 놀라움이 될 수 있습니다.
하루에도 여러 번 사용된다면, 이 컴포넌트는 금방 짜증나는 요소가 될 것입니다. 처음의 즐거움은 사라지고, 애니메이션은 사용자를 느리게 만들 것입니다.
사용자가 애니메이션을 얼마나 자주 보게 될지는 애니메이션 적용 여부를 결정하는 핵심 요소입니다. 이제 이 부분을 더 깊이 살펴보겠습니다.
사용 빈도
저는 Raycast를 하루에 수백 번 사용합니다. 만약 열 때마다 애니메이션이 실행된다면, 정말 짜증날 것입니다. 하지만 실제로는 애니메이션이 전혀 없습니다. 이것이 최적의 경험입니다.
직접 확인해보고 싶다면, 아래 메뉴의 열림 상태를 J와 K를 눌러 전환해보세요. 하루에도 수백 번 사용한다면 어떤 쪽이 더 나은지 느껴보세요.
Raycast를 열 때 저는 분명한 목표가 있습니다. “즐거움”을 기대하지도, 필요로 하지도 않습니다. 불필요한 방해 없이 그냥 제 일을 하고 싶을 뿐입니다.
사용자가 달성하고자 하는 목표와 애니메이션을 얼마나 자주 보게 될지 생각해보세요. 호버 효과는 좋지만, 하루에도 여러 번 사용된다면 애니메이션이 없는 것이 더 나을 수 있습니다.
하루에도 여러 번 이 목록과 상호작용한다고 상상해보세요.
키보드로 실행하는 동작도 마찬가지입니다. 이런 동작은 하루에도 수백 번 반복될 수 있는데, 애니메이션이 있으면 느리고, 지연되고, 사용자의 행동과 동떨어진 느낌을 줄 것입니다. 이런 경우에는 절대 애니메이션을 적용해서는 안 됩니다.
직접 확인해보고 싶다면, 아래 입력란에 포커스를 두고 방향키로 목록을 이동해보세요. 하이라이트가 키 입력에 비해 지연되는 느낌을 받을 수 있습니다. 이제 (shift)를 눌러 애니메이션 없이 이 상호작용이 어떻게 느껴지는지 확인해보세요.
하지만 애니메이션이 너무 자주 사용되지 않고, 명확한 목적을 충족한다 해도, 속도에 대해 반드시 고민해야 합니다…
속도의 인식
마케팅 사이트가 아니라면, 애니메이션은 반드시 빨라야 합니다. 애니메이션은 앱의 체감 성능을 높이고, 사용자의 행동과 연결되어 있으며, 인터페이스가 사용자의 행동을 진정으로 “듣고 있다”는 느낌을 줍니다.
예를 들어, 더 빠르게 회전하는 스피너는 실제 로딩 시간은 같아도 앱이 더 빨리 로드되는 것처럼 느끼게 해줍니다. 이는 체감 성능을 높여줍니다.
어떤 것이 데이터를 더 열심히 로드하는 것처럼 보이나요?
180ms의 드롭다운 애니메이션은 400ms보다 더 반응성이 좋아 보입니다:
일반적으로 UI 애니메이션은 300ms 이하로 유지하는 것이 좋습니다.
속도의 중요성을 보여주는 또 다른 예시: 툴팁은 실수로 활성화되는 것을 방지하기 위해 약간의 지연 후에 나타나야 합니다. 하지만 한 번 툴팁이 열리면, 다른 툴팁 위로 마우스를 올릴 때는 지연이나 애니메이션 없이 바로 나타나야 합니다.
이렇게 하면 처음의 지연 목적을 해치지 않으면서 더 빠르게 느껴집니다.
Radix UI와 Base UI는 툴팁이 한 번 열리면 지연을 생략합니다.
훌륭한 인터페이스 만들기
목적 없는 애니메이션을 위한 애니메이션이 아니라, 훌륭한 사용자 인터페이스를 만드는 것이 목표입니다. 사용자가 매일 기꺼이 사용할 수 있는 인터페이스 말이죠. 때로는 이를 위해 애니메이션이 필요하지만, 때로는 최고의 애니메이션은 “아무 애니메이션도 없는 것”입니다.
언제 애니메이션을 적용할지 아는 것은 훌륭한 애니메이션을 만들기 위해 알아야 할 많은 것 중 하나일 뿐입니다. 이론과 실습을 더 깊이 배우고 싶다면, 모든 내용을 다루는 강좌를 준비했습니다.