스냅슬라이드 퍼즐 게임

이전 프로젝트였던 "CheerUp Mini"와 "계수기 - 터치로 세기"를 통해 Flutter 앱 개발과 스토어 출시 과정을 어느 정도 경험했습니다. 그래서 이번 프로젝트에서는 단순히 "앱을 출시할 수 있는가"를 넘어, 게임 형태의 앱을 더 빠르게 만들고 실제 사용자에게 노출할 수 있는가를 확인하고 싶었습니다.

슬라이드 퍼즐은 규칙이 명확한 게임입니다. 사용자는 빈칸을 기준으로 타일을 이동하고, 섞인 이미지를 원래 상태로 되돌리면 됩니다. 겉으로 보기에는 단순한 퍼즐 게임이지만, 구현 관점에서는 정적인 화면 앱보다 다룰 요소가 많았습니다. 이미지 선택, 이미지 분할, 난이도별 보드 생성, 타일 이동 가능 여부 판단, 완료 판정, 자동 완성, 기록 저장, 리더보드 표시 등 여러 기능을 함께 구현해야 했습니다.

이 프로젝트를 선택한 이유는 다음과 같습니다.

2025년 초에는 AI 도구를 활용해 자연어로 원하는 결과를 설명하고 코드를 생성하는 "vibe coding"이라는 표현이 주목받기 시작했습니다. Merriam-Webster는 이 표현이 Andrej Karpathy가 2025년 2월 2일 X에 올린 글에서 비롯된 것으로 설명합니다. 이 프로젝트에서는 Cursor를 활용해 AI 보조 개발 방식이 실제 앱 개발 과정에서 어느 정도 효과가 있는지도 함께 확인했습니다 [Merriam-Webster - Vibe Coding].

개발 목표 설정

"스냅슬라이드 퍼즐 게임"의 개발 목표는 Flutter로 게임 앱을 개발해 Android와 iOS에 출시하고, Google Ads를 활용해 글로벌 사용자를 대상으로 광고를 집행해보는 것 그리고 바이브 코딩을 경험하는 것이었습니다.

이전 프로젝트에서는 Flutter 앱 개발과 스토어 출시 과정을 익히는 데 초점을 맞췄다면, 이번 프로젝트에서는 출시 이후의 사용자 유입까지 함께 확인하고자 했습니다. 단순히 앱을 완성하는 것에서 끝나는 것이 아니라, 실제 스토어에 등록한 뒤 광고를 통해 불특정 다수의 사용자에게 노출하고, 다운로드가 발생하는지 확인하는 것이 중요한 목표였습니다.

기능 범위는 광고를 통해 처음 앱을 접한 사용자도 쉽게 이해하고 플레이할 수 있는 게임 앱을 기준으로 정했습니다. 먼저 슬라이드 퍼즐의 기본 플레이에 필요한 퍼즐 보드 생성, 타일 이동, 완료 판정을 구현하고, 이후 카메라·갤러리 이미지 선택, 자동 완성, 기록 저장, 리더보드, 광고 적용, 다국어 지원을 추가하는 방식으로 진행했습니다.

시스템 아키텍처

"스냅슬라이드 퍼즐 게임"은 별도 서버 없이 동작하는 모바일 앱으로 구성했습니다. 앱 내부에서 이미지 선택, 퍼즐 생성, 퍼즐 섞기, 게임 상태 관리, 자동 완성, 기록 저장, 광고 표시가 이루어지는 구조입니다. 특히 퍼즐은 단순히 타일을 무작위로 배치하는 방식이 아니라, 빈칸을 기준으로 이동 가능한 타일을 반복적으로 움직여 실제로 해결 가능한 상태를 만들도록 구성했습니다.

핵심 구현 흐름

이미지 기반 퍼즐 생성 로직

이 앱의 핵심은 하나의 이미지를 퍼즐 보드 크기에 맞게 나누는 것이었습니다. 사용자가 3×3 난이도를 선택하면 이미지를 9개 영역으로 나누고, 5×5 난이도를 선택하면 25개 영역으로 나누는 방식입니다. 각 타일은 원본 이미지의 특정 영역을 표시하며, 퍼즐이 섞인 상태에서 사용자가 타일을 이동해 원래 순서로 되돌립니다.

사용자 이미지를 지원하기 위해 기본 이미지뿐만 아니라 카메라 촬영 이미지와 갤러리 이미지를 동일한 퍼즐 생성 흐름으로 처리하도록 설계했습니다. 즉, 이미지의 출처가 달라도 최종적으로는 퍼즐 원본 이미지로 변환되고, 이후에는 동일한 타일 분할 로직을 거치도록 구성했습니다.

퍼즐 섞기 로직

퍼즐 섞기는 완성된 퍼즐 상태에서 시작해, 실제 플레이 규칙 안에서 타일을 이동시키는 방식으로 구현했습니다. 빈칸에 인접한 타일 중 하나를 랜덤으로 선택하고, 선택된 타일을 빈칸으로 이동하는 과정을 반복해 퍼즐을 섞었습니다.

이 방식은 단순히 타일 배열을 무작위로 섞는 방식보다 안전합니다. 슬라이드 퍼즐은 타일 배치에 따라 풀 수 없는 상태가 만들어질 수 있기 때문입니다. 그래서 무작위 배열을 직접 생성하는 대신, 완성된 상태에서 가능한 이동만 반복하도록 구성했습니다. 이렇게 하면 섞인 퍼즐도 사용자가 실제 이동 규칙을 따라 다시 완성할 수 있는 상태가 됩니다.

퍼즐 섞기 과정에서는 현재 빈칸 위치를 기준으로 이동 가능한 타일 목록을 계산하고, 그중 하나를 랜덤으로 선택했습니다. 타일이 이동되면 빈칸 위치와 전체 타일 배열을 갱신하고, 이 과정을 난이도에 맞는 횟수만큼 반복했습니다. 이를 통해 2×2처럼 간단한 퍼즐부터 10×10처럼 복잡한 퍼즐까지 같은 구조로 섞을 수 있도록 했습니다.

퍼즐 상태 관리와 완료 판정

슬라이드 퍼즐에서는 모든 타일이 자유롭게 이동할 수 없습니다. 빈칸과 인접한 타일만 이동할 수 있어야 합니다. 따라서 각 타일의 현재 위치와 빈칸 위치를 관리하고, 사용자가 타일을 선택했을 때 이동 가능한 타일인지 먼저 판단하도록 구현했습니다.

타일이 이동되면 현재 보드 상태를 갱신하고, 현재 타일 배열이 정답 배열과 같은지 확인했습니다. 모든 타일이 원래 위치로 돌아오면 퍼즐 완료 상태로 처리하고, 완료 기록을 저장할 수 있도록 했습니다.

자동 완성 로직

자동 완성 기능은 사용자가 퍼즐을 포기했을 때, 현재 퍼즐이 완성되는 과정을 시각적으로 보여주기 위해 구현했습니다. 퍼즐 상태를 즉시 정답 상태로 바꾸는 것이 아니라, 타일이 차례대로 이동하면서 완성되는 흐름을 보여주는 방식으로 구성했습니다.

자동 완성 방식은 퍼즐의 크기에 따라 다르게 처리했습니다. 타일 수가 적은 퍼즐에서는 최적에 가까운 이동 횟수로 퍼즐이 맞춰지는 과정을 보여주도록 했습니다. 작은 퍼즐은 상태 공간이 상대적으로 작기 때문에, 현재 상태에서 완성 상태까지의 이동 경로를 계산해 보여주는 방식이 가능했습니다.

반면 타일 수가 많은 퍼즐에서는 최적 경로를 계산하는 방식이 적합하지 않았습니다. 보드 크기가 커질수록 가능한 상태 수가 급격히 늘어나기 때문에, 모든 경우를 계산해 최적 경로를 찾는 방식은 성능 부담이 커질 수 있었습니다. 그래서 큰 퍼즐에서는 퍼즐을 섞을 때 기록해둔 이동 경로를 역재생하는 방식으로 자동 완성을 구현했습니다. 퍼즐이 완성 상태에서 시작해 랜덤 이동으로 섞였기 때문에, 그 이동 기록을 반대로 따라가면 다시 완성 상태로 돌아갈 수 있습니다.

역재생 과정에서는 반복 구간 패턴을 제거하는 처리도 적용했습니다. 같은 퍼즐 상태가 다시 등장하면, 그 사이에 있었던 이동은 결과적으로 원래 상태로 돌아오는 불필요한 구간입니다. 따라서 같은 상태가 다시 나타나는 경우에는 그 사이의 이동을 생략했습니다. 이를 통해 자동 완성 과정에서 불필요한 왕복 이동이나 반복 움직임을 줄이고, 사용자가 보기에도 더 자연스럽게 퍼즐이 맞춰지는 흐름을 만들 수 있었습니다.

Cursor 기반 바이브 코딩

이 프로젝트에서는 Cursor를 활용해 개발 속도를 높이는 방식을 실험했습니다. 초기 화면 구성, 기본 로직 초안 작성, 오류 수정 방향 탐색에서는 AI 보조 개발이 속도 향상에 도움이 되었습니다. 특히 구현해야 할 기능을 자연어로 설명하고, 생성된 코드를 검토하면서 빠르게 프로토타입을 만들 수 있었습니다.

하지만 퍼즐 타일 이동, 애니메이션 처리처럼 세부 동작이 중요한 기능에서는 AI가 한 번에 정확한 결과를 만들지 못하는 경우도 있었습니다. 기능이 늘어날수록 코드 간 연결이 복잡해졌고, 특정 부분을 수정하다가 다른 기능이 깨지는 경우도 있었습니다. 결국 AI가 만든 코드를 그대로 사용하는 것이 아니라, 직접 동작을 확인하고 수정 방향을 구체적으로 제시하는 과정이 필요했습니다.

Stack Overflow의 2024년 개발자 설문에서도 AI 도구를 사용하는 개발자들이 가장 기대하는 효과는 생산성 향상이었지만, AI 결과의 정확성을 신뢰한다는 응답은 43% 수준이었고, 전문 개발자의 45%는 AI 도구가 복잡한 작업을 처리하는 데 좋지 않다고 답했습니다. 이 프로젝트에서 경험한 내용도 이와 비슷했습니다. AI는 초기 구현 속도를 높이는 데 도움이 되었지만, 복잡한 로직과 품질 관리는 개발자가 직접 검토해야 했습니다. [Stack Overflow - 2024 Developer Survey, AI]

스토어 출시