원문: http://alistapart.com/article/the-z-axis-designing-for-the-future
우리는 그동안 대부분 웹페이지에서 평면적인 2차원에서의 UI의 고민을 해왔습니다.
하지만 모바일에서도 다양한 사이즈의 디바이스가 출시되면서 지속적으로 이를 위한 다양한 디자인을 하게 됩되고 이런 환경에서 모바일이라는 작은 스크린에서 해볼 수 있는 새로운 디자인 방법이 있을까 하는 고민에서 정리된 글이라는 생각이 드네요.
이 글에서는 디자인 문제를 해결하기 위해 Z축을 활용하는 2가지 방법을 제시를 하고 있습니다.
첫번째는 레이어.
레이어는 필요할 때 노출, 또 필요없을 때 사라지게 할 수 있는 좋은 UI라고 할 수 있으며 다자인을 잘 이해하기 위해 사이트 내에서 일관성있게 사용되곤 함
1) 메뉴
일반적으로 Z축 상위에 있을 수록 더 중요한 기능이라고 볼 수 있는데,
우선순위가 있는 내비게이션 메뉴들은 항상 다른 요소들보다 높을 레벨에 위치해 있음.
2) 액션버튼
매우 중요한 기능들은 상위에 올라올 수 밖에 없음.
예를 들면 페북의 챗헤드의 경우 메시징이 제일 중요한 기능.
3) 스토리텔링
스크롤 시 비동시성을 지닌 인터랙션인 Parallax디자인.
다른 스피드로 오브젝트가 움직일 때 이는 시간의 흐름에 자극을 받아 다른 Depth를 창조해냄.
두번째는 트랜지션.
1) 슬라이딩
가장 일반적인 움직이는 트랜지션.
비교적 구현이 쉽고 이해가 쉽다. 내비메뉴, 히든패널 등 빠르게 언제어디서나 열 수 있음.
2) 주밍 (Zooming)
줌 애니메이션은 iOS7에 잘 구현되어 있음.
앱을 실행시킬 때 관련 트랜지션 효과를 보면 쉽게 알 수 있음, 단순 전환효과에 비해 이러한 주밍효과는 집중할 수 있는 효과를 가져올 수 있음
이는 보는이의 관점을 Z축이라는 새로운 레벨로 옮겨주는 역할
3) 플리핑, 폴딩
매거진에서 많이 사용되는 효과.
이 글에서 가장 인상깊었던 문구는,
Our canvas is both deep and wide
아무리 모바일이라는 작은 화면이지만 우리의 캔버스는 무한대로 깊고, 또 무한대로 넓게 사용할 수 있습니다.
하지만 이 넓은 캔버스를 얼마나 사용하기 편리하게 만들어주느냐는 인터페이스, 인터랙션 디자인을 하는 우리의 몫이지 않을까 싶네요.
p.s)
사용자 인터페이스를 달과 비교한 내용도 흥미로왔는데,
"사용자 인터페이스는 항상 보이는 'light' 사이드를 가지고 있고 절대 보이지 않는 'dark'사이드를 가지고 있다"
라는 비유도 Z축을 설명하는데 있어 적절했다고 생각이 듭니다. :)
