# 만다라트: 장기 목표 챌린지 (1)

![Image](https://upload.cafenono.com/image/slashpagePost/20250709/153719_YxNyi3uxMPJdYhb26g?q=80&s=1280x180&t=outside&f=webp)

> 소속** :** 비사이드 12기, P1J7팀

> 기간 : 2022.8 - 운영중

> 인원 : 7명
기획팀 2명, 디자인팀 2명(본인), 프론트엔드팀 1명, 백엔드팀 2명

# 팀 빌딩과 그라운드 룰

지난 8월 20일, [비사이드 12기](https://bside.best/bside/recruit/D220611033944)에 디자이너로 합류했습니다.

본업이 있음에도 불구하고 사이드 프로젝트 참여를 결심한 것은 반 정도의 불안, 그리고 나머지 반 정도의 갈증 때문이었습니다. 방향은 맞는 것 같은데 방법을 모르는 채로 몇 달을 보내고 나니 무엇이든 하지 않고는 견딜 수 없겠다는 생각이 들었습니다.

애석하게도 제가 아는 것은 ‘잘’이 아닌 ‘열심히’가 전부였습니다. 그러므로 무모할지라도 일단 열심히 해보는 수밖에 없었습니다. 그렇게 저를 포함해 8명의 팀원과 14주간 한 배를 타게 되었습니다.

24만원이라는 적지 않은 참가비를 내고 모인만큼 모든 팀원들은 명확한 목표의식을 가지고 있었습니다. 그러나 회사 밖에서의 활동에 강제성을 부여하기란 어려운 일이고, 또 배경도 목적도 다른 사람들끼리 모여 일하다 보면 갈등이 생기기 마련입니다.

때문에 저희 팀은 프로젝트 시작 전 ‘그라운드 룰(모든 조직 구성원이 지켜야 하는 기본 규칙)’을 설정하여 모두가 한 방향을 바라볼 수 있도록 했습니다.

- 매주 월요일 자정까지 그 주의 작업 진행 상황과 다음 주 할 일을 적을 것.

- 작업 중 궁금한 점이나 이슈가 생길 경우 슬랙으로 전체 공유할 것. 메시지를 읽은 경우 반드시 반응을 남길 것.

- 찝찝함을 남기지 않을 것(모든 이슈는 꼭 해결하고 넘어갈 것).

- 모두의 의견을 존중하되, 의견차가 좁혀지지 않으면 빠르게 투표로 결정할 것.

- 이견이 없더라도 자신의 의견을 적극적으로 표출할 것.

- 기획/디자인/개발 등 롤이 나눠져 있더라도 구분하지 않고 편하게 의견을 낼 것.

이와 함께 정기회의 날짜, 회의록 작성 규칙 및 순서, 마일스톤, R&R 등 다양한 것들을 협의했습니다.

---

# 아이템 선정

감히 단언하건대 모든 서비스의 가장 큰 난관은 **시간**입니다. 시간만 많다면 세상에 못 만들 것이 없습니다. 이를 바꿔 말하면 **정해진 시간 안에 완성도 있는 제품을 만들어내는 일**이 가장 중요하고, 또 어렵다는 의미가 됩니다.

그런 점에서 14주 동안 하나의 제품을 완성시켜야 하는 비사이드는 꽤 난이도 있는 미션이라 할 수 있겠는데요, 이 미션을 성공시키기 위해서는 **1.심플한 아이템을 선정하고, 2.스펙을 최소화하고, 3.기능을 1차/2차로 나눠 구현**하는 등의 전략이 필수적이었습니다.

앞서 말한 심플한 아이템으로 저희 팀이 선택한 것은 **만다라트(Mandal-art)**입니다. 이는 작은 목표를 이뤄 나가며 큰 목표를 달성하는 기술로, MLB 대표 야구 선수 오타니 쇼헤이가 사용하여 널리 알려진 바 있습니다.

![오타니 쇼헤이의 만다라트](https://upload.cafenono.com/image/slashpageHome/20240708/122206_38PML3IWv5tTa6js87?q=75&s=1280x180&t=outside&f=webp)

이미 많은 사람들로부터 좋은 목표 달성 기법으로 인정받은 만다라트지만, 사용법은 불편하기 그지 없습니다. 직접 종이에 만다라트 표를 그린다는 가정 하에 말해보자면, 일단 **접근성이 매우 떨어집니다.** 언제나 만다라트가 그려진 종이를 들고 다닐 수는 없는 법이니까요.

게다가 작은 목표를 통해 큰 목표를 이뤄 나간다는 본연의 취지에 맞지 않게, **각 목표의 달성 현황을 알 방법이 없습니다.** 예를 들어 ‘매일 영양제 먹기’라는 목표가 있다고 가정했을 때, 이 목표를 언제 성공했고 실패했는지, 그것을 실패함으로써 큰 목표에 어떤 영향이 가는지는 그저 짐작하는 수밖에 없습니다.

이미 시장에 나와있는 만다라트 관련 앱은 위의 문제점을 다수 해결하고 있지만, 그럼에도 여전히 해결해야 할 것들이 남아 있습니다. 바로 아래의 항목입니다.

- 무료로 제공되는 만다라트 관련 앱이 없다. (iOS 기준)

- 장기 목표를 세울 수 있는 관련 앱이 없다.

- 목표별로 시간 설정이 불가능하다.

- 목표 달성 현황을 알 수 없다.

이에 기획팀 주도로 **타겟 분석, 페르소나 설정, 가설 검증, 레퍼런스 서치, 유저 플로우** 등의 과정이 진행되었고, 저희가 가진 해결방안으로 충분히 시장성 있는 제품을 만들 수 있겠다고 판단하여 최종적으로 만다라트를 선정하게 되었습니다.

![유저 플로우](https://upload.cafenono.com/image/slashpageHome/20240708/122207_LXOj8kuirfiuJNBMfw?q=75&s=1280x180&t=outside&f=webp)

![레퍼런스 서치와 페르소나 설정](https://upload.cafenono.com/image/slashpageHome/20240708/122208_APzn4OiIhSgVZPh9b4?q=75&s=1280x180&t=outside&f=webp)

---

# 디자인 기획

대략적인 PRD를 기반으로 디자인팀은 컨셉과 목표를 뾰족하게 다듬기 시작했습니다. 먼저 컨셉입니다. 한 주간 레퍼런스 서치를 진행한 결과 기존의 캘린더나 투두 앱들은 대개 동글동글한 형태를 띠고 있었습니다. 그들과 차별성을 가지고, 또 만다라트와는 유사성을 가지고자 저희는 **각지고 명확한 형태**를 택했습니다.

그와 더불어, 만다라트 자체에 여러 색상이 쓰일 예정이라 **전체적으로 무채색**만을 사용하기로 했습니다. 메인 컬러를 따로 추가할 경우 복잡성이 증가할 거라는 우려가 들었기 때문입니다.

![무드보드](https://upload.cafenono.com/image/slashpageHome/20240708/122209_sLXCnOn0cscI8kTieA?q=75&s=1280x180&t=outside&f=webp)

목표는 만다라트라는 다소 생소한 개념을 유저들이 쉽게 이해하고 사용할 수 있도록 돕는 것이었는데요, 이를 위해 UXUI는 최대한 간결하고 단순하게 잡기로 했습니다. 그 과정에서 팝업과 가이드 등 어떤 것부터 해야 할지 모르는 유저에게 길을 알려줄 수 있는 여러 장치들을 고안하기도 했습니다.

디자인 컨셉과 목표가 정해진 뒤에는 앱 아이콘 작업을 시작했습니다. 서비스 전체를 대표하는 메타포인만큼 다양한 안을 테스트 했는데요, 전체 투표 결과 가장 심플한 **7안**이 선택되었습니다. 실은 저의 원픽은 다른 것이었는데 역시 simple is best라는 공식은 불변인가 봅니다. 🤧

![앱 아이콘 테스트](https://upload.cafenono.com/image/slashpageHome/20240708/122210_YgkiCtxIIEEQQNJNai?q=75&s=1280x180&t=outside&f=webp)

![홈 화면에 적용한 앱 아이콘](https://upload.cafenono.com/image/slashpageHome/20240708/122211_IeYTSBy7lXtH8yWL1T?q=75&s=1280x180&t=outside&f=webp)

[Video](https://vz-127031db-d43.b-cdn.net/299e64e5-07fe-4f8c-a640-90dcde5c2c6b/playlist.m3u8)

이후 본격적인 작업에 앞서 기본적인 디자인 시스템을 잡고, 차후 핸드오프할 것을 고려하여 여러 규칙을 만들었습니다. 여담이지만, 폰트는 하나의 서체로 한글/영문 모두 높은 퀄리티로 대응 가능한 Pretendard를 사용했습니다. (해당 서체를 사용하는 것은 이번이 처음인데 한글 / 영문 타입에 따라 일일이 대치하지 않아도 되어 정말 만족스러웠습니다 🥹)

![MDS(Mandalart Design System) - Foundation 부분](https://upload.cafenono.com/image/slashpageHome/20240708/122212_ex8OLp7ScTQpNJEotz?q=75&s=1280x180&t=outside&f=webp)

---

[2편](https://slashpage.com/grit-han-94/xjqy1g2vqp1qjm6vd54z)에서 이어집니다.

For the site tree, see the [root Markdown](https://slashpage.com/grit-han-94.md).