← 목록으로
육십육 — 66일 습관 챌린지HTML · CSS · JavaScript
완료
육십육 — 66일 습관 챌린지
같은 날 시작한 30명 코호트와 66일 동안 매일 인증하고 완주하는 습관 챌린지 모바일 웹
- 혼자 체크하는 트래커가 아니라, 같이 시작한 사람들이 보이는 코호트 구조로 만들었습니다.
- 며칠 빠져도 돌아올 수 있게 면제권과 복귀 규칙을 정책으로 먼저 정했습니다.
- 공통 디자인 규정을 따르되, 이 서비스에만 필요한 예외 3건을 근거와 함께 남겼습니다.
문제
습관 챌린지는 대부분 단톡방에서 굴러간다. 인증 사진이 대화에 묻혀 내가 어디까지 왔는지 보이지 않고, 며칠 빠지면 돌아올 명분이 없어 조용히 나간다. 랭킹과 공지는 운영자가 손으로 정리하다 유실된다. 66일이 끝나도 남는 게 없다.
해결
코호트를 단위로 잡았다. 같은 날 시작한 30명이 한 묶음이고, 홈에서 오늘 인증한 멤버가 보인다.
기능보다 정책을 먼저 정했다. 스트릭 계산 방식, 면제권 지급·소모 규칙, 복귀 조건, 배지 획득 조건, 랭킹 동점 처리까지 10개를 문서에 확정한 뒤 화면을 그렸다. 상태도 6개(시작 전 · 오늘 미인증 · 인증 완료 · 연속 끊김 · 면제 사용 · 완주)로 나눠 화면마다 어떤 문구가 나가는지 적었다.
| 정한 것 | 대신 버린 것 | 이유 |
|---|---|---|
| 서비스 형태코호트(같은 날 시작한 30명) 단위 | 개인 습관 트래커 | 혼자 체크하는 앱은 이미 많고, 이탈의 원인은 기능이 아니라 혼자라는 점이었다. 같이 시작한 사람이 보여야 돌아올 명분이 생긴다. |
| 이탈 처리면제권 + 복귀 규칙을 정책으로 선정의 | 빠진 날은 그냥 실패 처리 | 며칠 빠지면 조용히 나가게 되는 게 핵심 문제였다. 실패를 구조로 흡수하지 않으면 66일을 못 채운다. |
공통 디자인 규정을 따르되 예외 3건을 남겼다 — 66칸 진행판, 스트릭 표시, 코호트 스토리 레일. 각각 왜 규정 밖으로 나가야 하는지를 한 줄씩 붙였다.
결과
- 10개
- 먼저 확정한 서비스 정책
- 6개
- 정의한 화면 상태 (빈·진행·완료·이탈 등)
- 3건
- 근거를 붙여 남긴 규정 예외
- 정책 10개 · 상태 6개 · 규정 예외 3건을 문서로 확정한 뒤 구현
- 과제 배포 URL 공개
배운 것
정책을 먼저 적으면 화면이 빨리 그려진다. 반대로 화면부터 그리면 "이 경우엔 뭐가 보이지"에서 매번 멈춘다.
화면
홈 — 진행 일수와 연속 기록, 오늘 코호트 인증 현황 코호트 상세 — 인증 마감·면제권·정원·기간 규칙을 먼저 보여준다 코호트 현황 — 인증 일수로 순위를 매기고, 같으면 연속 기록이 앞선다
이 프로젝트가 궁금하시면 편하게 물어보세요.
연락하기