User interface의 애니메이션 & 트랜지션
모바일 UI의 애니메이션, 트랜지션 혹은 인터랙션에 대한 탐구
최근 모바일 앱이나 모바일 웹, 웹사이트에서는 화면 요소의 애니메이션이나 트랜지션 효과(*이하 UI 애니메이션)들이 많아지고 있습니다.
메뉴를 불러오는 것에서부터 시작해서, 페이지를 전환할 때, 혹은 토글버튼 같은 디테일한 부분에도 효과들이 들어가죠. pxd story에서 소개한 적이 있는 pull-down refresh는 그 대표적인 사례라고 할 수 있습니다. 이를 통해 UI 애니메이션은 시각적인 즐거움을 넘어서 기능을 올바르게 표현해줄 수 있는 수단이라는 것을 생각해볼 수 있습니다. 그리고 이런 UI 애니메이션들도 패턴화 되어가고 있습니다.
UI 애니메이션, 요즘 유행하는 트렌드
요즘 Dribbble에서는 이런 UI 애니메이션을 보여주는 GIF Animation이 유행인 것 같습니다. 이제 '스큐어모피즘'을 지나 '플랫 디자인'과 'GIF Animation'으로 드리블을 하고 있나봅니다. 저는 이런 작업들을 보는걸 좋아하는데요, Dribbble에 올라오는 작업들은 눈이 즐겁고, 영감을 듬뿍 줍니다. 스큐어모피즘이 유행했을 때도 그랬고, 플랫 디자인이나 UI 애니메이션들을 마음 껏 볼 수 있는 요즘도 그렇고요.
http://dribbble.com/shots/1078102-Sidebar-animation
http://dribbble.com/shots/1239862-iPad-Mini-Showcase-TemplateUI 애니메이션이 중요해진 이유
사실 Windows나 OSX를 사용할 때는 UI 애니메이션이 별로 중요하게 느껴지지 않았습니다. 그건 아마도 WIMP기반의 화면은 여러 창이 충분히 복잡하고, 여러 계층구조가 한 창에 표시되기 때문에 움직이는 효과를 최소화 하지 않았을까 합니다. 트랜지션이 일어날 일도 별로 없고요. 아, 그래픽 처리 능력의 변화도 있겠군요.
대신 스마트폰이나 타블렛에서는 상황이 많이 달라졌습니다. 스마트폰에서는 창 대신 하나의 앱이 화면 전체를 사용하고, 가상 포인터 대신 실제 손가락을 화면에 터치하는 방식으로 사용합니다.
하나의 앱이 화면 전체를 사용하지만, 그나마도 작은 크기의 화면이기 때문에 많은 정보들이 숨겨져 있게 되었습니다. 그래서 필요할 때만 표시해줘야 하는데, 단순히 화면이 변경되는 것을 넘어 트랜지션 효과를 통해 실제 화면 밖에 숨겨진, 가상의 영역을 인식시켜 줄 필요도 생겼습니다. 이런 효과가 페이지의 맥락과 계층을 쉽게 인지하고 학습 할 수 있도록 만들어 줄 테니까요. 그리고 손가락을 터치하는 것은 WIMP의 가상 포인터와 달리 실제의 환경에 가깝습니다. 이런 경우 손가락으로 행동하는 것에 맞춰 인터페이스의 인터랙션도 실제에 가깝게 반응해야 더 친숙하게 느껴질겁니다. 물론! 과하지 않아야 하겠죠.
이런 흐름에 맞춰, 모바일 앱은 물론이고 데스크탑 OS에서도 UI 요소와 화면 전환 간에 화려함이나 동적인 화면 요소가 많아지고 있습니다. 웹도 마찬가지이죠.
웹에서의 UI 애니메이션
웹에서는 이런 UI 애니메이션들이 점점 다양하게 접목되고 있습니다. 플랫 디자인도 한 몫 하고 있지만, 그것과 같은 파도의 흐름을 타고 있는 HTML5, CSS, 자바스크립트를 통해 개발자는 손쉽게 UI 애니메이션을 구현하는 소스와 결과물을 만들어 낼 수 있게 되었습니다. 디자이너는 공개된 소스를 수정하여 손쉽게 디자인을 구현해 볼 수 있는 도구와 창구를 얻게 되었죠. 혹은 서로 반대의 경우도 가능하겠습니다.
그래픽 디자인에 Dribbble이 있다면, 프로그래밍에는 GitHub가, 그리고 그 중간 격인 CODEPEN, CSSDeck등의 웹사이트 들도 있습니다. 그리고 요즘에는 여러 웹 UI 컴포넌트들의 애니메이션 효과나 페이지 트랜지션의 패턴 사이트들도 생겨서 훨씬 더 쉽게 참고를 하거나 응용할 수 있게 되었습니다. 웹은 이전에도 그랬지만 인터랙션 디자이너가 코딩과 디자인을 넘나들며 흥미롭게 일할 수 있는 훨씬 좋은 터가 마련되었습니다 :)
CODEPEN 과 같은 사이트에서는 소스 편집을 통해 바로 수정된 결과를 적용해볼 수 있습니다UI 패턴 라이브러리처럼 트랜지션/애니메이션 패턴의 예제를 보여주는 사이트들도 많이 있습니다.
*참고 사이트
http://tympanus.net/Development/PageTransitions/
http://h5bp.github.io/Effeckt.css/
http://daneden.github.io/animate.css/
http://tympanus.net/Tutorials/CaptionHoverEffects/index.html
고민이 필요한 점
하지만 여기서부터는 고민이 되는 부분입니다. pxd 내에서도 문제인식이 있었는데, 현재 프로젝트의 UI 설계 문서는 화면 페이지 단위로 Workflow를 작성하기 때문에 이런 UI 애니메이션을 적절하게 문서화 할 수 있는 수단이 별로 없습니다. 최근 보편적으로 쓰이는 몇 가지만 글자로 표현 될 뿐이죠. 그리고 이런 UI 애니메이션은 누가 중심 역할을 해야 할까요? UI/UX 디자이너 일까요? 그래픽 디자이너일까요? 아니면 개발자일까요. 이런 문제는 프로젝트에서 역할이 점점 세분화 되고, 부서가 나뉘고 분야에 따라 회사가 나뉘며 점점 벌어지고 있는 부분인 것 같습니다. 이전에 프로젝트를 할 때 디자인 컨셉에서 페이지간 전환이 중요한 역할을 한 적이 있었는데요, 그 때에는 웹으로 간략히 프로토타이핑을 하여, 페이지 트랜지션을 어떻게 할까 의사결정을 했었습니다. wipe를 할지, slide를 할지 부터 시작하여 duration이나 ease는 어느 정도로 할지 등을 중요하게 논의한 적도 있었습니다.
이제 이런 UI 애니메이션은 앱이나 웹을 구현할 때 배제할 수 없는 중요한 부분이 되었습니다. 그리고 프로젝트에서 이런 부분을 어떻게 처리할지 역할에 대한 고민이 필요할 것 같습니다. 이런 내용을 문서화 할 수 있는 방식이나, UI 애니메이션에 대한 패턴화도 적극적으로 진행되어야 하지 않을까요?
아니면 혹시, 잘 정리되어있는 사이트를 알고 계신다면 알려주세요 :)
아래, 이제 활성화되기 시작하는 UI애니메이션 패턴 라이브러리 사이트들을 몇 개 적습니다. 계속 업데이트 할 예정입니다.
http://ui-animations.tumblr.com
--- 일반 스크린샷 패턴 라이브러리 ---
http://www.mobile-patterns.com/
* 이 글은 제가 2014년 pxd story에 쓴 글입니다. 이와 비슷한 UI 디테일에 관한 탐구나, UX디자인 전반에 관심이 있으시다면 pxd story 블로그를 찾아가 보세요!
