사용자의 Context가 복잡해지고 수 많은 디바이스와 컨텐츠가 쏟아져나올 수록 중요한 것은 Simplicity인 것 같다. 그럼 가장 좋은, 잘 만들어진 것은 결국 다 비슷해지나? 하지만 그 차이를 만드는 것이 있으니 그것은 경험의 detail, 즉 interaction이다.
그 중에서도 UI Animation에 대해서 정리해보려고 한다. 보통 Brand 또는 Identity하면 logotype, CI같은 시각적인 디자인을 말하지만, 이미 사운드 – Mac과 Window의 부팅 사운드와 같은 – 도 그 영역에서 인정받고 있다. 나는 거기에 잘 만들어진 일관된 UI Animation, UI Motion은 그 중요성을 갈 수록 더해가고 있다고 생각한다.
Simple is the Best, Less is More 다 맞는 말이다. 좋은 디자인이 되려면 핵심에 집중하고 꼭 필요하지 않은 것은 제거하는 것이 좋다. 그리고 거기에 적절한 = 의미에 맞는 UI Animation이 세련되게, 재밌게 적용된다면 결과물의 완성도를 확실하게 끌어올리고 identity를 만들어낼 수 있다고 생각한다.
여기까지는 내가 평소에 늘 하던 생각이다. 하지만 실제 디자인/개발의 프로세스에서 그런 부분은 간과되거나 별로 주목받지 못하는 것이 사실이다. 멋진 디자인 스타일을 만들고 적절한 기능과 Task flow를 구성하는 것 만도 시간이 부족하니까. 그래서 뭔가 정리된, 좋은 사례들을 살펴보면서 좋은 UI Animation, 적절한 interaction을 디자인하는 시간을 줄여보고, 필요할 때 설득의 도구가 될 만한 내용을 정리해보려고 한다.
이 사이트의 제목, 참 마음에 든다. Meaningful. 적절하다.
다양한 종류의 UI Animation을 카테고리로 나눠서 정리하고 설명을 하고 있다. 또한 Motion의 규칙에 대한 가이드도 정리하고 있기 때문에, 이 내용들을 기준으로 삼는다면 디자이너-기획자-개발자 간의 커뮤니케이션에 충분히 도움이 될 수 있다.
* update : 위의 사이트는 폐쇄되었다. 대신 구글의 Material Design Guide에서 동일한 챕터가 있어서 링크한다.
>Google Material Design : Meaningful Transitions
>JQuery UI와 같은 라이브러리들도 있지만, 좋은 UI Animation을 제공한다고 할 수는 없다. 그런 점에서 다음의 2개 라이브러리는 아주 훌륭한 레퍼런스들이다.
> A Collection of Page Transitions
> Effeckt.CSS
A Collection of Page Transitions은 >GitHub에서 자료를 받을 수 있으며, 간단한 >소개와 Tutorial도 볼 수 있다.
Effeckt.CSS 역시 다양한 UI Animation을 소개하고 있으며 >GitHub에서 자료를 볼 수 있다.
그리고 UI Animation의 패턴을 모아놓고 있는 곳이 몇 군데 있다.
> CAPPTIVATE.co
>Use Your Interface
마지막으로 PXD에서 관련해서 잘 정리해놓은 글을 링크한다. 이 글의 많은 링크들을 PXD의 글에서 참고했음을 밝힌다.
>PXD : User Inferace의 애니메이션 & 트랜지션