딛자인 데이 :: 03 Calculator
계산기를 디자인해보자!
세 번째 딛자인 데이는 계산기입니다.
(계산 싫어...)
오옷?'누가 봐도 멋진 계산기를 디자인해야지!' 하고 결심을 내리고, 과제 메일을 다시 유심히 살펴보는데 여기 나의 마음을 건드리는 한 문장이 있었으니 그것은 바로...
specialty calculator for something.
썸띵 쓰페셜한 계산기! 뭔가 나에게 도전 의식을 불러일으켰다. 그렇다면, 그 썸띵 쓰페셜한게 뭐가 있을까?
생각하다 보니 요즘 회사에서 개발자분들이 이 얘기를 안 하면 입에 가시가 돋치나 하고 생각될 정도로 많이 나오는 '비트코인'이 떠올랐다.
비트코인 알못이지만 비트코인은 가상화폐고 그러면 이 가상화폐를 실제 우리가 사용하는 돈으로 얼마 정도 되는지 환산해주는 그런 환율 계산기를 만들어보면 좋겠다고 생각되었다.
(그들의 열띤 비트코인 토론이 여기에 힌트가 될 줄이야.)
1. 목표
비트코인 환율 계산기를 정말 간단하게 빠르게 만들어보자.
2.리서치 내용
일단, 난 비트코인 알못이기 때문에 비트코인에 대해서 정말 간단하게 개념만 공부를 해봤다.
1) 비트코인은 가상화폐의 한 종류고 이 외에도 이더리움, 리플코인 등이 있다.
2) 이러한 가상 화폐의 대표주자가 2008년 개발된 '비트코인'이라는 것.
3) 발행 비용이 들지 않는 장점이 있지만, 비트코인 포함 모든 가상화폐에는 적정 가격 기준이 존재하지 않는다.
그래서 그만큼 위험성이 존재한다.
지금 이 글을 쓰는 순간 비트코인 시세가 800만 원대 정도이던데...(과거의 나 왜 안 산거야.ㅠㅠ)
근데 갑자기 궁금한 게 비트코인을 다른 가상화폐로도 환산할 수 있나? 궁금하네.
아무튼 이 이상 더 알려고 하니 머리가 복잡해져 얼른 초간단 비트코인 환율 계산기 만들기에 돌입했다.
3.UI 레이아웃 그리기
음. 이상하게 이거는 바로 스케치에서 간단하게 UI를 그려보려니깐 잘 안됐다. 그래서 종이를 구걸해서 그 위에 뭔가 필요한 요소들을 끄적이고 대강대강 그려봤다.
필요한 요소들을 끄적끄적내가 이해하는 선에서 최소한으로 필요한 것들을 넣어보려고 했다.
1) 0 BTC / 0원
2) 비트코인과 계산하고자 하는 화폐 (한국 원 혹은 US 달러)를 서로 변환할 수 있는 Switch 기능
3) 숫자 버튼
4) 추가로 생각난 것은 이게 시세가 언제 업데이트되었는지 날짜 표시
4.GUI 작업
자. 초간단 비트코인 계산기 완성. (너무 간단해서 민망할 정도다.)
1) 이번에 네이밍에 도전했다. 이름하야 bitnip.
bitcoin의 bit + 동전 한 닢의 '닢' = bitnip 빗닢...빗닢...껄껄...
2) 컨셉은 깔끔하게 Black & White로 구성. 완전한 Black과 White를 그다지 선호하지 않기 때문에 매트한 느낌으로.
3) font는 나눔스퀘어를 썼다. 약간 딱딱한 느낌이 숫자와 계산이라는 단어의 느낌과 잘 어울려 보였다.
로고에 쓰인 font는 Montserrat Alternates이다.
4) 처음에는 '완전 미니멀하게 가자!'라는 마음에 숫자 버튼에 원형 백그라운드 조차도 없었는데,
원형을 추가하니 버튼이 좀 더 누르고 싶은? 그런 느낌이어서 마음에 들었고, 상단의 환율 계산 표시와도 확연히 구분이 되어서 더 다듬어진 느낌을 주었다.
5) 비트코인과 원화를 바꾸는 Switch 버튼은 처음에 돌아가는 원형 Arrow 모양의 아이콘이었는데 뭔가 Refresh 하는 아이콘 느낌이 들어서 바꾸었다. 결론적으로 상단의 숫자 배열상으로 보았을 때, 상하를 바꾸는 저 Arrow 아이콘이 더 바람직하다고 느껴졌다.
6) 그나저나 비트코인 42개는 3억이 넘어가는구나. 정말 스고이하다.
아래는 mock-up 이미지들이다.
내친김에 앱 아이콘까지 만들어보았다. bitnip에서 각 끝에 b와 p 그리고 공통으로 들어가는 i를 활용해서
사람 얼굴을 형상화해봤다. 왜 이렇게 했는지는 모르겠다. 그냥 귀엽게 보이고 싶었다.ㅇ_ㅜ 귀여운 게 최고.
5. 결론 및 느낀 점
1) 사실 이번에 Landing Page 디자인을 하려고 했으나, 로고 파일이 회사 노트북에 있었던 이유로 그다음 주제인 Calculator를 먼저 하게 되었다. 하루 종일 계산기만 연구하고 있으니 지겹기도 했지만, 하나를 온전히 파고들 수 있는 시간을 가지는 건 좋은 일인 것 같다.
2) 이어서 그런 시간이 왜 좋은 일인지를 깨닫게 된 순간이 있었다.
며칠 전에 회사에서 급하게 안드로이드 앱 신용카드 결제 디자인을 해야 할 일이 있었다. 근데 이게 엄청 오래 걸릴 줄 알았는데, 그 날 바로 요청 들어와서 그 날 끝내버렸다. 이게 전에 미리 만들어 놓은 모바일 웹 버전 디자인(과거의 나 아주 칭찬해.)이 있어서 빠르게 진행된 것도 있었지만, 딛자인 데이의 저번 주 주제였던 Credit Card를 하면서 공부하고 생각했던 부분들이 어느 정도 도움이 되었다.
예를 들어, 정보를 다 입력하지 않으면 결제버튼은 비활성화 상태라던가. 뭐 요런 소소한(?) UI 부분들.
3) 회사에서 만약 비트코인 얘기가 나오지 않았다면, 난 그냥 단순히 계산기를 그리고 말았겠지?
회사 개발자분들에게 감사의 인사를 드린다.
4) 나중에 이 계산기를 가지고 간단하게 인터랙션이 담긴 gif를 만들어볼 생각이다.
왜냐하면 단순해서 인터랙션 구현에 써먹기 좋을 것 같다.
스위치 버튼을 누르면 비트코인과 원화가 샤라락 바뀌는 정도?
근데 이걸 구현하기 위해선 프레이머가 답인가? 인비전으로는 할 수 없는 건가? 한번 알아봐야겠다.
5) 마지막으로 다음 주제는 진짜로 'Landing Page'이다. 일단 랜딩 페이지 관련한 참고 자료들을 모아 두었다. 틈틈이 읽어보고 주말을 다시 불태워야겠다.
감사합니다.
