Daily e-sports

[기획] 바이브 코딩으로 '플래피버드' 만들기 "됩니다"

(출처=재미니 AI 제작).
(출처=재미니 AI 제작).
인공지능(AI)이 게임개발 환경을 바꾸고 있습니다. 반복적이고 시간이 필요한 캐릭터 디자인부터 핵심 기능의 코드를 작성해주는 일을 대신하고 있지요. 최근에는 개발 초보자도 모든 코드를 AI로 생성하는 '바이브 코딩'이 최근 각광받고 있습니다.

지난 기사에서 다뤘듯이, '플래피버드'류의 단순한 하이퍼캐주얼 클리커 게임 코드는 거의 완벽한 완성도를 보여줬습니다. 그렇다면 그래픽까지 바이브 코딩으로 완성할 수 있을까요?

이를 알아보기 위해 저번 기사에서 만든 코드를 기반으로 AI만으로 만든 그래픽과 이펙트를 더해 게임을 완성할 수 있는지 도전해봤습니다. 지난번에는 GPT-4o(레거시 버전)를 사용했지만, 이번에는 최신 버전인 GPT-5로 진행했다는 점을 먼저 밝힙니다.
◆ 바이브 코딩으로 이미지 입히기

챗GPT 최신 모델에서는 바이브 코딩을 위한 미리보기 기능이 강화됐다.
챗GPT 최신 모델에서는 바이브 코딩을 위한 미리보기 기능이 강화됐다.
도트 그래픽을 챗GPT에 부탁하기 전에 주요 소스 코드를 다시 만들어달라고 부탁했습니다. 모델이 업그레이드된 만큼, 저번 시간에 작성한 코드와 비교해 보기 위해서인데요. 프롬프트로 "'플래피 버드' 같은 클리커 게임을 만들 거야. 일단 '플래피 버드'의 주요 기능을 구현한 코드를 만들어줘."라고 했을때 저번보다 시각적인 배색이 추가된 코드가 만들어졌습니다. 또한 자바스크립트와 HTML 코드가 한 파일에 합쳐진 점, 미리보기를 통해 챗GPT 대화 화면에서 바로 테스트를 진행할 수 있다는 점이 달라졌네요.

코드 완성도는 크게 달라진 점은 없어 보였습니다. 스페이스바를 누를 때마다 동그라미가 반응해서 통통 튀는 액션, 화면을 새로 그리는 드로우 코드 등은 비슷한 수준으로 만들어졌습니다. 변수 선언이나 함수명도 자연어를 기반으로 만들어 주었습니다.

코드를 살펴보니 기본적인 영어를 알고 있다면 프로그래밍을 모르는 사람도 어떤 코드인지 알아볼 수 있을 정도로 완성도는 훌륭했습니다. 다만, 한국어로 프롬프트를 입력했는데 어떤 코드인지 설명해주는 주석부문이 여전히 영어로 표현되는 부분이 눈에 밟혔습니다.

챗GPT가 만들어준 UFO 콘셉트 첫 이미지. 간단한 프롬프트라 그런지 결과물이 애매했다.
챗GPT가 만들어준 UFO 콘셉트 첫 이미지. 간단한 프롬프트라 그런지 결과물이 애매했다.
코드를 작성했으니 이제 도트 그래픽을 만들어달라고 부탁했습니다. 먼저 '플래피버드'에 사용된 리소스 풍으로 이미지를 만들돼, 차별화를 위해 미확인비행물체(UFO)를 컨셉트로 해달라고 부탁했습니다.

챗GPT는 이 질문에 자신이 생각한 이미지 컨셉트를 설명했습니다. 파일명과 파이프 대체, 배경까지 전반적인 그래픽 리소스에 대한 부분까지 한 번에 만들어줬네요. UFO라는 컨셉트에 맞춰 잔디 대신 금속 패널, 별과 은하수가 빛나는 밤하늘 등을 제시했습니다. 제가 생각해도 잘 어울리는 컨셉트인 만큼, 바로 제작을 부탁했습니다.

특이한 점은 저해상도 버전의 미리보기 화면을 먼저 보여줬다는 점입니다. 그래픽 리소스를 만드는 데 필요한 인프라를 아끼기 위한 일종의 꼼수 일수도 있는데요. 사실 챗GPT의 이미지 생성 시간이 빠르지는 않은 만큼, 이용자 경험(UX) 측면에서도 이 편이 더 적합해 보였습니다.
◆ 이미지 완성도 높이기, 반복이 답이다

이미지를 반복해서 수정하는 과정에서 전반적인 완성도가 높아졌지만, 뚜껑 부분의 그리픽이 깨지는 문제가 발생했다.
이미지를 반복해서 수정하는 과정에서 전반적인 완성도가 높아졌지만, 뚜껑 부분의 그리픽이 깨지는 문제가 발생했다.
이미지 만들기는 코드 작성보다는 어려웠습니다. 창조적인 부분이 더 많이 반영되는 작업인 만큼, 어울리는 이미지를 만들기까지는 시간이 필요했습니다. 먼저 도트 이미지 사이즈를 64x64로 늘리고, 왼쪽과 오른쪽에 색상을 넣어 음영을 넣고, 뚜껑에 해당하는 돔 부분에도 입체감을 살리는 작업을 해달라고 부탁했습니다.

결과물은 실망스러웠습니다. 아무래도 텍스트만으로 진행되는 만큼, 돔 부분에 대한 프롬프트가 제대로 먹히지 않았기 때문입니다. 각종 미디어에서 클리셰로 굳은 UFO의 모습을 상상했지만, 보다 전위적인 디자인으로 창조해 버렸네요. 이 부분을 개선하기 위해 프롬프트를 고도화하는 방법이 최선일 것 같아 부탁했습니다.

지금은 하나의 대화에서 코드 작성과 이미지를 함께 만들고 있으며, 범용 생성형 AI 만으로 쓰고 있어 한계가 명확해 보입니다. 좀더 좋은 품질을 위해서는 이미지 생성 특화 AI 모델이나, 대화를 다르게 하는 등 프롬프트가 섞여서 오염이 되지 않도록 하는 편이 유리해 보이네요. 이번 시간에는 어디까지나 범용 AI로 하이퍼캐주얼을 완성하는 데 목적을 뒀으니 세밀한 부분은 넘어가야겠습니다.

◆ 타이틀 화면 만들기, 챗GPT VS 재미니

재미니가 만들어준 'SPACE AWAY' 타이틀 화면.
재미니가 만들어준 'SPACE AWAY' 타이틀 화면.
사운드를 만들기 전에 그래픽 작업을 다 끝내고 싶다는 생각이 들었습니다. 그래서 타이틀 화면을 넣어야 할 것 같아 챗GPT에게 부탁했습니다. 이에 대한 대답은 웹 버전이라서 큰 이미지를 쓰기에는 배포에 부담이 될 수 있다는 점을 먼저 언급했는데요. 게임 화면(캔버스)가 400x600이고, 픽셀 아트는 정수 배율이라 기본 해상도 200x300짜리 픽셀 이미지가 가장 알맞다고 하네요.
그래서 200x300짜리 타이틀 이미지를 제작해 바로 적용해 달라고 요청했습니다. 타이틀은 'SPACE AWAY'로 정했습니다. 챗GPT가 대화할 때 한국어는 잘 알아듣는데, 이미지나 결과물에 한글이 깨지는 경우가 있어 영어로 제목을 지었습니다. 폰트를 업로드해 메모리에 기억하는 방법 등으로 대체가 가능하다고 알려져있는 문제입니다. 챗GPT 자체적으로 해결을 시도해봤지만, 의외로 해결이 쉽지 않아 애를 먹은 부분이기도 하네요.

이 선택은 결과적으로 옳은 선택이었습니다. 코드를 보니 타이틀은 이미지가 아닌 텍스트에 스타일시트 언어인 CSS로 색을 입혔네요. 이 부분을 한글로 바꾸거나 따로 이미지를 만들어달라고 요청할 수도 있지만, 갑자기 "이미지는 구글의 재미니 AI가 더 잘 만들지"하는 생각이 머릿 속을 스쳤습니다. 그래서 게임 스크린샷을 찍어 재미니에게 알려준 뒤, 타이틀 이미지 생성을 부탁해봤습니다.

위에 사진은 재미니가 만든 'SPACE AWAY'의 화면입니다. 이미지와 텍스트의 스타일이란 차이가 있지만, 일반적인 관점에서 재미니의 이미지 품질이 조금 더 좋아 보이네요. 물론, 챗GPT나 재미니도 이미지 생성에 특화된 다양한 파생 모델들이 있는 만큼, 실제 게임에는 게임 콘셉트에 잘 어울리는 AI를 고르는 실력이 필요하다는 생각이 들었습니다.

◆ 바이브 코딩도 아는 사람이 만들어야

바이브 코딩으로 만든 'SPACE AWAY' 플레이 화면.
바이브 코딩으로 만든 'SPACE AWAY' 플레이 화면.
바이브 코딩은 기대한 만큼의 성능을 일부분만 채워줬습니다. 로직이나 알고리즘은 인터넷에서 충분히 학습할 수 있는 만큼 완성도가 높았습니다. 반면, 창조의 영역인 이미지 생성 부분에서는 아직 갈 길이 멀다는 느낌이 강합니다. 물론, 이미지를 따로 만들거나 이미지 생성 전문 모델을 쓰면 되겠지만, 이번에는 바이브 코딩으로 그래픽 요소까지 완성하는 것이 목표였으니까요.

결론적으로 게임의 실행이나 그래픽적 표현은 충분한 시간만 들인다면 얼마든지 범용 생성형 AI인 챗GPT만으로도 만들 수 있다는 점은 확인했습니다. 다음 시간에는 사운드와 캐릭터 모션 판정 등 이용자 경험(UX)을 고도화하기 위한 작업에 도전해볼 예정입니다.

서삼광 기자 (seosk@dailygame.co.kr)
<Copyright ⓒ Dailygame co, Ltd. 무단 전재 및 재배포 금지>

데일리랭킹