You can dance, You can vibe
마음에 드는 절이 없다면 중이 절을 세우면 됨
IT 업계 사람이든 아니든 누구나 한 번 쯤 들어봤을 이름, 바이브 코딩.
하지만 어떻게 시작하는지조차 잘 모르는 사람들도 있기 때문에 이 글을 적게 되었다.
Bolt나 Lovable 같은 사이트도 있지만 google ai studio에서도 무료로! 충분히 바이브 코딩을 할 수 있기 때문에 google ai studio를 기준으로 바이브 코딩을 하는 법을 설명할 것이다.
그래서 google ai studio로 너는 뭘 만들었는데? 한다면 나는 반려동물 양치, 체중 관리 서비스를 만들었다.
이건 나의 경우에 맞춘 케이스이고, 만들 수 있는 것은 당신이 상상할 수 있는 범위와 지식에 따라 달라질 것이다. 그리고 바이브 코딩의 장점은 내가 원하는 것, 즉 기성품이 아니라 맞춤복을 만들 수 있는 것이다.
개발에 대해 잘 모르는데 나도 만들 수 있을까... 라는 걱정이 든다면 나도 개발자가 아니다! 물론 나는 낡은 데이터 분석가이기 때문에 완전히 개발자가 아니라고 하기는 어려운 하이브리드 인간이기는 하지만 중요한 점! 프로덕션용 개발을 해본 적이 없다. 그래도 만들 수 있었다.
프로세스는 다음과 같다.
1. google ai studio에 접속한다.
2. 만들고 싶은 것을 말로 잘 설명한다.
3. Build 버튼을 누른다.
4. 결과를 보고 수정 요청한다.
5. 완성되면 github에 저장한다.
6. vercel에서 github에 저장된 코드를 배포한다.
7. 끝.
미묘하게 화질이 구린 짤..일단 google ai studio에 들어가보자. 비용은 무료이고 구글 계정이 있으면 된다.
Start 화면
접속하면 바로 보이는 메인 화면이다.
- "Describe your idea": 여기에 아이디어를 작성한다.
- Model 선택: Gemini 모델 고르는 건데, Gemini 3 flash가 디폴트 모델이며 Gemini 3 pro보다 속도에 초점을 맞춘 모델이다. default 모델로 선택하고 진행해도 무방하다.
- 마이크 버튼: 난 타이핑조차 못하겠다 싶으면 마이크 켜고 말로 해도 된다.
- 파일 첨부: 참고 이미지나 자료를 알려주고 싶다면 첨부할 수 있다.
Gallery
왼쪽 메뉴 화면의 Gellery에서 예시를 구경할 수 있다. 랜딩 페이지뿐만 아니라 3D 게임도 만들 수 있다는 것을 확인할 수 있다.
편집 화면
프롬프트를 입력한 후 Build 누르면 나오는 화면이다.
처음에 요구 사항을 작성한 후에 이 화면으로 바뀐다. 이후의 추가적인 수정은 이 화면에서 진행 하게 된다.
- 왼쪽: AI랑 대화하는 창. "색 바꿔줘", "버튼 추가해줘" 이런식으로 수정 요청을 할 수 있다.
- 오른쪽: 실시간 미리보기. 수정하면 바로 반영된다.
예를 들면 내가 반려동물 건강 관리 웹앱을 만들 때 입력했던 프롬프트는 화면에 나온 것과 동일하다.
고양이 몸무게를 재고 기록하는 앱을 만들자.
중요한 것 : "엄청나게 귀여워야 함"
여러 마리 고양이를 등록할 수 있어야 함.
그리고 시계열별로 추적이 되어야 함
이 정도면 AI가 알아서 만들 것이다. 맘에 안 들거나 안 되면? "이거 안 되는데?" 하면 고쳐준다.
참고로 엄청나게 귀여워야 함에서 AI와 나의 시각 차가 컸던 것 같지만... 프로토타입으로 만든 거라 그냥 AI의 이상한 디자인 감각을 내버려두고 진행했다. 내 미감은 이렇지 않다...
또 참고로 google ai studio는 ai 기능을 요청하지 않았는데도 어떻게든 ai api를 추가해서 팔아보려고 하기 때문에 이 점을 주의하는 게 좋다... 내가 요청하지 않았는데도 AI 집사 어쩌구를 추가해서 빼냈음. 구글도 돈 벌어야겠지. 이해합니다. (사실 감사해요)
배포
웹으로 사용하기 위해서는 배포가 필요하다. github로 코드를 저장한 다음, vercel을 가입해 저장한 코드를 배포하면 된다. IT인이라면 음~ 하고 아니라면 어~ 싶을 텐데 좀 더 자세히 설명하면 코드를 github에 파일로 저장한 후, vercel이라고 하는 서비스에 가입해서 github에 저장했던 파일들을 웹으로 배포하는 것이다.
Vercel에 가입하면 이런 화면이 보일 것이다.
Vercel 계정에 내 github 계정을 연동한 후, github에 있는 google ai studio에서 저장한 폴더를 가지고 온다.
그리고 deploy... 버튼 클릭 하는 것도 참 일이다. 그죠? 물론 이것도 다 클릭 안 하고 할 수 있는 방법 다 있지만 천리 길도 한 걸음부터~
그럼 배포된다.
참고로 프로토타입이라 회원 가입조차 없이 기록 가능하고 로컬 브라우저에 저장하게 되어 있음.
https://onuru-yangchi.vercel.app/
와~ 그럼 다 만들 수 있겠당 ㅋ 이라고 엔딩이면 좋겠지만 내 생각에는 바이브 코딩으로는 0에서 시작해서 80까지 가는 게 쉬운 것이지 100의 완성도를 완벽하게 만드는 것은 개개인의 능력과 노력에 달려 있는 듯 하다.
개인이 혼자 쓰기 위한 것을 만들고 혼자 사용하는 것이라면 위험 부담이 덜하다.
그러나 불특정 다수가 쓰는 상용 서비스라면? 보안이 훨씬 중요해지고 신경 써야 할 것이 많아진다.
결제를 붙이게 된다면? 민감한 개인 정보를 다루는 서비스라면?
보안, 확장성, 안정성을 고려하게 되면 바이브 코딩만으로는 완벽한 결과물을 만드는 것은 쉽지 않기 때문에 주의가 필요하다.
하지만 나 혼자 쓸 도구를 만들기 위해서라든가, 아이디어 검증용 프로토타입, 팀 내부에서 쓸 간단한 툴, 취미용 프로젝트라면 바이브 코딩으로 많은 것을 만들어볼 수 있다.
나머지 20이 필요해지만, 그건 그때가서 더 배우면 된다.
바이브코딩의 장점은 뭔가 만들어보는 경험 그 자체이다. 아이디어로만 갖고 있던 것이 구체화되는 경험은 매우 소중하다. 뭔가 할 수 있을 것 같은 "근자감"을 심어주는 것.
나는 만들 수 없어....에서 나도 만들 수 있네? 아주 작은 것이라도. 라고 패러다임을 바꾸는 것 자체가 바이브 코딩의 진가라고 나는 생각한다.
