하루 10분을 투자해서 나를 변화시킬 수 있다면?!
안녕하세요! 저희는 IT 동아리 디프만 14기에서 습관 형성 SNS ‘10분만’을 런칭한 10MM 팀입니다.
하루 종일 시간이 부족하다고 느끼시나요?
자기계발에 관심은 많지만, 바쁜 와중 시간을 효율적으로 활용하는 게 어려우신가요?
그렇다면 하루 중 가장 부담없는 ‘10분’으로 시작하는 습관형성 SNS ‘10분만’을 추천드려요!
서비스 설명
매일 잠깐씩 시간을 내서 자기계발을 하고 싶은데, 어떡하지..? 😥
사람들은 저마다의 방식으로 ‘갓생’을 살기 위해 노력하려고 하지만,
바쁜 일상 속에서 매일 시간을 할애하는 것은 쉽지 않아요.
그래서 긴 시간 대신, 자투리 시간을 투자하여 목표 달성을 돕는 서비스를 만들었어요!
기획 배경
현대 사회에서는 다양한 이유로 인해 개인들이 자신의 목표를 달성하거나, 시간을 관리하는 데 어려움을 겪고 있어요. 다양한 목표를 달성하기 위해 동시에 여러 일을 처리하려고 하면서 하나의 작업에 집중하기 어려워졌어요. 이런 와중 숏폼 콘텐츠가 등장하면서 전체적인 집중 시간도 감소한다는 문제도 있었죠.
이러한 현대인들의 특성과 어려움을 고려하여, 개인이 1) 자신의 목표를 달성하고 2) 시간을 효율적으로 관리할 수 있는 서비스를 만드는 것을 목표로 프로젝트를 진행했어요. 🎯
[1. 멀티태스킹 문화로 인한 집중력의 분산]
리서치 결과에 의하면, 성인의 80% 이상은 일상에서 여러 작업을 동시에 처리하는 멀티태스킹 경험이 있다고 해요. 이러한 작업으로는 부업, 사이드 프로젝트, 취미 등이 있었어요.
하지만 우리의 뇌는 작업을 전환하는 과정에서 최소 12분이라는 시간이 소요돼요. 이러한 사실을 바탕으로, 작업 간의 빈번한 전환, 즉 멀티태스킹은 1) 집중력을 저하시키고 2) 업무 수행의 효율성을 떨어뜨릴 수 있다는 문제를 발견하게 되었어요.
👉🏻 우리는 이를 해결하기 위해 사용자들이 자신의 일과를 '미션'의 형태로 등록하고, 타이머를 사용하여 집중 시간을 측정하고 기록하는 환경을 만들려고 했어요. 이러한 환경 속에서 사용자들은 하나의 일에 집중할 수 있고, 멀티태스킹으로 인한 집중력 저하를 최소화할 수 있을 거라고 판단했어요. 🕒
[2. 짧아진 집중력]
최근 ‘숏폼’의 등장으로 전반적인 콘텐츠의 길이가 짧아지고, SNS에서는 단편적인 콘텐츠들이 유행하면서 사람들은 단기적인 자극에 의존하는 경향이 높아지고 있어요. 이러한 변화로 인해 ‘쿼터족 (15분 이상으로 집중을 하지 못하는 세대를 이르는 말)’이라는 용어가 등장했어요. 한편 현대 직장인들의 평균 집중 시간이 13분에 불과하다는 연구 결과가 나오기도 했고요.
👉🏻 이러한 현실에 맞추어, 사용자들에게 ‘짧은 단위의 집중’을 유도하여 점진적으로 시간을 늘려나갈 수 있도록 돕고자 했어요. 이때 우리는 ‘짧은 단위’의 기준으로 심리적 부담이 가장 적은 ‘10분’을 채택했어요.
미션을 수행하는 동안, 10분 단위로 ‘토큰’이라는 시각적 보상이 주어져요. 이를 통해 사용자들은 지속적으로 동기부여를 받고, 집중력을 더 잘 유지할 수 있을 것으로 기대하고 있어요.
[3. 동기부여 요소의 통합을 통한 리텐션 향상]
미션을 수행하고 토큰을 획득하는 것이 단기적인 동기부여에 도움이 되었지만, 지속적인 습관화를 이끌어내는 것은 어려운 과제였어요. 이를 해결하기 위해 유저 리서치와 전문가 인터뷰를 통해 새로운 동기부여 요소를 찾으려고 노력했어요.
리서치 결과, 약 70%의 사용자가 '다른 사람들과 함께 하는 느낌'이 큰 동기부여 요소라고 응답했어요. 또한 전문가와의 인터뷰를 통해 습관 형성을 위해서는 '지속적인 시간에 대한 인식과 피드백'이 필요하다는 의견도 얻을 수 있었어요.
👉🏻 위 인사이트를 반영하여, 우리는 사용자들이 완료한 미션을 사진과 글로 공유할 수 있는 '피드 탭'을 만들어 서로 소통할 수 있는 공간을 마련했어요. 💬 더불어, '집중 시간'이나 '달성률' 등의 지표를 시각적으로 제공하여 사용자들이 자신의 상태를 더 잘 인지할 수 있게 도왔어요. 📊
다양한 동기부여 요소들을 추가하면서, 사용자들은 서비스 내에서 다양한 재미를 느낄 수 있게 되었어요. 이를 통해 서비스 리텐션 역시 증가시킬 수 있었고요. 😆
[4. 습관화를 위한 레벨링 시스템]
10MM 사용자들에게 가장 중요한 것은 미션을 통해 하루 일과를 ‘습관화’ 하는 것이에요. 사용자들이 반복적으로 미션을 수행하고 관리하기 위해서는, 게이미피케이션을 통해 단계별 목표를 제공하는 것이 좋은 동기부여 요소가 될 것이라고 판단했어요.
그래서 우리는 캐릭터 엠엠이를 활용한 레벨링 시스템을 도입했어요. 사용자들은 10분 간격으로 모은 토큰을 사용하여 캐릭터를 성장시킬 수 있어요. 이 과정에서 사용자는 재미를 느끼고 동시에 자신의 성취를 더욱 명확하게 인식할 수 있어요.
저희 캐릭터 엠엠이의 성장이에요.. (귀여워요.. 😳)
기획에서는 이런 부분을 고민했어요
[1. 미션 수행의 지속 시간을 얼마로 지정할 것인가?]
‘10분만’은 꼼꼼한 시간 트래킹을 통해 습관 형성을 유도하는 서비스예요. 이는 단순히 작업의 완료 여부만 챙기는 다른 습관 서비스와 차별화되는 ‘10분만’만의 특징이기도 해요.
그래서 우리는 한 번의 미션에 얼마만큼의 시간을 사용하게 할 것인지에 대해 고민이 많았어요. 처음에는 ‘10분’이라는 키워드에 주목했어요. 딱 ‘10분만’ 수행하면 미션을 완료할 수 있게, 타이머가 10분부터 카운트다운 되도록 만들었어요.
하지만 우리는 사용자 인터뷰를 통해 사람들이 한 번 집중을 시작하면 30분에서 1시간 정도를 소요한다는 것을 알게 되었어요. 그래서인지 하나의 미션에 몰입하기엔 10분이라는 시간이 짧다는 의견이 많았어요.
한편, 카운트다운 타이머를 사용하다 보니 생기는 문제도 있었어요. 10분에서 시간이 줄어들다 보니, ‘내가 실제로 집중한 시간’과 ‘남은 시간’이 달라서 헷갈리다는 의견도 많았어요. 결국 비슷한 정보인데, 불필요하게 복잡한 방식으로 사용자에게 정보를 제공하고 있었죠.
타이머를 ‘카운트업’ 방식으로 변경하면서 두 가지 문제를 동시에 해결할 수 있었어요. 미션을 한번 수행하는데 최소 10분에서 최대 1시간까지 시간을 기록할 수 있게 만들었어요. 타이머의 중앙에 있는 시간이 곧 ‘내가 집중한 시간’이 되면서, 더 직관적으로 정보를 전달할 수 있게 되었죠.
[2. 미션 인증을 필수로 하게 할 것인가?]
‘10분만’에서 미션을 완료한 후에는 미션 인증을 할 수 있어요. 미션 일지는 자유롭게 적어도 되지만, 미션 인증 사진은 꼭 올려야만 해요. 사진을 올리지 않는다면, 그날 미션은 수행하지 않은 것으로 되어버려요.
초기 기획에서는 이러한 인증 과정을 사용자의 선택에 맡겼어요. 사진을 찍고 일지를 작성하는 과정이 일부 사용자에게는 부담스럽게 느껴질 것이고, 때문에 빠르게 미션을 완료할 수 있도록 번거로운 절차를 없애는 것이 좋을 것이라고 생각했죠.
하지만 리서치를 통해 ‘기록’이 습관을 형성하고 유지하는 데 효과적인 수단이 될 수 있다는 사실을 발견했어요. 그러니 사용자들이 자신의 미션을 기록할 수 있게 만들어야 한다는 생각이 들었어요. 고민 끝에 우리는 인증 기능을 필수로 만들어야 한다고 판단했어요.
이때, 우리는 사용자들이 최대한 번거로움을 덜 느끼도록 인증 기능을 설계했어요. 사진 인증과 일지 작성 중 시간이 가장 적게 드는 사진 인증만 필수로 요구하고, 일지 작성은 선택사항으로 두어 인증에 걸리는 시간을 최소화했죠. 또한, 사진 인증 과정에서 생기는 에러 케이스 플로우도 꼼꼼하게 고려했어요. 가령 서비스에서 튕기는 경우, 재진입 시 인증이 필요하다는 토스트 메세지를 통해 원래 플로우로 돌아갈 수 있게 만들었어요.
의도치 않은 장점도 있었어요. 앞에서 피드 및 리액션 기능이 생기면서, 다른 사람들의 인증사진들을 확인하고 반응을 남길 수 있게 되었다고 소개해드렸어요. 매일매일 새로 올라오는 사진들을 보는 재미가 피드 기능의 핵심 포인트인만큼, 올라오는 피드가 적다면 그만한 재미가 없었겠죠. 미션 인증을 위해서는 사진을 꼭 올려야 하기 때문에, 피드에 올라오는 사진들도 다양해졌고, 사용자들도 더 큰 재미를 느낄 수 있게 되었어요.
디자인 파트는 이렇게 협업했어요
[1. 디자인 시스템]
‘10분만’에서는 체계적인 디자인 시스템 구축을 통해 서비스 전반에 걸쳐 비주얼 통일성을 유지하고, 개발팀과 효율적인 협업을 이끌어낼 수 있었어요.
컬러 시스템은 같은 컬러가 다른 용도로 사용되는 경우 각 컬러의 용도를 반영하는 토큰값을 부여할 수 있도록 시멘틱 네이밍 구조를 사용했어요. 예를 들어, 'text-secondary'가 'icon-primary'에 대응한다는 식으로 말이죠. 이 과정에서 디자이너들은 다양한 요소에 어떤 gray 컬러를 사용할지 고민하는 시간을 줄일 수 있었어요. 이를 통해 우리는 디자인의 일관성을 높이고, 불필요한 혼란을 방지할 수 있었어요.
또한 개발팀과의 소통 비용을 줄이기 위해 각각의 UI 컴포넌트에 대하여 상세한 스펙 가이드와 사용 사례, 방법을 정의했어요. 필요한 경우 인터랙션 가이드까지 정리해서, 개발팀과 긴밀하게 연결되는 작업 환경을 구축할 수 있었어요.
이러한 디자인 시스템을 통해 디자이너와 개발자 간 원할한 소통은 물론이고, 각 디자인 요소들을 개발 환경에 효율적으로 통합할 수 있었어요 :)
[2. 히스토리 내역 작성을 통한 효율적인 협업]
개발자들에게 디자인을 공유하고 나서도, 더 나은 사용성을 위해 언제든지 디자인 수정이 발생할 수 있어요. 우리는 이러한 문제에 대비하기 위해 디자인 가이드 및 디자인 시스템의 변경 히스토리를 작성했어요. 이를 통해 변경사항을 빠르게 추적하고, 피드백을 주고받기 쉬워지면서 싱크업 과정이 더욱 편해졌어요.
Web 파트에서는 이런 고민을 했어요
[1. 사용자 리텐션을 위한 앱 출시]
‘10분만’은 사용자들의 습관 형성을 가장 중요한 목표로 삼고 있어요. 이를 달성하기 위해서는 웹보다는 앱이 필요했고, 따라서 앱 출시를 목표로 개발을 진행했어요. 앱의 푸시 알림 등의 네이티브 기능을 활용하여, 사용자들이 우리 서비스에 지속적으로 접근할 수 있는 환경을 마련할 수 있다고 판단했기 때문이에요.
하지만 프론트엔드 파트는 주로 웹 개발에 익숙한 개발자들로 구성되어 있었어요. 따라서 React Native의 Webview를 활용하여, 네이티브 코드를 작성하지 않고도 빠르고 완성도 높은 앱을 개발할 수 있었어요.
[2. 타이머 기능에 대한 엣지 케이스 처리]
‘10분만’의 핵심 기능인 타이머는 사용자들의 미션 시간을 측정하고 기록하는 역할을 해요. 이렇게 기록된 정보들은 사용자들의 동기부여를 위해 다양한 방식으로 활용돼요. 하지만 웹(또는 웹뷰)의 한계로 인해, 사용자가 타이머를 강제로 종료하거나 앱을 나가면 기록된 시간이 없어지는 문제가 있었어요.
이 문제를 해결하기 위해 우리는 웹의 로컬 스토리지와 브라우저의 visibilityChange 이벤트를 활용했어요. 미션 타이머를 로컬 스토리지에 저장해놓고 있다가, 사용자가 다시 앱으로 돌아왔을 때 이전 미션 시간과 현재 시간을 비교하여 경과된 시간을 구하고, 이를 기반으로 타이머를 계속 진행하도록 만들었어요.
이를 통해 사용자가 앱을 재접속 했을 때도 기록이 손실되지 않고 미션을 계속 진행할 수 있게 만들었어요.
[3. 사용자 데이터 분석을 위한 여러 모니터링 툴]
우리는 앱을 출시한 이후에도 사용자들의 이용 패턴을 분석하여 서비스를 개선해야 한다고 판단했어요. 따라서 첫 MVP를 배포할 때부터 사용자 데이터를 수집하기 위해 Google Analytics, Mixpanel, Hotjar 등을 활용하여 로그를 남겼어요. 또한, 이벤트 처리를 간편하게 하기 위해 다양한 이벤트 모듈을 쉽게 연결하고 관리할 수 있도록 EventLogger 클래스를 추상화하여 설계했어요. 이를 통해 유지보수를 용이하게 하고, Data-Driven 하게 서비스를 개선해나갈 수 있는 발판을 마련했어요.
Server 파트에서는 이런 고민을 했어요
[1. 중요한 순간에 앱에서 튕겨서 속상했던 기억, 없으신가요?]
앞에서 소개해드렸듯이, ‘10분만’에서는 미션을 수행한 후 인증사진을 올려야만 미션을 완료할 수 있어요. 하지만 이미지를 업로드 하기 위해 사진을 찍고, 앨범에서 사진을 고르고, 이를 업로드하는 과정에서 문제가 발생할 수 있어요. 갤러리 등 외부 앱으로 이동하는 과정이 포함되기 때문에, 사용자의 실수나 앱 리프레시 등의 문제가 생길 수 있는 상황이었죠.
이런 상황을 같이 한번 생각해봐요. 오늘 우리는 30분이라는 긴 시간동안 미션을 수행했어요. 이제 인증사진을 찍으려고 사진 앱을 켜고, 각도를 이리저리 바꿔가며 멋지게 인증 사진을 찍었어요. 다시 10분만 앱으로 이동해서 업로드를 하려는 찰나… 앗! 실수로 터치를 잘못해서 앱을 종료해버린 거죠. 다시 시작해보니 지금까지 쌓은 시간이 모두 사라져있는 거에요. 이럴 때 여러분의 심정은 어떨 것 같나요?
이런 상황이 자주 발생하지는 않겠지만, 한번이라도 발생하게 되면 심각한 수준의 부정적 경험을 줄 것임이 분명했어요.
[2. Redis를 활용한 인증 정책 구현]
우리는 기존 플로우를 검토해봤어요. 타이머를 시작하고 → 긴 시간동안 미션을 수행하고 → 인증 사진을 올리고 일지를 작성한 다음 → 인증을 완료하는 것이 한 호흡에 이루어지는 상황이었어요. 그러다 보니 위의 예시처럼 사용자가 중간에 앱을 이탈했을 때 복구할 방법이 없었어요. 특히 미션을 수행하고 인증을 하는 과정에서 가장 잦은 이탈이 발생했어요. 무언가 대책이 필요한 상황이었죠.
백엔드 파트에서는 이러한 문제를 해결하기 위해 하나의 플로우를 두 개의 단계로 분리했어요. 1) 수행한 미션 데이터를 임시로 저장하고, 2) 사진 업로드, 일지 작성 등의 미션 인증은 그 다음에 이어서 하게 만드는 것이죠. 이렇게 하면 1)과 2) 사이에서 이탈이 발생하더라도, 다시 접속하면 정상 플로우로 복귀할 수 있어요. 이 과정을 자세히 설명해 드릴게요.
먼저 타이머 화면에서 종료 버튼을 누르면 시작시간과 종료시간, 수행시간을 비롯한 임시 데이터를 1차적으로 Redis에 저장해요. 이때 Redis의 TTL(Time To Live) 기능을 사용하여 10분 동안만 저장하도록 하고, TTL이 만료되면 Message Listener를 사용하여 만료 이벤트를 수신 후 임시 데이터를 삭제하도록 했어요.
그리고 정상 플로우로 복귀할 때 임시 데이터가 존재하면 인증을 요청하는 토스트를 출력하도록 만들었고, 인증이 완료되면 임시 데이터를 삭제하도록 했어요.
[3. 사용자 경험에 기여하는 백엔드 개발]
미션 인증하기 기능이 처음부터 완벽했던 것은 아니에요. ‘중요한 순간에 앱이 튕기면 어떡하지?’라는 지극히 평범한 고민에서 출발해서, ‘어떻게 이 문제를 해결할 수 있을까?’ 라는 고민을 거쳐 더 나은 방법을 찾아낼 수 있었던 것이죠.
흔히 백엔드는 사용자 경험과 거리가 먼 영역으로 생각되곤 해요. 하지만 ‘10분만’ 백엔드 팀은 비즈니스 로직을 고민하고, 꼼꼼한 정책을 설계하는 과정에서 백엔드 역시 개발 과정에서 사용자 경험을 개선하는 데 도움이 될 수 있다고 믿어요. 우리는 앞으로도 단순히 주어진 요구사항을 구현하는 데 그치지 않고, ‘사용자 중심 사고’를 통해 더 나은 서비스를 만들어가고자 해요.
앞으로의 계획은요
쉽고 즐거운 습관 형성
이탈률 및 사용자 경험 개선
사용자 피드백 수렴 및 반영
👉<모험의 시작>행사 참여하기! (
Lilly Singh(
안녕하세요, Don’t be 마스코트 예스비예요.
심지어 지금 이 글도 베어로 작성되고 있다. 나는 왜 베어를 선택했는가? 다들 1)마크다운 방식을 큰 장점으로 꼽지만 나는 노트 앱에서 마크다운 방식은 당연하다고 생각했다. 텍스트를 빠르게 작성하기에 마크다운이 필수이기 때문이다. 하지만 나는 3가지 방식 때문에 베어를 여전히 잘 사용하고 있다.
하지만, 베어는 해시태그(#)를 기반으로 노트를 관리한다. 노트에 해시태그(#)를 사용하면 자동으로 사이드탭에 해시태그 폴더가 생성된다. 그리고 슬래시(/)를 사용해서 하위 해시태그 폴더를 생성할 수 있다. 하나의 노트에 여러 개의 해시태그를 해도 괜찮다. 그 노트는 모든 해시태그 폴더 안에 존재할테니까 말이다. 나는 이 방식을 선호한다. 생각보다 하나의 노트를 다양한 폴더에 넣을 일이 많으니 말이다.
물론 에버노트도 태그 기능은 지원한다. 다만 에버노트의 해시태그는 검색용에 가깝다. 심지어 왜인지는 모르겠으나 해시태그를 지정하는 것보다 제목에 관련 내용을 다 담아서 검색하는 게 더 정확하고 빠를 때가 많았다. 예를 들면 급여 관련 내용이나 자료가 담긴 노트라면 해당 노트의 제목을 ‘급여 급여명세서 월급 00회사 돈 계좌’로 작성하는 식이다. 노트의 제목을 이런 식으로 저장하면 시간이 지나 긴가민가한 자료를 찾을 때 최대한 얻어 걸려서 찾는 시간을 단축할 수 있다. 하지만 결국 노트의 제목이 더러워진다는 뜻과 같다. (물론 지금의 에버노트는 태그를 따로 모아주기는 한다. 다만 한번 생성된 해시태그는 자동으로 사라지지 않아 불편함이 존재한다.)
베어의 싱크 기능을 사용하기 위해서 Pro 버젼으로 업그레이드 할 필요가 있다. 베어의 가격은 합리적이라고 생각한다. 요즘 많은 SaaS들이 1년 결제 기준 월 8$의 금액을 책정한다. 그렇다면 1년에 96$이다. 하지만 베어는 1년에 29.99$ 밖에 하지 않는다. 24년 3월 18일 기준으로 4만 원에 1년동안 Pro 기능을 아낌없을 사용할 수 있다.
노트 앱이 노트만 잘 적히면 되는 거 아닌지 생각하고 있었는가? 사실 노트 앱이 예쁜 것은 중요하다. 왜냐하면 노트를 작성하는 기능은 ‘거기서 거기’이기 때문이다. 노트 앱으로 무슨 특장점을 줄 수 있는가? 분명 특별하게 남다른 것들이 있긴 하다. 특히 플러그인을 통해 테마를 변경할 수 있는 
심지어 아이콘만 16개를 선택할 수 있다. 내가 가장 좋아하는 색의 베어를 매일 클릭할 수 있게 되는 것이다.
시장에서 가장 핫한 노션마저 대망의 첫 옥외광고를 ‘Software should be beautiful.’이라고 했다. 결국 사용자가 사용하는 소프트웨어는 아름다워야 한다는 것이다. 솔직히 예쁘게 사용할 수 있다는데 마다할 사람이 있겠는가?
