만다라트 앱 제작기
만다라트 앱, 사이드 프로젝트로 만들어보자!
팀 빌딩과 그라운드 룰
지난해 8월 20일, 비사이드 12기에 디자이너로 합류했습니다. 본업이 있음에도 불구하고 사이드 프로젝트 참여를 결심한 것은 반 정도의 불안, 그리고 나머지 반 정도의 갈증 때문이었습니다. 방향은 맞는 것 같은데 방법을 모르는 채로 몇 달을 보내고 나니 무엇이든 하지 않고는 견딜 수 없겠다는 생각이 들었습니다.
애석하게도 제가 아는 것은 ‘잘’이 아닌 ‘열심히’가 전부였습니다. 그러므로 무모할지라도 일단 열심히 해보는 수밖에 없었습니다. 그렇게 저를 포함해 7명의 팀원과 14주간 한 배를 타게 되었습니다.
24만원이라는 적지 않은 참가비를 내고 모인만큼 모든 팀원들은 명확한 목표의식을 가지고 있었습니다. 그러나 회사 밖에서의 활동에 강제성을 부여하기란 어려운 일이고, 또 배경도 목적도 다른 사람들끼리 모여 일하다 보면 갈등이 생기기 마련입니다.
때문에 저희 팀은 프로젝트 시작 전 ‘그라운드 룰(모든 조직 구성원이 지켜야 하는 기본 규칙)’을 설정하여 모두가 한 방향을 바라볼 수 있도록 했습니다.
매주 월요일 자정까지 그 주의 작업 진행 상황과 다음 주 할 일을 적을 것.
작업 중 궁금한 점이나 이슈가 생길 경우 슬랙으로 전체 공유할 것. 메시지를 읽고 꼭 반응을 남길 것.
찝찝함을 남기지 않을 것 (모든 이슈는 꼭 해결하고 넘어갈 것)
모두의 의견을 존중하되, 의견차가 좁혀지지 않으면 빠르게 투표로 결정할 것.
이견이 없더라도 자신의 의견을 적극적으로 표출할 것.
기획/디자인/개발 등 롤이 나눠져 있더라도 구분하지 않고 편하게 의견을 낼 것.
이와 함께 정기회의 날짜, 회의록 작성 규칙 및 순서, 마일스톤, R&R 등 다양한 것들을 협의했습니다.
아이템 선정
감히 단언하건대 모든 서비스의 가장 큰 난관은 시간입니다. 시간만 많다면 세상에 못 만들 것이 없습니다. 이를 바꿔 말하면 정해진 시간 안에 완성도 있는 제품을 만들어내는 일이 가장 중요하고, 또 어렵다는 의미가 됩니다.
그런 점에서 14주 동안 하나의 제품을 완성시켜야 하는 비사이드는 꽤 난이도 있는 미션이라 할 수 있겠는데요, 이 미션을 성공시키기 위해서는 1.심플한 아이템을 선정하고, 2.스펙을 최소화하고, 3.기능을 1차/2차로 나눠 구현하는 등의 전략이 필수적이었습니다.
앞서 말한 심플한 아이템으로 저희 팀이 선택한 것은 만다라트(Mandal-art)입니다. 이는 작은 목표를 이뤄 나가며 큰 목표를 달성하는 기술로, MLB 대표 야구 선수 오타니 쇼헤이가 사용하여 널리 알려진 바 있습니다.
오타니 쇼헤이의 만다라트이미 많은 사람들로부터 좋은 목표 달성 기법으로 인정받은 만다라트지만, 사용법은 불편하기 그지 없습니다. 직접 종이에 만다라트 표를 그린다는 가정 하에 말해보자면, 일단 접근성이 매우 떨어집니다. 언제나 만다라트가 그려진 종이를 들고 다닐 수는 없는 법이니까요.
게다가 작은 목표를 통해 큰 목표를 이뤄 나간다는 본연의 취지에 맞지 않게, 각 목표의 달성 현황을 알 방법이 없습니다. 예를 들어 ‘매일 영양제 먹기’라는 목표가 있다고 가정했을 때, 이 목표를 언제 성공했고 실패했는지, 그것을 실패함으로써 큰 목표에 어떤 영향이 가는지는 그저 짐작하는 수밖에 없습니다.
이미 시장에 나와있는 만다라트 관련 앱은 위의 문제점을 다수 해결하고 있지만, 그럼에도 여전히 해결해야 할 것들이 남아 있습니다. 바로 아래의 항목입니다.
무료로 제공되는 만다라트 관련 앱이 없다. (iOS, 작년 8월 기준)
장기 목표를 세울 수 있는 관련 앱이 없다.
목표별로 시간 설정이 불가능하다.
목표 달성 현황을 알 수 없다.
이에 기획팀 주도로 타겟 분석, 페르소나 설정, 가설 검증, 레퍼런스 서치, 유저 플로우 등의 과정이 진행되었고, 저희가 가진 해결방안으로 충분히 시장성 있는 제품을 만들 수 있겠다고 판단하여 최종적으로 만다라트를 선정하게 되었습니다.
유저 플로우
레퍼런스 서치와 페르소나 설정디자인 기획
대략적인 PRD를 기반으로 디자인팀은 컨셉과 목표를 뾰족하게 다듬기 시작했습니다. 먼저 컨셉입니다. 한 주간 레퍼런스 서치를 진행한 결과 기존의 캘린더나 투두 앱들은 대개 동글동글한 형태를 띠고 있었습니다. 그들과 차별성을 가지고, 또 만다라트와는 유사성을 가지고자 저희는 각지고 명확한 형태를 택했습니다.
그와 더불어, 만다라트 자체에 여러 색상이 쓰일 예정이라 전체적으로 무채색만을 사용하기로 했습니다. 메인 컬러를 따로 추가할 경우 복잡성이 증가할 거라는 우려가 들었기 때문입니다.
무드보드목표는 만다라트라는 다소 생소한 개념을 유저들이 쉽게 이해하고 사용할 수 있도록 돕는 것이었는데요, 이를 위해 UXUI는 최대한 간결하고 단순하게 잡기로 했습니다. 그 과정에서 팝업과 가이드 등 어떤 것부터 해야 할지 모르는 유저에게 길을 알려줄 수 있는 여러 장치들을 고안하기도 했습니다.
디자인 컨셉과 목표가 정해진 뒤에는 앱 아이콘 작업을 시작했습니다. 서비스 전체를 대표하는 메타포인만큼 다양한 안을 테스트 했는데요, 전체 투표 결과 가장 심플한 7안이 선택되었습니다. 실은 저의 원픽은 다른 것이었는데 역시 simple is best라는 공식은 불변인가 봅니다.
앱 아이콘 테스트안
홈 화면에 적용한 앱 아이콘과 스플래시 화면이후 본격적인 작업에 앞서 기본적인 디자인 시스템을 잡고, 차후 핸드오프할 것을 고려하여 여러 규칙을 만들었습니다. 여담이지만, 폰트는 하나의 서체로 한글/영문 모두 높은 퀄리티로 대응 가능한 Pretendard를 사용했습니다. (해당 서체를 사용하는 것은 이번이 처음인데 한글 / 영문 타입에 따라 일일이 대치하지 않아도 되어 정말 만족스러웠습니다 )
MDS(Mandalart Design System) - Foundation 부분Overview
‘만다라트 - 장기 목표 챌린지’는 아래의 피쳐로 구성되어 있습니다. 여타 To-do, 또는 캘린더 앱과 달리 대부분의 피쳐가 하나로 연결된 형태인데요, 하나씩 차근차근 설명해보겠습니다.
온보딩 : 서비스의 전체적인 이해를 돕는 간단한 페이지
만다라트 : 만다라트를 등록하는 페이지
캘린더 : 만다라트 태스크를 실천하는 페이지
통계 : 실천한 태스크를 통계로 확인하는 페이지
메뉴 : 만다라트 가이드, 알림 설정, 데이터 초기화 등 기타 페이지
(왼쪽부터) 온보딩, 만다라트, 캘린더, 통계, 메뉴의 일부 페이지만다라트
만다라트는 중요도순으로 Main Goal, Sub Goal, Task로 이루어져 있습니다. 풀어 말하자면 아래와 같습니다.
Main Goal : 궁극적으로 이루고 싶은 목표 (장기)
Sub Goal : Main Goal을 이루기 위해 실천해야 할 것
Task : Sub Goal을 이루기 위해 실천해야 할 것 (단기)
즉 만다라트는 매일 작은 단위의 목표(Task)를 실천해 나가며, 최종 목표(Main Goal)를 달성하는 기술이라 할 수 있습니다.
(왼쪽부터) Main Goal, Sub Goal, Task 위치Main Goal, Sub Goal, Task를 등록하는 방법은 간단합니다. 원하는 위치를 선택한 후 하단의 ‘추가’ 버튼을 통해 몇 가지 필드를 채우기만 하면 됩니다.
만다라트는 9*9칸으로 이루어져 있고, 그 특성상 최소 10칸 이상을 채워야 정상적으로 서비스를 이용할 수 있습니다. 따라서 지난한 등록 과정을 최대한 가볍게 풀어내는 것을 목표로 잡았습니다.
디자인을 마치고 보니 꽤나 알록달록하고 복잡한 형태가 되었는데요, 이렇게 된 데는 슬픈 사연(?)이 있습니다. 우선 모바일이라는 한정된 지면 안에 총 81칸의 만다라트를 구겨 넣으면 각각의 칸에 등록한 내용을 충분히 보여줄 수 없게 됩니다. 유저가 특정 내용을 찾고 싶을 때는 일일이 칸을 클릭해 확인하거나, 각 내용의 위치를 외워버리는 수밖에 없죠.
아무리 작게 내용을 써 넣더라도 한 글자 이상 쓸 수 없는 상황에서 저는 컬러와 이모지를 생각했습니다. Sub Goal은 컬러로, Task는 이모지로 구분하는 것입니다. 물론 이모지 역시 내용 전체를 대신하기에는 부족할 수 있지만, 유저가 직접 고른 것인 데다 이미지는 텍스트보다 기억에 오래 남으니 대안으로 삼아도 좋겠다는 판단이 섰습니다.
이모지는 초기에 애플 이모지를 사용했다가, 쓰인 컬러와 디테일이 적어 (그나마) 덜 복잡해 보이는 토스 이모지로 바꾸게 되었습니다.
(좌) 제목 일부를 보여주는 방식 / (우) 이모지로 표현하는 방식캘린더
앞서 만다라트에서 등록한 Task는 캘린더를 통해 비로소 실천력을 가지게 됩니다. 이는 목표를 세우는 데 그치는 여타 만다라트 앱과 분명한 차이를 가집니다.
예컨대, 만다라트에서 골프 라운딩이라는 Task를 등록했다고 가정해보겠습니다.
캘린더로 이동해 하단의 ‘추가’ 버튼을 클릭하면 골프 라운딩을 포함하여 기존에 등록해둔 Task 목록이 뜹니다. 유저는 여기에서 원하는 Task를 다중 선택하여 To-do List로 만들 수 있습니다.
위 플로우는 여러 개의 Task를 한꺼번에 등록할 때 유용하게 사용할 수 있습니다.
그런데 영양제 먹기 처럼 매일 실천해야 하는 Task라면 어떨까요? 여러 번의 클릭이 필요한 위 플로우는 여전히 유용할까요? 이에 대해 고민하던 저희는 ‘간편 등록’이라는 기능을 고안했습니다.
우선 만다라트에서 Task를 등록할 때 간편 등록을 ‘ON’으로 설정합니다. 그러면 해당 Task는 캘린더의 ‘간편 등록’ 영역에 추가되는데요. 대기 리스트라고 생각하시면 이해가 쉽습니다.
이렇게 추가된 Task를 클릭하면 바로 실천 가능한 To-do List가 됩니다. 즉 유저는 단 한 번의 클릭만으로 캘린더에 Task를 추가할 수 있게 되는 것이죠.
통계
대부분의 To-do 앱은 할 일을 생성하고, 그것을 완료하면서 모든 플로우가 끝납니다. 상당히 단순한 구조인데요, 최종 목표가 따로 없거나 단기적인 목표인 경우 이 역시 유저에게 좋은 방법이 될 수 있습니다. 그러나 애당초 ‘장기 목표’를 타깃으로 삼은 저희의 생각은 달랐습니다.
한가롭게 공원 산책을 하는 사람에게는 현재 몇 보를 걸었는지, 공원의 총 길이가 몇 킬로미터인지 알려줄 필요가 적습니다. 반대로 트랙을 뛰는 마라토너에게는 얼만큼 왔고 골인 지점까지 얼마나 남았는지가 가장 중요하겠죠. 통계를 고안한 것은 이와 같은 맥락이었습니다.
만다라트에서 생성하고, 캘린더를 통해 실천한 Task는 통계 페이지에서 그 달성률을 바로 확인할 수 있습니다. 여러 개의 Task를 등록했을 경우, 그 평균값을 계산하여 Sub Goal에 반영합니다. 같은 방식으로 Main Goal 역시 계산되어, 유저는 자신의 최종 목표(Main Goal)까지 얼마나 남았는지 쉽게 알 수 있습니다.
하나의 Sub Goal에 추가 가능한 Task는 총 8개. Sub Goal 역시 총 8개 등록 가능하므로 스크롤이 매우 길어질 것을 염려해 리스트는 드롭다운으로 구상했습니다.
마치며
지난주에 2차 업데이트를 마쳤으니, 약 7개월간 이어진 대장정이었습니다. 여러 사이드 프로젝트를 해왔지만, 실제로 런칭하기는 처음입니다. 그만큼 어설프고 미진한 부분이 있으리라 생각합니다. 그렇지만 처음부터 완벽한 서비스는 없다고 생각하고, 앞으로 불편한 지점들을 개선하려 노력하겠습니다.
비사이드는 회사를 벗어나 자유롭게 생각하고, 만들어보고, 논의할 수 있었던 소중한 기회였습니다. 언제나 생각하는 거지만 실력을 키우는 데는 직접 만들어보는 것만한 일이 없다고 생각합니다.
+) 아티클은 브런치와 제 개인 노션에 동시 작성됩니다! 노션으로 놀러오세요 :)
