밍기적 챌린지
하루 1개, 부담 없는 미션을 무작위로 뽑아 해내고 그 기록이 그림일기처럼 쌓이는 모바일 우선 웹앱입니다.
완료 인증은 사진 없이 자기신고(체크)만 하고, 완료하면 도장이 쾅 찍힙니다.
이름은 '내가 일으킬 수 있는 아주 작은 기적, 밍기적'이라는 인터넷 밈에서 따왔습니다.
주요 기능
- 오늘의 미션 뽑기: 카드를 눌러(모바일은 좌우로 넘겨도) 미션 200개 중 하나를 뽑습니다. 마음에 안 들면 하루 3번까지 다시 뽑을 수 있습니다.
- 완료와 도장: '완료했어요!'를 누르면 도장 6종 중 하나가 위에서 내려와 찍힙니다. 완료 취소와 실패 기록은 없습니다.
- 연속 달성과 기록: 연속 일수와 누적 개수, 완료한 날마다 도장이 찍힌 월간 달력을 보여줍니다. 날짜를 누르면 그날의 미션과 완료 시각을 볼 수 있습니다.
- 공휴일 표시: 달력에 국경일·공휴일 이름을 표시합니다(한국천문연구원 특일 정보 API).
- 익명 또는 Google로 시작: 시작 화면에서 가입 없이 익명으로 시작하거나 Google 계정으로 로그인합니다. 익명으로 쓰다가 Google 계정을 연결하면 지금까지의 기록이 그대로 이어집니다.
- 크레파스 손그림 디자인: 테두리와 구분선은 SVG 필터로 그린 손그림 선이고, 동작 줄이기 설정을 켜면 움직임 대신 페이드만 씁니다.
화면
| 경로 | 내용 |
|---|
/ | 홈. 오늘 상태에 따라 뽑기 전 → 도전중 → 완료 → 연속 달성 화면으로 바뀝니다 |
/welcome | 시작 화면. 세션이 없으면 여기로 옵니다(익명으로 시작하기, Google 계정으로 계속) |
/records | 기록. 월간 도장 달력, 누적·연속 칩, 날짜별 상세. ?month=YYYY-MM으로 지난달을 봅니다 |
/settings | 설정. 계정(Google 계정 연결, 로그아웃), 앱 정보, 계정 삭제(익명은 이 기기 기록 모두 지우기) |
/privacy, /terms | 개인정보처리방침, 서비스 이용약관 |
모바일은 하단 탭과 제목 줄의 계정 메뉴, 데스크톱(1024px 이상)은 상단 헤더(계정 메뉴 포함)와 2단 배치입니다.
기술 스택
- 프레임워크: Next.js 16 (App Router), React 19, TypeScript
- 스타일: Tailwind CSS v4 (디자인 토큰은
app/globals.css의 @theme)
- 백엔드: Supabase (Postgres, 익명·Google 로그인, RLS),
@supabase/ssr
- 애니메이션: Motion (카드 스와이프, 도장 연출)
- 날짜: date-fns,
@date-fns/tz (하루 기준은 Asia/Seoul)
- 폰트: Gaegu, Noto Sans KR (
next/font/google)
데이터 흐름
화면은 Route Handler(app/api/.../route.ts)를 부르고, Route Handler는 supabase.rpc()로 Postgres 함수를 호출합니다.
테이블에는 쓰기 정책이 없어 모든 쓰기는 security definer 함수가 맡고, service role 키는 쓰지 않습니다.
뽑기 규칙(최근 완료·넘긴 미션 제외 등)과 날짜 판단도 서버(DB 함수)에서만 처리합니다.
| API | 설명 |
|---|
GET /api/today | 오늘 상태(뽑기 전·도전중·완료, 미션, 남은 재뽑기, 연속·누적, 최근 기록) |
POST /api/today/draw | 오늘의 카드 뽑기 |
POST /api/today/reroll | 다시 뽑기(하루 3번) |
POST /api/today/complete | 완료하고 도장 찍기 |
GET /api/records?month=YYYY-MM | 그 달의 완료 기록 |
POST /api/account/delete | 계정 삭제(사용자와 모든 기록) |
시작하기
필요한 것
- Node.js 24 (LTS).
package.json의 engines에 24.x로 지정되어 있고, Vercel도 이 값으로 Node 버전을 고릅니다
- pnpm 12 (
packageManager에 [email protected]로 지정되어 있어, 설치된 pnpm이 이 버전으로 맞춰 실행합니다)
- Supabase 프로젝트
- (선택) 공공데이터포털 한국천문연구원 특일 정보 인증키. 없으면 달력에 공휴일만 빠집니다
1. 설치
pnpm install
2. Supabase 준비
- Supabase에서 프로젝트를 만들고 Authentication → Sign In / Providers에서 익명 로그인(Anonymous sign-ins)을 켭니다.
Google 로그인을 쓰려면 Google 제공자를 켜고 Google Cloud OAuth 클라이언트 ID·시크릿을 넣은 뒤, 익명 계정에 Google을 연결할 수 있도록 Manual linking을 켭니다.
URL Configuration → Redirect URLs에는
http://localhost:3000/**와 배포 주소의 /**를 넣습니다(쿼리까지 비교하므로 **가 필요합니다).
- SQL Editor에서 아래 두 파일을 차례로 실행합니다.
3. 환경변수
.env.example을 .env로 복사하고 값을 채웁니다.
| 변수 | 설명 |
|---|
NEXT_PUBLIC_SUPABASE_URL | Supabase 프로젝트 URL |
NEXT_PUBLIC_SUPABASE_KEY | Supabase publishable 키. 브라우저에서 익명 로그인을 하므로 공개되는 키입니다 |
HOLIDAY_API_KEY | 특일 정보 API 인증키(서버 전용) |
CRON_SECRET | (배포용) Vercel Cron이 /api/cron/keep-alive를 부를 때 쓰는 비밀 값 |
4. 실행
pnpm dev # 개발 서버 (http://localhost:3000)
pnpm build # 프로덕션 빌드
pnpm start # 빌드 결과 실행
pnpm lint # ESLint
pnpm gen:types # DB 구조가 바뀌면 types/database.ts 다시 생성(Supabase CLI 로그인 필요)
무료 Supabase 일시 중지 막기
Supabase 무료 프로젝트는 7일 동안 요청이 없으면 일시 중지됩니다.
vercel.json의 Vercel Cron이 매일 03:00(한국 시간)에 /api/cron/keep-alive를 불러 미션 한 줄을 읽어 둡니다.
Vercel 환경변수에 CRON_SECRET(임의의 긴 문자열)을 넣어 두면, 그 값을 가진 요청만 처리합니다.
폴더 구조
app/ 라우팅 파일만 둔다 (page, layout, route, loading, error, not-found)
api/ Route Handler 6개
components/
ui/ 손그림 테두리, 버튼, 칩·배지, 스켈레톤, 상태 카드 등 공통 요소
stamp/ 도장 6종 컴포넌트
home/ 홈 전용(카드 더미·미션 카드, 스와이프, 완료 연출, 연속 달성)
records/ 기록 전용(월간 달력, 날짜 상세)
nav/ 모바일 하단 탭, 데스크톱 헤더
auth/ 시작 화면, Google 로그인·연결, 계정 메뉴
settings/ 설정 화면
legal/ 처리방침·약관 문안과 화면
lib/ Supabase 클라이언트, API 호출·로그인 도우미, 날짜·공휴일
proxy.ts 세션 확인·갱신, 세션이 없으면 시작 화면으로
types/ API 응답 타입(api.ts), Supabase DB 타입(database.ts, 자동 생성)
supabase/ DB 스키마(migrations)와 미션 시드
public/images/ 마스코트, 도장 원본, 낙서 장식, 도화지 텍스처
설계 문서
- 기획서: 기능, 화면 흐름, 디자인 기준값, 미션 데이터
- 서버 설계: API 명세, DB 스키마와 함수
- 화면 설계: 모바일·데스크톱 보드, 도장, 공통 상태 화면, 로그인·계정 메뉴·설정·처리방침·약관
라이선스
MIT
