작심삼일 인간이 만든 잔디 습관 트래커 🌱

고백하자면 저는 전형적인 작심삼일 인간입니다. 새해 계획 세우고 1월 4일에 무너지는 그런 타입이요. 근데 이상하게 깃허브 잔디는 끊기면 그렇게 아깝습니다. 커밋 한 줄이라도 해서 채우게 돼요. 어느 날 문득, 이 심리를 운동이랑 독서에도 써먹으면 되지 않나 싶었습니다. 그래서 만든 게 이 잔디 습관 트래커예요.

습관마다 깃허브 스타일 히트맵이 하나씩 생깁니다. 최근 6개월 정도를 요일×주 그리드로 보여주고, 오늘 했으면 클릭. 그럼 칸이 초록으로 칠해져요. 연속으로 채울수록 색이 진해지는 게 포인트입니다. 지금 며칠째인지, 내 최장 기록은 며칠인지도 같이 떠서, 기록이 쌓일수록 "여기서 끊기면 아깝다"는 마음이 커져요. 의지로 하는 게 아니라 아까워서 하게 되는 구조입니다.

오늘 전체 습관 중 몇 개 했는지 진행 바도 있습니다. 2/3 떠 있으면 마지막 하나 채우고 싶어서 밤에 스트레칭이라도 하게 돼요. 이 심리를 정확히 노리고 만들었는데 만든 저한테도 먹혀서 웃깁니다.

습관은 이름 + 이모지 + 색상 8종 중에 골라서 만듭니다. 저는 운동 초록, 독서 파랑, 명상 보라로 쓰고 있어요. 처음 켜면 샘플 습관 3개에 5개월치 잔디가 미리 깔려 있어서, 설명 없이도 어떤 느낌인지 바로 보입니다. 칸에 마우스 올리면 날짜랑 완료 여부 툴팁도 떠요.

Next.js(App Router) + TypeScript + Tailwind v4로 만들었고, 히트맵은 차트 라이브러리 없이 직접 그렸습니다. 요일×주 그리드 계산이 생각보다 재밌는 문제였어요. 데이터는 전부 localStorage라 로그인도 서버도 없습니다. 켜면 바로 내 잔디밭이에요.

쓰다 보니 요령도 생겼습니다. 습관을 처음부터 대여섯 개 만들면 진행 바 채우기가 부담돼서 오히려 다 놓게 되더라고요. 두세 개로 시작해서 한 달쯤 자리 잡으면 하나 추가하는 게 제일 잘 굴러갔습니다. 그리고 습관 이름은 최대한 구체적으로 짓는 게 좋아요. '운동'보다 '스쿼트 20개'가 체크하기 쉽습니다. 뭘 해야 완료인지 고민할 틈이 없거든요.

이거 만들고 나서 운동 기록이 지금 몇 주째 이어지고 있습니다. 제 인생 최장 기록입니다. 도구 하나 바꿨다고 사람이 바뀌는 게 신기하기도 하고 약간 어이없기도 하네요. 작심삼일 동지분들, 의지 말고 잔디에 기대보세요.

• 라이브 데모: https://habit-grass.vercel.app
• GitHub: https://github.com/seokjinjeong-cod/habit-grass

마지막으로 하나. 잔디가 하루 비어도 자책하지 마세요. 하루 쉰 건 실패가 아니라 그냥 빈칸 하나입니다. 다음날 다시 채우면 잔디밭은 계속 자랍니다. 저도 중간중간 구멍 뚫린 채로 여기까지 왔어요.