목적이 있는 애니메이션

(emilkowal.ski)

4P by GN⁺ 4일전 | ★ favorite | 댓글 1개

애니메이션은 적절하게 사용하면 인터페이스의 예측 가능성과 속도, 즐거움을 높이는 역할을 함
하지만, 무분별하게 사용된 애니메이션은 예측 불가능함과 지연, 심지어 사용자 신뢰 저하를 유발할 수 있음
중요한 첫 단계는 애니메이션의 명확한 목적을 정하는 것임
애니메이션 사용 빈도가 높을수록, 오히려 애니메이션 없는 경험이 더 바람직할 수 있음
애니메이션의 속도 역시 인지적 성능과 사용자 만족도에서 결정적임

애니메이션의 목적의식

올바른 애니메이션 사용은 인터페이스의 예측 가능성, 체감 속도, 사용 경험의 즐거움을 증진함
잘못된 애니메이션은 인터페이스를 느리고 혼란스럽고 불쾌하게 만들며, 사용자의 제품 신뢰도에 악영향을 미침

의도의 중요성

애니메이션을 적용하기 전, "이 애니메이션의 목적은 무엇인지" 질문해야 함
예시로, Linear의 Product Intelligence 마케팅 애니메이션은, 정적인 이미지 대신 해당 기능의 작동 방식을 바로 보여줌으로써 사용자의 이해를 돕는 역할을 수행함
버튼을 누를 때의 미묘한 scale down 효과는 인터페이스를 더 생동감 있고 응답성 있게 느끼게 함
Sonner의 toast 등장 애니메이션은 아래 두 가지 목적을 지님
- 갑작스러운 등장 대신 자연스럽게 나타나도록 해 이질감 해소
- 같은 방향에서 등장/퇴장해 공간적 일관성을 유지하고 swipe-down 제스처의 직관성을 높임
때때로 "기쁨" 자체가 애니메이션의 목적이 될 수 있으며, 드물게 이루어지는 상호작용에선 색다름과 기억에 남는 경험을 제공함
단, 사용 빈도가 높아지면 초기 기쁨은 곧 짜증과 지연으로 바뀔 수 있음

사용 빈도와 애니메이션

애니메이션을 자주 보게 될수록, 사용자의 피로감과 작업 지연이 커질 수 있음
예를 들어, Raycast를 반복적으로 사용하는 상황에서 불필요한 애니메이션은 큰 방해가 됨
반복 사용되는 메뉴, 리스트, 키보드로 조작하는 상황에서는 애니메이션을 아예 배제하는 것이 바람직함
실제로, 키보드 사용 시 애니메이션이 오히려 반응 속도를 떨어뜨리는 예시가 소개됨
"애니메이션 없는 경험"이 특정 시나리오(반복, 대량 작업 등)에서는 최적의 선택이 될 수 있음

속도 인지와 반응성

마케팅 사이트를 제외하면 모든 UI 애니메이션은 빠르게 작동해야 사용자가 느끼는 성능과 응답성을 높임
빠르게 회전하는 로딩 스피너는 로딩 시간이 같더라도 더 빠르게 느끼게 함
180ms의 dropdown 애니메이션이 400ms보다 훨씬 더 응답성이 뛰어나게 느껴짐
UI 애니메이션은 대체로 300ms 미만이 적정함
툴팁은 처음 등장 시 약간의 지연이 좋으나, 일단 열렸다면 추가 애니메이션 없이 즉각 반응하는 편이 최상의 경험을 제공함(Radix UI, Base UI 참고)
툴팁 이동 간 무지연 전환은 목적을 해치지 않으면서도 사용자 경험을 개선함

훌륭한 인터페이스 구축하기

애니메이션 자체가 목표가 아니라, 우수한 사용자 인터페이스 구축이 궁극적 목표임
사용자들이 일상적으로 기꺼이 이용하고 싶은 경험을 만드는 것이 중요함
때로는 애니메이션이 필요하지만, 상황에 따라 "애니메이션 없음"이 최고의 선택일 수 있음
언제, 어떻게 애니메이션을 적용할지를 아는 것이 UI/UX 설계에서 중요한 역량임

마무리

뛰어난 인터페이스를 만들기 위해선 애니메이션 활용에 대한 깊은 이해가 필요함
추가적인 이론·실습 자료는 "Animations on the Web"에서 확인 가능함

▲

GN⁺ 4일전 [-]

Hacker News 의견

디자이너들이 애니메이션을 논의할 때마다 '폴리시'나 '기쁨' 같은 단어를 쓰면서 이 요소들을 지각 지연과 저울질하는 경향을 보임, 완전히 틀린 건 아니지만 몇 가지 아쉬움이 남음
1. 기쁨(delight)이란 부분이 과장되어 있다고 생각함, 화려한 애니메이션에 진짜 감탄하는 사람들은 대부분 다른 디자이너들임
2. 무엇보다도 언제 애니메이션을 사용할지 결정할 때 '상태(state)'에 집중하는 게 유용함, 사용자가 상태 변경을 잘 인지하지 못할 위험이 있다면 그때 애니메이션으로 시각화 지원을 하는 것임, 이것이 애니메이션을 쓰는 주요 목적이라고 생각함, 그 외는 허영임
- '기쁨이 과장된다'는 의견에 대해, 적절히 활용되고 방해되지 않는다면 소프트웨어에서의 의미 있는 애니메이션은 사용자들에게 확실한 긍정적 효과가 있음, 다만 많은 이들이 기대할 수 있는 효과와는 조금 다를 수 있음
  잘 설계된 애니메이션은 ‘좋음’과 ‘훌륭함’을 가르는 마지막 20%의 요소이며, 꼭 필수는 아니지만 경쟁사와의 비교에서 차별성을 만드는 요소가 됨
  애니메이션이 가치를 가질 수 있는 현실적인 이유는 피지컬 제품에서 사람들이 무게감이나 내구성을 고급 제품의 기준으로 삼는 현상과 비슷함
  그러나 지난 10년간 UI 디자인이 ‘분위기’, ‘강렬한 연출’, ‘브랜딩’에 치우쳐 왔고, 실제로 효과적인 애니메이션 활용에 대한 제대로 된 연구와 실용성이 등한시되고 있음
  이제는 실용적 사용성 위주로 UI 디자인이 되돌아가야 한다고 봄
- 버튼 클릭 시 발생하는 미묘한 스케일 다운 효과를 애니메이션의 한 종류로 보는 것에 놀람, 이건 클릭 가능성과 클릭이 인식됐음을 알려주는 아주 기본적인 시각 피드백임
- 소프트웨어 디자인에서 ‘delight’ 자체를 중시하는 태도는 (구) Apple 팬들에게서 많이 보이는 것임, 예를 들면 Jobs 이후 보내진 Apple의 유쾌함 감소를 아쉬워하는 현상임
  이 주제를 종합적으로 정리한 대표적인 글을 아는 건 아니지만, 이 짧은 글에서 언급됨
  이런 디테일을 좋아하는 성향이 특정 디자이너만의 취향이나 좁은 현상이 아니라, Apple 팬덤의 핵심 특징 중 하나임
- B2B 환경에서 일하는 디자이너들이 B2C 느낌으로 디자인하는 상황을 자주 겪음
  B2B(특히 엔터프라이즈)에서는 사용자의 일상 업무 도구가 될 뿐이므로, 화려한 애니메이션, 다채로운 그라데이션(요즘엔 이것이 AI를 뜻하기도 함) 등은 실제 업무에 도움이 되지 않고 오히려 산만하게 만듦
  이런 장식적 요소는 사용자가 텍스트 위주의 대시보드를 효율적으로 탐색하는 데 방해만 됨
  “예쁘고 기분 좋은” 경험을 만들고 싶다면 어차피 CRM/ERP 같은 워크플로우 회사는 맞지 않음, 사용자의 감정적 만족이 비즈니스 가치와 직접적으로 연결되는 회사에서 일해야 의미가 있음
- ‘delight’가 과장됐다는 말에 동의하지 못함
  예를 들어, Apple/iPhone 사용자가 일주일간 Android를 써보면 ‘뭔가 부자연스럽고 거슬리는’ 느낌을 받았다고 할 것임
  이런 부분은 iOS가 상호작용 전반에 걸쳐 세심하게 만들어진 애니메이션 덕분임
  일반 소비자는 ‘delight’라는 용어로 경험을 표현하진 않더라도, 자신이 이전보다 나쁜 경험을 할 때는 분명히 인지함
Apple이 이런 부분에서 배워야 할 점이 있다고 봄, 쓸데없는 애니메이션을 기다리느라 시간을 허비하는 경우가 많음
예를 들어, 스크롤을 맨 아래로 내린 후 버튼을 탭했는데 bouncing 애니메이션이 끝나기 전에는 여러 번 눌러야 반응함
앱 간 스와이프, 노티피케이션 닫기, 도크나 드로어 열기 등 대부분의 제스처 기반 액션들이 지나치게 느리게 처리됨
애니메이션이 연달아 실행되어, 하나 끝나야 다음 애니메이션, 그제서야 조작이 가능함
접근성(Accessibility) 설정에서 이런 애니메이션을 꺼야만 좀 더 편하게 쓸 수 있는 상황이 역설적임
- Apple Wallet이 폰에 연결될 때 화면 전체에 아무 쓸모 없는 애니메이션이 실행되고, 그 시간 동안 아무것도 할 수 없어서 짜증남
  그냥 연결되면 작은 햅틱 신호만 줘도 충분함
- iOS 네비게이션 애니메이션들은 전부 중간에 끊고 다른 행동을 할 수 있게 설계되어 있음, 마지막까지 무조건 기다릴 필요 없음
- MacOS에서 데스크톱/스페이스 전환 시 애니메이션이 다 끝날 때까지 모든 입력이 이전 스페이스에만 반영되어서 엄청나게 답답함
  Apple은 지금 UI/UX를 제대로 신경 쓰지 않고 있음, 이런 거대한 조직에서는 Steve Jobs 같은 강력한 의사 결정자가 없으면 좋은 사용자 경험을 만들기 힘듦
  그리고 종종 디자이너들이 ‘평균 사용자’가 자신이나 제품의 팬이 아니라 단순히 기본적 기능과 일관성만을 원하는 현실을 자각하지 못함
  무언가를 바꿀 때마다, 할머니에게 보여줘서 “와 이건 정말 훨씬 좋다”며 감탄하지 않으면 절대 바꾸지 않는 자세가 필요함
나는 애니메이션 속도를 오히려 더 빠르게 하고 싶음
300ms는 나에게 너무 느림
거의 인식되지 않을 정도로 짧은 애니메이션을 선호함
사실 애니메이션을 없애면 그제서야 그 존재를 느낄 수도 있음
그 이상으로 길면 너무 느리다고 느낌
- 나도 예전엔 250ms 정도를 썼지만 최근엔 200ms로 줄임
  200ms가 무엇이, 어떻게, 왜 변하는지 파악하기에 이상적인 UI 전환 속도임
  이 기준을 만족하지 않으면 전환 자체를 없애는 게 맞음
  200ms는 CSS에서도 간단히 .2s로 쓸 수 있어 편리함
  150ms 이하면 렌더링 글리치처럼 느껴질 수 있어서, 매우 짧아지면 오히려 애니메이션의 장점이 사라짐
- 안드로이드 폰을 처음 사용할 때 제일 먼저 하는 일이 개발자 모드에서 애니메이션 속도를 두 배 빠르게 세팅하는 일임
  기본 속도로 동작하는 걸 보면 너무 답답함
웹 디자인에서의 애니메이션은 실제로는 PowerPoint의 연출과 다를 바 없음
대부분의 경우 빠른 크로스 페이드 효과 한두 가지면 깔끔하게 정돈된 UI를 만들 수 있고, 그 이상은 드물게 필요함
나는 애니메이션은 사용자가 이미 알고 있는 내용을 확인시켜줄 때만 의미가 있다고 생각함, 애니메이션 자체가 정보를 전달하는 수단이 되면 안 됨
즉, 애니메이션을 꺼도 동일한 속도로 업무를 처리할 수 있어야 하고, 플로우도 똑같이 이해할 수 있어야 함
애니메이션의 목적은 UX 여정을 부드럽게 연결해주고, 상태가 기대한 대로 맞다는 작은 신호를 주는 것임
예를 들어 마우스 hover 시 빠르게 하이라이트가 되면, 내 마우스가 컨트롤 위에 있다는 것을 추가로 신경쓰지 않아도 됨
툴팁 팝업 예시에서처럼, 한 번 뜬 이후에는 0ms로 즉시 나타나는 경우, 사용자의 UX 흐름을 진정 잘 이해하고 있다는 신호를 느낄 수 있음
이런 게 UX 여정을 잘 이해한 애니메이션의 대표 예임
내 원칙은, 사용자가 애니메이션이 끝날 때까지 기다려야 조작을 이어갈 수 있다면 그 애니메이션은 삭제해야 한다는 것임
그리고 모든 애니메이션을 끌 수 있는 접근성 옵션을 반드시 제공해야 한다고 생각함
- 이 목적엔 CSS의 prefers-reduced-motion 미디어 쿼리가 정말 유용함
  관련 문서 참고
Linear의 Product Intelligence 기능 소개용 애니메이션에 대해, 디자이너 의도는 이해하지만 실제로 보기에 전혀 이해를 돕지 않음
이상한 3D 각도의 애니메이션이 실제 UI와 관련 없어 보임
이 3D 효과가 화면의 특정 박스(즉 제품)는 내가 읽는 페이지가 아니란 걸 암시해주긴 하지만, 그래도 해당 기능 자체를 이해하는 데 크게 도움이 되진 않음
페이드-인 효과 때문에 해당 영역이 눈에 들어오긴 하지만, 내용 전달엔 크게 기여하지 않음
'기쁨을 주는’ 애니메이션이 내 화면(예: M1 MacBook Pro)에선 괜찮지만 다른 화면(예: IBM ThinkVision 저해상도 모니터)에선 매우 어색하고 느려 보임
MacBook 시연 영상
저품질 모니터 시연 영상
어떤 모니터로 보느냐에 따라 완전히 다르게 느껴질 수 있음
- 그 IBM 모니터를 원래 해상도(native resolution)로 쓰고 있는지 궁금함
“빠르게 회전하는 스피너가 더 빨리 로딩되는 것 같은 느낌을 준다”는 의견에 대해, 나는 오히려 실제로 무언가 일어나지 않을 때 빠른 스피너를 남용하는 잘못된 디자인을 많이 접하다 보니, 느린 스피너가 더 신뢰감 있게 느껴짐
- 나는 오로지 비선형적으로 진행 상황이 보여지는 로딩 바만 신뢰함, 이런 경우엔 단계별로 뭔가 실제 진행되고 있다는 신호를 분명하게 확인할 수 있음
- 느린 스피너가 오히려 ‘무거운 작업을 하느라 버벅이고 있다’는 신뢰감이 들어서 더 믿음이 감
내 하루를 망치는 즉각적인 예는, 애니메이션이 실행 중일 때 상태가 일관되지 않는 경우임
예를 들어, Windows에서 어떤 앱의 알림 팝업이 뜰 때, 애니메이션이 완료되기 전에 X를 눌러 닫으려고 하면 해당 알림을 열어버림
Mac에서 데스크탑 전환 시, 앱이 슬쩍 화면에 보였다가 다른 앱으로 번쩍 바뀌는데, 애니메이션이 느려서 다 끝난 줄 알고 뭔가 조작했다가 당황하는 경우가 있음
심지어 이런 현상이 랜덤하게 발생하기도 함
디자이너들에게, 애니메이션을 꼭 넣고 싶다면 완전히 견고하게 만들어야 하고, 그렇지 않으면 바로 그 앱을 신뢰하지 않게 됨

답변달기