모바일 UI Motion 이야기

최근 발매된 ipad를 필두로 현재 IT업계 최고 화두는 단연 UX입니다. 더 편한 인터페이스, 더 나은 사용자 경험을 만들어
내기 위해 지금도 여러 기업에서는 밤을 새어 고민하고 있습니다.

이 중에서 가장 열렬한 환호를 받고 있는 기업은 단연 애플입니다. 애플의 제품은 조금은 폐쇄적이면서 몇몇 단점이
있음에도 불구하고 사람들은 그것을 감수하고 애플의 제품에 환호를 보내고 있습니다. 그 이유야 여러가지가 있겠지만
애플의 각 제품에는 저마다의 스토리가 있고 그것을 포장해서 사람들에게 보여주는 기술이 대단해서가 아닐까 생각합니다.

각설하고 지금부터 말씀드릴 내용은 결코 애플 제품만의 이야기가 아니라 UI에서 이루어지는 여러가지 움직임에 대한
이야기 입니다. 여러 제품을 만져보고 느껴보면서 저는 UI의 움직임에 더 많은 생각을 해 보았고 먼저 아이폰에서 가장
눈에 띄는 몇가지 모션을 직접 캡쳐해 보았습니다.



아이폰OS의 움직임에서 가장 눈에 띄는 특징은 더 이상 존재하지 않는 영역의 방향으로 손가락을 스윕할 시 반동을
일으키며 존재하지 않는 영역을 순간적으로 보여 주었다가 다시 제자리로 돌아오는 것입니다. 이것은 사용자가 행하는
행동에 대한 성공과 실패를 시각적으로 확실하면서도 효과적으로 보여줌으로써 사용자의 인지력을 향상 시키는데
큰 역할을 합니다.

그리고 또 다른 특징으로는 카메라 어플을 동작하는 과정에서 파인더를 열고 닫는 일련의 과정입니다. 각 상황에
적절하게, 그리고 효과적으로 파인더가 열리고 닫히며 사용자의 상황 인지력을 높여주고 찍은 사진을 저장하는
과정에서는 빨려 들어가는 움직임을 줌으로써 별다른 텍스트 형태의 피드백 없이도 사용자는 자신이 한 행동에
대해 효과적으로 인식을 하게 됩니다.

그리고 결정적으로 제가 가장 눈여겨 본 부분은 음악재생 부분입니다. 연속 두번의 터치로 음반커버와 곡 리스트를
넘나드는 과정에서 단순히 커다란 판이 가운데 축을 중심으로 플립되는 움직임이 아니라 판이 뒤로 빠졌다가 앞으로
나오면서 플립이 됩니다. 저는 두가지 상황이 예상됩니다. 중심축이 앞뒤로 이동하는 상황, 그리고 판을 지탱하는
축이 우측이나 좌측끝에 위치하였다가 반대편으로 이동하면서 판은 축의 움직임에 따라 이동하는 상황입니다.

좀 더 확실한 움직임을 보여드리기 위해 느린 재생으로 인코딩을 해 보았고 우측 상단 윗부분을 보면 작은 아이콘은
축의 이동없이 정사각형이 플립되는 것을 볼 수 있는데 그것과 비교를 해보면 더욱 그 차이가 느껴질 것이라 생각합니다.



사실 이 부분의 움직임은 사용성과 크게 연관이 있지 않을수도 있겠지만 더욱 완성도를 높이고 시선을 집중 시키기
위한 움직임에 대해 그들이 얼마나 심혈을 기울였는지 알 수 있는 부분인지라 그 의미가 크다고 생각합니다.


다음으로는 공개 당시 커다란 반향을 일으켰던 윈도우즈7폰시리즈의 움직임을 캡쳐해 보았습니다.



처음에 이 영상을 보고 굉장히 놀라워 했던 기억이 나네요.
이번 윈도우즈폰7시리즈는 전체적으로 기존의 윈도우즈 모바일에서 완벽하게 탈피하였다는 점이 이슈입니다.
그 중에서도 가장 눈에 띄는 부분은 역시 움직임이고 주목할 점은 바로 터치하는 순간에 있습니다. 똑같은 사각형의
영역일지라도 어느 부분을 터치하느냐에 따라 달리 움직이는 모습은 짧지만 굉장히 인상적이며 경탄을 자아내기에
충분합니다. 그리고 역시 이 부분에서도 축의 개념이 들어가 있는 것을 알 수 있습니다.

각 대메뉴간의 이동에 있어서도 커다란 축이 존재 함으로써 자연스럽고 유기적인 움직임을 보여주고 있으며 메뉴
이동과정에 있어 보여지지 않는 부분을 순간적으로 보여주기 때문에 사용자로 하여금 컨텐츠에 대한 예상을 할 수
있도록 유도하고 있습니다. (덤으로 17초 부분에서는 최상단에 사진 전송의 의미로 작은 점들이 일렬로 이동하는데
이 또한 백미군요. 전통적으로 윈도우즈 부팅시에 보여졌던 지렁이의 메타포인가 하는 생각도 듭니다.)

개인적으로는 직관적인 아이폰OS의 UI도 굉장하지만 이번 MS의 시도 또한 찬사를 받기에 충분하다고 생각합니다.

이렇게 가장 대표적으로 주목 받고 있는 두 회사의 제품을 움직임으로써 살펴 보았는데 이러한 효과적인 움직임들은
단순히 시각적인 화려함을 제공하여 사용자들의 눈을 현혹 시키려는 술수가 아닌것을 알 수 있습니다. 더 나은 사용자
환경을 위해 그들이 얼마나 심혈을 기울였는지 다시 한번 생각해 볼 만 합니다.

움직인다는 것의 의미

UI의 효과적인 움직임이 의미하는 것에 대해 간단히 정리를 해 보자면 다음과 같습니다. 

인지력의 향상 :
사용자가 행하는 행동에 대한 성공과 실패를 시각적으로 확실히 보여줌으로써 학습의 속도가 빠르다. 즉 사용자의 실수를 줄여준다.

속도감의 향상 :
움직임이 가미 됨에 따라 그 프로세스가 실행되는 절대적 시간은 느려질 수도 있다. 하지만 빠르고 완성도 높은 움직임은 오히려 사용자로 하여금 속도감을 향상시키는 효과를 주게 된다. 이러한 효과로 사용자는 더 반응이 좋고 빠르다고 인식하게 된다.

심미성의 향상 :
각 상황에 걸맞는 적당한 움직임은 사용자의 지루함을 달래주고 사용하는 즐거움을 제공한다. 

결론적으로 적절하고 완성도 높은 움직임은 위와 같은 수많은 가치를 창출해 낼 수 있지만 그렇지 못한 경우에는
안하니 못한 상황이 연출될 것입니다. 이 모든것이 효과적으로 연출 되려면 움직임을 위한 최적화된 기술이 가장
중요할 것이고 상황에 맞는 적당한 움직임에 대한 철저한 연구는 당연할 것입니다.

끝으로, 완성도 높은 UI에 적절하게 가미된 움직임 요소는 사용자들로 하여금 기계를 기계로만 생각하지 않고 하나의
살아있는 유기체로 받아들이게끔 만들고 있다는 점에선 누구나 동의할 것이라고 생각합니다.