‘Trickster’s Table’ 만들기: Gemini AI Studio와 함께하는 카드 게임 스위트 (zero coding)

Source: Dev.to

TL;DR

몇 시간 안에 Google Gemini AI Studio만으로 광고 없이 완전한 기능을 갖춘 카드 게임 모음(스페이드, 하트, 솔리테어)을 만들었습니다. 이 글에서는 Gemini가 복잡한 게임 상태를 어떻게 설계했는지와 “Spadearts” 라는 독특한 하이브리드 모드를 어떻게 디자인했는지 설명합니다.

왜 새로운 카드 게임 모음이 필요했나요?

요즘 모바일 카드 게임은 광고, 랜덤 박스, 어색한 UI에 시달립니다. 저는 Trickster’s Table이 브라우저에서 즉시 실행되는 프리미엄 네이티브 경험처럼 느껴지길 원했습니다.

스택

• React 19 – 부드러운 UI와 상태 관리
• TypeScript – 복잡한 규칙과 점수 계산을 위한 타입 검사
• Tailwind CSS – 빠른 스타일링 및 테마 적용
• Google GenAI – 개발 워크플로와 게임 내 인텔리전스 구동

Note: 전체 코드가 AI 프롬프트에 의해 작성·재작성되었습니다; 저는 프롬프트만 제공했습니다.

게임 모음

Spades ♠️

• 파트너십 모드 – 클래식 2대2 플레이, 봇 플레이어 포함
• 솔로 모드 – 각자 승부하는 컷스러스트
• Whiz 변형 – 손에 있는 스페이드 수와 정확히 동일하게 입찰하거나 Nil 입찰
• Nils – 0을 입찰하지 않으면 스페이드를 낼 수 없음

Hearts ♥️

• 클래식 회피 게임
• “Shoot the Moon” 감지 로직
• 파트너십 모드 – 파트너가 벌점 합산 (점수가 낮을수록 승리)

Spadearts (High/Low) 🃏

• Spades(하이 게임)와 Hearts(로우 게임)를 동시에 플레이
• 듀얼 트랙 스코어링 – 높은 점수를 얻기 위해 입찰을 관리하고, 낮은 점수는 피함
• Whiz 지원 – Whiz 입찰 규칙을 적용한 Spadearts

Solitaire Suite

• Klondike – 드래그‑앤‑드롭, 힌트, 자동 완성 기능을 갖춘 클래식 솔리테어
• Pyramid – 수학 기반 퍼즐 모드, 연속 성공 보너스 제공

Gemini AI Studio로 빌드하기

1. 게임, 규칙, 테마, 테이블을 코드 한 줄 없이 정의합니다.
2. Gemini에게 새로운 게임이 자주 추가될 것이라고 지시하면, 시스템이 자동으로 아키텍처를 모듈화합니다.
3. 하이브리드 모드 생성 – 스페이드와 하트를 결합한다는 이야기를 Gemini에 전달했습니다.
   • 결과: 스페이드는 트럼프(양점)이고 하트는 독(벌점)인 분리된 점수 시스템.
   • 밸런싱: 채팅에서 시뮬레이션 점수 시나리오를 실행해 하트에서 “Moon Shot”(모든 벌점 획득) 시 스페이드 점수에 +100 점 보상이 되도록 조정했습니다.

테마링

무거운 이미지 자산 대신 AI가 생성한 SVG와 CSS‑그라디언트 배경을 사용해 즉시 렌더링합니다:

• Neon Theme – CSS 애니메이션을 이용한 움직이는 원근 그리드
• Vintage Theme – 펠트/가죽 질감을 위한 SVG 노이즈 필터
• Winter Theme – CSS 기반 눈 입자 효과
• 총 12가지 테마, 각각 고유한 스타일과 배경 아트 제공

AI‑구동 봇

로봇 모드

AI 로직이 인간 플레이어의 자리를 대신하도록 구현해 모든 게임·모드에서 자동 플레이가 가능하도록 했습니다.

통계 원장

Record가 각 라운드를 게임 모드(Spades vs. Hearts)와 타입(팀 vs. 솔로)별로 추적합니다. 이를 통해 다음을 손쉽게 시각화할 수 있습니다:

• 변형별 승·패 비율
• 현재 연속 승/패
• 최고 점수

geminiService.ts 모듈은 실시간 게임 상태를 Gemini API에 전달해, 봇이 특정 잘못된 수에 대해 상황‑인식 채팅을 생성하도록 합니다.

Spadearts 게임플레이 개요

• 카드 전달 (Hearts) – 입찰 전 플레이어가 카드를 교환합니다.
• 입찰 (Spades) – 동시에 입찰해 트럼프 강도를 결정합니다.
• Mobile Wide View – 가로 화면에 최적화된 레이아웃.
• Mobile Tall View – 세로 화면에 최적화된 레이아웃.
• 라운드 요약 – 점수와 행동을 간결히 정리합니다.

마무리 생각

댓글로 여러분의 피드백을 남겨 주세요.