필자는 강아지 훈련사임.  바이브 코딩으로 강아지 훈련 웹앱을 만들고있는데 아직 80정도 만든것같음. 


코딩의 코자도 몰라서 대충 지피티랑 제미나이 물어 물어서 만듬.


프론트는 러버블 , 그 후에 trae 랑 수파베이스로 만듬. 배포는 네플리파이





멍멍트레이너 AI - 내 폰 안의 강아지 훈련 선생님









sns 등록은 처음하니까 생소하기도 하고 귀찮았음. 수파베이스 Auth 로 함.


✔+ Step 1: 이름 / 나이 / 성별


→ 나이는 {years, months} 구조로 저장함. (6개월짜리 강아지도 구분하려고)




✔+ Step 2: 품종 / 체중

→ 견종은 breeds.ts에서 불러온 리스트
→ 체중은 단위(Kg)랑 함께 보여줌





✔+ Step 3: 건강상태 / 훈련 목표

 아이콘 클릭 방식으로 선택





 성장 미션 보드 (입력률에 따라 미션처럼 유도)

“아직 입력 안 한 항목을 **‘미션’**처럼 보여주면 사용자들이 채우겠지?”

→ 입력이 끝나면 퍼센트로 “성장률” 표시

모든 프로필 입력완료후 fullprofile 로 통합 후 제미나이 에게 보내서 해당 프로필에 맞춰서 


맞춤 훈련 추천받는 거임.








사용자가 프로필을 작성하면

“훈련 추천받기” 버튼 클릭

→ AI가 2가지 훈련 플랜을 짜서 카드 형태로 보여줌

→ 버튼 누르면 바로 훈련 시작 가능





훈련목표를 기준으로 훈련을 짜도록 프롬프트화함. 




훈련시작버튼을 누르면 프로그레스 바와함께 5~6단계의 훈련을 해볼수있음.  진행바 색상이 좀 튀어서 나중에 수정예정




훈련완료시 간단한 메모와 성공 유무를 기록할수있고 기록페이지로 넘어감







기록페이지에선 훈련했던 기록들을 관리함


+ 기록 목록 표시

가장 최근 훈련 2개만 먼저 보여줌

날짜, 훈련 제목, 성공률, 메모 출력

다시 해보기(재시도) 버튼 있음



훈련 횟수나 다시 훈련해보거나 연속해서 7일동안 훈련시 획득 가능한 뱃지들도 관리가능. 약간 게임식





챗봇 기능도 있음 .

사용자가 입력한 모든 프로필을 가지고 챗봇과 대화가능. 

처음에 json 형식으로만 출력되서 뭐가 문제지 고민을했는데

알고보니 ai 훈련추천 기능과 섞여서 json 형태만 출력되는거였음.

후에 수정해서 한글로 plain text 로 출력


10회 한도로 일단 설정함.

api 비용때문에 구독을 만약에 하면 데이터 수집 후 몇회 이상 풀지 정할예정. 






  • 토스 페이먼츠 기능도 넣었는데 가격은 그냥 임의로 설정했고

    아직 테스트 코드만 넣어서 결제진행은 안됨. 

    나중에 도메인 사서 라이브 코드만 넣으면 된다고해서 일단 보류 ㅋ





    기능 카테고리상세 설명
    온보딩 + 로그인발바닥 애니메이션 있는 4단계 온보딩 + 구글/이메일 로그인
    강아지 프로필 등록이름, 나이, 품종, 성격, 건강상태 등 입력 → 성장 미션 보드로 단계별 완성
    AI 훈련 추천제미나이가 강아지 정보 보고 훈련 2개 추천 (제목/목적/단계별 가이드 포함)
    훈련 진행 시스템훈련 체크리스트 단계별 수행 → 성공률 입력 + 메모 남기기
    훈련 기록 관리훈련 일지 자동 저장 + 최근 2개 보여줌 + 다시 해보기 기능
    도전과제 뱃지연속 훈련 / AI 훈련 수 / 훈련 시간 등 기준 만족 시 자동 뱃지 발급
    AI 챗봇 ‘AI 훈련코치’“우리 강아지가 짖어요” → AI가 프로 파악하고 조언해줌 
    미디어 업로드강아지 사진, 훈련 영상 등 갤러리처럼 올리고 관리 가능
    대시보드오늘의 미션 ✅ + 유튜브 훈련 영상 추천 + 빠른 액션 버튼
    모바일 최적화모든 UI 모바일 대응 완료 (하단 네비, 버튼 크기, 입력 UX 등)
    + 기술 스택 요약

  • 프론트엔드: React + TypeScript + Vite + Tailwind + shadcn-ui

백엔드: Supabase (Auth + Postgres + Storage + Edge Function)

AI: gemini 1.5 flash, utube api)

기타 라이브러리: Framer Motion, lucide-react, React Query, Sonner 등