감성과 기능을 더한 틀린 그림 찾기 게임, 바이브 코딩으로 구현하다
며칠 전 쌀쌀한 기온과 함께 찾아왔던 비 때문에 벚꽃은 거의 다 떨어진 것 같습니다. 나름 '벚꽃맛길'을 가진 동네다 했는데 화무십일홍이던가요... 너무 금방 져서 안타까웠습니다.
최근에 퀴즈를 몇 개 만들고 있는데 공개된 지식 기반의 퀴즈 말고 새로운 것을 구상하다보니, 많이 접하는 것이 틀린 그림 찾기나 방탈출 게임과 같은 것들이 있더군요. 그래서, 그 가운데 ChatGPT의 도움을 받으면 만들 수 있을만한 것으로 틀린 그림 찾기와 미로를 선정했고 각각의 결과물을 소개해 보려고 합니다. 이번 글에서는 틀린 그림 찾기~!
🧩 기능을 채우다 – Edit 모드와 Game 모드
기능적으로는 두 가지 모드를 두었습니다. 하나는 유저가 실제로 게임을 플레이하는 Game 모드, 다른 하나는 정답 영역을 설정하고 JSON 파일로 저장할 수 있는 Edit 모드입니다. Edit 모드를 따로 둔 것은 이미지에서 서로 다른 부분들, 즉 정답의 위치를 좌표로 일일이 계산해서 저장하는 것은 비효율적으로 보였기 때문입니다. 아무래도 보면서 바로 지정할 수 있으면 그게 제일 좋겠죠.
Edit 모드에서는 사용자가 마우스로 직접 이미지를 클릭해서 정답 영역을 지정하고, 이를 JSON 형태로 저장할 수 있도록 했습니다. 이후 이 JSON 파일은 게임 모드에서 불러와 플레이에 활용되죠. 이 방식의 한가지 아쉬운 지점은 로컬에 설정 파일을 두게 되면 이를 수정하기 위해서는 별도로 백엔드가 구동되어야 한다는 겁니다. html 파일 하나로 다 할 수는 없다는 얘기인거죠. 그래서 이번 경우에는 FastAPI를 이용해서 그 부분은 처리했습니다. node를 이용하는 방법도 가능할 겁니다.
게임 데이터는 이미지 파일과 함께 JSON 파일로 구성되며, 이 구조 덕분에 콘텐츠를 자유롭게 추가하거나 수정할 수 있습니다. 정답 영역은 x, y 좌표와 반지름 값으로 구성되어 있고, 힌트 기능을 통해 원형 표시가 가능합니다.
🎮 감각을 입힌 개발, DeepSite 스타일을 입다
개발은 그저 기능을 구현하는 걸 넘어서, 감각과 사용자 경험을 녹여내야 한다는 말이 생각났습니다. 이번에 만들게 된 ‘틀린 그림 찾기 게임’은 단순한 퍼즐 게임이지만, 감각적인 UI와 편리한 모드를 갖춘 형태로 구현하는 것이 필요했습니다. 그런데 ChatGPT 4o는 그런 요구사항을 제대로 들어 주려면 정말 제대로 된 프롬프트와 많은 시행착오가 필요합니다. 적어도 제 경험에서는 말입니다.
그래서, 약간의 편법을 쓰기로 했습니다. 로직은 ChatGPT를 이용하되 UI나 스타일은 DeepSite를 이용하는 것으로 말이죠. 왜 로직도 DeepSite를 쓰면 되지 않냐 싶기도 하지만 DeepSite는 무료 서비스에서는 그리 많은 상호 작용을 지원하지 않는 한계가 있어서 어쩔 수 없었습니다. 그래서, 처음에 간단한 게임 설명을 통해 deepsite에 생성을 요청하고, 거기서 생성된 파일은 다운받아뒀다가 ChatGPT한테 최종적으로는 이 UI나 스타일을 적용하겠다고 얘기해 주면 됩니다.
‘틀린 그림 찾기’는 누구나 익숙하지만, 만드는 입장에서 보면 꽤 다양한 기능이 요구되는 게임이라, 단순히 두 이미지를 비교하게 하는 것을 넘어서, 어떻게 사용자가 몰입할 수 있을지, 어떤 정보 구조로 관리하면 효율적일지를 고민해야 하는게 맞죠. 다만, 저는 데모 수준으로 접근하는 거라 역시 이런 것에선 자유롭습니다. 일단 밀키트처럼 DeepSite가 만들어준 코드를 활용합니다. 😚
🧠 직접 채점하고, 힌트도 보고
게임에서 가장 중요한 요소 중 하나는 정답을 맞히는 재미죠. 이를 위해 유저가 특정 영역을 클릭했을 때, 해당 좌표가 정답 영역 안에 있는지를 계산해 판정합니다. 하지만, 게임의 특성 상 정확한 위치를 정의하고 판정하긴 어렵습니다. 사실 그래야 할 필요도 없구요. 대략적으로 비슷한 위치를 클릭하면 맞았다고 판정해 주는 것이 오히려 더 자연스럽고 구현도 쉽습니다. 이번 경우는 radius의 값을 키워주는 것만으로도 문제가 해결되니까요.
그리고 도무지 풀리지 않을 때, ‘힌트' 는 큰 도움이 됩니다. 시도 횟수가 정해져 있긴 하지만 'h' 키를 누르면 정답 위치를 원형으로 표시해주도록 구현해 뒀습니다. 출제자인 저는 알지만 처음하는 사람들은 답답할 때가 있을테니 요긴할 겁니다. 틀린 그림을 찾지 못하고 헤매는 유저를 위한 배려는 꼭 필요합니다. 간혹 출제자인 저한테도 말입니다.
참고로 채점 기능은 클릭된 위치를 바탕으로 정답 수를 세고, 결과를 간단하게 출력해줍니다. 이 모든 로직은 자바스크립트 기반의 캔버스를 활용해 구현되었고, 이미지 로딩부터 판정까지 하나의 흐름으로 작동하도록 되어 있습니다.
📂 시행착오의 흔적, 하지만 즐거웠던 과정
이번 프로젝트는 단순히 결과물을 만드는 것에만 초점을 뒀습니다. 게임 그 자체가 목표도 아니었고 이걸 만들어서 다른 쪽 (예를 들어 컨텐츠 생성)에서 활용하겠다는 생각이 우선이었죠.
처음에는 클릭한 좌표와 정답 영역의 충돌 계산이 잘 되지 않아서 여러 번 디버깅을 거쳤고, JSON을 파일로 내보내는 기능도 html, javascript 만으로는 웹 환경에서는 제한이 있어서, FastAPI를 이용한 백엔드를 간단하게 생성해야 했습니다.
무엇보다도 가장 뿌듯했던 순간은, 두 개의 이미지 위에 정답 표시가 딱 맞아떨어졌을 때입니다. 역시 장난감으로 만든 것이 제대로 돌아가는 것을 본다는 것은 기분 좋은 일이죠.
게임 개발이라는 이름을 붙이기엔 어쩌면 너무 작은 작업일지도 모르지만, 이번 경험은 꽤 재미있었습니다. 바이브 코딩, 감성을 살린 UI, 그리고 시행착오까지. 뭔가 요구사항만 가지고 결과물을 만들어 가는 과정을 거친다는 것이 생각보다 흥미롭고 또 한편으로는 시행착오로 인한 적응의 시간이 길어서 불편하고 지루하기도 했습니다. 하지만 결과는 좋네요. 그럼 다 좋은 겁니다. ^^