프로젝트 시작
Vibe Coding 2번 째 프로젝트 개발로그를 시작합니다.
이번 프로젝트의 주제는 초기 아이디어 단계부터 사용자들과 함께 만들어 갈 수 있는 커뮤니티 플랫폼을 제작하는 것입니다.
개발환경 설정
+ Replit과의 이별, 그리고 새로운 시작
이전 프로젝트(ShortV 제작 훑어보기)에서 Replit 자체 서버와 내부 Neon DB를 사용하면서 3-4번의 서비스 이슈를 겪었고, 이를 해결할 방법이 마땅치 않아 많은 어려움이 있었습니다. 이 경험을 통해 이번 프로젝트에서는 Vercel 배포를 최우선으 로 설정했습니다.
Replit으로 프로젝트를 생성하고 Vercel 배포를 시도했지만, 예상치 못한 문제에 부딪혔습니다.
Replit의 가격 정책 변경으로 토큰 소모가 빨라졌음에도 불구하고 여전히 비효율적인 점이 많았습니다. 특히 정기 구독을 하지 않으면 서비스 운영이 어렵다는 점(현재 ShortV는 사망상태..)이 가장 큰 부담으로 다가왔습니다.
Replit 관련 커뮤니티에서도 이러한 가격 정책에 대한 불만이 많다는 것을 확인할 수 있었습니다. (참고: Replit의 새로운 가격 정책, Replit 새 가격 모델 논란)
+ Vercel, Supabase, Github 연동을 위한 여정
Replit으로 시작하면 Vercel 배포 시 다양한 설정 문제가 발생한다는 것을 알게 되었습니다. 기존 ShortV도 Vercel에 배포하기 위해 열심히 에러로그를 복붙했지만 Replit은 해결해주시 못했습니다.
이번에도 새 프로젝트를 Vercel에 import, 배포하면서 발생한 에러를 Replit에 수정 요청을 했지만 결국 해결되지 않았고, 비전문가로서 우회 방안을 모색해야 했습니다.
Vercel에 안정적으로 배포하는 환경을 구축하기 위한 가장 확실한 방법은 V0로 시작하여 Vercel, Supabase, GitHub를 자동으로 연결하고 최초 배포를 시도하는 것이었습니다.
V0에서 프롬프트로 기본 페이지를 생성하고 더 진행해보았지만, 생각보다 만족스럽지 못한 결과물에 프로젝트를 삭제해야 했습니다.
그 다음으로 V0로 대충 생성된 GitHub 코드를 Replit에서 import하는 방법을 시도했습니다. 이 과정에서 Replit으로 시작한 프로젝트가 아니면 'agent'를 사용할 수 없다는 사실을 처음 알게 되었습니다. 다행히 'assistant'는 사용 가능했지만, 기능 완성도나 비용 문제로 결국 포기하게 되었습니다.
이후 Lovable, MGX 등 다른 대안들도 시도했지만 완성도 문제로 폐기했습니다.
+ V0.dev와 Figma의 시너지, 그리고 Cursor로의 전환
시행착오 끝에 Figma로 기본 레이아웃을 제작해서 프롬프트에 첨부 이미지로 V0에게 제공하니, 매우 만족스럽게 프론트를 생성해주는 것을 발견했습니다.
프롬프트만으로 시작하는 것보다 이미지를 제공하는 것이 훨씬 효과적이었습니다.
최종 선택
최종적으로 V0.dev로 프론트 개발을 시작하고, GitHub로 코드를 관리하며 Supabase를 연동하여 Vercel로 배포하는 개발 환경을 구축하게 되었습니다.
V0의 월 무료 구간을 모두 소진하고 월 크레딧을 충전($20)하여 10 credit 정도 더 소모한 후 GitHub에 배포했습니다. 이후에는 Cursor에서 이어서 개발을 진행했습니다.
+ Cursor에서 입코딩 시작
커뮤니티 서비스의 자잘한 기능을 개발하고 수정하는 데 생각보다 많은 시간이 소요되었고, Cursor의 "저세계 구현(?)" 등으로 중간중간 롤백이 발생하는 해프닝도 있었습니다.
특히 커뮤니티의 핵심인 타임라인 구현에서 많은 요청과 롤백이 있었습니다. UI와 기본 기능을 구현하는건 매우 간단했지만 아이템 로딩 최적화, 좋아요 등의 상태변화 캐싱 등을 위해 메모리 캐시 사용, 전역상태관리자 설정 등에서 많은 꼬임이 있었습니다.
지금까지 중간점검
+ 현재까지의 성과 및 비용 절감 효과
현재까지 개발 환경을 변경하면서 얻은 가장 큰 이점은 비용 절감입니다.
V0에서 이미지 첨부를 통해 초기에 좋은 시작점을 가져갈 수 있었고, 이는 초기 비용 발생에 큰 영향을 주었습니다. 좀 더 효과적으로 프롬프트를 작성했더라면 V0 월 무료 구간에서 바로 Cursor로 넘어갈 수 있었을 것입니다.
첫 프롬프트 결과물의 완성도는 프로젝트 초기 비용에 큰 영향을 줍니다.
무료 구간에서 다양한 Vibe coding 서비스에서 시도해보고 가장 만족스러운 것으로 시작하는 것도 좋은 전략입니다.
Cursor를 사용하면서 1차 목표까지 구현하는 데 약 20달러가 소요되었습니다. 6일 정도 작업했는데, 만약 Replit으로 진행했다면 60달러 이상 발생했을 것으로 예상됩니다.
Supabase를 사용하기 때문에 다음 달 부터 25달러/월 운영비가 발생할 수 있지만, 이미 절약된 금액 안에서 충분히 해결 가능할 것으로 보입니다.
Vercel은 아직 무료 구간이라 추가 비용 발생 은 없습니다.
+ 시동 프롬프트 활용 팁
시동(첫) 프롬프트는 상세한 UI보다는 기본 레이아웃과 핵심 기능 설명에 중점을 두는 것이 좋습니다. UI는 이미지나 Figma를 첨부하는 것이 훨씬 더 잘 구성해준다는 것을 직접 경험했습니다.
이유는 자잘한 UI 수정은 이후에 저비용으로 해결가능하지만 구조적 변경은 제대로 수행하지 못하거나 꼬이는 경우가 많습니다. 그리고 꼬이다 보면 개미지옥 현상으로 완성에 도달하지 못하고 롤백을 하게되는 결과에 귀결됩니다…
+ 다음 단계
지금까지 산출물: https://vibexx.vercel.app/
도메인 구매 및 연결, 8월 스프린트 테스트, 홍보 및 오픈테스트, 추가기능 개발