소개
Lovable.dev 를 이틀전에 광밤 님이 알려주어서 바로 만들어보았습니다.
그리고 오늘 만든 서비스는 15기 가상 인플루언서 만들기를 빠르게 진행하기 위해 부스터 서비스로 만든 세계관 구축, 가상 캐릭터 기획, 컨셉 잡기, 쇼츠 도우미 기능을 가지고 있습니다.
가상인플루언서를 만드는 과정에서 나만의 컨셉(브랜드 등)과 그리고 가상인플루언서가 살아갈 세계관, 가상 인플루언서의 캐릭터성, 그리고 간단하게 쇼츠를 만들 수 있는 쇼츠 기획까지 총 4가지 기능을 만들었습니다.
https://character.calcwave.com/
▽사용 사례는 아래에▼
https://www.gpters.org/marketing/post/easy-plan-virtual-fluanic-xe6ymF2AOHirDbX
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
1.loveable.dev - 초기 코드 개발
2.chatgpt o1 - 기획
3.cursor - 코드 편집
4.vecel - 웹사이트 배포
5.gabia - 도메인
<기획>
채찍피티 o1을 켜봅니다
어떻게 하라고 알려주네요
그래서
구체적인 지시사항을 넣었습니다. 계속 보면 알겠지만 제 지시사항이 중간에 어딘가로 도망갑니다
어쨌든 잘 기획해줬네요. 별도의 문서 수정없이 그냥 loveable을 써보고 싶어서 그냥 던졌습니다.
<loveable.dev 딸깍>
위의 채찍피티가 준것을 loveable에 가져와서 그냥 던졌습니다. 그리고 한 5분정도 후!
수백개의 파일들이 생겼습니다. 깜놀이네요!! bite라는 프레임워크로 만들어진 코드였습니다. 난 분명 바닐라js로 만들어 달라 했는데, 그런거 모르겠고 그냥 bite 러버인거 같습니다.
폴더 구조부터 모든게 완벽하게 갖춰진 상태로 제공됩니다. 그럼 이 코드들을 git허브에 연결해서 올리고, 제 로컬에 설치해서 이제 커서로 본격적으로 수정하려고 합니다
<Gemini API 연결>
위 이미지에서 /api/gemini.ts 파일은 커서에서 api 연결을 위해서 만든 파일입니다. 제미나이는 버전은 2.0. flash를 사용했는데, 커서가 자꾸 1.5 프로 쓰라고 자기 맘대로 코드를 바꾸기 때문에 이 부분을 때찌때찌하느라 고생했네요.
구글 스튜디오에 있는 제미나이2.0 플래쉬 버전 가이드에서 채팅이 가능한 인공지능을 선택해서 개발을 합니다
버셀에서는 깃허브에 있는 것을 바로 임포트해서 배포하는 기능이 있기 때문에 버튼 한 번 누르면 바로 배포가 됩니다. 그리고 추후에는 깃에 코드를 올릴 때마다(master) 10여초 정도면 배포가 완료되었습니다.
그리고 제미나이 api는 비용을 동반하기 때문에 api key를 서버리스 기능을 사용해서 구현했는데, 버셀에서 제공해주기 때문에 버셀 사이트에서 위 이미지처럼 환경설정에서 api키를 이름과 함께 입력만 하면 됩니다~!
Tip. api 키를 코드에 넣으면 지갑을 공유하는 것과 같으니 조심하세요~
<맨날 하는 배포 실수>
우선 개발 단계에서 vercel dev 기능으로 로컬 서버에서 개발을 진행했는데요. 이 과정이 끝나면 배포를 하는 과정을 겪습니다. 그리고 로컬서버에서 사용하는 함수 기능은 제거하고 배포용 코드로 만들어야 하는데, 기존 로컬서버 코드를 지우지 않고(맨날 하는 실수 여기임...) 수정을 반복하다가 전체 개발 시간의 80%를 날려버렸네요;;
결과와 배운 점
버셀이 실시간 수정을 도와주기 때문에 로컬 테스트를 건너뛰고 바로 배포에서 테스트하면서 개발했으면 이런 실수를 안했을텐데 문제가 많았습니다. 배포할 때는 테스트 코드는 모두 지우고 잘 배포해주세요... 비개발자라서 그런지 배포할 때마다 맨날 겪네요 이 과정을
그리고 다 개발하고 다시 loveable에 돌아왔는데, 버셀에 배포된 내용이 아까 맨 처음 코드 제공해준 채팅창에 그대로 적용이 되어있는 것을 보고 엄청 놀랐습니다. 기존 우리가 코드를 만들면 적용하고 다시 수정요청하고 이러다가 어디를 어떻게 수정해야할지 몰라서 고생하거나 하는데 이 부분을 날려버리는 것 같습니다.
커서도 코드를 읽어오지만 파일이 많으면 정말 어려운데, loveable은 전체코드를 계속 가지고 있는것을 보는거 같아서 이 부분은 정말 엄청난 혁신 같습니다!
추신///
그리고 seo 등은 하나도 확인안해서 썸네일이 loveable로 나오는거는 진짜 이놈들 광고 제대로 한다는 생각이 듭니다
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
(내용 입력)