기능과 디자인 모두 사로잡다, 아차 월 지출관리 앱
기능과 디자인 모두 사로잡은 앱
재테크의 시작은 자신의 소비패턴을 아는 것이다. 기본 중의 기본이지만 생각보다 만만치 않다. 수기로 가계부를 써보고, 금융 앱도 이용해봤지만 언제나 제자리걸음이었다. 돈 관리는 대체 어떻게 하는 건지, 다른 사람들은 어떻게 재테크 고수가 된 건지 알고 싶었다. 유비벨록스의 금융서비스 ‘아차’는 현금흐름과 카드별 지출, 연말정산 기능까지 담은 앱으로, 소비패턴 파악에 최적화돼 있다. 이러한 특징을 적절하게 담아 깔끔하게 디자인한 글림의 이야기를 들어봤다.
글. 김수진 에디터 soo@ditoday.com
‘아차’를 디자인하다
아차는 지난 8월 유비벨록스에서 새롭게 출시한 금융서비스다. 글림은 앱·웹디자인부터 브랜딩에 이르는 전반적인 디자인 업무를 진행했다. 목표는 크게 두 가지였다. 사용자에게 아차라는 새로운 금융서비스와 편리한 고정지출 기능을 함께 알리는 것.
프로젝트 시작 과정에서는 아차가 추구하는 방향 및 이미지를 바탕으로 로고를 제작했다. 카테고리별로 제작한 화면설계서 리뷰를 비롯해 다방면에서 클라이언트와 충분한 커뮤니케이션을 진행했다. 전체 디자인이 나온 후에도 프로토타입을 제작해 전체 흐름이 자연스러운지, 사용성이 떨어지지는 않는지, 개선해야 할 부분이 있는지 확인하고 수정하는 등 서비스의 질을 높이는 데 중점을 뒀다.
1) 컬러로 결제 진행방식 구분
아차는 카테고리별로 성격이 다른 정보를 제공한다. 예컨대 월별 지출금액이 중요한 ‘지출관리’ 영역은 백그라운드 컬러로 각 정보의 집중도를 높였다. 아차의 브랜드 컬러인 퍼플을 기준으로 변화를 줬으며 사용자의 눈에 피로감을 주는 컬러는 배제했다. 이미 결제가 끝난 ‘지난달’은 다크그레이를, 아직 결제가 진행되지 않은 ‘다음 달’은 블루를 사용해 결제 완료/예정의 구분을 뚜렷하게 했다.
2) UI/UX 키포인트 세 가지
① 쉬운 정보 접근성
최종 금액은 좌측 정렬, 상세 금액은 우측 정렬을 하는 등 가이드를 정립해 직관적이고 효율적으로 정보를 인지할 수 있도록 했다. 또 사용자가 편리하게 원하는 정보에 도달할 수 있도록 하단 내비게이션 바를 활용했다.
② 이모지를 활용한 생동감
재치 있는 슬로건과 어울리도록 생동감을 부여하기 위해 여러 방안을 고민했다. 각 OS의 이모지를 활용해 친근함과 트렌디함을 높이는 방안이 채택됐다. 대표화면 타이틀에도 이모지를 적용, 결과적으로 정적인 문구에 생동감을 불어넣은 아차만의 키포인트가 됐다.
③ 아차만의 폰트
정보의 양이 많은 금융서비스 앱은 가독성이 중요한 요소 중 하나다. 따라서 적용 폰트에 대한 논의를 활발히 진행했다. 여러 폰트를 고려했지만 OS별 기본 시스템 폰트를 사용하는 게 최적이라고 판단했다. 금액을 표시하는 폰트는 기본 폰트와 안정적으로 어울리는 ‘Roboto’ 폰트를 적용했다. 시스템 폰트의 안정성을 바탕으로 금액 부분을 튀지 않으면서도 강조하는 효과가 있었다.
3) Check! 눈여겨볼 기능
아차의 기능 중 눈여겨볼 점은 첫 번째로 지출관리 내 ‘현금흐름 계산하기’다. 사용자가 월 고정 지출 및 수입을 등록하면 통장 현황 대비 앞으로 지출할 금액이 부족하지 않은지 계산해 잔고 부족이나 미납 등을 방지해준다. 현금흐름을 계산 중일 때는 움직이는 일러스트를 추가로 생동감을 부여하고 직관적인 그래프를 활용해 흥미를 유발했다.
‘내 카드’에는 사용자가 이용하는 카드가 무엇인지, 카드 이용 금액이 얼마나 되는지, 카드 혜택을 받을 수 있는지에 대한 정보를 담았다. 한 화면에 들어갈 정보가 많다 보니 그래프를 제외한 디자인 요소를 배제했다.
마지막으로 연말 정산은 사용자에 따라 노출되는 정보량이 천차만별인 카테고리다. 그렇기에 리스트 형식보다는 최상단에 배치한 사용자의 지출 패턴에 따라 TIP을 제공하는 개인화 영역에 상황별 일러스트를 활용했다. 이는 사용자가 한눈에 직관적으로 정보를 인지할 수 있게 했다.
MINI INTERVIEW
유비벨록스 유호경 팀장
토스, 뱅크샐러드와 같은 핀테크 서비스가 주목을 받고 있습니다. 경쟁서비스가 이미 급속도로 성장하고 있는 상황에서 차별화 서비스를 출시해 시장에 자리 잡는다는 것은 어려운 과제였습니다. 여러 난관에 부딪히고 해결하며 글림에서 UI/UX뿐만 아니라 고객 관점에서 좋은 서비스를 만들어 내기 위해 여러 아이디어와 의견을 제시해줘서 많은 도움이 됐습니다. 핀테크 특성상 데이터와 기능의 복잡성이 높았는데 UI/UX를 깔끔하게 표현해 디자인과 이용성에 대해 사용자의 칭찬을 듣고 있습니다. 시장에서 우리만의 아이덴티티를 어느 정도 확립했고 고객들이 꼭 필요한 서비스가 출시돼서 기쁘다고들 합니다. 서비스가 성장해서 글림과 함께 기쁨을 나눌 수 있길 바랍니다.
글림 김수현 책임
우선 많은 배려와 격려로 프로젝트를 완료할 수 있게 한 유비벨록스 측에 감사 인사를 드리고 싶습니다. 서비스 특성상 많은 이해력이 필요했고 그만큼 커뮤니케이션을 진행해야 했는데 담당자분과 편하게 소통하고 적극적으로 의견을 제시하며 즐겁게 프로젝트를 진행했습니다. 이 프로젝트로 인해 디자인적인 것 외에도 많이 배웠고, 다음에 또 좋은 기회로 프로젝트를 진행할 수 있으면 좋겠습니다. 저희 팀원과 유비벨록스 담당자분 모두 수고 많으셨고 감사했습니다.
프로젝트 기본정보
프로젝트명: 아차
클라이언트사: 유비벨록스
브랜드명: 아차
대행사(제작사): 글림
오픈일: 2020.08.19
URL:
Web
AOS
iOS
