dot.daily - 프로젝트 발표

여러분은 할 일 관리 앱을 사용해보신 적 있으신가요? 저는 기존의 할 일 앱들을 사용하면서 몇 가지 불편함을 느꼈습니다.
복잡한 기능들, 완료하지 못했을 때의 죄책감, 그리고 모바일에서 사용하기 불편한 인터페이스들 말이죠.
그래서 이런 문제들을 해결하고자 dot.daily라는 모바일 중심의 일상 관리 및 감정 기록 웹 애플리케이션을 개발하게 되었습니다.

깃허브 :

https://github.com/sunfivemin/DOT-DAILY

배포사이트 :

dot-daily.vercel.app

💡 선정 배경

기존 앱들의 한계점

먼저 기존 할 일 관리 앱들의 문제점을 살펴보겠습니다.
첫 번째, 복잡한 기능 과부하입니다.
대부분의 할 일 앱들이 프로젝트 관리, 팀 협업, 시간 추적 등 너무 많은 기능을 제공해서 단순히 "오늘 뭘 할까?"라는 질문에 답하기에는 너무 복잡했습니다.
두 번째, 완료 압박감입니다.
기존 앱들은 "미완료 = 실패"라는 이분법적 사고를 조장합니다. 할 일을 완료하지 못하면 빨간색으로 표시되거나 경고 메시지가 뜨죠. 이는 오히려 스트레스를 가중시킵니다.
세 번째, 모바일 UX 부족입니다.
많은 웹 기반 할 일 앱들이 데스크톱 중심으로 설계되어 있어서, 이동 중이나 잠깐의 시간에 모바일로 빠르게 할 일을 추가하거나 확인하기 어려웠습니다.
마지막으로, 감정과 분리된 관리입니다.
기존 앱들은 단순히 "했다/안 했다"만 체크할 뿐, "왜 못했는지", "그때 어떤 기분이었는지"에 대한 성찰 기능이 부족했습니다.

개인적 경험

저 역시 기존 할 일 앱을 사용하면서 완벽주의 성향 때문에 스트레스를 받았고, 결국 사용을 포기한 경험이 있습니다.
그리고 일상에서 모바일로 빠르게 할 일을 기록하고 확인할 필요성을 자주 느꼈습니다. 단순한 체크리스트를 넘어서 나의 감정과 생각을 함께 기록하며 성찰할 수 있는 도구가 필요하다고 생각했습니다.

🚀 기획 의도

이런 문제 인식을 바탕으로 dot.daily는 세 가지 핵심 철학을 가지고 기획되었습니다.

1. "완벽하지 않아도 괜찮다"는 철학

기존 앱들이 "오늘 할 일을 모두 완료하세요!"라고 압박한다면,
dot.daily는 "못한 일은 내일로, 보류할 일은 보류함으로" 보내도 괜찮다는 유연한 접근을 제공합니다.

2. 모바일 퍼스트 설계

언제 어디서나 빠른 할 일 등록과 확인이 가능하도록 모바일 환경을 최우선으로 고려했습니다. 네이티브 앱과 같은 직관적인 사용자 경험을 웹에서 구현하고자 했습니다.

3. 감정 기록을 통한 자기 성찰

단순한 할 일 관리를 넘어서 감정 기록과 통합하여, 데이터를 기반으로 한 개인 성향 분석과 개선점 도출이 가능하도록 설계했습니다.

이번 프로젝트는 Next.js 15(App Router)와 React 18 기반의 프론트엔드와, Express, Prisma, PostgreSQL 기반의 백엔드가 통신하는 모바일 중심의 풀스택 웹 애플리케이션입니다.
프론트엔드에서는 Zustand로 클라이언트 상태를, React Query로 서버 상태를 분리 관리하며, 효율적인 상태 흐름을 구축했습니다.
UI는 Tailwind CSS를 기반으로, class-variance-authority(CVA)를 활용해 컴포넌트 스타일을 체계적으로 관리했고, Figma로 UI를 설계하고 Storybook으로 문서화하며 팀 간 협업의 기반을 다졌습니다.
또한 Framer Motion을 통해 페이지 전환과 요소 등장 시 자연스러운 애니메이션을 구현해 사용자 경험을 향상시켰습니다.
백엔드는 Prisma ORM과 PostgreSQL을 기반으로 데이터 모델링을 진행했고, Swagger를 통해 모든 API를 문서화하여 프론트엔드와의 협업을 원활하게 했습니다.
프론트엔드는 Vercel, 백엔드는 Render에 배포하여 실제 서비스처럼 운영 가능한 구조로 마무리했습니다.
특히 컴포넌트 설계 측면에서는 CVA와 Storybook을 활용해 재사용성과 일관성을 확보했고, 버튼의 variant/size 조합으로 12가지 스타일을 하나의 컴포넌트로 관리할 수 있도록 구성했습니다.
구조적으로는 도메인 기반 폴더 구조(feature-based)를 도입해 각 기능별 독립성과 유지보수성을 높였고,
사용자 경험 측면에서는 전체화면 모달과 드래그 앤 드롭 기반 우선순위 변경 UI를 통해 모바일에서도 직관적인 사용성을 구현했습니다.
이번 프로젝트를 통해 설계부터 개발, 협업, 배포까지 실제 서비스를 만드는 전 과정을 실전처럼 경험할 수 있었고, 프론트엔드 개발자로서 기획부터 시스템 구축까지 전체적인 감각을 키우는 계기가 되었습니다.

📘 Dotdaily: 하루를 점찍듯 기록하는 일상 감정 기반 TODO 서비스

✨ 프로젝트 소개

Dotdaily는 일상 속 할 일을 단순히 "완료"하는 것을 넘어서, 감정과 함께 기록하고 돌아볼 수 있는 모바일 중심의 웹 애플리케이션입니다.
"완벽하지 않아도 괜찮다"는 철학 아래, 사용자의 감정과 리듬에 맞춘 유연한 할 일 관리와 회고 기능을 제공합니다.

언제 어디서나 빠르게 할 일을 추가하고,
오늘의 감정을 점처럼 기록해보세요.

🧩 핵심 기능 요약

✅ 우선순위별 할 일 관리 (나의 하루)

3단계 우선순위: 오늘 무조건, 오늘이면 굿, 잊지말자
Drag & Drop으로 직관적인 순서 변경
완료 상태에 따라 성공, 다시, 보류로 분기
완료 시 애니메이션 효과로 성취감 제공

📝 감정 기반 일일 회고 (오늘 회고)

감정 태그:좋음, 나쁨, 그냥그럼, 뿌듯함, 감사함 중 1개 선택
텍스트 메모로 하루 마무리
캘린더 기반 감정 조회 및 패턴 분석

📦 보류함 (Archive)

보류한 할 일을 날짜별로 정리
다시 도전하거나 완료 처리 가능
보관함에서 성취 흐름 회고 가능

📊 통계 대시보드 (나의 정보)

할 일 완료율, 감정 변화 추이 시각화
스트릭(연속 달성일) 시스템
개인 패턴 기반 인사이트 제공

🔄 자동 리셋 시스템

매일 자정 미완료 할 일 자동 분류 (RETRY 뱃지)

🔧 기술 스택

프론트엔드

Next.js 15 (App Router)
React 18, TypeScript
Tailwind CSS (커스텀 팔레트 적용)
class-variance-authority (CVA)
Zustand (클라이언트 상태 관리)
@tanstack/react-query (서버 상태 관리)
Framer Motion, Storybook

백엔드

Node.js + Express
Prisma ORM, PostgreSQL
Swagger (REST API 문서화)

협업/배포 도구

Vercel (프론트 배포), Render (백엔드 배포)
Figma, Notion, GitHub, CI/CD: GitHub Actions

🗂️ 프로젝트 구조 (요약)

frontend/
 ├─ app/                # App Router 기반 페이지
 ├─ components/         # 재사용 UI 컴포넌트
 ├─ features/           # 도메인 단위 모듈화 구조 (my-day, archive 등)
 ├─ styles/             # Tailwind + Vanilla Extract 스타일
 └─ store/, hooks/, lib/, constants/

backend/
 ├─ controller/
 ├─ service/
 ├─ router/
 ├─ prisma/
 └─ validations/, middlewares/, docs/, jobs/

🚀 실행 방법 (로컬 개발)

1. 환경 변수 설정

# frontend/.env.local
NEXT_PUBLIC_API_URL=https://your-api-endpoint

# backend/.env
DATABASE_URL=postgresql://...
JWT_SECRET=your-secret

2. 설치 및 실행

# Frontend
cd frontend
npm install && npm run dev

# Backend
cd backend
npm install && npm run dev

🙋🏻 팀 소개

이름	역할	기여
민선오 @SunFive	PM & FE 개발	프로젝트 기획, 디자인 시스템 설계, 나의 하루/보류함 구현
신우혁 @woo-dev-log	FE 개발	로그인/회원가입, 회고 캘린더 UI/CRUD, 통계 화면 구현
한건희 @Hangeony	BE 개발	API 설계 및 구축, ERD 설계, Swagger 문서화, 데이터 모델링

📝 커밋 메시지 컨벤션 (Conventional Commits)

타입	설명
`feat`	✨ 새로운 기능 추가
`fix`	🐛 버그 수정
`docs`	📚 문서 파일 변경 (README, 주석 등)
`style`	💄 코드 스타일 변경 (공백, 세미콜론 등 로직 변화 없음)
`refactor`	♻️ 코드 리팩토링 (기능 변경 없이 구조 개선)
`test`	✅ 테스트 코드 추가/수정
`chore`	🔧 기타 설정 변경 (빌드 설정, 패키지 관리 등 비즈니스 로직 제외)

✅ 예시

git commit -m "feat: 투두 생성 기능 추가"
git commit -m "fix: 로그인 오류 수정"
git commit -m "docs: API 명세서 수정"

🔍 아쉬운 점 & 개선 계획

❗ 아쉬운 점

소셜 로그인 미구현
계획: 카카오, 구글 로그인 연동
현실: 일반 로그인만 구현 (시간 제약)
테스트 코드 부족
계획: 단위 테스트, 통합 테스트 작성
현실: 수동 테스트 위주로 진행 
성능 최적화 여지
이미지 최적화, 코드 스플리팅 등 추가 개선 가능

🔧 개선 계획

게스트 모드 추가
카카오, 구글 로그인 연동
PWA 적용: 오프라인 지원, 푸시 알림

🎥 시연 영상

👉 Dotdaily 시연 영상 보기

이번 프로젝트를 통해 기술적 구현뿐만 아니라 사용자의 마음을 이해하고 공감하는 서비스를 만드는 것의 중요성을 깨달았습니다.
완벽하지 않아도 괜찮다'는 메시지처럼, 저희 프로젝트도 완벽하지는 않지만 사용자에게 의미 있는 가치를 전달하고자 노력했습니다.
앞으로도 기술과 사람을 연결하는 따뜻한 서비스를 만드는 개발자가 되겠습니다.