코딩을 몰라도 게임 만들기는 가능합니다. 규칙이 단순한 게임 하나를 정하고, 무엇을 조작하는지, 점수는 어떻게 얻는지, 언제 끝나는지를 AI에게 한국어로 설명한 다음, 직접 플레이하면서 한 번에 하나씩 고쳐 나가면 됩니다. 여기서는 VibeDream으로 휴대폰과 컴퓨터의 브라우저에서 바로 즐길 수 있는 게임을 만드는 순서를 예시와 함께 소개합니다. 일반적인 웹앱을 만들고 싶다면 앱 만들기 글을 먼저 보셔도 좋습니다.
처음에는 작은 게임부터 고르기
처음부터 큰 RPG나 온라인 대전 게임을 목표로 하면 중간에 멈추기 쉽습니다. 한 화면 안에서 끝나는 게임이 좋습니다.
- 떨어지는 물건을 받는 게임: 좌우로 움직여 과일을 받고 폭탄을 피합니다.
- 피하기 게임: 날아오는 장애물을 피하며 오래 버팁니다.
- 점프 게임: 한 버튼으로 점프해 구멍을 넘습니다.
- 퀴즈 게임: 문제를 맞힐 때마다 점수가 오릅니다.
- 짝 맞추기 게임: 카드를 뒤집어 같은 그림을 찾습니다.
AI에게 게임을 설명하는 프롬프트
VibeDream에서 게임은 Phaser라는 브라우저 게임 프레임워크로 만들어집니다. 화면은 영어로 되어 있지만 채팅에는 한국어로 쓰면 됩니다. New Project를 누르고 다음처럼 설명해 보세요.
과일 받기 게임을 만들어 주세요.
화면 아래의 바구니를 좌우로 움직여 위에서 떨어지는 사과를 받습니다. 휴대폰에서는 화면을 터치해서, 컴퓨터에서는 방향키로 움직입니다.
사과를 받으면 1점, 가끔 떨어지는 폭탄을 받으면 하트가 하나 줄어듭니다. 하트는 3개이고 모두 잃으면 게임 오버입니다.
10점마다 떨어지는 속도가 조금씩 빨라집니다.
게임 오버 화면에 점수와 다시 하기 버튼을 보여 주세요.
밝고 귀여운 분위기, 화면의 글자는 모두 한국어로 해 주세요.
직접 해 보면서 고치기
미리보기에 게임이 나타나면 실제로 여러 번 해 보세요. 그리고 느낀 점을 한 번에 하나씩 전합니다.
- "사과가 처음부터 너무 빨리 떨어져요. 처음 속도를 지금의 절반으로 해 주세요."
- "폭탄과 사과의 색이 비슷해서 헷갈려요. 폭탄을 검은색으로 바꿔 주세요."
- "휴대폰에서 바구니가 손가락에 가려져요. 바구니를 조금 더 위에 놓아 주세요."
- "게임 오버 때 최고 점수도 함께 보여 주세요."
미리보기를 휴대폰 화면으로 바꿔서 터치 조작도 꼭 확인하세요. 오류 메시지가 보이면 그대로 복사해 채팅에 붙여 넣고 언제 나타나는지 함께 적으면 됩니다.
게임을 공개하고 친구와 겨루기
Put it online을 누르고 이름을 정하면 1~3분 정도 뒤에 apple-catch.vibedreams.ai 같은 HTTPS 주소로 공개되며, 한 번에 5크레딧이 듭니다. 공개된 게임에는 플레이 페이지와 리더보드가 생기므로 링크를 보내 친구와 점수를 겨룰 수 있습니다. 공개 후에 고친 내용은 Update it을 눌러야 반영됩니다.
만든 게임 여러 개를 한곳에 모은 게임 사이트를 만드는 방법은 영어 글 Make a game website에, Phaser에 대한 설명은 Phaser에 정리되어 있습니다.
알아 두면 좋은 한계
- VibeDream으로 만드는 게임은 브라우저 게임입니다. App Store나 Google Play에 올리는 앱으로는 만들 수 없습니다.
- 실시간 대전처럼 복잡한 게임은 처음 목표로 삼기에는 어렵습니다.
- 게임의 코드는 Code 탭에서 볼 수 있고, ZIP으로 내려받거나 GitHub에 동기화할 수 있습니다.
- 요금은 월 49달러에 60크레딧인 All Access Mini부터이며 자세한 내용은 요금 페이지에서 확인할 수 있습니다.
AI에게 설명하며 만드는 방식 자체가 궁금하다면 바이브 코딩이란 글을 참고하세요.