🎮 FruitSpinner 개발일지 #1 — 아이디어의 시작

버블 스피너라는 게임을 아는 사람이 얼마나 될까. 중앙에 버블 덩어리가 있고, 플레이어가 버블을 쏴서 같은 색 3개 이상을 맞추면 터지는 퍼즐 게임이다. 여기에 "회전"이라는 요소가 붙어서, 쏠 때마다 판이 돌아간다. 단순하지만 중독성 있는 게임.

이 게임을 HTML5로 만들어보고 싶었다. 정확히 말하면, 이걸 내 손으로 만들어서 토스 인앱 게임으로 출시해보고 싶었다.

🤔 왜 이 게임이었나

사실 거창한 이유는 없었다. 버블 스피너라는 장르가 구현 난이도 대비 게임성이 좋다고 느꼈고, 모바일 세로 화면에서 한 손으로 플레이하기 딱 좋은 구조라고 생각했다. 복잡한 3D 엔진이나 물리 시뮬레이션 없이도 Canvas 하나로 충분히 만들 수 있겠다 싶었다.

🤖 AI와 함께 만들기로 했다

여기서 한 가지 실험적인 결정을 했다. Claude(AI)와 대화하면서 게임을 만들어보기로 한 것이다.

기획 문서를 정리해서 "이거 만들어줘"라고 던졌다. 처음엔 React 버전과 HTML 버전 두 개를 동시에 만들었는데, 금방 "HTML 버전만 하자"로 방향을 잡았다. 순수 HTML5 Canvas 하나로 가는 게 심플하고, Cordova로 모바일 앱을 만들 때도 깔끔했다.

🐛 첫 번째 문제: 버블이 안 붙는다

초기 버전은 원형 버블을 원형으로 배치하는 구조였다. 그런데 바깥 링으로 갈수록 버블 사이 간격이 벌어지는 문제가 생겼다. 링마다 버블 수가 ring × 6개씩 늘어나니 당연한 결과였다.

이상한 간격

"육각형이나 8각형이어야 하나?" 고민하다가 육각형 격자(Hexagonal Grid)로 구조를 바꿨다. 벌집처럼 모든 버블이 6개의 이웃과 동일한 거리로 붙는 방식이다. 이 결정이 게임의 기반이 됐다.

버블 덩어리

🍎 과일이라는 테마

그리고 한 가지 아이디어가 떠올랐다. "버블 대신 과일로 하면 어떨까?"

원형 버블은 정확히 딱 맞아야 보기 좋은데, 과일은 원래 불규칙한 모양이니까 약간의 간격이나 겹침이 자연스러워 보인다. 이모지(🍒🍊🍋🍇🍓)로 빠르게 테스트해봤더니 시각적으로 훨씬 재미있었다.

하지만 이모지만으로는 간격이 이상했다. 그래서 "육각형 배경 위에 이모지 과일을 올리자"는 조합으로 갔고, 이게 FruitSpinner의 최종 비주얼 스타일이 됐다.

과일

📝 다음 글에서는

핵심 게임 메커니즘을 구현하면서 겪은 시행착오들을 다룰 예정이다. 회전하는 보드, 과일 발사, 매칭 판정... 생각보다 까다로운 것들이 많았다.