소개
성장피터님의 스터디에서 나만의 웹 페이지를 만들어야겠다는 생각은 하지만
랜딩페이지 만들어 소개할게 딱히 없다보니 뭘 만들까 고민하다..
일상 속 감정을 간단히 기록하고 싶다는 생각에서 시작해,
ChatGPT + Cursor + V0 조합으로 단 2시간 만에 감정일기 웹서비스를 만들어봤어요.
일기 정도면, Chat GPT API 활용하면서 만들기도 좋고
데이터베이스 이용하기에도 적당할 것 같다 싶어서
이번 기수는 감정일기 웹 서비스를 발전하지 않을까 싶습니다.
진행 방법
📌 주제: 감정일기장 웹서비스를 2시간 만에 MVP로 만들어본 경험
사용한 도구들
Cursor: 개발 IDE로 활용
V0: 프로토타입 디자인 및 UI 구현
OpenAI API: 감정 일기 초안 생성
Supabase: 일기 저장용 DB
React + Vite: 프론트엔드 구조 구성
Github: 버전 관리 및 공유
진행 순서
PRD 기반으로 핵심 기능과 시나리오 설계
PRD 프롬프트 제작 : https://chatgpt.com/g/g-PuPOUqhcR-prd-builder
V0를 통해 빠르게 UI 프로토타이핑
Cursor에서 기능 개발 및 배포
.env에 OpenAI API 키 입력하여 GPT 연동 설정Supabase 계정 생성 후 데이터 저장 로직 연동
PRD MVP 단게별 개발순서
MVP 키 프로 7의 스크린 샷
작동 시나리오 흐름 요약
검은 색 화면에 한국어 앱의 스크린 샷
V0
생각도 안했는데 API 연결 + DB 연결해주기도 해서 놀랐습니다 ㄷㄷ;
덕분에 Supabase 도 회원가입하고 연결했네요Openai API
한국 코드 앱의 스크린 샷
이후 Github -> Cursor 로 코드 받기
Github Repo에 대한 연결을 보여주는 화면
크롬 브라우저의 스크린 샷
가장 해매는 부분 : API 연결하고, 감정일기 생성하는게 문제가 있어 해 결해야 합니다. ㅠ
한국 웹 사이트의 스크린 샷
이후 스터디 + 톡방에서 자주 물어보면서 문제를 해결해야겠네요
결과와 배운 점
생각보다 짧은 시간 안에 서비스 구현이 가능했어요.
Supabase, V0 등 처음 써보는 도구들이었는데,
문서가 잘 되어 있어서 빠르게 적용할 수 있었어요.에러 발생 시 당황하지 않고, 로그 보면서 하나씩 해결하는 것도 재밌는 과정이었습니다 🙂
(그렇다고 문제들이 해결된 것은 아닙니다 ㅋㅋ)우선 만든다고 만들었는데
제가 원하는 구상은 아니라서 시간을 들여 더 발전시켜야겠네요 ㅠ
향후 작업 계획
웹 베포하는 방법
일기 생성하기 -> 오류 해결
사이트 이쁘게 만들기!
도움 받은 글
신보라 버디님의 사례게시글 : https://www.gpters.org/nocode/post/lovable-cursor-ro-simri-sangdam-raendingpeiji-jejaghagi-fKRIHnrHvyBqhIp
최원재님의 사례게시글 : https://www.gpters.org/dev/post/create-personal-branding-landing-bOjVQEHejJNsO9u
ChatGPT에게 계속 물어보면서 개발 진행했어요 😄
