도모버스 정식서비스 UI 디자인 과정기
부제: 오늘도 선택과 고민을 반복한다
2020년 9월에 도모버스 팀에 합류하여 디자인과 사용자 경험을 개선하고 있는 디자이너 슬기입니다. 저는 도모버스 정식 버전의 UI 디자인 과정에서 겪었던 여러 고민들을 풀어보았습니다 👀
도모버스?
도모버스는 수험생들을 위한 앱입니다. 간단히 말해, 공부를 어떻게 해야할 지 얼마나 했는지 알려주는 내 손안의 “작고 소중한” 공부 멘토라고 생각해주시면 좋을 것 같아요 😉
도모버스는 수험생 개개인의 환경에 최적화된 커리큘럼 서비스를 제공하고 있습니다. 학생들이 서비스에서 안내하는 루틴대로 강의를 수강하고, 스케줄을 관리하며 공부 시간이나 습관을 되돌아 볼 수 있습니다.
요즘 수능을 준비하는 수험생의 90% 이상이 스마트폰을 사용하고 있는데, 이 스마트폰을 조금 더 효과적으로 사용하는 방법을 저희 도모버스 팀에서 보여주고 있습니다.
도모버스 정식 버전의 LABS와 우주정거장 페이지를 디자인하며 느끼고 겪었던 고민들을 적어보려합니다.
데이터를 한눈에, LABS 디자인
도모버스의 ‘LABS’ 페이지에서는 수험생들의 공부시간과 돌발퀴즈 정답률, 도모버스 회원들과의 공부시간 비교 등 여러 데이터를 한눈에 확인 할 수 있는 페이지 입니다. 이 페이지에서는 여러 데이터를 한눈에 보기 쉽게 확인 할 수 있도록 인포그래픽 작업이 필요했는데요, 여기서 두가지의 고민이 있었습니다.
1) 어떤 그래프를 사용해야 할까?
LABS 페이지에서는 총 5가지의 정보를 그래프로 시각화해야 했습니다. 각 정보의 성격에 따라 그래프의 형태가 달라야 하며, 각 정보를 어떤 형태로 풀어내야 쉽게 알아볼 수 있을지에 대한 고민이 필요했습니다.
그 중 가장 고민이 많았던 주간 리포트의 일주일치 공부 시간 그래프와 돌발퀴즈의 정답률 기록 그래프입니다.
주간 리포트의 그래프는 일주일 동안의 공부 시간들을 각 요일별로 한눈에 비교 하는 것이 키 포인트라고 생각했고, 돌발퀴즈의 정답률 기록은 주간이 아닌 일 단위였으며, 정답률 변화 추이가 어떻게 되는지가 중요한 요소라고 생각했습니다.
비슷해보이지만 다른 성격의 그래프를 어떻게 효과적으로 보여줄 수 있을지에 대한 고민은 아직도 많지만,
주간리포트는 날짜별로 공부 시간을 비교하며 한눈에 보기 좋은 막대 그래프를 선택하였고, 돌발퀴즈의 정답률은 꺾은선 그래프를 통해 점과 점을 선분으로 이어 정답률 변화 추이를 한번에 알아보기 쉽도록 제작하였습니다.
2) 어떤 컬러를 써야 서로 잘 어울릴까?
저희 도모버스 앱의 주 컬러는 쨍하고 밝은 오렌지컬러이지만, 과목별 공부 비율을 한눈에 보여주기 위해서는 과목별로 컬러를 다르게 지정해야 할 필요가 있었습니다.
저에겐 컬러가 많아져도 디자인이 조잡해 보이지 않도록 보여야할 의무가 있었고, 어떻게 하면 도모버스의 주 컬러인 오렌지컬러와 함께 썼을 때 어색해보이지 않으며, 심지어 예뻐보일까에 대한 고민을 하게 되었습니다.
“정답은 파스텔 컬러!”
역시 정답은 “파스텔 톤의 컬러”였습니다. 파스텔 계열의 컬러들은 원색에 흰색을 섞어 채도를 낮춘 색으로, 채도는 낮지만 밝고 화사해보이는 장점이 있습니다. 또한 채도가 낮아 눈에 아주 강하게 띄는 색이 아니기 때문에 채도가 높 특정 컬러를 보완해주기에 아주 좋다고 합니다.
특히 도모버스의 주 컬러인 오렌지가 아주 쨍하고 채도가 높기 때문에 이를 보완해주면서도 자연스럽게 잘 녹여낼 수 있다고 생각했습니다.
다만, 앱의 전체적인 분위기를 맞추기 위해 너무 채도가 낮은 파스텔 컬러가 아닌, 조금 더 밝고 쨍한 컬러를 선택했습니다. 모두 같은 흰색을 섞어 만들어진 컬러이기 때문에 반대의 성향을 가진 색 끼리도 나름 조화를 이루는 것을 확인 할 수 있었습니다.
도모버스 소통창구 우주정거장 디자인
도모버스의 커뮤니티인 우주정거장 기획을 받아 처음 디자인 작업에 들어갔을 때에는 조금 의문이 있었습니다. 도모버스의 커뮤니티에는 그 흔한 순위별 화제 글도 없으며, 베스트 댓글도 또 검색 기능 조차도 존재하지 않았습니다.
왜 없어?!
커뮤니티를 활성화 시키기 위한 필수 요소들이 모두 없었던 이유는 바로 우리 서비스의 타겟이 “수험생”이기 때문입니다.
공부에 집중해야 할 수험생이 커뮤니티에 머무는 시간이 길어지면 공부에 방해가 될 수도 있으니까요. 하지만 앱에 오래 머물게 하고 활성화 시키는 효과적인 방법 중 하나가 커뮤니티 활성화라고 생각하기에, 이 부분에 대한 고민은 아직도 계속 되고 있습니다.
1) 어떻게 해야 깔끔할까?
우주정거장 디자인 시작 단계에서 가장 고민했었던 부분은 대부분 텍스트로만 구성된 우주정거장의 컨텐츠들을 어떻게 해야 단계별로 잘 구분이 되며, 또 그 컨텐츠들이 서로 방해되지 않고 깔끔하게 정리가 되어 보이는지에 대한 고민이었습니다.
처음에 디자인팀에서 세워놓았던 가이드를 따라 디자인을 진행하였지만, 텍스트의 종류가 많은 우주정거장에서는 가이드만 따라서 디자인하기는 힘들었습니다.
저는 필요한 정보들의 상하 관계를 정하고 폰트의 굵기와 명도 조절, 라인 구분을 통해 우주정거장의 디자인을 정리했습니다. 별 것 아닌 것 같아 보이지만, 적절한 행간과 자간 조절, 텍스트 그룹들간의 분류가 어떻게 잘 되어 있는지의 여부에 따라 디자인의 방향성이 매우 달라질 수 있다고 생각합니다.
도모버스 정식버전이 출시된지 3개월이 지난 지금도, 도모버스의 UI디자인과 디테일은 계속하여 변하고 발전하고 있습니다.
사실 제가 수험생이 아니기 때문에 도모버스를 주로 사용하는 학생들의 입장이 어떠한지 100% 이해하기는 어렵겠지만, 사용자들이 우리 앱을 더욱 편하게 이용할 수 있도록 끊임없이 고민하려 합니다.
