오늘은 먼저 간단한 어플리케이션을 소개하는 동영상 2편을 감상하시겠습니다.

보시면서 어떤 유사점이 있는지 살펴보시면 좋을 것 같네요.

Weathercube - The revolutionary gestural weather app from Vorm Productions on Vimeo.

Rise Alarm Clock - Now Available in the App Store from Bluepic Studios on Vimeo.

 

위에서 보신 어플리케이션은 2012년 9월에 App store에 등록되면서 화제가 되었던 weathercube라는 날씨 앱이며, 아래는 2012년 12월에 등록된 Rise라는 알람 앱입니다.

위의 동영상을 보시면서 유사점을 찾으셨나요?

바로 어플리케이션을 조작하기 위한 메뉴와 아이콘이 거의 없다는 것입니다. 메뉴와 아이콘을 클릭하듯 누르는 것이 아닌 제스처 같은 사용자 입력을 기반으로 탐색하기 때문에 '보이지 않는 유저 인터페이스'라고도 불리우는데요. 모바일 앱/웹 디자인의 경우 작은 화면과 멀티터치 센서 등 디바이스의 특성을 고려해 버튼들을 숨기고 제스처를 이용한 시도들이 많이 이루어지고 있습니다.

터치 기반의 다양한 모양과 크기의 디바이스가 늘어나면서 새로운 입력/조작 방식에 대한 고민이 생기고, 작은 화면에서 정보를 보고 조작해야 하는 상황이 발생하게 되었습니다. 이에 따라 페이지 위에 버튼을 얹을 공간이 더 보이지 않고 어떻게든 해결을 해야 하는 상황에 당면하게 되었는데요. 단순하게 메뉴와 아이콘을 없앤다고 해서 자연스럽게 제스처를 이용한 인터페이스(Natural User Interface라 불리는)를 디자인할 수 있는 것은 아닐 것입니다. 이러한 상황에서 Neo의 Wren Lainer는 레이어(Layer)를 활용한 새로운 방식의 디자인으로 여러가지 복잡한 문제점을 해결할 수 있다고 말합니다. 그것은 바로 Z축을 더하는 것인데요.

지금까지 우리가 웹사이트나 모바일 앱을 디자인할 때, 대부분은 2차원적 평면으로 생각 했습니다. 이제는 2차원에 깊이를 더해 더 넓은 디자인을 생각해야 한다고 말합니다. 그것은 아래 그림과 같이 따로 떨어진 레이어들이 서로 독립적으로 움직이는 인터페이스 형태를 말합니다.

 

 

페이지는 이제 낡은 개념이며, 필요에 의해 나타나거나 나타나지 않는 레이어와 모듈 조작 들을 생각해야 할 때입니다. 디자이너들은 3차원 방식으로 인터페이스에 대해 생각하는 것은 매우 중요한데요. 그것은 바로 스크린에 생동감있는 인터페이스를 제공함으로써 더 직관적이고 사용하기 쉬운 인터페이스를 제공할 수 있기 때문이지요.

Z축의 도입 사례가 웹사이트에서는 어떻게 가능한지 레이어 인터페이스의 선구자 같은 Teehan + Lax를 살펴보시기 바랍니다. 메뉴가 거의 화면을 뒤덮어버리고, 메뉴들의 폰트 사이즈도 거대합니다. 일반적인 GNB보다 훨씬 과감한 방식을 택했고, 그래서 별도의 레이어를 택한 것으로 보입니다. 이런 것들이 모든 사이트에 적용되어야 하는 디자인이라고 볼 수 없겠지만, 메뉴 자체가 콘텐츠처럼 인식될 수 있다는 측면에서 의미있다고 보여집니다.

또 다른 사례는 Foursquare와 페이스북 같이 중요한 UI를 앞에 위치하게 하는 Float UI인데요. 아래 화면은 그대로 두고 한 레이어 위에서 사라졌다가 필요할 때 나타나게 하기 때문에 실제 화면 비중을 차지하지 않으면서도 돋보일 수 있게 되는것이죠. 페이스북 앱을 사용하시는 분은 아래와 같은 메뉴가 사라졌다 나타나는 사례를 잘 알고 계실 것입니다.

     

             [페이스북 어플리케이션 Float UI 사례]

 

서로 다른 레이어 위에 위치한 요소들은 각자 다른 속도로 움직일 수 있습니다. 이걸 흔히 Parallax(시차, 비동기)라고 부르는데, 최근 많이 사용되는 패턴입니다. 오브젝트들이 서로 다른 속도로 움직이면서, 깊이를 주기도 하고, 시간의 흐름 같은 것을 표현하기 쉬워진 것이죠. Let's Free Congress 같은 사이트도 비동기 스크롤링으로 그냥 플랫한 인포그라픽일 수 있었던 것들을 좀 더 풍부하게 만들었습니다. 이처럼 Z축을 도입함으로써 공간과 시각 모두에 효과를 제공하여 스토리텔링에 놀라운 역할을 한다고 합니다.

앞으로 우리가 Z축을 디자인에 도입한다는 것이 간단하지 않을 것 같은데요. Wren Lainers는 Z축을 도입할 때 기억해야 할 몇 가지 핵심 요소를 말해줍니다.

첫번째는 레이어(Layers)가 Z축을 디자인하는 가장 중요한 요소인데요. 이 레이어가 일관성을 가져야 하며, 확실한 존재의 이유와 목적이 있어야 하며 올바른 위계를 갖어야 한다는 것입니다. 그래야 사용자가 디자인을 더 잘 이해할 수 있게 되겠죠. 사실 레이어를 잘못 디자인했을 경우, 메뉴를 두는 것보다 더 혼란스럽고 정보 전달력이 떨어질 수 있을 것이라 생각됩니다.

두번째가 Zoom인데요. Zoom은 누구나 팔고 있고 패턴이 꽤 많이 나와있지만, iOS7 때문에 다시 주목받고 있습니다. iOS7은 오브젝트를 확대/축소하는 것이 아니라 카메라를 줌인하는 것이 핵심적인 차이를 만들어낸다고 하는데요. 사용자의 시점을 전환해서 새로운 층이 있다는 것을 보여주는 것입니다. 뷰를 줌 아웃하면서 숨겨진 넓은 공간을 보여주는 것도 마찬가지 입니다. 캔버스를 좀 더 넓고 깊게 사용할 수 있게 되는 것이죠. 포스퀘어의 줌인은 다른 것보다 좀 은근한 편이지만, 좀 더 디테일한 수준의 정보를 보여준다는 느낌을 강조합니다. 확대/축소는 정보 위계와 일치해야 합니다. 디테일한 정보는 줌 인, 카메라가 줌 아웃되면 좀 더 상위 레벨의 정보로 넘어가는 것입니다.

마지막 세번째로는 Object는 두 면 이상을 갖는다는 것을 인지하는 것입니다. 3차원 오브젝트에는 밝은 공간, 어두운 공간이 있는데 오브젝트를 슬라이드가 아닌 플립(flip)하면서 사용자들이 이런 부분들을 이해하기 쉬워지는 것입니다. 플립의 단점은 느리다는 것인데 180도 돌리는 건 꽤 큰 트랜지션이기 때문에 느리고 불편하게 느껴질 수 있죠. 시간이 중요한 상황에서 플립은 좋은 대안이 아닐 수 있습니다. 상황에 맞게 잘 써야 하는 것이지요. 예를 들어, 카드 기반의 레이아웃에서는 오브젝트를 플립하는 것으로 추가정보를 효과적으로 보여줄 수 있습니다.

 

어쩌면 지금까지 우리가 사용하지 못하는 영역이라고 생각했던 곳을 활용할 수 있게 되고, 실세계와 유사한 메타포를 좀 더 사용하게 되는것 같다는 생각도 하게 됩니다.

글이 다소 어렵게 느껴질 수도 있는데요. 디바이스와 사용 환경의 변화에 따라 혁신적이고 새로운 디자인이 적용된 웹와 앱이 시도되고 있고, 이를 통해 사용자들은 새로운 경험을 하는 시대를 우리는 살고 있습니다. 따라서 예전과 같은 2차원적 평면의 사고로 화면을 디자인하는 것은 물론 필요한 일입니다만, 사용자에게 새로운 경험을 주기 힘들게 되겠지요. 따라서 이를 디자인하는 디자이너에게 요구되는 것들도 많이 변화하게 되는 것 같습니다. 서비스를 디자인하는데 있어서 3차원으로 사고하고 이를 적용함에 따라 사용자에게 단순한 편리성과 직관성은 물론, 좀 더 새로운 사용 경험을 제공해야 할 것 같구요. 이를 위해 관련된 역량을 배양해야 하는 시점이 된 것이지요. 극단적으로 Z축을 고려하지는 못하더라도 웹에서의 UI를 모바일로 그대로 옮겨오는 구태의연한 것만은 피해야 할 것입니다.

 

 

참고자료

http://wrenlanier.com/designing-on-the-z-axis/

http://www.venturesquare.net/537095#prettyPhoto

 

 

 

신고
Posted by UXD-Trend

댓글을 달아 주세요