MoodCanvas
- MoodCanvas: AI와 함께 만드는 감정 일기장
MoodCanvas는 하루의 감정을 기록하고, AI가 그 감정을 이미지로 표현해주는 웹 애플리케이션입니다. 평온한 바다와 거북이를 컨셉으로, 사용자의 일상을 차곡차곡 쌓아가는 경험을 제공하고자함
바이브 코딩 프롬프트 모음
첫번째
웹의 컨셉은 다음과 같아
MoodCanvas: 바다 거북이 컨셉
1. 앱 이름: MoodCanvas: 내 마음의 바다
2. 메인 컨셉: 평온한 바다와 나만의 거북이
"나만의 거북이": 사용자가 기록하는 감정들이 모여 '나만의 거북이'가 성장하거나, 색깔이 변하는 식으로 시각화될 수 있습니다. (MVP 이후 추가 기능으로 고려)
"잔잔한 바다": 앱의 배경은 고요한 바다로, 사용자가 기록을 시작하거나 할 때 잔잔한 물결 애니메이션이나 거북이가 유유히 지나가는 모습이 보입니다.
사용자 시나리오는 다음과 같아
로그인: 사용자가 구글/카카오톡으로 간편하게 로그인합니다 (Supabase Auth).
기록: 오늘 하루 있었던 일을 한두 문장으로 입력합니다.
생성: '이미지 생성' 버튼을 누르면 AI가 글을 분석해 감정 카드를 만듭니다.
저장: 생성된 이미지와 글이 내 보관함에 저장됩니다 (Supabase DB + Storage).
모바일 최적화: 브라우저에서 '홈 화면에 추가'를 하면 앱처럼 작동하도록 구현합니다.
먼저 메인 페이지를 만들어줘. 하단 네비게이션 바는 반투명한 바다색으로 하고, '기록', '갤러리', '설정' 탭을 포함해. 중앙에는 '오늘의 마음 기록하기' 플로팅 버튼을 배치하고, 버튼 위로는 사용자가 작성한 일기 카드 목록이 그리드 형태로 보여야 해. 각 카드에는 AI 생성 이미지(플레이스홀더), 작성 날짜, 짧은 일기 내용이 들어가야 해. 전체적으로 바닷속 느낌이 나도록 디자인해줘.
두번째
(이미지 첨부) 내가 초기에 구상했던 배경색과 UI야 이걸 최대한 참고해서 수정해줬으면 좋겠어, 그리고 모바일일때와 PC일때의 차이가 확실했으면 좋겠어 굳이 PC일때 모바일 처럼 보일 필요는 없어 조금 더 공간을 넓게 사용하고 모바일 환경일때만 좁게 사용해줘
세번째
로그인 페이지를 만들어줘. 배경에 거북이가 천천히 움직이는 CSS 애니메이션을 넣어줘. 중앙에 앱 이름과 시작 문구를 배치하고, 하단에 구글, 카카오 로그인 버튼을 추가해줘. 버튼에는 lucide-react 아이콘을 사용해줘.
네번째
계속해서 로그인 페이지를 만들어줘 물론 가장 처음 시작은 로그인이 로그인이 되었을때 홈으로 이동 되어야 해
다섯번째
거북이가 너무 이상해.... 조금 더 세련된 거북이로 바꿔주라! 주변에 레이어층 같은게 보이는데 그걸 안보이고 자연스럽게
여섯번째
프로젝트에 Supabase를 연동하고 싶어. @supabase/supabase-js 라이브러리를 사용해서 클라이언트 설정 코드를 작성해줘. .env.local 파일에서 NEXT_PUBLIC_SUPABASE_URL과 NEXT_PUBLIC_SUPABASE_ANON_KEY를 불러와서 초기화하는 로직을 포함해줘.
일곱번째
로그인 페이지에 실제 로그인 기능을 붙여줘.
구글 버튼을 누르면 supabase.auth.signInWithOAuth를 실행하도록 해줘.
로그인에 성공하면 메인 페이지(/main)로 리다이렉트 시켜줘.
useRouter를 사용해서 로그인 상태에 따라 페이지 접근을 제한하는 로직도 추가해줘.
-> 이 때, 로그인 화면이 보이지 않는 오류 발생
여덟번째
http://localhost:5173/ 으로 들어와도 아무것도 안보이고 배경화면만 보여....
-> 알고보니 .env.local 문제...
아홉번째
구글로그인 카카오로그인은 너무 복잡해, 이메일과 비밀번호로 로그인을 하도록 기능을 변경하자 즉, 이메일 닉네임 비밀번호 등을 입력해서 회원가입하는 페이지를 만들어 주고 회원가입한 정보를 바탕으로 로그인 할 수 있도록 구현해보자
열번째
main화면 상단 or 하단에 로그아웃 할 수 있는 기능도 만들어줘
열한번째
'Log Today' 버튼 (일기 작성 및 이미지 생성) ->
1.버튼을 눌렀을 때 나타나는 입력 모달을 만들어줘.
2.사용자가 오늘 하루를 기록할 수 있는 텍스트 입력창과 저장 버튼을 포함해줘.
3.저장 버튼을 누르면 입력된 텍스트를 https://image.pollinations.ai/prompt/{텍스트} API로 보내서 이미지를 생성해줘.
4.생성된 이미지와 텍스트를 Supabase의 posts 테이블에 현재 로그인한 사용자의 user_id와 함께 저장해줘
열두번째
텍스트를 저장할 때 에러가 나더라구 확인해보니 user_id 값은 uuid 인데 id값을 그대로 넘기는 것 같아. 해당 id의 uuid를 찾아서 넘기는 방법으로 수정해줘
열세번째
메인 카드 리스트 (데이터 불러오기) ->
1.메인 화면의 카드 리스트를 Supabase의 posts 테이블 데이터와 연동해줘.
2.useEffect를 사용해서 사용자가 작성한 최신순으로 데이터를 가져와서 카드에 뿌려줘.
3.각 카드의 썸네일에는 저장된 image_url을 보여주고, 날짜와 텍스트도 실제 데이터로 교체해줘.
4.만약 데이터가 로딩 중이라면 은은한 스켈레톤 UI를 보여줘.
열네번째
하단 네비게이션 바의 동작을 구현해줘.
'Record'는 메인 화면(일기 리스트), 'Gallery'는 생성된 이미지만 크게 모아보는 페이지, 'Settings'는 준비중이라는 문구가 뜨는 페이지로 이동하게 해줘.
현재 활성화된 메뉴 아이콘은 더 밝게 빛나거나 강조되도록 스타일을 수정해줘.
