Floniks
블로그로 돌아가기
튜토리얼12분 읽기

순수 바이브 코딩: Claude Code와 Floniks로 만드는 AI 시대의 게임(7단계 방법)

당신은 "무엇을 원하는지"만 말하면 됩니다: Claude Code가 코드를 쓰고, Floniks를 호출해 에셋을 생성하고, 테스트를 돌리고, 자율적으로 반복합니다. 게임 개발 시리즈의 총론: 에이전트를 위해 설계된 저장소에서, 한 문장으로 게임 추가, 에셋 즉석 생성, 비주얼 노벨, 체계적 디버깅, 브라우저 릴리스까지——실제 git 히스토리에 기반한 7단계.

작성자: Elena Park
순수 바이브 코딩: Claude Code와 Floniks로 만드는 AI 시대의 게임(7단계 방법)

당신은 "무엇을 원하는지"만 말하면 됩니다. 나머지는 전부 에이전트의 몫입니다. Claude Code는 한 문장을 계획으로 확장합니다——저장소의 컨벤션을 읽고, 코드를 쓰고, Floniks를 호출해 에셋을 생성하고, 테스트를 돌리고, 스스로 버그를 고치고, 커밋합니다. 이 글은 우리의 에이전트 게임 개발 시리즈를 떠받치는 방법론을 실제 git 히스토리에서 단계별로 재현한 것입니다: 한 문장으로 퍼즐 게임을 추가하는 것에서, text-to-image·image-to-image·배경 제거·TTS·text-to-music으로 만든 미스터리 라이트 호러 비주얼 노벨, 그리고 체계적인 디버깅과 브라우저 릴리스까지.

이 글은 시리즈의 총론입니다. 두 편의 심층 튜토리얼은 이미 공개되어 있습니다: 1부 《스크린샷 한 장으로 퍼즐 게임 만들기》와 2부 《한 문장으로 비주얼 노벨 출시하기》. 이 글은 두 편을 하나로 엮어, 처음부터 끝까지 재현 가능한 방법으로 정리합니다.

먼저 여기서 말하는 **바이브 코딩(vibe coding)**의 의미를 분명히 합시다: 당신은 "무엇을 원하는지"만 말합니다——프롬프트를 쓰지 않고, 파일을 나르지 않습니다. Claude Code가 당신의 한 문장을 계획으로 바꾸고, 당신의 역할은 "도구를 조작하는 사람"에서 "방향을 정하고 결과를 검수하는 사람"으로 바뀝니다.

세 부분이 하나의 루프로 맞물립니다:

역할무엇인가담당
오케스트레이션Claude Code컨벤션을 읽고, 코드를 쓰고, 테스트를 돌리고, 자율적으로 반복
엔진Rust + Bevy + LuaRust가 렌더링과 크로스 플랫폼을, Lua가 게임플레이를 담당; 커맨드 큐가 둘을 분리
에셋Floniks(MCP 경유)text-to-image / image-to-image / 배경 제거 / TTS / text-to-music을 에이전트의 도구로 노출

이것은 비전 선언문이 아닙니다. 아래의 모든 단계에는 실제 시행착오와 실제 수정이 따라붙습니다. 결과물은 어느 브라우저에서나 즐길 수 있는 미니게임 12종 컬렉션입니다: maweis.com/rust_bevy_lua_game.

1단계: 에이전트를 위해 설계된 저장소에서 시작하기

핵심은 도구가 얼마나 강력한지가 아니라, 컨텍스트를 저장소에 써 넣는 것입니다. 프로젝트 루트의 CLAUDE.md는 사람용 README가 아니라 에이전트를 위한 아키텍처 계약입니다: Lua가 엔진과 어떻게 통신하는지, 게임 하나를 추가하는 절차, 무엇이 Rust 몫이고 무엇이 Lua 몫인지. 문서에 한 번 적어두면 대화마다 백 번 반복하는 것보다 낫습니다——"에이전트가 스스로 프롬프트를 다듬는다"는 말의 진짜 의미가 이것입니다.

다음으로 Floniks를 연결합니다. 명령 한 줄이면 에셋 공장이 에이전트의 도구 상자에 나타납니다——이것이 Floniks MCP 서버입니다:

claude mcp add --transport http floniks \
  https://api.floniks.com/api/v1/mcp \
  --header "Authorization: Bearer mk_YOUR_KEY"

이후 에이전트는 list_models, single_task, execute_workflow 같은 도구를 호출할 수 있습니다——이미지 생성, 워크플로 실행, 크레딧 확인, 결과 가져오기까지, 중간에 사람이 파일을 나를 필요가 없습니다.

2단계: 한 문장으로 게임 하나 추가하기

가장 작은 루프는 이렇습니다:

당신이 말한다: Queens / 스도쿠 변형 로직 퍼즐을 만들어 줘. 8×8, 각 행·각 열·각 색깔마다 조랑말 한 마리씩, 조랑말끼리는 인접 금지.

에이전트가 한다: Lua 파일 하나를 새로 만들고, 생성기(유일해 보장)와 인터랙션을 작성하고, 메뉴에 스스로 등록하고, 규칙 불변식을 단언하는 헤드리스 테스트를 추가하고, 그린으로 만들고, 커밋.

이렇게 태어난 것이 《포니 퍼레이드》입니다. 게임플레이 로직은 전부 Lua 파일 하나 안에 있습니다; 한 줄 고치고 저장하면 데스크톱 핫 리로드가 몇 초 만에 반영됩니다——그래서 에이전트의 "쓰기 → 검증" 루프는 초 단위로 돕니다. 게다가 에이전트가 작성한 생성기는 실제로 해의 개수를 세어, 해가 정확히 하나인 보드만 남깁니다.

《포니 퍼레이드》 실행 화면: 둥근 타일, 굵은 CJK 타이틀, 하트 / 카운트다운 / 연승 HUD——에이전트가 참고 영상을 프레임 단위로 재현
《포니 퍼레이드》 실행 화면: 둥근 타일, 굵은 CJK 타이틀, 하트 / 카운트다운 / 연승 HUD——에이전트가 참고 영상을 프레임 단위로 재현

이 게임의 전체 개발 기록——스크린샷 한 장에서 출시까지, 프롬프트 제로——은 1부에서: 《스크린샷 한 장으로 퍼즐 게임 만들기》.

3단계: 에셋: Floniks가 즉석에서 생성하게 하기

프로그래머가 게임을 만들 때 발목을 잡는 것은 코드가 아니라 언제나 아트입니다. 여기서는 에이전트가 스스로 해결합니다: 실행 가능한 스타일 바이블(팔레트·외곽선·구도를 고정하는 프롬프트 DNA)을 읽고, 에셋별 주제어만 채워 Floniks text-to-image로 생성한 뒤, 배경을 제거하고 정확한 픽셀로 리사이즈해 "같은 이름·같은 크기" 계약에 따라 assets/textures/에 안착시킵니다——게임은 코드 수정 없이 스킨이 바뀝니다.

당신이 말한다: 조랑말은 밤색 몸통, 크림색 콧등, 흩날리는 갈기, 측면 뷰, 투명 배경으로.

에이전트가 한다: 프롬프트 조합 → Floniks 생성 → 배경 컷아웃 → 48×48로 배치 → 에셋 매니페스트 갱신. 같은 라인에서 HUD 아이콘 10개와 둥근 UI 타일도 나왔습니다.

생성된 15초 게임플레이 광고조차 이 라인의 산물입니다: 실제 에셋을 키프레임으로 렌더링하고, Floniks text-to-music(Lyria 2)으로 음악을 입혔습니다.

게임플레이 광고의 한 키프레임: 손가락이 조랑말 배치를 시연하고, 충돌 칸에 ✕가 자동으로 표시되고, 레벨 클리어를 축하——모든 요소가 게임 속 실제 에셋
게임플레이 광고의 한 키프레임: 손가락이 조랑말 배치를 시연하고, 충돌 칸에 ✕가 자동으로 표시되고, 레벨 클리어를 축하——모든 요소가 게임 속 실제 에셋

4단계: 다듬기: 피드백 주도 반복

첫 버전은 대개 "돌아가긴 하지만 거칠다"입니다. 마음에 들지 않는 부분을 스크린샷으로 찍어 보내면 에이전트가 고칩니다. 실제로 있었던 한 라운드——피드백은 "타일이 밋밋한 색 블록이고, 폰트가 충분히 둥글지 않고, 카메라 효과를 넣어 달라"——가 네 가지 병렬 수정이 되었습니다:

  • 텍스처: 8× 슈퍼샘플링 생성기를 새로 작성해, 틴트 가능한 둥근 타일·굵은 ✕·캡슐·카드를 산출.
  • 엔진: 새 API game.zoom()——올바른 배치엔 가볍게, 실수엔 무겁게, 클리어엔 강하게 줌인했다가 되튕김.
  • 폰트: Noto Sans SC Bold 서브셋으로 교체하고, 빠진 글리프가 없는지 글자 단위로 검증.
  • 생성기: 8×8에서는 맹목적 재셔플로 유일해 보드를 찾지 못해 힐 클라이밍 정련으로 전환——첫 레벨이 237개의 해에서 정확히 1개로 수렴.

마지막 항목에 주목하세요: 이것은 진짜 버그였고, 테스트가 그 자리에서 잡아내 수정을 강제했습니다. 테스트는 에이전트의 눈입니다——화면이 예쁜지는 볼 수 없어도, "유일해"라는 불변식이 깨졌는지는 볼 수 있습니다.

5단계: 더 무거운 장르로: 본격 비주얼 노벨

같은 방법이 훨씬 무거운 소재도 감당합니다. 《미드나이트 갤러리》는 미스터리 라이트 호러 심문 비주얼 노벨입니다: 명화 《응시자(The Gazer)》가 갤러리에서 도난당하고, 당신은 세 명의 증인을 차례로 심문하며, 질문 방식을 고르고, 표정 변화를 읽고, 마지막에 범인을 지목합니다. 이 단계에서 Floniks의 멀티모달 역량을 총동원했습니다.

증인 선택 화면: 세 증인이 나란히, 탭하면 전진 + 셰이크 + 줌——투명 컷아웃 초상화가 심야 갤러리 배경 위에 깔끔하게 합성된다
증인 선택 화면: 세 증인이 나란히, 탭하면 전진 + 셰이크 + 줌——투명 컷아웃 초상화가 심야 갤러리 배경 위에 깔끔하게 합성된다

네 가지 역량, 하나의 체인:

  • 초상화——text-to-image + image-to-image: 캐릭터마다 text-to-image 베이스 한 장, 거기서 image-to-image로 평온 / 긴장 / 공포 세 표정을 파생——같은 얼굴, 다른 감정. 배경 제거를 거쳐 투명 스프라이트로.
  • 목소리——TTS, 한 사람당 한 음색: 실제로 서로 다른 세 여성 목소리를 한 명씩 고정하고, 기본 주파수가 각기 다름(291 / 202 / 158 Hz)을 음향적으로 검증.
  • 분위기——text-to-music: Lyria 2가 생성한 어두운 앰비언트 루프를 대화 아래에 깔았습니다.
  • 스토리——분기 대화 트리: 타자기 자막과 선택지 분기; 핵심 단서를 찌르면 초상화가 공포 표정으로 바뀌고, 무르게 물으면 얼버무려집니다.

세 증인의 평온한 표정 초상화: 같은 파이프라인이 캐릭터 일관성을 보장——베이스 이미지가 얼굴을 고정하고, image-to-image가 표정을 파생
세 증인의 평온한 표정 초상화: 같은 파이프라인이 캐릭터 일관성을 보장——베이스 이미지가 얼굴을 고정하고, image-to-image가 표정을 파생

《응시자》 장면: 깨끗한 갤러리 배경을 image-to-image로 섬뜩한 변형으로——벽의 그림 한 점이 당신을 바라보고 있다. 라이트 호러 분위기는 전부 생성된 것
《응시자》 장면: 깨끗한 갤러리 배경을 image-to-image로 섬뜩한 변형으로——벽의 그림 한 점이 당신을 바라보고 있다. 라이트 호러 분위기는 전부 생성된 것

전체 제작 과정——"세 목소리가 사실은 같은 목소리였다"는 버그가 인상이 아니라 계측값으로 드러난 사연까지——은 2부에서: 《한 문장으로 비주얼 노벨 출시하기》.

6단계: 체계적인 마감: 진짜 디버깅 루프

바이브 코딩은 버그가 없다는 뜻이 아닙니다. 당신이 증상을 보고하면 에이전트가 근본 원인을 찾는다는 뜻입니다. 이 프로젝트에서 실제로 일어났고, 각각 체계적으로 해결된 세 가지:

당신이 보고한다에이전트가 원인을 찾아 고친다
웹 빌드에서 소리가 안 난다브라우저는 AudioContext를 suspended로 초기화하고 첫 인터랙션까지 풀지 않는다——페이지 첫 클릭에서 모든 오디오 컨텍스트를 resume
초상화의 배경이 다른 캐릭터를 가린다초상화에 배경이 박혀 있었다 → 9장 전부 Floniks 배경 제거로 투명 처리; 그런데 브라우저 캐시가 옛 이미지를 내놓았다 → 파일명을 바꿔 캐시 우회
오디오 트랙이 쌓이고 겹친다채널 모델 부재 → 엔진을 3채널로 재구축: SFX는 겹칠 수 있으나 프레임 내 중복 제거, Music은 같은 트랙을 재시작하지 않음, Voice는 단일 대화 채널(새 대사가 이전 대사를 멈춤)

모든 수정에는 회귀 테스트나 검증이 따라붙었습니다. 헤드리스 스위트는 이제 13만+ 건의 단언을 갖추고 있습니다——에이전트가 혼자서도 자신 있게 반복할 수 있는 근거입니다.

7단계: 출시: 브라우저에서 바로 플레이

같은 Rust 크레이트가 세 갈래로 컴파일됩니다: 데스크톱, iOS, 그리고 WebAssembly. 메인 브랜치에 머지하면 GitHub Pages로 자동 배포——링크 하나로 어느 모바일 브라우저에서든, 다운로드 없이 플레이할 수 있습니다.

git push        # main으로 머지
# → CI가 wasm 컴파일 → GitHub Pages 게시 → 라이브

브라우저에서 플레이하기 · 소스 코드 보기

이 방법이 성립하는 이유

  • 컨텍스트는 저장소에 산다. CLAUDE.md, 스타일 바이블, 에셋 매니페스트가 에이전트의 시니어 아키텍트다. 컨벤션은 한 번 쓰면 영원히 적용된다.
  • 테스트는 에이전트의 눈이다. 화면은 못 봐도 불변식은 본다. 기계가 검증할 수 있는 "옳음"이 있어야 자율 반복이 안전해진다.
  • Floniks는 에셋 공장이다. MCP를 거치면 생성은 평범한 도구가 된다. 모델 업그레이드는 id를 바꿔 리플레이하는 것뿐——아키텍처는 움직이지 않는다.
  • 당신은 의도와 검수만 내놓는다. 프롬프트도, 파일 나르기도 없다. 방향을 정하고 결과를 검수한다; 계획·코드·에셋·테스트는 에이전트의 몫이다.

사람 한 명에 에이전트 하나: 밤에 한 문장을 남기면, 아침에 그린 테스트가 달린 커밋 행렬을 받습니다. 이것이 우리가 생각하는, AI 시대다운 게임 개발 방식입니다.

질문과 답변

이 방법에서 "바이브 코딩"은 무엇을 의미하나요?

의도와 검수 기준을 평범한 말로 전하면, 나머지는 에이전트의 일입니다: Claude Code가 당신의 한 문장을 계획·코드·Floniks 생성 호출·테스트·커밋으로 확장합니다. 당신의 역할은 도구 조작에서 방향 결정과 결과 검수로 바뀝니다.

Floniks는 이 파이프라인에 구체적으로 무엇을 제공하나요?

MCP로 연결된 Floniks는 에이전트 도구 상자 속의 에셋 공장이 됩니다: text-to-image, image-to-image, 배경 제거, TTS, text-to-music. 결과물은 게임 에셋 폴더에 곧장 안착하며——사람이 파일을 나르는 일은 없습니다.

프롬프트를 써야 하나요?

아니요. 사람이 제공한 것은 한 줄짜리 의도와 스크린샷 피드백뿐입니다; Floniks용 생성 프롬프트와 엔진 작업의 태스크 분해는 에이전트가 스스로 구성했습니다.

이 과정을 재현할 수 있나요?

네. 엔진은 GitHub의 rust_bevy_lua_game 저장소에 오픈소스로 공개되어 있고, 완성된 컬렉션은 WebAssembly로 어느 브라우저에서나 플레이되며, Floniks를 Claude Code에 연결하는 데는 claude mcp add 명령 한 줄과 API 키만 있으면 됩니다.

당신의 빌드 루프에 에셋 공장을 연결할 준비가 되었나요? Floniks MCP 서버에서 시작한 뒤 두 편의 튜토리얼을 따라가세요: 1부에서 퍼즐 게임을 만들고, 2부에서 비주얼 노벨을 출시합니다.

태그

#tutorial#vibe-coding#claude-code#mcp#ai-game-development#game-asset-generation#agentic-development#webassembly

관련 글

Claude Code와 Floniks로 바이브 코딩 게임 개발 | Floniks