Daily UI 004. 계산기 _Calculator

계산기에 대한 UI를 만들라고 했을 때 솔직히 당황스러움이 더 컸다. 구글에 Calculator UX tips라고 쳐도 나오는 것이 몇 개 없고 아시다시피 계산기가 디자인할 것이 무궁무진하지는 않기 때문이다. 무엇이든 더 더할 것이 없는 디자인보다 더 뺄 것이 없는 디자인이 좋은 디자인이다. 그런데 계산기는 정말 말 그대로 더 더할 것이 없다.

 

계산기에 관한 UX 팁을 검색하다가 완전히 새로운 계산기, Calcy 라는 아티클을 보게 되었다.  Calcy는 새롭게 출시된 계산기 앱이라기보다는 사이드 프로젝트로 진행한 디자인 같았다. 처음에 계산기에 관해 별로 디자인할 것이 없다고 생각했는데, 이 아티클을 읽어보며 디자인할 것을 열심히 찾아보면 이렇게 많은 것들을 디자인할 수 있다는 것을 깨닫게 되었다.

 

 

개인적으로 흥미롭다고 생각했던 Calcy의 UX

 

1. 왼손 오른손 모드 

나는 오른손잡이였기 때문에 오른손 잡이용으로 설계되어있는 계산기를 왼손잡이들이 사용할 때 얼마나 불편할지를 인식하지 못하고 있었다. 컴퓨터, 태블릿, 모바일 폰에 따라 반응형으로 바뀌는 웹사이트처럼 Calcy는 전 세계 인구의 10%를 차지하는 왼손잡이 사용자들을 위한 옵션을 제공하고 있다. 상단에 있는 화살표 버튼을 누르면 왼쪽 오른쪽으로 UI가 바뀐다.

 

2. 일반용 계산기, 과학용 계산기, 프로그래머 용 계산기 탭

현재 계산기는 과학용 계산기, 프로그래머용 계산기로 바꾸기 위해서 스와이프를 계속적으로 해야한다. 하지만 Calcy는 하단에 탭을 나눔으로써 한 번에 쉽게 계산기의 용도를 바꿀 수 있도록 디자인하였다. 사실 이것에 대해서 나도 정확히 알아보고 싶었는데 안드로이드 계산기는 과학용 계산기는 버튼으로 눌러서 되지만 가로로 바뀌는 것이 사용성 면에서 안 좋았고 아이폰은 과학용, 프로그래머용 계산기를 지원하지 않는 듯했다. 

 

 

 

3. 전화기의 숫자 배열을 따른 Calcy

계산기에 관한 UX 아티클을 검색하다가 흥미로운 사실 하나를 알게 되었다. 계산기 UI와 전화기 UI 모두 숫자가 9개 포함되어 있다는 사실이 똑같다. 그런데 특이하게도 둘의 숫자 배열이 다르다.

 

전화기와 계산기 

 

전화기는 작은 숫자가 상단에 위치하고, 계산기는 큰 숫자가 상단에 위치한다. 계산기의 경우는 숫자를 더하고 빼고 곱하는 것이기 때문에 더 작은 숫자가 하단에 위치한다는 것이 이해가 갔다. 숫자를 배열할 때 숫자의 크기를 우선으로 생각해서 이런 배열이 나온 것이 아닐까? 그런데 전화번호의 경우는 숫자의 단순한 배열 아닌가? 왜 작은 숫자가 더 상단에 가도록 배치가 된 것인지 조금 이해가 안 갔다. 

 

초기 전화기의 모습을 보면 왜 전화기가 이런 UI를 가지게 된 것인지 조금은 이해를 할 수 있을지도 모른다. 

위키백과- 초기 다이얼식 전화기의 모습

내가 봤을 땐 전화기가 계산기와 똑같은 숫자배열을 가져도 큰 문제는 없었을 것이라 생각한다. 하지만 초기 전화기의 모습이 1부터 시작하는 것이 보이지 않는가? 전화기 UI는 쿼티 키보드처럼 사용성과는 상관없이 사람들한테 익숙한 UX와 UI를 그대로 스마트폰에 옮기면서 배열이 이렇게 된 것이라 생각한다. (물론 철저하게 뇌피셜이다. 근거는 없다. 내 생각일 뿐이다.) 하지만  그런데 Calcy는 특이하게 계산기의 숫자 배열을 따르지 않고 전화번호부의 숫자 배열을 가져왔다. 아티클에 써져있지 않기 때문에 왜 이런 숫자 배열이 나온 것인지는 모르지만, 사이드 프로젝트를 하는 사람들이 작은 숫자가 상단에 있는 전화기의 숫자 배열이 UX적으로 더 편하다고 생각해서 이렇게 했는지도 모르겠다. 내가 아직 내공이 부족해서 그런 건지는 모르겠지만 상단에 작은 숫자가 오든, 하단에 작은 숫자가 오든 점점 위로 갈수록 커지든 아래로 갈수록 커지든 이 논리적인 규칙만 잘 지켜진다면 사용성에 큰 문제가 있을 것 같지는 않다. 

 

 

 

 

출처

https://ko.wikipedia.org/wiki/%EC%A0%84%ED%99%94#/media/%ED%8C%8C%EC%9D%BC:Telefon_BW_2012-02-18_13-44-32.JPG

전화 - 위키백과, 우리 모두의 백과사전

https://uxplanet.org/calcy-the-new-age-calculator-a-design-case-study-11f49559892b

Calcy | The new-age calculator for 21st-century people