인류가 많은 빚을 지고 있는 기술이 있습니다. 바로 원으로 회전을 하는 기술입니다. 수레의 바퀴부터 시작해, 나사, 모터, 엔진 그리고 마우스 스크롤에 이르기까지 우리가 편리하게 사는 문명에 회전 운동을 활용하고 있습니다. 회전 운동의 재미있는 점은 계속 직선으로 가는 듯 보이나 어느 센가 원점으로 돌아간다는 것입니다. 우리의 인생도 절벽이라고 생각하는 좌절의 순간들이 있습니다. 하지만 그 지점이 제가 얼마나 깊은지 가늠할 수 없으나, 여러분들이 이겨내고자 한다면 반드시 이겨낼 수 있을 것입니다.
인생은 회전목마 제가 좋아하는 음악 중에 하나입니다. 뭔가 정말 돌도 도는 느낌? 왈츠 느낌이라고 해야 하나요? 여하튼 이 노래를 들으면서 시작하고자 합니다. 회전운동 내지는 원운동을 인터페이스에서 사용하는 경우가 많습니다. 그중 가장 잘 사용했다고 생각되는 사례를 5가지 정도 설명하고자 합니다. 물론 여러분들도 다아는 것이지만 제가 선정한 이유를 한번 들어봐 주시겠어요?
1. 자동차 핸들
자동차 운전은 참 재미있습니다. 운전면허를 따고 운전을 하고 싶어 아버지 몰래 아버지 차를 끌고 나간 적도 있고, 연인에게 잘 보이기 위해서 차를 가져가 후진할 때 그 알죠 뭔지. 자동차는 20C 대표 산업답게 20C의 모든 것이 들어있습니다. 아니 정확하게 말해서 21C까지 개발된 모든 기술들의 집합체라고 할 수 있습니다. 기원전에 발명한 바퀴부터 지금은 컴퓨터 역할을 하는 부품까지 들어가 있으니까요. 그래서 제조업의 끝판왕이라는 별명이 괜히 붙은 산업이 아닙니다.
지금은 자율주행 시대로 가는 초입에 있습니다. 자율주행이 되면 당연히 핸들도 숨겨졌다 나왔다 하지 않을까요? 아니면 큰 방향만 설정할 수 있게 조이스틱으로 변하지 않을까요? 수동으로 운전하는 지금은 자동차 핸들을 통해 가는 방향을 정합니다. 핸들을 좌로 돌리면 좌측으로 이동할 수 있고, 우로 돌리면 우측으로 이동할 수 있습니다.
이렇게 직관적일 수 있을까요 왼쪽으로 가고 싶으면 왼쪽 오른쪽으로 가고 싶으면 오른쪽, 회전의 정도에 따라 회전 반경이 정해지는 이런 환상적인 직관성 때문에 자동차 핸들을 회전 모티브 인터페이스에 뽑았습니다.
2. 나사선
나사선이라고 하는 것은 회전 운동을 수직운동으로 바꿔주는 기술입니다. 공구함에서 가장 많이 쓰는 장비 중 하나인 것이 +자 드라이버인 것을 보면 범용성에서도 높은 점수를 줄 수 있습니다. 나사선은 나사에서만 쓰이는 것은 아닙니다.
여기에서만 쓰이는 것이 아닙니다. 만년필에 잉크를 채워보신 적이 있으신가요? 만년필 컨버터에 잉크를 채울 때 피스톤 운동을 하게 하는 것이 나사선입니다. 돌리면 위아래로 움직이는, 다소 직관적이지는 않지만 일상생활에 많이 침투해 있고, 인터페이스로서의 가치도 높다고 판단해서 나사선을 회전 모티브 인터페이스에 뽑았습니다.
3. 손목시계의 용두(Crown)
아날로그시계를 차 보셨나요? 이제는 남성들의 재력을 나타내는 상징이 된 손목시계 말입니다. 하지만 손목시계는 애플 워치 혹은 갤럭시 기어처럼 웨어러블 디바이스의 한 축을 담당하는 스마트워치의 마더 모델입니다. 여기서 과거 손목시계에서는 용두가 중요한 역할을 했습니다. 전기를 사용해 모터로 무브먼트가 돌아가지 않을 때 더더욱 중요한 역할을 했습니다. 시간을 맞추는 역할을 용두가 했기 때문입니다.
용두는 돌리는 방향에 따라 분침이 움직이거나 기능이 많은 모델에서는 시침 혹은 다른 나라의 시계들까지 만질 수 있게 되어 있습니다. 그야말로 미세 공업의 끝판왕입니다. 시계를 맞출 때 전문가를 제외하고 내가 돌리는 방향이 어디로 갈지 몰라 항상 위로 돌렸다 아래로 돌리고 아래로 돌렸다 위로 돌리곤 합니다. 이것이 조금 불편한 지점이긴 하지만 용두를 위아래로 돌리면 분침이 회전을 하게 됩니다. 돌아가는 회전운동의 맥락은 유지했지만, 직관적이지 않아 오류를 많이 일으킵니다.
이 용두를 적용한 스마트 워치가 있으니 바로 애플 워치입니다. 실제로 이것은 시간을 맞추는 데 사용되지 않습니다. 마우스 휠과 같이 UI를 위아래로 움직이게 하거나, 줌인 줌 아웃하는 기능을 합니다. 아날로그시계의 용두보다 애플 워치의 용두가 더 직관적인 이유는 용두를 움직이는 방향대로 UI가 따라오기 때문입니다.
여기서 힌트를 얻을 수 있습니다. 사람이 생각하는 멘털 모델대로 UI 혹은 기계적 장치가 움직여야 한다는 교훈을 주는 것 같아 회전 모티브 인터페이스에 뽑았습니다.
4. 마우스 휠
마우스 휠이 없는 마우스 생각만 해도 끔찍합니다. 지금 이 블로그를 보실 분들은 다 마우스 스크롤을 통해 혹은 모바일의 터치 스와이프를 통해 스크롤을 하고 계실 것입니다. 초기 컴퓨터에서는 스크롤이 없었습니다. 당연히 우측 클릭 버튼도 없었지요. 하지만 지금은 반드시 3가지의 기능은 탑재해야 합니다. 좌클릭, 우클릭 그리고 스크롤 휠.
마우스 휠에 대한 논쟁이 있습니다. 맥이 초래한 논쟁이기도 합니다. 여러분들은 스크롤 휠을 내릴 때, 손바닥 쪽으로 휠을 돌릴 때 화면이 하단 쪽이 보이도록 이동해야 한다고 생각하세요? 아니면 반대로 이동해야 한다고 생각하세요? 이거 가지고 논쟁을 벌인적이 있습니다. 물론 쓸 때 없지만 이 블로그에 쓰고 있네요…
휠은 아래로 움직일 때 하단 쪽 콘텐츠를 노출하는 게 맞다고 생각합니다. 하지만 애플에서 나온 예쁜 쓰레기인 매직 마우스는 터치 인터페이스를 적용해서 반대가 맞다고 생각합니다. 마우스는 하나이지만 두 개의 방식이 존재하는 것이 참 어설프긴 한데, 제가 보기엔 이 방안이 제일 직관적입니다. 두루마리 휴지를 바닥에 두고 위로 올라오게 해서 실험을 하면 하단의 것을 보고 싶으면 아래에서 위로 합니다. 이것은 물성을 가진 터치가 들어갈 때의 이야기라고 생각합니다. 그리고 휠은 내가 가고 싶으면 내리는 것이고 올라가고 싶으면 올리는 것이라고 생각합니다.
5. iPod Classic, MS Surface Dial, 색상 휠
아이팟 클래식의 충격, 제가 아이리버에서 아이팟으로 넘어갔을 때의 충격과 만족감은 이루 말할 수 없었습니다. 50G의 용량과 터치 클릭 휠 UI 그리고 플로우 커버 기능은 환상이었습니다. 그때 휠로 음량을 조절하고 좌우 버튼으로 음악을 이동했습니다. 리스트에서 하단으로 이동할 때 휠을 돌리면 움직였습니다. 다소 직관적이진 않지만 참신했습니다. 이 또한 아이폰이 잘 되면서 없어진 장비입니다.
MS Surface Dial은 이와 같은 장비이나 옛날 라디오를 조작하는 방식으로 돌려가면서 사용하는 장비이다. 돌리고 선택하는 것을 하는 장비인데, 많이 성공한지는 모르겠다. 하지만 아이팟 클래식과 같은 UI 원리를 사용하고 있어서 가지고 왔다.
마지막으로 색상 휠은 Adobe에서 선택하는 색 선택은 색상, 채도, 명도를 직관적으로 바꾸기 힘들다. 이 말은 색을 선택할 때 두세 가지 단계가 더 필요하다는 이야기이다. 반면 색상 휠 UI는 색상환을 돌면서 그 안에서 채도와 명도를 선택할 수 있는 권한을 줘 훨씬 더 직관적으로 선택할 수 있다.
다음번에는 눈에 띄는 모티브가 있으면 이어가도록 하겠습니다.
