brunch

매거진 UX 디자인의 모든 것

라이킷 91 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 May 30. 2017

UI 애니메이션 원칙

UX 디자인 배우기 #119

Today UX 아티클

uxdesign.cc에 올라온 UI 애니메이션 글을 번역하였습니다.

지난 몇 년간 프로토타이핑 툴의 폭발적 증가로 디자이너는 디테일한 인터랙션을 만들 기회를 얻게 되었습니다. 디자이너들은 이런 툴들을 배우는 데 몇 시간 혹은 며칠을 보내고 있습니다. 하지만, 많은 디자이너들은 선택한 프로토타이핑 툴의 세부 기능을 배우다가 길을 잃어버리는 경우가 많습니다. 디자이너는 한 발 물러나서 만들고 있는 애니메이션의 목표와 목적이 무엇인지 질문을 던져봐야 합니다. 의도를 가지고 애니메이션을 만들 때, 그 모션이 커뮤니케이션의 툴로 사용될 수 있는 겁니다. 디자이너는 유저를 방해하는 경솔한 애니메이션을 사용하는 것은 피해야 합니다.

디자이너는 애니메이션을 추가하거나 제거함으로 객체 간 연속성과 관련성을 보여주는 등 디자인 문제를 해결하는 데 애니메이션을 활용할 수 있습니다. 인지부하를 줄여주는 것부터 시작해서 의사결정을 개선해주는 것까지, 의미 있는 애니메이션은 유저를 즐겁게 해줄 수도 있고, 정보를 전달해줄 수도 있습니다.

인지 부하 줄이기

인지부하는 과업을 완수하기 위해 필요한 정신적 노력의 양입니다. 위키피디아를 보면 “인지부하가 무거워지면 태스크 완수에 부정적 영향을 미칠 수 있다.”라고 합니다. 유저가 사이트에 들어가면, 정보의 파도가 유저를 덮치게 됩니다. 그 결과, 유저는 선택적 주의 집중을 하게 됩니다. 일명 ‘좁은 시야(tunnel vision)’을 가지고 현재 작업 중인 스크린 영역에만 직접적으로 집중하는 것이죠. 때문에 유저는 집중하고 있는 것 외에 스크린에 있는 다른 것은 전혀 보지 못하게 됩니다.

디자이너에게 사용하기 쉬운 인터페이스를 만드는 일은 매우 중요합니다. 사용하기 쉬운 인터페이스는 유저가 과업을 완수하기 위해 들이는 정신적 노력을 해소해줍니다. 어떻게 하면 디자이너가 애니메이션을 통해 이를 성취할 수 있을까요? 모션은 잘만 사용하면, 유저 피드백을 효과적으로 소통해 줌으로 유저의 혼란을 줄여줍니다. 더불어, 유저 마음에 있는 짐을 덜어주기 때문에, 페이지의 “행동 유도” 영역과 같은 중요한 부분으로 주의를 끌 수 있습니다.

Dribbble — Marcus Forsberg

유저의 주의 끌기

NNgroup의 설명에 따르면 “애니메이션을 활용하는 효과적인 방법은 유저의 주의를 끄는 것”이라고 합니다. 유저의 주의를 끄는 것의 이점은 스크린과 스크린 상의 요소들 간에 계층 구조를 보여주기 위해 유저가 이목을 집중하도록 가이드할 수 있다는 것입니다.

애니메이션이 꼭 유저의 시야에 직접적으로 보이도록 배치될 필요는 없습니다. NNgroup의 글을 보면, 주변 시야에서 일어나는 움직임은 보다 빠르게 유저의 주의를 끌 수 있다고 합니다. 주변에서 일어나는 잠재적 위험 상황을 인지하고자 하는 신체의 특성 때문이죠. 하지만, 유저는 전통적으로 특정 사이즈로 사이드바나 헤더에 들어간 배너나 팝업에는 주의를 기울이지 않는다고 학습해왔습니다. 때문에 디자이너들은 UI와 애니메이션이 그런 기존의 패턴을 따르지 않도록 만들어야 합니다. 한 번에 움직이는 모션의 양을 최소화하고 관련 정보가 있을 것이라고 유저가 생각하는 위치에 있는 요소를 움직이게 만들어서 이러한 ‘배너 맹(bannerblindness)’을 피할 수 있을 것입니다.

시각적 계층구조

스크린 상에 요소들이 로딩되는 순서에 애니메이션 효과를 줌으로 페이지의 시각적 계층구조를 보여줄 수도 있습니다. 미세한 애니메이션을 활용하여 유저에게 페이지의 레이아웃과 집중해야 할 곳을 보여주면 인지 부하를 줄일 수 있습니다.

더불어, 서로 다른 요소에 동일한 애니메이션을 사용하면, 그런 요소들이 서로 그룹이거나 동일한 액션을 수행해준다는 점을 쉽게 이해할 수 있을 겁니다. 사람은 언제나 패턴을 그려내려고 하는 심리를 가지고 있습니다.

더 나은 의사결정 하기

마이크로 인터랙션 모션(오브젝트의 변환)과 매크로 인터랙션 모션(여러 오브젝트 간의 변환)은 유저에게 맥락을 전달하고 시스템의 일관성을 보여줄 수 있습니다. 모션은 유저에게 새로운 인터랙션과 제스처를 가르쳐줄 수도 있습니다. 애니메이션은 잘만 만들어지면 정보가 서로 어떻게 연결되는 것인지 유저가 빠르게 이해할 수 있게 해주며 그 결과 더 나은 의사결정을 할 수 있게 해줍니다.

애니메이션은 발견 확률(discoverability)을 높여주기도 합니다. 상태가 변하면 한 오브젝트의 기능이 변한다는 것을 전달하게 되는 거죠. 예를 들어, 메뉴 아이콘이 닫기 아이콘으로 바뀌면 유저에게 한 아이콘으로 두 가지 액션을 할 수 있음을 보여줄 수 있습니다.

애니메이션은 유저가 공간적인 정보에 대한 인식도(mental maps)을 더 잘 그릴 수 있게 도와주기도 합니다. 작은 스크린에서 이는 매우 중요합니다. 유저는 스크린 속 미로에서 쉽게 길을 잃을 수 있습니다. 하지만 애니메이션은 스크린 간의 스텝을 다시 되짚어볼 수 있게 해주어 앱을 사용하는 방법을 유저가 배울 수 있게 해줍니다. 예를 들어, 오른쪽으로 스와이핑 하면서 더 안쪽 페이지로 이동할 수 있게 만드는 거죠. 확실히 발견할 수 있게 만들기 위해서는 반드시 시각적 어포던스가 애니메이션과 함께 사용되어야 합니다.

온보딩(onboarding)

애니메이션은 인터랙티브 한 온보딩을 만들 수 있게 도와주기도 합니다. 유저에게 적절한 타이밍에 적절한 것을 보여주어 단계적으로 공개되도록 디자이너가 만들 수 있습니다. 단계적 공개는 시스템을 보다 배우기 쉽게 해줍니다. 유저 앞에 보이는 노이즈와 어수선함을 줄여주기 때문이죠. 미묘한 애니메이션으로 새로운 콘텐츠에 유저가 서서히 익숙해지게 해주면서도 앱이 작동하는 방식을 유저가 학습할 수 있게 해줍니다. 그 결과, 이를 통해 유저는 무엇이 중요한지 이해하는 데 도움을 받을 수 있습니다.

즐거움 만들기

애니메이션은 유저에게 즐거움을 전달하고 사용자 경험을 강화할 수 있는 훌륭한 방법입니다. 하지만, 애니메이션으로 유저를 즐겁게 해주려고 하기 전에, 먼저 디자이너는 유저의 기본 기대치를 충족해줘야 하며 마찰이 있는 부분을 제거해 줘야 합니다. 그렇지 않으면, 즐거운 애니메이션이라 할지라도 전혀 좋은 인상을 남기지 못할 것입니다. 애니메이션의 빈도, 길이, 속도는 시스템에 대한 유저의 지각에 영향을 미치는데, 그렇기 때문에 디자이너는 애니메이션을 만들 때 이러한 세 가지 요소를 고려해야 합니다.

Dribble — Zee Young

즐거움을 전하기 위해 애니메이션을 추가하면 좋을 가장 이상적인 상황은 유저가 원하는 것을 주어 유저를 놀라게 하여 주는 상황입니다. 예를 들면, 무료배송 같은 것이 있겠죠. 또한 애니메이션은 절대 유저에게 방해가 되어서는 안 됩니다.

빈도

디자이너는 유저가 얼마나 자주 해당 애니메이션을 보게 될지 고려해야 합니다. 처음 애니메이션을 보았을 때는 멋지게 보일 수도 있고, 유저를 즐겁게 해줄 수 있습니다. 하지만, 멋지고 즐거운 거라도 나중엔 짜증 나는 존재가 될 수 있습니다. NNgroup은 유저 테스팅 세션을 통해 “이 [애니메이션]은 처음엔 멋졌지만, 나중엔 짜증 나기 시작했습니다.”라는 참가자의 코멘트를 들었다고 합니다.

길이

디자이너는 유저가 과업을 포기하기 전에 애니메이션이나 액션을 얼마나 오랫동안 기다려줄 마음이 있는지 알아야 합니다. NNgroup의 연구 결과에 따르면 유저는 무엇이든 100ms 까지 보이는 것은 즉각적이라고 생각한다고 합니다. 상황을 전달하는 애니메이션은 150ms에서 300ms 정도로 좀 더 시간이 오래 걸릴 수도 있습니다. 일반적인 애니메이션 길이의 가이드라인은, Val Head에 따르면 200ms에서 500ms 정도 되어야 한다고 합니다. 애니메이션을 자연스러워 보이게 만들기 위해 이 가이드라인을 따르는 겁니다. 유저는 익숙한 것에 동질감을 갖기 때문에, 결국 디자이너는 최선의 결정을 내릴 수 있게 될 것입니다. 애니메이션이 어느 정도 길이어야 하느냐에 있어서는 논란의 여지가 있지만, 너무 빠르면 유저는 놓치게 될 것이고, 너무 느리면 유저는 시스템이 느리다고 느낄 것입니다.

속도

전반적인 애니메이션의 속도는 인지된 퍼포먼스에 영향을 미칠 수 있습니다. 애니메이션이 느릴수록 유저는 전반적인 시스템이 느리다고 느낄 것입니다. 하지만, 애니메이션은 지연을 감추는 데 사용할 수도 있고, 유저가 인지한 포퍼먼스에 지속적으로 몰입할 수 있도록 사용할 수도 있습니다.

로딩 애니메이션은 유저에게 지속적으로 시각적 피드백을 제공하여 대기시간을 짧게 느끼도록 만듭니다. 애니메이션 안에 들어 있는 사이클은 유저가 인지하는 속도를 높일 수도 있습니다. 페이스북은 전통적으로 사용하는 무한 회전하는 로딩 아이콘을 콘텐츠 틀만 보이는 로딩 화면으로 바꾸어서 멋지게 보여주고 있습니다. Viget이 했던 연구에 따르면 사람들은 일반적인 로딩 화면보다는 브랜드 특색이 입혀진 로딩 애니메이션을 좀 더 오래 기다려 준다고 합니다.

Dribbble — Ramotion

접근성

디자이너는 애니메이션의 접근성도 잊지 말고 고려해야 합니다. 전정 신경 장애를 가진 사람들에게 모션은 어지럼증, 현기증, 메스꺼움을 유발할 수도 있습니다. 바로 이것이 Apple이 iOS7에 애니메이션이 들어간 전환 효과와 움직이는 배경화면을 끌 수 있는 옵션을 추가한 이유입니다. 전경보다 배경이 느리게 움직이는 패럴랙스 스크롤링 같은 경우도 제대로 적용하지 않으면 메스꺼움을 유발할 수 있는 모션의 사례입니다. 이를 해결하기 위해서, 디자이너들은 ‘큰’ 애니메이션이 자동으로 재생되지 않게 만들어볼 수 있을 겁니다. 유저가 애니메이션을 시작할 수 있다면, 준비가 되지 않은 상태에서 허를 찔리는 일이 없어질 겁니다.

Dribbble — Minh Pham

Web Accessibility에서는 텍스트 형태로 움직이는 콘텐츠를 묘사해주기를 권장하고 있습니다. 이렇게 해주면 시각 장애가 있는 유저들도 콘텐츠에 접근할 수 있을 것입니다. 디자이너는 어떤 경우에는 유저가 자신의 워크플로우의 속도를 높이기 위해 UI 애니메이션을 끄고 싶어 할 수도 있다는 점을 항상 기억해야 합니다. W3C 가이드라인에 따르면 접근성 좋은 애니메이션을 만들기 위해서는 Web Accessibility의 모범사례를 참고하는 것이 좋다고 합니다.

디자이너는 항상 모범 사례를 따르기 위해 다음 내용을 기억해야 합니다:

체크리스트:

목표: 이 애니메이션이 유저에게 전달하고자 하는 것은 무엇인가?

초점: 현재 유저의 초점은 어디에 맞춰져 있는가, 유저는 어디를 보고 있는가?

모션의 메커니즘:

빈도: 이 애니메이션은 얼마나 자주 재생될 것인가?

길이: 이 애니메이션은 얼마나 길게 재생될 것인가?

속도: 이 애니메이션은 얼마나 빠르게 재생될 것인가?

트리거: 애니메이션은 어떻게 재생될 것인가? 유저의 액션에 의해 될 것인가? 자동으로 재생될 것인가?

접근성: 유저가 애니메이션을 꺼버리면 사용자 경험에 어떤 영향이 가는가?

디자이너 분들은 위 체크리스트에 있는 항목들을 보시면서 모션 스타일 가이드를 만들어보시면 좋을 겁니다. 콘텐츠와 비주얼에 스타일 가이드가 있을 텐데, 그 리스트에 애니메이션도 추가하시면 디자이너들 이전 반적으로 일관된 경험을 만드는 데 도움이 될 것입니다. Material design by Google과 Lightning Design by Salesforce가 좋은 사례가 될 것입니다.