바이브코딩 아이디어를 상상하고 기획 하고 만들고

요즘 연말에 시간을 들여서 나만의 프로젝트를 좀 진도를 나가보고 있습니다.

​물론 대부분에 시간을 바이브코딩 (Vibe Coding) 에 몰두하고 있습니다.

​그래서 포스팅도 못했고..

​오늘은 바이브코딩에 관심은 있지만 어떻게하면 되지 라는 생각에 답을 한번 해볼까해요.

​저는 주로 Replit 을 이용하여 상당한 비용(?)을 투자해서 개발중이지만

내가 Replit에서 진행중인 다양한 서비스들...바이브코딩의 장점중 하나는 이렇듯 동시에 프로젝트가 진행가능하다..마치 여러 팀을 지휘하듯이.

오늘은 실제로 돈 한푼도 안들이고 뭘 만드는지 보여 드릴께요.

https://blog.naver.com/opinion_beliefs/224086995156

상상하면 만들어지는 바이브코딩 세상 – Replit·AI로 1인 웹앱 만드는 법

그러기위해서 앞전 포스팅에서 소개했던 바이브코딩 서비스툴 중에서 Lovable 에 대해서 언급을 안할 수 없네

러바블은 국내외에서 상당히 인기가 많은 바이브코딩 툴중하나 입니다. 심플한 인터페이스와 빠른 속도 등

​Lovable도 역시 Replit 처럼 비개발자에게 친화적인 툴입니다 그야말로 자연어 기반으로 개발이 됩니다.

그런 특장점이 있고 또한 Replit 같은 툴은 창렬한(?) 과금등이 문제가 되는데 Lovble 은 그에 비해 과금이 합리적이며 속도도 빠른 편입니다...그에 비해 단점도 있습니다. 일단 단점이랄수 있는지는 모르지만 제가 결국 Lovable 과금을 종료하고 Lovable에서 진행중이던 프로젝트들을 창렬한 Replit 과금때려박기 노가다를해가며 이관(?)작업을 해온 이유는

​일단 발전속도가 더딥니다 Replit은 하루가멀다하고 성장을 하고 있지만(성능도 성장하지만 가격도 성장하고있는게 문제임) ㅇ그에 비해 아직 더디고 기능면에서도 많이 약한 부분이 있고 사용중인 AI도 다소 약한것 같습니다.

또한 장점이자 단점이 Supabase를 Backend로사용하는데 연계 형태로 사용하기때매 Supabase도 별도 과금을 이용해야합니다. 이게 장점이 될수도있고 단점이 될수도 있습니다.

​저의 경우에는 이부분이 Replit으로 이관할때 큰 걸림돌이였습니다.

그럼에도 불구하고 GitHub 연계성 등 상당히 많은 장점을 가지고 있는 좋은 툴입니다.

​저는 10월달 이후 Lovable과 Supabase 과금을 완전히 종료 하고, 개발중이던 모든 것들을 Replit으로 Migration 했습니다. 하지만, 오늘 보여 드릴것은 Lovable 을 통해서 만들고 있는 것을 예시로 보여 드릴려고 합니다.

lovable 기본 과금체계

Lovable은 가입자들에게 무료로 5 Credit을 매일 배급해줍니다. 물론 사용 안하면 사라지고 담날은 다시 5 Credit을 제공합니다.

즉, 돈을 내지 않아도 하루에 5credit씩 계속 사용해볼수있습니다. (한달내내는 아닌것 같고 한달에 보름에서 20일? 정도 그리고 나서는 다음달 되면 다시 5Credit씩 계속 줍니다)

​저는 이 5Credit 씩 계속 받는 것을 이용해서 지난 11월14일 부터 만들고 있는 것을 보여 드릴께요.

바이브 코딩툴로 바이브코딩툴을 만들다!

출처 : 나

첨에 어떻게 시작해야될지 막막하신분들이 있을까요? 이걸 보시면 기가 차실수 있는데? 그냥 이렇게 합니다.

정말 이 간단한 한문장으로 시작 합니다. 내가 하고자하는 것 내가 상상한것을 떠들어 보는걸로 시작합니다.

물론, 바이브코딩을 잘하시는 전문가 분들은 훨씬 더 합리적이고 효율적인 프롬프트를 작성하십니다. 저도 많이 공부중이고, 저는 보통 프롬프트를 챗지피를 활용하는 경우도 많아요. 하지만 때로는 이렇게 그냥 막연한 생각을 그냥 때려 부어놓고 할때도 있습니다.

저렇게 시작을 해도

 

철떡같이 알아듣고 지가 막 뭔가를 준비합니다. 디자인부터 시작해서 기능 레벨 인터페이스 등등...

이때 주의할것은 소스코드난 그런건 잘 모를수 있지만 어떤 기획을 하고 준비하는지 바이브코딩 툴이 말을 합니다. 이때 그런 내용을 보고 내가 생각한것과 다른 기획이 있으면 그런부분들을 보정해줘야합니다.

어때요 화면이 그럴싸 한가요? 초기에는 어제까지도 화면이나 폰트가 저거 보다 훨씬 엉망이였어요.

이렇게 지혼자 막 기획을합니다. 종종 브레이크를 잡아줘야 합니다.

이런식으로 명령을 합니다.

채팅창에 소스코드를 와창장 넣어버리는 문제..이걸 저말에 의해 해결했다가...지금 다시 또 저문제가 생기고 있음 바이브코딩툴의 고질병중 하나인 기능 개발 하다가 앞에서 해결된 문제 다시만들고 모른척하기...

바이브코딩이라는 것을 설계 해본적이 없이 막연하게 툭 시작 한것이다 보니 질문을 이렇게 던져 보기도 합니다.

5credit 다쓰면 자고 일어나서 담날 아침에 또 5크레딧이 쌓이는데..당장 써서 없에고 싶은데 생각이 안났던거죠

​

Lovable 로 만들고 있는 바이브코딩툴에 Lovable에는 없고 Replit 에 있는 강력한 기능을 만들기 위해서 저렇게 프롬프트를 넣었어요..아직은 구현에서는 에러가 나고 있습니다.

Lovable 에서 첨에 개발을 시작하면 참 디자인이 구리다는 것을 느낍니다. 이 프로젝트도 사실 첨에는 지금의 모습보다 많이 구렸었는데 저 프롬프트 한방에 이렇게 바뀐겁니다.

https://vibe-coder-pal.lovable.app/ 실제 publishing 해놓은 겁니다. 현재는 Lovbale 이 자체 제공하는 AI API를 사용 하고 있는데 향후 저의 GPT는 Gemini API 를 붙여볼까 고민중입니다. 사실 아직은 실험용 프로젝트라 공을 많이 들일 생각은 없거든요. 하루에 Credit 5만큼 딱 10분씩만 투자해서 20일만에 만든 사이트입니다.

AI CodeStudio - AI 기반 바이브코딩 플랫폼

실제 로그인 하면 이렇게 유사 Vibe Coding CLI가 나타납니다 ㅋㅋㅋ 작동하는 기능도 있고 아직에러가 터지는 기능도많습니다.

내가 만든 바이브코딩 툴!!

내가 만든 바이브코딩툴 AI CodeStudio (이름도 짓기 귀찮아서 지보고 알아서 지으라고 했더니....)

아까 테스트로 만들었던 webPage가 있었는데...제목만 저장되고 암것두 저장이 안되네요 ㅋㅋ낼 이거부터 고쳐야겠습니다.

이렇게 입력해볼게요 되는지?

화면이 레쥴루션 안되지만 뭔가 막 합니다...

뭔가 소스코드를 막 써내려 가네

화면에 구성해놓은 미리보기를 한번 눌러보겠습니다

뭔가 더럽게 맘에 안드네요 그래서 다시

이렇게 입력을 했습니다.

뭔가 걍 잘 안되네요 ㅎㅎㅎ^^;; 고도화를 더해봐야 할것 같습니다. 과금 결제 마렵네 ㅋㅋㅋ

하지만 테스트삼아서 심심풀이로 저는 Lovable은 당분간 이렇게만 사용할겁니다.

​

Lovable을 이용해서 간단한 Webpage는 이렇게 1두시간 안에 쉽게 만들수 있습니다 . 이제 확실한건 WEB Page를 더이상 비싼 비용을 들여서 만들필요는 없어졌다는 거죠

​

복자하고 강력한 서비스를 만드는 것은 상당한 인내와 노력이 필요하지만 간단 웹페이제 웹서비스 배너 이벤트 페이지 등등 아주 손쉽게 하루이틀만에 만들어 냀 수 있습니다.

​

혹시 Lovable을 체험 해보 싶으시면 https://lovable.dev/invite/C2YF5T3

Claim your invite and earn 10 credits - Lovable

위 링크를 통해서 가입하시면 추가 10 Credit을 지급 받으실수 있어요10 +5 크레딧으로 나만의 Webpage를 손쉽게 만들어 보시면 감이오실거에요.

 

https://sotialbeing.com/  아래는 개인적으로 진행중인 프로젝트 Page 입니다

기술은 단순하게, 관계는 깊게