바이브 코딩으로 타일 이동 퍼즐 게임 만들기

어릴 적 한 번쯤 해봤던 '타일 이동 퍼즐 게임(tile sliding puzzle game)' 기억하시나요? 숫자가 적힌 타일들을 순서대로 맞추기 위해 이리저리 옮기던 그 게임 말이에요. 단순해 보이지만, 제한된 공간 안에서 최소한의 이동으로 타일을 맞춰야 하기에 기억력과 인지력 향상에도 도움이 되고, 생각보다 꽤 몰입감 있는 게임이죠. 제미나이 앱 빌더(Gemini App Builder)를 활용하면 그동안 소개해드린 업무용이나 일상생활에 도움이 되는 다양한 앱뿐만 아니라, 간단한 게임도 직접 만들어볼 수 있습니다.

이번 글에서는 Gemini App Builder를 활용해 바이브코딩으로 타일 이동 퍼즐 게임을 직접 만들어보려 합니다. 게임 생성을 위해 아래와 같은 프롬프트를 작성해 실행해 보았는데요.

숫자 슬라이딩 타일 퍼즐 게임 애플리케이션을 만들어 주세요. 보드의 크기를 설정하는 숫자를 입력하면, 가로와 세로의 곱의 개수만큼의 숫자타일들이 생성되고, 초기에 셔플 되어 표시됩니다. 필요한 경우, 다시 셔플 할 수 있도록 해당 버튼과 새로운 게임을 위한 버튼, 그리고 이동한 숫자도 표시해 주세요. 타일은 배경색과 구분되도록 어울리는 색상을 사용해서 큼지막하게 표시하고, 타일 간의 간격은 최소로 하여 주세요. 게임의 제목은 "타일 슬라이딩 퍼즐"이라고 표시해 주세요.

만들어진 타일 이동 퍼즐 게임의 모습은 아래와 같습니다. 어렸을 때의 기억이 새롭네요.

타일의 숫자를 설명하고, "새 게임"버튼을 클릭하면 셔플된 타일들의 배치가 새롭게 표시됩니다. 타일을 이동하면서 숫자의 순서를 맞추면 "완성"입니다.

애플리케이션의 화면을 보니, 상단의 크기와 버튼, 이동 횟수의 표시 영역을 변경할 필요가 있네요. 아래와 같이 추가적인 요청사항들을 반영하여 프롬프트를 작성하고 실행하였습니다.

크기, 버튼 및 이동 횟수의 순서를 크기, 이동 횟수, 버튼들의 순서로 재 배치하여 주세요. 상단의 표시 영역의 폭이 타일보드의 폭과 동일하게 설정해 주세요. 크기와 이동 횟수는 제목과 표시될 항목들을 각각 2개의 행으로 구분하여 표시하고 입력설정값과 이동 횟수의 크기가 좀 더 잘 보이고 설정할 수 있도록 적절한 크기로 변경해 주세요. "새 게임"과 "다시 섞기"의 버튼은 크기와 이동 횟수의 행의 높이만큼 변경해 주세요.

프롬프트의 수행결과 아래와 같이 상단의 설정 및 표시 영역들이 잘 정돈된 것을 확인할 수 있네요. 필요한 정보들이 보다 더 잘 보여서 플레이하는 동안 내용을 빠르게 확인할 수 있어서 도움이 되었네요.

게임을 플레이하다 보니, 최적의 이동 횟수가 궁금해졌습니다. 초기 설정된 타일 배치에서 몇 번을 이동하는 것이 좋을지 AI가 계산하고 표시해 주면 플레이를 좀 더 재미있게 할 수 있겠다는 생각이 들었습니다. 이를 위해 아래와 같이 최적의 이동 횟수를 먼저 계산하고, 이를 표시하는 기능을 요청하는 프롬프트를 작성하고 아래와 같이 실행해 보았습니다.

타일의 이동 횟수와 관련해서 먼저 배치된 타일의 레이아웃을 확인한 후, 내부적으로 순서대로 이동을 위한 최적의 이동 횟수를 계산한 후 이를 상단의 정보 표시 영역에 표시해 주세요.

수행결과는 다음과 같습니다. 3x3 퍼즐에서는 최적 경로 계산이 제대로 표시되었는데요. 4x4 퍼즐에서는 계산이 올바르게 되지 못하는 이슈가 있어, 최적 이동 횟수의 표시를 위해 3x3 퍼즐의 애플리케이션으로 변경하도록 다시 요청을 했습니다.

아래의 프롬프트를 수행한 모습은 다음과 같습니다.

최적 횟수 계산을 고려해서 크기를 3으로 고정해 주세요.

타일의 크기는 3으로 고정되었지만, 이제 최적 이동 횟수를 확인하면서 좀 더 플레이를 재미있게 수행해 볼 수 있게 되었네요. 마지막으로 퍼즐의 현재 배치를 기준으로 최종적인 모습인 타일이 번호 순서대로 배치되도록 최적의 이동 횟수에 맞게 이동하면 되는지 확인을 위해 "자동 플레이" 기능을 추가해 보도록 하겠습니다. 프롬프트에서 아래와 같이 요청하고 실행해 봅니다.

자동 플레이 버튼을 추가하고, 자동으로 타일들이 하나씩 이동하면서 최종적으로 타일의 순서가 맞춰지도록 코드를 변경해 주세요.

프롬프트의 수행결과와 자동 수행을 통해 타일들이 빠르게 이동하면서 올바른 순서로 배치되는 것을 확인할 수 있었네요(실행결과는 아래 마지막 이미지에서 확인 가능).

간단한 게임이었지만, 만들다 보니 생각보다 다양한 기능이 필요하더군요. 퍼즐의 움직임, 버튼 제어, 점수 계산 같은 요소들을 하나씩 구현하면서 단순히 재미를 넘어, ‘이런 구조가 실제 교육이나 강의에도 활용될 수 있겠다’는 아이디어가 떠올랐습니다. 직접 만들어보니 확실히 체감이 되네요. 바이브 코딩(Vibe Coding)을 활용하면 복잡한 코드를 몰라도, 교육이나 강의에서 사용할 콘텐츠를 빠르고 손쉽게 구현할 수 있고, 교육이나 강의 참가자들에게 전달할 학습용 도구나 실습 프로그램을 내용에 알맞게 빠르게 제작할 수 있다면, 강의의 몰입도와 참여도가 훨씬 높아지겠죠.

여러분들도 이번 글을 통해 자신의 교육이나 강의, 콘텐츠를 전달하는 방식에서 새로운 기회와 가능성을 발견해 보는 시간이 되었으면 좋겠네요. 직접 만들어본 앱이나 교육 콘텐츠, 혹은 새로운 아이디어가 있다면 댓글로 공유해 주세요. 여러분의 이야기가 다른 분들에게도 큰 영감이 될 것입니다.