Floniks
블로그로 돌아가기
쇼케이스7분 읽기

스크린샷 한 장으로 퍼즐 게임 만들기: 프롬프트 제로 에이전트 개발기

입력은 스크린샷 한 장과 한 문장, 결과물은 브라우저에서 즐기는 로직 퍼즐——AI 아트, 생성 사운드트랙, 15초 광고까지 전부 Floniks 제작. 사람의 프롬프트는 0개: 에이전트가 스스로 규칙을 조사하고 영상 키프레임을 추출하며 MCP로 생성 능력을 직접 호출했습니다.

작성자: Elena Park
스크린샷 한 장으로 퍼즐 게임 만들기: 프롬프트 제로 에이전트 개발기

입력은 스크린샷 한 장과 한 문장. 결과물은 브라우저에서 바로 즐길 수 있는 완성도 높은 로직 퍼즐 게임——AI 생성 아트, 생성된 사운드트랙, 15초짜리 게임플레이 광고까지 전부 Floniks로 제작되었습니다. 사람이 쓴 프롬프트는 0개. 이 글은 에이전트가 가벼운 지시를 출시된 게임으로 바꿔 가는 과정과, 이 파이프라인이 한 번도 멈추지 않은 이유를 단계별로 복기합니다.

이 글은 2부작의 1부입니다. 2부 《한 문장으로 비주얼 노벨 출시하기》는 같은 방법을 보이스·초상화·분기 스토리로 확장합니다.

버전 진화: 왼쪽은 한 문장으로 시작한 v1, 오른쪽은 최종판——오른쪽 패널은 브라우저에서 실행 중인 WASM 빌드의 실기 스크린샷
버전 진화: 왼쪽은 한 문장으로 시작한 v1, 오른쪽은 최종판——오른쪽 패널은 브라우저에서 실행 중인 WASM 빌드의 실기 스크린샷

사람이 실제로 제공한 것

이 게임에 대한 사람의 입력 전부는 퍼즐 게임 스크린샷 한 장, 게임플레이 영상 하나, 그리고 몇 개의 한 줄짜리 코멘트뿐이었습니다. 기획서도, 규칙서도, 프롬프트 엔지니어링도 없었습니다. 나머지 전부——장르 조사, 작업 분해, 에셋 생성, 테스트, 배포——는 오픈소스 엔진 rust_bevy_lua_gameMCP로 연결된 Floniks, 두 플랫폼을 이용해 에이전트가 총괄했습니다.

입력 장부 전체는 다음과 같습니다:

사람이 말한 것에이전트가 분해한 것
"이 게임을 만들어 줘" (스크린샷 한 장)이미지에서 장르 식별: Queens / Star Battle 계열 로직 퍼즐——각 행·열·색 구역에 말 하나씩, 대각선을 포함해 서로 인접 금지
"규칙은 직접 조사해"규칙을 조사로 보완하고 각 규칙을 헤드리스 테스트 불변식으로 부호화——규칙 문서가 곧 테스트 스위트
(말하지 않음)보드는 유일해여야 한다고 판단, 해 개수 카운터로 강제
(말하지 않음)저장소 규약에 따라 컬렉션 메뉴에 자동 등록, 엔진 수정 제로

버전 1은 당일 출시되었습니다.

영상이 사양서가 되다

첫 버전은 제대로 플레이됐지만 원작의 느낌과는 거리가 멀었습니다. 사람은 게임플레이 영상을 던지며 한마디: "UI와 메커니즘을 정확히 재현해."

에이전트는 영상에서 키프레임을 추출해 사양서처럼 사용했습니다: 8×8 보드, 둥근 레벨 배지, 하트, 카운트다운, 연승 표시; 탭으로 배치하고 충돌 칸에 자동으로 ✕가 찍히는 리듬; 레이아웃 비율은 눈대중이 아니라 측정. 그리고 그 "영상에서 읽어 낸 사양"대로 인터페이스를 다시 썼습니다. 영상은 요구사항 문서다——읽는 쪽이 에이전트라면.

피드백은 티켓이 아니라 스크린샷으로 도착한다

다음 폴리싱은 사람이 보낸 불만족 스크린샷 한 장에서 시작됐습니다: 타일이 밋밋한 색 블록이고, 폰트가 얇고, 보드는 8×8이어야 하며, "고급 카메라 효과도 넣어 줘".

메시지 하나가 네 가지 병렬 수정이 되었습니다: 슈퍼샘플링 텍스처 생성기로 틴트 가능한 둥근 타일 제작; 진짜 CJK 볼드 서브셋 폰트로 교체; 레벨 생성기를 언덕 오르기 정련으로 교체——8×8에서는 무작위 재추첨으로 유일해 보드를 찾을 수 없었기 때문(첫 레벨 실측 237개 해에서 정확히 1개로 수렴); 엔진에 카메라 줌 펀치 API 추가.

유일해 버그는 기억할 가치가 있습니다: 잡아낸 것은 테스트 스위트이지 사람의 리뷰가 아닙니다. 스위트가 모든 레벨의 해가 정확히 하나임을 단언하므로 에이전트는 알고리즘을 교체할 수밖에 없었습니다. 이것이 에이전트가 혼자 반복할 수 있는 근거입니다.

보이고 들리는 모든 것은 Floniks가 담당

포니 말은 Floniks text-to-image 생성물입니다: 배경을 제거하고 픽셀 단위로 리사이즈해 엔진 에셋 폴더에 배치——게임이 파일명으로 인식하므로 코드 변경 제로. HUD 아이콘 10개와 둥근 UI 타일도 같은 라인에서 나왔습니다. 사운드트랙은 Floniks text-to-music(Lyria 2). 15초 게임플레이 광고는 실제 게임 에셋을 키프레임으로 렌더링해 Floniks image-to-video에 통과시키고 생성 트랙으로 스코어링했습니다.

게임플레이 광고의 키프레임: 손가락이 포니 배치를 시연하고 충돌 칸에 자동 ✕, 그리고 클리어 연출——모든 요소가 게임 내 실제 에셋
게임플레이 광고의 키프레임: 손가락이 포니 배치를 시연하고 충돌 칸에 자동 ✕, 그리고 클리어 연출——모든 요소가 게임 내 실제 에셋

왜 멈추지 않는가: 두 플랫폼, 하나의 파이프라인

흐름이 매끄러운 이유는 에이전트가 빨라서가 아니라 길에 관문이 없기 때문입니다. 엔진 쪽과 Floniks 쪽이 파이프라인을 절반씩 맡고, 이음새는 전부 기계가 통과할 수 있는 계약입니다:

필요엔진 제공Floniks 제공이음새의 계약
플레이 수정로직은 Lua 파일 하나, 초 단위 핫 리로드한 페이지짜리 game.* API
정확성 검증헤드리스 테스트, 13만+ 단언규칙 = 불변식 = 테스트
아트 필요파일명과 크기로 에셋 로드, 코드 제로 스킨 교체text-to-image + 배경 제거를 MCP로스타일 바이블이 팔레트 고정; 매니페스트로 재생성 가능
음악 필요3채널 오디오, 한 줄로 연결text-to-music동일 이름 오디오 파일 배치
홍보물실제 에셋을 키프레임으로 렌더링image-to-video + 스코어링키프레임 입력, 완성 광고 출력

에이전트는 한 세션 안에서 코드를 쓰고, 테스트를 돌리고, Floniks를 호출하고, 산출물을 약속된 경로에 놓고, 커밋합니다——사람이 도구 사이에서 파일을 나르는 단계는 하나도 없습니다.

완전한 크로스 플랫폼: 하나의 crate에서 네이티브와 WASM

게임은 단일 Rust crate에서 세 가지 형태로 출하됩니다: 네이티브 macOS(에이전트의 핫 리로드 개발 루프), 네이티브 iOS 120Hz ProMotion, 그리고 브라우저의 WebAssembly——Lua VM은 동일한 API를 노출하는 순수 Rust 구현으로 교체되어, 모든 게임 스크립트가 세 타깃에서 바이트 단위로 동일하게 동작합니다.

증거는 이 글의 커버 이미지에 있습니다: 오른쪽 패널은 목업이 아니라 헤드리스 브라우저에서 WASM 빌드를 라이브로 캡처한 스크린샷입니다. 링크 하나로 어떤 모바일 브라우저에서든 플레이되고, 같은 게임이 iPhone에서는 네이티브의 부드러움으로 돌아갑니다.

질문과 답변

사람이 프롬프트를 썼나요?

아니요. 사람이 제공한 것은 스크린샷, 영상, 한 줄 코멘트뿐입니다. Floniks 생성용 프롬프트와 엔진 작업의 분해는 에이전트가 스스로 구성했습니다.

에이전트는 Floniks를 어떻게 호출하나요?

MCP를 통해서입니다: Floniks는 도구 모음(text-to-image, image-to-video, text-to-music, 배경 제거 등)으로 등록되고, 에이전트가 코딩 세션 중 직접 호출하며 결과물은 게임 에셋 폴더에 떨어집니다. Floniks MCP 서버를 참고하세요.

혼자 반복하는 에이전트의 정직함은 무엇이 보장하나요?

게임 규칙을 불변식으로 부호화한 헤드리스 테스트 스위트입니다. 유일해 요건이 모든 레벨에 단언되어 있어, 실제 생성기 버그가 이렇게 잡혔고 더 나은 알고리즘으로 강제되었습니다.

결과물을 플레이할 수 있나요?

네——컬렉션 전체가 WebAssembly로 브라우저에서 실행되며, 소스는 GitHub의 rust_bevy_lua_game 저장소에 공개되어 있습니다.

생성 능력을 자신의 빌드 루프에 연결하고 싶다면 Floniks MCP 서버에서 시작하세요. 같은 방법이 더 무거운 장르를 어떻게 다루는지는 2부에서 확인할 수 있습니다.

태그

#showcase#ai-game-development#vibe-coding#mcp#sprite-generation#text-to-music#image-to-video#webassembly

관련 글

스크린샷 한 장으로 퍼즐 게임 만들기: 프롬프트 제로 개발기 | Floniks