메인 콘텐츠로 건너뛰기

오늘 심은 아이디어는 내일의 서비스가 됩니다.

3-15 게임

3-15 게임은 숫자 버블 3개의 합이 15가 되도록 매치하는 모바일 퍼즐 게임입니다. 사용자가 숫자 버블을 스와이프해 인접한 버블과 위치를 바꾸고, 교환 결과로 합이 15인 조합이 만들어지면 매치가 처리됩니다. 60초 라운드, 콤보에 따른 추가 시간과 보너스 점수, 스트라이프·스타 폭탄 같은 특수 버블, 글로벌 리더보드를 포함해 반복 플레이와 순위 경쟁을 실험한 프로젝트입니다.

소식 받기
0

개요

"3-15 게임"은 숫자 버블을 움직여 합이 15가 되는 조합을 만드는 모바일 퍼즐 게임입니다.

기존 3-match 퍼즐은 같은 그림이나 같은 버블을 3개 이상 맞추면 제거되는 방식입니다. 이 프로젝트에서는 해당 규칙을 그대로 따르기보다, 사용자가 숫자 버블을 스와이프해 위치를 바꾸고, 교환 결과로 합이 15가 되는 숫자 3개를 만들도록 규칙을 바꾸었습니다.

이 프로젝트에서 확인하고 싶었던 것은 Supabase를 활용한 글로벌 리더보드 구현, Cursor 기반 바이브 코딩 얼마나 통제된 방식으로 활용할 수 있는가였습니다.

kr-main
대표 이미지

참여자
이름소속역할
심재경개발자
기간
2025-06-01 – 2025-07-31
사용 기술
  • Flutter Android와 iOS를 동시에 지원하는 모바일 앱 개발에 사용
  • Supabase 글로벌 리더보드 점수 저장 및 조회
  • Cursor 바이브 코딩에 사용
  • ElevenLabs 게임 내 사운드를 AI로 생성
  • Freesound 무료로 사용 가능한 소리 다운로드
  • Google AdMob 앱 내 광고 적용
링크
Download on the App Store Get it on Google Play

배경

이전 프로젝트들을 통해 Flutter 앱 개발과 스토어 출시 과정을 어느 정도 경험했습니다. 그래서 이번 프로젝트에서는 단순히 앱을 완성하고 출시하는 것을 넘어, 사용자가 반복해서 플레이할 수 있는 게임 구조를 직접 설계해보고 싶었습니다.

출발점은 "특정 숫자의 합을 맞추는 게임 방식과 3-match 퍼즐을 접목하면 어떨까?"라는 생각이었습니다. 3-match 퍼즐은 규칙이 직관적이고 누구나 쉽게 이해할 수 있다는 장점이 있습니다. 하지만 같은 버블 3개를 맞추는 방식만 그대로 구현하면 차별점이 약하다고 판단했습니다.

그래서 "같은 그림 3개" 대신 "합이 15가 되는 숫자 버블 3개"라는 규칙을 적용했습니다. 사용자는 단순히 같은 모양을 찾는 것이 아니라, 숫자 버블의 위치를 바꾸며 어떤 조합이 15가 되는지 빠르게 판단해야 합니다. 익숙한 퍼즐 구조에 계산형 퍼즐 요소를 섞어, 짧은 시간 안에 조작하고 계산하고 다시 도전하는 게임을 만들고자 했습니다.

또한 이전 앱들은 대부분 로컬 기능 중심이었습니다. 이번에는 게임 점수를 외부 데이터베이스에 저장하고, 다른 사용자와 순위를 비교할 수 있는 글로벌 리더보드를 구현해보고 싶었습니다. 이를 위해 Supabase를 사용했습니다. Supabase는 각 프로젝트에 Postgres 데이터베이스를 제공하며, Flutter 클라이언트에서도 Supabase 라이브러리를 통해 데이터베이스와 상호작용할 수 있습니다. [Supabase - Database Overview][Supabase - Flutter Reference]

이 프로젝트에서 목표는 다음과 같습니다.

목표 이유
3-match 규칙 변형 실험 같은 버블을 맞추는 방식이 아니라 숫자 합이 15가 되는 규칙으로 새로운 퍼즐 경험을 만들기 위해
Supabase 기반 리더보드 구현 외부 데이터베이스에 점수를 저장하고 사용자 간 순위 경쟁을 제공하기 위해
바이브 코딩 통제 Cursor로 생성한 코드를 직접 검토하고, 기능이 늘어날 때 코드 구조를 얼마나 관리할 수 있는지 확인하기 위해

kr-background
배경과 목표

핵심 기능

  1. 숫자 버블 매치

    숫자 버블을 스와이프해 인접한 버블과 교환하고, 교환 결과로 나란히 놓인 숫자 3개의 합이 15가 되면 해당 버블을 제거

  2. 60초 라운드

    짧은 시간 안에 최대한 높은 점수를 만드는 빠른 플레이 구조

  3. 콤보 시스템

    연속 매치가 쌓일수록 추가 보너스 시간과 보너스 점수를 더 크게 제공

  4. 스트라이프 버블

    4개 이상의 숫자 버블이 매치되면 생성되며, 이동 방향을 기준으로 해당 행 또는 열 전체를 제거

  5. 스타 폭탄

    가로와 세로가 동시에 성립하는 교차 매치가 발생하면 생성되며, 사용 시 특수 버블을 제외한 모든 숫자 버블을 제거

  6. 글로벌 리더보드

    Supabase에 점수를 저장하고 다른 사용자와 순위를 비교

  7. 무제한 플레이

    하트나 생명 제한 없이 반복 플레이 가능

  8. 인앱 광고

    Google AdMob을 활용해 무료 앱 기반 광고 수익 모델을 실험, 광고 시청 후 추가 시간을 제공하는 보상 흐름

개발 과정

개발 목표 설정

"3-15 게임"의 목표는 Supabase 데이터베이스 기반 글로벌 리더보드를 구현하는 것Cursor 기반 바이브 코딩을 이전보다 더 체계적으로 활용하는 것이었습니다.

기능 범위는 처음부터 단계적으로 나누었습니다. 먼저 숫자 버블을 스와이프해 인접한 버블과 교환하고, 교환 결과로 합이 15가 되는 숫자 3개를 제거하는 핵심 게임 규칙을 구현했습니다. 그 위에 60초 라운드, 콤보 보상, 스트라이프 버블, 스타 폭탄, 광고 보상, 글로벌 리더보드를 순차적으로 추가하는 방식으로 진행했습니다.

이 프로젝트에서 확인하고 싶었던 것은 단순히 게임을 완성하는 것이 아니었습니다. Supabase를 활용해 사용자 점수를 저장하고 글로벌 리더보드를 제공함으로써, 순위 경쟁 요소가 반복 플레이와 앱 사용률에 어떤 영향을 줄 수 있는지 확인하고자 했습니다. 또한 Cursor를 활용한 바이브 코딩을 이전보다 더 통제된 방식으로 진행해, 개발 속도와 효율을 높이면서도 코드 품질을 관리할 수 있는지 실험하고자 했습니다.

kr-concept
3-15 게임 구상

시스템 아키텍처

3-15 게임은 Flutter 앱 내부에서 게임 보드, 스와이프 입력, 숫자 버블 교환, 매치 판정, 타이머, 콤보, 특수 버블 생성을 처리하고, 점수 데이터는 Supabase를 통해 외부 데이터베이스에 저장하는 구조로 구현했습니다. 사용자가 숫자 버블을 터치한 상태에서 원하는 방향으로 스와이프하면 해당 방향의 인접 버블과 위치가 바뀌고, 교환 결과로 합이 15가 되는 조합이 만들어지면 매치 처리와 점수 반영이 이어집니다. 별도의 서버를 직접 구축하지 않고, Supabase를 글로벌 리더보드를 위한 외부 데이터 저장소로 활용했습니다.

구성 요소 역할
게임 보드 UI 숫자 버블 배치, 선택 상태, 교환 결과, 제거 결과 표시
스와이프 입력 처리 사용자가 터치한 숫자 버블을 기준으로 스와이프 방향을 감지하고, 교환 대상이 되는 인접 버블을 판별
버블 교환 처리 스와이프 시작 지점의 숫자 버블과 해당 방향의 인접 버블 위치를 교환
매치 판정 로직 버블 교환 이후 가로·세로 방향으로 나란히 놓인 숫자 3개의 합이 15인지 확인하고 매치 여부 결정
타이머·콤보 로직 60초 라운드 진행, 콤보 누적 단계에 따라 추가 보너스 시간과 보너스 점수를 차등 지급
특수 버블 로직 4개 이상 매치 시 스트라이프 버블을 생성,
교차 매치 발생 시 스타 폭탄을 생성해 보드 제거 범위를 확장
점수 관리 일반 매치, 콤보 단계, 특수 버블 효과를 점수로 반영
리더보드 화면 저장된 기록을 순위 형태로 표시
Supabase 연동 게임 종료 후 점수 저장, 글로벌 리더보드 조회
광고 모듈 Google AdMob 광고를 앱 화면에 표시
다국어 리소스 지원 언어별 앱 문구를 관리

kr-system-architecture
시스템 아키텍처 구성도

핵심 구현 흐름

kr-step
구현 흐름

게임 규칙 설계

가장 먼저 정한 것은 게임의 핵심 규칙이었습니다. 기존 3-match 퍼즐처럼 같은 버블을 맞추는 방식이 아니라, 숫자 버블 3개의 합이 15가 되면 제거되는 규칙으로 설계했습니다.

예를 들어 4, 5, 6처럼 합이 15가 되는 숫자 버블 3개가 가로 또는 세로로 나란히 놓이면 해당 버블이 제거됩니다. 사용자는 숫자 버블을 스와이프해 인접한 버블과 위치를 바꾸고, 교환 결과가 유효한 조합을 만들면 매치가 처리됩니다. 이 규칙은 단순한 시각적 매치가 아니라 숫자 조합을 빠르게 찾는 계산형 경험을 만들기 위한 선택이었습니다.

kr-screenshot-rule
기본 규칙 화면

게임 보드와 교환 후 매치 판정 구현

게임 보드에서는 숫자 버블의 위치, 선택 상태, 스와이프 방향, 교환 결과를 함께 관리해야 했습니다. 사용자가 특정 숫자 버블을 터치한 상태에서 원하는 방향으로 스와이프하면, 해당 방향에 있는 인접 버블을 찾고 두 버블의 위치를 서로 바꾸도록 구현했습니다.

버블이 교환된 뒤에는 변경된 보드 상태를 기준으로 가로와 세로 방향의 숫자 조합을 검사했습니다. 나란히 놓인 숫자 버블 3개의 합이 15가 되는 경우에만 매치로 인정하고, 이후 점수 반영, 버블 제거, 새 버블 채우기를 순서대로 처리했습니다. 이처럼 입력 처리, 버블 교환, 매치 판정, 보드 갱신 흐름을 분리해 게임 상태가 꼬이지 않도록 구성했습니다.

60초 라운드와 콤보 구조 구현

게임은 오래 이어지는 퍼즐보다 짧은 시간 안에 빠르게 도전하는 구조로 만들고자 했습니다. 그래서 기본 플레이 시간을 60초로 잡고, 사용자가 제한 시간 안에 최대한 높은 점수를 만들도록 설계했습니다.

연속 매치가 발생하면 콤보 단계가 올라가고, 콤보가 누적될수록 추가 보너스 시간과 보너스 점수가 더 커지도록 구성했습니다. 이 구조는 사용자가 한 번의 매치에서 끝나지 않고 계속 다음 조합을 찾도록 유도하기 위한 장치였습니다.

특수 버블 생성과 효과 구현

게임에 변화를 주기 위해 스트라이프 버블과 스타 폭탄을 추가했습니다. 일반적인 3개 매치는 해당 숫자 버블만 제거하지만, 4개 이상의 숫자 버블이 매치되면 스트라이프 버블이 생성되고 가로와 세로 매치가 동시에 성립하는 교차 형태의 더블 매치가 발생하면 스타 폭탄이 생성되도록 했습니다.

특수 버블 효과 생성 조건
스트라이프 사용자가 버블을 이동시킨 방향을 기준으로 해당 행 또는 열 전체를 제거 4개 이상의 숫자 버블로 15 매치
스타 폭탄 특수 버블을 제외한 모든 숫자 버블을 제거 가로와 세로 매치가 동시에 교차 성립

kr-screenshot-special-bubble
[왼쪽 이미지]: 스트라이프 설명 화면, [오른쪽 이미지]: 스타 폭탄 설명 화면

Supabase 기반 글로벌 리더보드 구현

게임 종료 후에는 사용자의 점수를 Supabase에 저장하고, 상위 점수 목록을 불러와 글로벌 리더보드에 표시하도록 구성했습니다. 이를 통해 사용자는 자신의 점수를 다른 사용자와 비교할 수 있습니다.

Supabase는 각 프로젝트에 Postgres 데이터베이스를 제공하며, Flutter 클라이언트에서도 Supabase 라이브러리를 통해 데이터베이스와 상호작용할 수 있습니다 [Supabase - Database Overview][Supabase - Flutter Reference]. 이 프로젝트에서는 이러한 구조를 활용해 별도 서버를 직접 구축하지 않고 점수 저장과 조회 기능을 구현했습니다.

kr-screenshot-leaderboard
리더보드 화면

광고 보상 흐름 구현

게임 오버 또는 시간이 부족한 상황에서 광고를 시청하면 추가 시간을 제공하는 흐름을 적용했습니다. 광고 시청 완료 여부를 확인한 뒤 보상을 지급해야 하기 때문에, 광고 표시와 게임 상태 처리를 함께 관리해야 했습니다.

바이브 코딩 방식

이번 프로젝트도 Cursor를 활용해 바이브 코딩 방식으로 진행했습니다. 초반에는 게임판 생성, 숫자 버블 배치, 기본 매치 판정 로직처럼 전체 동작의 뼈대를 빠르게 구현하는 데 도움이 되었습니다.

하지만 기능이 늘어나면서 코드 구조가 점점 복잡해졌고, 생성된 코드를 검토하고 수정하는 부담도 커졌습니다. 특히 애니메이션 처리, 버블 제거와 새 버블 생성, 특수 버블 처리처럼 여러 로직이 맞물리는 부분을 수정할 때 문제가 자주 발생했습니다. 원하는 요구사항이 한 번에 반영되지 않거나, 특정 기능을 수정했을 때 다른 기능에 영향을 주는 경우도 있었습니다.

또한 프로젝트를 진행하면서 기존 기능을 완전히 다른 방식으로 바꾸거나, 새로운 기능 아이디어를 추가할 때는 더 큰 어려움을 겪었습니다. 기능을 덧붙이거나 기존 구현을 변경할수록 코드 흐름이 쉽게 꼬였고, 작업이 진행될수록 변경 사항을 추적하고 통제하기가 점점 어려워졌습니다.

이 경험을 통해 AI 보조 개발은 초기 구현 속도를 높이는 데 도움이 되지만, 프로젝트 규모가 커질수록 구조 설계와 품질 관리는 개발자가 직접 책임져야 한다는 점을 확인했습니다. METR의 2025년 연구도 특정 조건에서 경험 많은 오픈소스 개발자가 AI 도구를 사용할 때 작업 완료 시간이 오히려 길어진 사례를 보고했습니다. 이 연구를 모든 상황에 일반화할 수는 없지만, AI 출력물을 검토하고 수정하는 비용이 실제 개발 과정에서 중요하다는 점을 보여줍니다. [METR - Measuring the Impact of Early-2025 AI on Experienced Open-Source Developer Productivity]

스토어 출시

kr-store
[왼쪽 이미지]: 구글의 플레이 스토어에 출시된 모습, [오른쪽 이미지]: 애플의 앱스토어에 출시된 모습

성과

  1. 숫자 합 기반 3-match 퍼즐 게임 앱 개발

    성공
  2. Supabase 기반 글로벌 리더보드 구현

    성공
  3. 반복 플레이를 유도하는 게임성 검증

    실패
  4. 바이브 코딩 결과물에 대한 코드 리뷰 강화

    실패

이 프로젝트는 기술적으로 확인하려던 목표를 대부분 달성한 프로젝트였습니다. Supabase를 활용해 글로벌 리더보드를 구현했고, Cursor 기반 바이브 코딩으로 생성된 코드를 이전보다 더 철저하게 검토하며 개발을 진행했습니다.

다만 제품과 게임성 측면에서는 한계도 확인했습니다. 숫자 합산 규칙은 개발자 입장에서는 차별화된 시도였지만, 사용자에게는 기존 3-match 퍼즐보다 더 많은 인지 부담을 줄 수 있었습니다. 이를 통해 기능을 구현하는 것과 사용자가 반복해서 플레이하고 싶어 하는 게임을 만드는 것은 다른 문제라는 점을 배웠습니다.

프로젝트를 통해 얻은 학습

첫째, 게임 규칙은 새로움보다 직관성이 중요하다는 것을 배웠습니다. 합이 15가 되는 숫자 3개를 찾는 규칙은 차별점이 있었지만, 사용자가 즉시 이해하고 반복하고 싶어 하는 구조로 이어지지는 못했습니다.

둘째, 리더보드는 핵심 재미를 보완할 수는 있지만 대체할 수는 없다는 점을 확인했습니다. 글로벌 순위 경쟁이 있더라도 게임 자체가 충분히 재미있지 않으면 반복 플레이를 강하게 만들기 어렵습니다.

셋째, Supabase를 통해 서버를 직접 구축하지 않고도 외부 점수 저장과 리더보드 조회 구조를 구현할 수 있었습니다. 이를 통해 모바일 앱에서 외부 데이터베이스를 연결하는 기본 흐름을 경험했습니다.

넷째, 바이브 코딩은 빠른 초안 작성에는 도움이 되지만, 코드 구조와 품질을 자동으로 보장하지는 않는다는 점을 배웠습니다. 기능이 늘어날수록 생성된 코드를 이해하고, 수정하고, 전체 구조를 관리하는 개발자의 역할이 더 중요해졌습니다.

결과적으로 3-15 게임은 기술적 구현과 실제 출시 측면에서는 의미 있는 성과가 있었지만, 제품 관점에서는 게임 규칙의 직관성과 반복 플레이 구조를 더 깊게 고민해야 한다는 과제를 남긴 프로젝트였습니다.

협업 문의

문의하기