요약
•
‘자투리 시간 활용 추천’ 서비스 MVP
•
자투리 시간에 가능한 일을 추천하고, 완료 시 자동으로 캘린더 기록
•
Google Sprint 방식으로 아이디어 구상 → MVP 구현 → 출시
서비스 소개 및 풀고 싶었던 문제
짧은 자투리 시간이 생겼을 때, 우리는 무엇을 할지 쉽게 결정하지 못해 그냥 흘려보내는 경우가 많습니다.
팀은 “왜 사람들은 자투리 시간에도 무언가를 하려고 할까?” 라는 질문에서 출발했고, 그 답으로 작은 성취감과 성과의 축적이 삶의 만족도에 중요하다는 공통된 인식을 발견했습니다.
따라서 저희는 자투리 시간을 의미 있게 활용하고, 그 성취감을 강화할 수 있는 방법이 필요하다고 보았습니다.
이에 사용자가 현재 상황에서 할 수 있는 일을 추천하고, 완료 시 자동으로 기록되어 자투리 시간 활용 패턴을 시각화해주는 생산성 모바일 웹 서비스를 만들었습니다.
디자이너와 협업해 Figma 디자인 시스템을 MUI 테마와 통합하고, 짧은 시간 내 일관성있는 디자인과 기능을 통해 MVP 완성도를 높이는 데 주력했습니다.
핵심 기능
•
추천 할일 제공 및 카테고리별 필터링
•
완료한 할일은 캘린더에 자동 기록
•
사용자 상태 중앙화 관리 (zustand + localStorage)
•
React Router loader를 활용한 사전 데이터 로딩
•
MUI 테마와 Figma 디자인 토큰 통합
성과
•
디자이너와 협업해 짧은 기간 내 일관성 있는 UI/UX 구현
•
프로젝트를 통해 React, 상태 관리, 디자인 시스템 통합 경험 확보
•
MVP 완성 후 팀 내 기능 테스트 및 피드백 기반 개선
기술 스택
•
Language / Framework: React TypeScript Vite
•
State / UI: Zustand MaterialUI
•
Tooling: Figma Tokens, React Router Loader
역할
•
팀 구성: 개발자 4명 + 디자이너
•
페어 프로그래밍 주도하고 태스크 분류 리딩 및 조율
•
상태 관리 설계 및 zustand 통합
•
할일 추천 페이지 담당, UI 모듈화
•
Vite 초기 환경 구축 및 프로젝트 구조 설계
기여 부분
디자인 시스템과 개발 환경의 타입 안전성 통합•
Figma Tokens JSON 추출 → MUI createTheme 타입 확장 (declare module)
•
개발자가 자동완성과 타입 안정성을 갖춘 상태에서 디자인 적용 가능
•
디자이너 의도를 정확히 반영
페어 프로그래밍 통해 카테고리별 추천 할일 및 저장 기능•
React Router loader로 사전 데이터 로딩
•
zustand와 localStorage 통합 → 상태 중앙화
•
코드 가독성과 유지보수성 향상
