Lindy AI는 무료를 다 써서 접으려고 하던 차에
우연히 보게된 3주차 스터디 영상
스터디장님이 Lindy AI로 Vibe coding을 하시더니
Vibe coding으로 앱 만들고, 수정하고, UI 만들고, DB 붙이고, 배포까지 하는 전체 프로세스를
설명해주셔서
개념이 잘 안잡혀있던 찰나에
이게 왠 떡인가 싶어서 덥썩 물어버림 ㅎㅎㅎ
그래서 Vibe coding하면서 전체 프로세스와 개념을
정리하면서 그동안 가장 약했던 Vibe coding 전체 그림을 그려보고
체화해 봤습니다.
종합 정리해보면
Vibe coding으로 코드 초안을 개발(여기서는 Lindy AI로 제작)
코드를 Github에 올려서 저장 및 연동
Github에 올라온 코드를 Claude code(desktop 버전, 웹 버전, Cursor 버전을 자유롭게 왔다갔다 하면서 사용)를 사용하여 수정/개선/보완/고도화
DB도 붙임
Test 및 디버깅
Deploy(배포)- 여기서는 Vercel로 배포
와, 이렇게 해 보니 이제서야 좀 자신이 붙고 감이 잡히는 것 같습니다.
그동안 주로 UI 만드는 것만 Vibe coding으로 만든 것 같아서 전체 그림이 잘 안그려졌거든요
복잡하고 어렵고 대단한 것을 개발하려는 생각은 일단 버리고
아주 간단한 것을 만들어보면서 전체 과정을 익혀보자라고 생각해서
12월 연말 행사를 가상으로 가정하고
참여자들에게서 신청 폼을 받는 간단한 앱을 만들고 DB까지 붙여서 참가자들의 정보를 확보하는 것을 만들기로 합니다.
Lindy AI에서도 Lovable처럼 만들어주네요
Github로 연결시킵니다.
Github에 연결된 것을
Claude code로 추가 작업을 합니다.
이번에 Claude code를 desktop으로 설치해서 처음 작업해 봤습니다.
그동안은 Cursor에서만 사용해봤는데
또 다른 방식으로 Claude code를 사용하는 방법을 배우게 됐습니다.
웹 버전도 스터디장님 하는 것을 보고 알게 돼서 따라해 보려고 했는데
자꾸 뭔가 에러가 나서 웹 버전은 사용 못하고 있네요
어찌 됐건 클로드 코드를 이렇게 사용하는 방법도 있다는 것을 이번에 처음 알았습니다.
더 예쁘게 UI를 다듬고 몇 가지 추가 작업을 해서(씨름을 좀 했네요)
추가 작업을 하면서 branch라는 개념도 새로 알게 되었습니다.
main code를 놓고 추가 작업하면서 가지를 쳐나가는 일종의 버전 관리 개념인 것 같 네요
그리고 나중에 마음에 드는 버전으로 merge도 할 수 있고....(맞겠죠?)
개선을 했습니다.
이제 DB를 붙이는 작업을 머리털 나고 처음 해봅니다.
Claude code 선생님에게 물어가면서 DB에 대해서 기초 개념 배워가면서 해봅니다.
PostgreSQL이 뭔지 희미하게 알 것도 같네요
하여간 Supabase로 DB를 연결하기로 결정하고
클코 선생님 지도 감독하에 열심히 작업을 해 봅니다.
Vercel과도 Supabse를 연동시키고
에러가 몇 번 나서 클코 선생님의 지휘 하에 열심히 노가다 뛰어서
결국에는 성공했습니다.
DB를 만들고 붙이는 작업을 처음 해봤는데
이제 처음으로 알게 되어서 뿌듯합니다.
Vercel로 배포까지 진행합니다.
몇 번 에러 끝에 역시 deploy에 성공합니다.
드디어 성공했습니다.
Vibe coding 전체 그림을 한 번 그려본 것이 가장 큰 수확인 것 같습니다.
그동안 명확하게 알려주는 경우가 없어서
아니면 내가 잘 이해를 못한 것일 수도 있지만...
안개 속을 걷는 느낌이었는데
이렇게 전체를 한 번 돌려보니 감을 좀 잡겠네요
감사합니다. 🙇 🥰 🌸
