바이브코딩으로 게임 만들기_바이브코딩이란 무엇인가🤖
최근 AI 개발 커뮤니티에서 바이브코딩(vibe coding)이라는 단어가 빠르게 확산되고 있습니다. 기존의 코딩 방식이 직접 코드를 작성하는 방식이었다면, 바이브코딩은 AI에게 원하는 기능을 설명하고 AI가 코드를 생성하도록 하는 방식입니다.
쉽게 말하면 다음과 같은 흐름입니다.
상상 → AI에게 설명 → AI가 코드 생성 → 실행
즉 개발자가 코드를 직접 작성하는 대신, AI에게 문제를 설명하고 방향을 제시하는 역할을 하게 됩니다.
특히 최근 등장한 여러 AI 개발 도구들 덕분에 IT 비전공자나 비개발자도 앱을 만들어 볼 수 있는 환경이 만들어지고 있습니다.
물론 현실은 조금 더 복잡합니다.
AI가 코드를 만들어주지만, 문제도 같이 선물해주는 경우가 많다더군요.
그런데 문득 이런 생각이 들었습니다.
“IT 비전공자가 바이브코딩만으로 앱을 만들 수 있을까?”
그래서 이번 글에서는 IT비전공자가 직접 google ai studio 무료 버전을 활용하여, ‘바이브코딩으로 게임 만들기’ 실험 과정을 기록해 보려고 합니다.
바이브코딩으로 게임 만들기 실험 목표: 냐옹별에 사는 고양이와의 텍스트 RPG 만들기🐱
이번 실험의 목표는 아주 간단했습니다.
[Google AI Studio 무료 버전으로 간단한 텍스트 RPG 앱을 만들어보기]
AI에게 요청한 프롬프트는 다음 한 줄이었습니다.
냐옹별에 살고 심심해서 모찌 가게를 연 고양이와의 텍스트 RPG를 만들어줘
프롬프트 엔지니어링?
복잡한 설계?
없습니다.
솔직히 말하면 그냥 궁금해서 시켜봤습니다.
이것이 바로 바이브코딩의 정신(?) 아닐까요.
그래서 바로 Build 버튼을 눌렀습니다.
바이브코딩으로 게임 만들기_첫 번째 문제: Preview 무한 로딩
앱이 생성되긴 했지만 문제가 바로 발생했습니다.
앱 preview 화면이 무한 로딩 상태였습니다.
그래서 AI에게 다음과 같이 요청했습니다.
앱 preview가 loading이 너무 오래 걸리는데 어떤 문제가 있는지 검토해줘
AI가 코드를 분석하며 수정 작업을 진행했습니다.
하지만 이번에는 또 다른 문제가 생겼습니다.
바이브코딩으로 게임 만들기_두 번째 문제: 고양이가 대답을 하지 않습니다
텍스트 RPG에서 가장 중요한 기능은 대화 시스템입니다.
하지만 사용자가 입력을 해도 고양이가 아무 반응을 하지 않았습니다.
그래서 다시 AI에게 요청했습니다.
사용자가 대화를 입력했을 때 다음 단계로 넘어가지지 않아. 고양이가 대답하는데 너무 오래 걸려.
AI가 로그를 확인한 뒤 에러가 발생했다고 알려주었습니다.
그리고 바로 옆에 Fix 버튼이 나타났습니다.
Google AI Studio의 재미있는 기능 중 하나가 바로 이것입니다.
에러가 발생하면
- 에러 메시지가 자동으로 표시되고
- 바로 옆에 Fix 버튼이 생성됩니다
- 버튼을 누르기만 하면 AI가 코드를 자동 수정합니다
실제로 이번에도 Fix 버튼을 한 번 누르자 문제가 바로 해결되었습니다.
AI가 코드를 고치고, 인간은 버튼을 누른다.
협업이라고 부르기에는 조금 묘한 관계입니다.
갑자기 디자인 욕심이 생겼습니다🎨
기능이 작동하자 (쓸데없는) 욕심이 생겼습니다.
그래서 이미지를 첨부하고 다음과 같이 요청했습니다. (이미지는 제가 현재 개발자분과 개발중인 게임의 캐릭터 이미지입니다)
이 디자인 그대로 만들어줘
하지만 이번에는 또 다른 문제가 발생했습니다.
AI Studio는 외부 이미지를 바로 참조할 수 없어서 기존 아이콘을 그냥 좀 더 고급스럽게? 스타일링했다고 합니다.
그래서 해결 방법을 물어보니 AI의 답변은 간단했습니다.
public 폴더를 만들고 그 안에 이미지를 넣으세요 바보 인간아^^
(저의 왜곡된 기억속 ai의 답변입니다)
그런데 public 폴더는 어디에 만들어야 할까
IT비전공자는 다시 한 번 ai를 괴롭힙니다.
이미지를 어떻게 public 폴더에 업로드해? 하나하나 자세히 비개발자에게 설명해주는 것 처럼 설명해줘
그러니 다음과 같이 아주 자세하고 친절한 설명이 돌아옵니다.
갑자기 초등학생한테 설명해주는 것 같은 기분은 뒤로 하고 그대로 실행 후 AI에게 다시 요청했습니다.
public 폴더에 있는 이미지를 사용해서 디자인을 만들어줘
이번에는 디자인이 꽤 깔끔하게 적용되었습니다.
또 다시 등장한 에러
하지만 역시 한 번에 끝나지는 않았습니다.
이번에도 에러 메시지가 하나 더 등장했습니다.
다행히 Google AI Studio에서는 에러가 발생하면 자동으로 알려주고 Fix 버튼이 다시 나타납니다.
그래서 이번에도 Fix 버튼을 눌러 AI가 코드를 수정하도록 했습니다.
에러 메시지는 사라졌습니다.
하지만 또 다른 문제가 있었습니다.
이번에는 고양이가 또! 말을 하지 않았습니다.
텍스트 RPG인데 NPC가 말을 하지 않는 상황입니다.
고양이가 갑자기 철학자가 된 것 같았습니다.
그래서 다시 문제 해결을 요청했습니다.
AI가 친절하게도 코드를 다시 한 번 수정했습니다.
바이브코딩으로 게임 만들기_마지막 문제: Runtime TypeError
모든 것이 해결된 것 같아서 앱 링크를 공유했습니다.
살짝 신나는 마음으로.
하지만 다음과 같은 오류가 나타났습니다.
Runtime TypeError
Cannot read properties of undefined (reading 'call')
기쁨은 항상 너무 빨리 찾아옵니다.
그래서 이번에는 저에게 좀 더 친숙한 친구인 GPT에게 교차 검증을 요청했습니다.
이 오류는 자바스크립트에서 매우 자주 등장하는 오류라고 합니다.
보통 다음과 같은 상황에서 발생한다고 했습니다.
- 아직 생성되지 않은 객체를 호출할 때
- 데이터가 로딩되기 전에 함수가 실행될 때
- 비동기 처리 타이밍이 맞지 않을 때
이번 경우에는 앱이 완전히 로딩되기 전에 코드가 실행되면서 발생한 문제로 보인다는 것입니다.
제가 이해하기에는 주인이 아직 출근하지 않은 가게에 손님이 와서 주문하는 바람에 난리가 났다…라고 해석했습니다.
그래서 이런 점을 방지하기 위해 GPT가 해 준 조언은 이것이었습니다.
로딩 UI를 먼저 표시하라.
즉 앱의 흐름을 다음과 같이 바꾸는 것입니다.
앱 시작
→ Loading UI 표시
→ 데이터 로딩
→ 게임 시작
이렇게 하면 undefined 상태에서 함수가 호출되는 문제를 막을 수 있다고 합니다.
주인이 출근 하기 전에 손님이 오는 경우 ‘준비중입니다^^’ 라는 문구를 달아놓으면 된다는 것이죠.
이 조언을 바탕으로 다시 코드를 수정했고, 추가로 갑자기? 발견된 4개의 에러를 Fix 버튼으로 수정했습니다.
바이브코딩으로 게임 만들기_드디어 완성된 첫 바이브코딩 앱
그리고 드디어! 앱이 (비)정상 작동했습니다.
눈물이 날 정도는 아니었지만 조금 기쁘기는 했습니다.
고양이 UI 정렬이 완벽하지는 않았지만 더 수정하다 보면 다른 기능이 망가질 것 같은 느낌이 강하게 들었습니다.
그래서 이 프로젝트는 여기서 마무리하기로 했습니다.
개발이란 언제나 완벽이 아니라 적절한 타협의 예술이라는 걸 깨닫게 된 순간입니다.
실제 만들어진 앱
궁금하다면 퀄리티가 어느 정도인지 직접 실행해볼 수 있는 링크입니다. 예. 엉망진창이지요.
IT 비전공자 바이브코딩 실험 결론
이번 실험을 통해 느낀 점은 다음과 같습니다.
- 비개발자 바이브코딩도 충분히 가능은 하다
- 하지만 에러는 계속 발생한다
- 여러 AI에게 계속 질문하면서 교차검증하며 해결해야 한다
- 완전히 자동화된 개발은 아니다
- Google ai studio는 다소 느렸다 (신형 컴퓨터로 바꿔라?)
- 그렇지만 친절하고 ui도 직관적인 편이었다
- 에러가 났을 때 자동으로 에러를 찾아주고 fix할 수 있는 버튼이 아주 맘에 든다
AI가 개발을 대신해주는 시대는 맞지만 인간의 역할도 여전히 필요합니다.
특히 중요한 것은 문제를 설명하는 능력입니다.
코드를 직접 작성하는 대신
문제를 설명하고 방향을 제시하는 역할이 중요해지고 있다고 느꼈습니다.
AI는 생각보다 고집이 셉니다.
그래서 우리는 결국 진지한 대화를 하며 앱을 완성하게 됩니다.
다음 글에서는 IT비전공자가 replit 바이브코딩으로 게임 만들어본 후기를 정리해보겠습니다.
[👉비개발자가 replit 바이브코딩으로 게임 만들어본 후기]
*본 글은 개인적인 경험과 데이터 분석을 바탕으로 작성되었으며, 개개인의 상태와 환경에 따라 체감은 달라질 수 있습니다.