소개
시도하고자 했던 것과 그 이유를 알려주세요.
저희 회사에서 만들고 운영하는 서비스 (노코드 기반의 마케팅 & 캠페인 SaaS) 기능 업데이트를
위한 바이브 코딩 실험
- 고객에게 보여줬더니 자기네 부서에서 만드는거 보다 낫다고 이 서비스를 제안해 주면
계약해 주겠다고? 하는 바람에 얼떨결에 계약서 까지 진행 중
진행 방법
Cursor, Lovable, replit 등 AI 활용 아래와 같은 프롬프트 (간단한 아이디어)로 시작
활용한 툴
Bolt.new : 초기 프로토타입 제작
Lovable : UI/UX 디자인 및 기능 구현
Claude : 프로세스 플로우차트 작성, PRD 문서 생성
Genspark : PRD 문서 작성
AI Studio : 기능 자문 및 개선사항 도출
Supabase : 데이터베이스 연동
진행 세부 내용
초기 프로토타입 개발
Bolt.new를 활용해 기본 기능(웹푸시, 헬로바, 배너, 팝업) 구현
Netlify 배포를 통한 초기 버전 테스트
Lovable로 서비스 고도화
메뉴 구조 개선 및 모던 디자인 적용
Supabase 연동으로 데이터 관리 기능 구현
캠페인 등록 프로세스 구현
문서화 및 기능 검증
Claude를 활용한 플로우차트 및 PRD 작성
AI Studio 피드백 기반 기능 개선
계약서 검토 및 협상 포인트 도출
초기 시작 프롬프트
no code (template) based campaign SaaS tool
주요 기능
- Web push
- Hello bar
- Banner
- Popup : Youtube link based
- coupon (birthday, season, X-mas..etc)
<- 진짜 이렇게 생각? 없이 prompt 넣어서 만들어봤..
1. Bolt.new
혼자 코딩 잘하는군요... 호..오...
2. 다양한 페이지. 기능 대시보드가 조금식 생성....
3. deploy ??
Your project has been previously deployed to https://cheerful-fairy-ca87be.netlify.app
쿠폰 생성 기능 (오 그럴듯 한데..하지만 2% 부족한 화면과 디자인 ...
쿠폰 생성 기능은 생각 ? 보다 구체화 잘 된거 같아요
대시보드 화면 (그럴듯한데요) 여기까지...각 메뉴나 화면이 제대로 안되서 개별 페이지 수정 및
modern design & background 이미지 추가해 달라고 했는데 못알아 먹고... 계속 토큰? 소진 했다고
돈달라고 하네요 ㅡ,ㅡ
https://lovable.dev/ <- 러버블 로 갈아타서 다시 시도
옷 얘는 메뉴..이거 뭐냐? 천잰데....
진짜 간단하게 똑같이 허접한 프롬프트 넣었는데... 뭐지? 뭐지?...
지피터스 다른 분들은 러버블이 디자인을 잘 뽑아준다고 하시는데... 이번 프롬프트에서 이정도 메뉴를
구성해 준다면..그냥 저는 이거 쓸께요 라는 생각이 들정도이네요 흠...
DB (supabase) 연동 그리고 모던 디자인도 추가 요청
저는 개발을 해본 사람이니깐 예시 페이지를 더 많이 만들어 달라고 세부적으로 주문해 봤어요
추가 기능을 넣었다고 알려주네요 ~~
Tip: 저는 이와 같이 어떤 기능이 추가 되었는지 자세히 보는편인데
개발 기능 완벽한 적용 보다는 서비스 관점, 즉 요청한 기능 function 이 제대로 구현되고 있는지 확인하면 좋을것 같아요
<- 중간 중간 에러 발생
에러 고쳐 달라고 여러번 요청 !!!
Github 에 소스 등록(연동) 도 하면서 소스 버전? 관리
https://preview--campaign-spark-blitz.lovable.app/
호 나름 그럴듯 하게 메뉴와 실제 캠페인 등록 까지 되는군요
앗 이거 프로세스 안그렸네 ...하고 flowchart 그려달라고 claude 요청해 봤어요
https://claude.ai/public/artifacts/033f0880-fc72-48d7-b8da-5df3522d523c
개발 요구서? PRD도 만들어 달라고 해 봤구요
https://claude.ai/public/artifacts/5e9cd973-aac1-4d3d-95e5-ba7f55a5eab6
젠스파크에도 PRD 만들어 달라고 해 봤습니다.
https://www.genspark.ai/api/page_private?id=ofeyyjmt
AI studio 에 화면 캡쳐해서 넣어보고 추가 기능이나 advisory 해 달라고 해 보기도 하구요
추가 기능이나 추가 사항을 기반하여 다시 PRD 를 만들어 달라고 하시고 하구요
고객과의 계약서 작성
계약서 작성시 각 조항별 검토 및 보완 사항에 대해 알려달라고 했어요
요청 프롬프트
----------------------------------------------------------------------
업로드된 계약서를 조항별로 하나씩 순차적으로 검토해주세요. 먼저 첫 번째 조항부터 시작하여 다음 형식으로 분석해주세요:조항 번호와 제목
조항 내용 요약
법적 효력 및 구속력 분석
잠재적 리스크 평가 (위험도: 상/중/하)
문제점 및 개선사항 (구체적 문구 인용)
수정 제안 및 대안
협상 포인트와 전략
각 조항 검토를 완료한 후에는 반드시 "다음 조항으로 진행해도 될까요?"라고 물어보고 사용자의 승인을 받은 후에 다음 조항으로 넘어가세요. 사용자가 특정 조항에 대해 추가 질문이나 더 자세한 검토를 요청할 수 있으므로, 각 조항마다 충분한 시간을 두고 단계별로 진행해주세요. 모든 조항 검토가 끝난 후에는 전체 계약서 총평 평가와 우선 개선사항을 정리해주세요.
----------------------------------------------------------------------
검토 결과 내용
검토 결과
- 문제검 및 개선사항 제시
- 협상 포인트와 전략
고객에게 문제점에 대해 정중하게 메일 보내고 싶다고 고쳐 달라고 해 봤습니다. ㅎㅎ
고객사에 보내는 내용을 정리해 달라고 해보았습니다.
p.s 추가로 replit 에 노코드 기반의 캠페인 툴 생성에 동일한 프롬프트 사용시
이건 뭐 그냥 3-4개월 개발해야 되는 서비스가 나오는군요
배운 점과 나만의 꿀팁을 알려주세요.
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
잘 짜여진 않더라도 계속 기능을 추가해 가면서 원하는 기능을 빨리 만들어 보는게
✍️가 중요함을 또 한번 깨달은 프로젝트 입니다.
위 화면 만드는데 여러 툴을 사용해 보고 머리속으로 구조화 한 시간은 전체 1주일정도 시간이 걸린것 같아요
2일 동안 구현한 것:
✨ 서비스 구성에 user 인터랙티브한 UI
✨ 대시보드, 관리자 기능, 캠페인 세부 구현 내용 API 구현 및 연동
✨ 캠페인 적용을 위한 step by step (Customer journey) 기능
내용 잡는데 1주일 이상 고민했던 내용:
⭕️ 문제 정의 & 유저 시나리오
⭕️ 리텐션 포인트(구매 포인트) 어떤 기능을 넣으면 좋은지...
⭕️ 비즈니스 로직 구조화 & 상세화
