불필요한 UI애니메이션은 이제 그만 (번역)
UI/UX 디자이너인 Sophie Paxton이 Medium에 기고한 글 번역입니다. (원문)
표현이 극적이어서 개인적으로 재미있게 읽은 글입니다. UI 애니메이션은 UX적인 측면에서 고려해야 한다는 관점에 동의하기 때문에 번역해봅니다.
이 포스트에서는 과도한 UI 애니메이션을 탐구하고, GUI의 발전 과정과 비교함으로써 효과적인 UI 애니메이션을 만들기 위한 몇 가지 팁을 제안한다.
이 에세이를 재미있게 읽었다면, 이 에세이(Effective Prototyping) 또한 추천한다.
아래의 모션 인터랙션을 어떻게 발전시킬 수 있는지 생각해보자.
나쁜 UI 애니메이션의 예시여기를 클릭하여 라이브 데모를 보자. 슬프게도, 이 모션 인터랙션은 나쁜 디자인의 예시를 들기 위해 억지로 만들어낸 것이 아니다. 이것은.. 클라이언트가 직접 보낸 것이다!
들어가며
GUI는 70 - 80년대 CRT 스크린에 비친 래스터 그래픽에서부터 발전했다. 다른 예술 분야와는 조금 다르게, 디지털 디자인의 트렌드는 우리가 사용하는 툴의 진화와 아주 밀접한 관련이 있다.
이제 디스플레이 기술은 CGA(320 X200), VGA(640 X 480), SVGA(800 X600)을 지나 4K, 그 이상으로 빠르게 발전하고 있다.
GUI와의 평행이론
UI 애니메이션은 GUI가 90년대와 2000년대에 경험한 것과 비슷한 성장통을 겪고 있다. 그렇기 때문에 GUI의 발전 과정을 살펴보는 것은 UI 애니메이션의 현재 상황을 이해하는데 도움이 된다.
2000 년대 초반의 전형적인 웹 사이트 디자인디자인 랭귀지가 세련되게 발전되기 전에, 보통 디자이너들은 처음에 그들의 능력을 허비하곤 한다. 90년대 후반이나 2000년대 초에 웹 디자인을 해 본 누구나 기억할 것이다. 믿을 수 없을 만큼 공들인 Drop shadow, Bevels, 라이팅 효과, 그리고 고려조차 하지 않았던 여백들.... 하지만 이것은 새로운 매체와 씨름하고, 픽셀 하나하나를 위해 치열하게 노력했던 디자이너들 덕분에 생긴 자연스러운 결과였다!
플랫 디자인
플랫 디자인의 예시좋든 싫든, 현재 디자이너들 사이에서 가장 압도적인 인지도의 주인공은 바로 플랫디자인이다. 주요 컴퓨팅 플랫폼들은 (안드로이드, ios, 오에스 텐, 윈도우, 윈도우즈 모바일) 모두 이 미니멀한 디자인 랭귀지를 사용하고 있다. 또한 웹 디자인 세계도 빠르게 지배하고 있다.
플랫디자인은 GUI 디자인의 성숙기를 대변한다. 이런 디자인 트렌드가 나타난 것은 자연스러운 결과다. 플랫 디자인의 일부분은 트렌드와 유행에 의한 것이고, 일부분은 디자이너들이 디지털 매체들과 씨름한 결과가 반영된 것이다.
UI 애니메이션 디자인
최근의 모션 디자인은 GUI 디자인의 Drop shadow시대와 마찬가지라고 할 수 있다.
애니메이션 기능은 CSS 트랜지션으로 인해 적극적으로 개선되었고 , 하드웨어는 JS 웹 애니메이션 같은 표준에 따라 변화가 가속화되었다.
이뿐만 아니다. 점점 더 발전하는 기능, 멀티 코어, 멀티 기가바이트, 높은 DPI를 가진 모바일 디바이스는 이제 60 fps의 UI 애니메이션을 출력할 수 있다.
UI 애니메이션이 초기 상태라는 것을 감안하면, 디자이너들이 애니메이션을 추가하고 싶은 욕망에 사로잡히는 것은 자연스러운 일이다. drop shadow나 bevel의 경우처럼 말이다.
하지만 나는 GUI는 달리, UI 애니메이션이 성숙기에 접어들기까지 15년이 걸리지는 않을 것이라고 장담한다.
애니메이션 남용
과한 애니메이션은 어디에나 존재한다. 이것은 아마추어 디자이너들만의 얘기가 아니다. 사용자의 입장에서 바라보면, 이런 과한 애니메이션들은 정말 많다. 사용자와, 사용자가 하고 싶은 동작 사이에 눈살 찌푸려지는 애니메이션이 낑겨 있다. 디자이너로서 당신은 UI가 엔터테인먼트가 아님을 깨달아야 한다. 앱이나 웹사이트를 보면서 ‘세상에 이런 어썸한 팝업 애니메이션이 다 있다니..!’ 하고 기뻐하며 흥미를 느끼는 사람은 별로 없다.
나쁜 UI 애니메이션의 사례
(맥 OSX의 풀 스크린 애니메이션)
데스크톱이나 모바일에서의 나쁜 애니메이션 사례는 셀 수도 없이 많다. 윈도우와 전체 화면 사이의 전환에 쓰이는 맥 OSX 애니메이션은 하나의 예시이다. 이것은 넘사벽 디자인 감성으로 잘 알려진 회사에서 만드는, 플래그십 모델의 UI이기 때문에 더욱 이해할 수 없는 처사이다.
이 애니메이션이 포함한 몇 가지 이슈
- 느림
- 불필요함
- 커스텀 할 수 없음 (해킹을 하지 않는 이상)
UI 애니메이션이 별로인지는 어떻게 판단할 수 있을까? 사용자들은 이에 대해 컴플레인 글을 쓴다. 셀 수 없이 많은 글과 포럼에서 어떻게 하면 이 애니메이션 스피드를 빠르게 할 수 있는지, 애니메이션을 끌 수가 있는지에 대해 얘기한다. 이 현상은, 이 애니메이션이 사용자들을 괴롭히는 것 이외에는 어떠한 기능도 없다는 것을, 다시 말해 모션 디자인의 심각한 실수에 대해 말해준다.
모션 디자인 사례 연구
최근에 어떤 클라이언트로부터 온 디자인 예시를 같이 발전시켜보도록 하자. 이 인터랙션은 나쁜 디자인 요소들을 몇 가지 포함하고 있다.
나쁜 사례이 디자인이 포함하고 있는 것
- UI를 가리고 있는 마스크 (어두운 반투명)
- 작업이 수행 중이라는 것에 대한 암시가 없음
- 느린 애니메이션
- 불필요한 애니메이션
이 애니메이션의 가장 치명적인 단점은, 시간이 소요되는 작업 이후에 애니메이션이 실행되기 때문에 사용자에게 추가적으로 기다리는 시간(카드가 다 올라올 때 까지)이 생긴다는 점이다.
애니메이션이 꼭 필요할까?
체크 사항 : 애니메이션이 UX적으로 어떤 기능이든 수행하는가?
아래의 인터랙션은 개선된 UI 애니메이션들이다. 이 인터랙션은 정보를 불러오는 데에 적어도 100 - 500ms가 소요되는 네트워크 요청이 있을 때 필요하다. 개선 사항을 통해 마치 로딩 시간이 줄어든 것처럼, 혹은 아예 없는 것처럼 만들 수 있다.
디자인 향상시키기
1차 개선여기를 누르면 라이브 데모로 직접 인터랙션 할 수 있다.
이것은 '추가적인 데이터를 불러오는 중..’이라는 뜻의 로딩 인디케이터를 추가한, 매우 가벼운 발전이다. 그러나 아직 팝업 애니메이션은 불필요해 보이고, 사용자들의 플로우를 느리게 만든다.
2차 개선여기를 누르면 라이브 데모로 직접 인터랙션 할 수 있다.
사용자들은 불필요한 애니메이션에 방해받지 않고 원하는 데이터를 바로 볼 수 있다. 하지만 시야를 가리는 마스크는 아직 좀 거슬린다.
애니메이션 - 눈속임
네트워크를 사용하는 어플리케이션에서 캐싱이나 프리 페치 기술을 활용하면 로딩 시간을 어느 정도 단축시킬 수는 있다. 그러나 이것도 조금 문제가 있다. 셀룰러 데이터에 한계가 있는 사용자들은, 프리 페치가 데이터를 잡아먹는 것을 원하지 않을 것이다.
로딩 시간은 피할 수 없는 문제이다. 하지만 애니메이션을 통해 이것을 조금 산뜻하게 해결해 볼 수 있다. 애니메이션 레이어링으로 이 문제를 해결해보자.
3차 개선여기를 누르면 라이브 데모로 직접 인터랙션 할 수 있다.
개선점들
- 화면을 가리지 않는 로딩 인디케이터 사용
- 데이터를 불러올 때 생기는 로딩 시간을 분산시키는 오버랩 애니메이션 (페이드인)
차례대로 정보 불러오기
더 나아가, 정보를 차례차례 불러오면 마치 로딩 시간이 줄어든 것처럼 느껴진다. 사용자 대부분은 화면에 뜬 모든 데이터를 즉시 사용하지 않는다. 데이터를 묶음으로 다운로드하여 차례차례 보여줌으로써, 사용자들은 반응하는 어플리케이션에 대해 느낄 수 있을 것이다.
4차 개선여기를 누르면 라이브 데모로 직접 인터랙션 할 수 있다.
userexperiencedesign이라는 슬랙 그룹에 있는 Isak Falch를 포함한 논평가들은, 이 인터랙션에 “Expand Card”라는 방식을 추천했다. 그리고 이것을 또 다른 대안으로 시행해보았다. 모든 건설적인 조언에 감사합니다!
여기를 누르면 라이브 데모로 직접 인터랙션 할 수 있다.
이 방식의 가장 큰 이점은 사용자들이 컨텍스트, 즉 행동에 대한 맥락을 유지할 수 있다는 점이다.
결론
우리는 기술의 발전으로 인해 과도한 디자인을 하는 흑역사를 반복하지 않아야 한다. 애니메이션은 어플리케이션이나 웹사이트의 UX를 개선할 수 있고, 그래야만 한다. 애니메이션이 화려하다고 해서 좋은 제품이나 UX 만드는 것에 도움이 되지는 않는다.
애니메이션을 통해 사용자들의 체감 대기 시간을 줄이는 것 처럼, 문제 해결적인 접근으로써의 애니메이션이 필요하다.
