바이브코딩으로 멀티플렛폼 게임 만들기 #1 주차 ( 기초작업 + Firebase + Admod 테스트 )

소개

간단한 케쥬얼 게임을 4주의 스터디 동안 만들기 위해 시간날때마다 작업하고 있습니다.

# 1주차 작업

1. 시스템 선정
- 멀티 플렛폼용 앱 껍데기 ( Flutter )
- 게임 엔진 ( Unity6 - 2D )
- 랭킹 저장 및 랭킹 알람용 백엔드 ( Firebase / Cloud Function - Cloud Message )
- 수익을 위한 Admob ( 전면광고 1 / 배너 광고 1 )

2. 기반 작업 ( 1주차 )
- Flutter 기본 껍데기 생성
- Firebase IOS/AOS 등록 ( 앱 초기화때 사용 ) 및 json/plist 파일 작업
- Admob 트리거 규칙 및 테스트 광고 띄우기.





진행 방법

  • Claude Code

  • Antigravity ( IDE로만 사용 )

  • firebase Console

Claude Code 를 plan-mode로 "우리의 친구" opus 횽에게 기본적인 시스템 구성을 설명하고,
같이 계획하자고 꼬셨습니다.

뽀로리: 
flutter + unity6(2D) + firebase 를 이용한 간단한 케쥬얼 게임을 만들고 싶어. 
게임을 만들기 전에 아래의 조건으로 설계를 진행할 생각인데, 같이 이야기하며 계획을 세워보자.  

---
### Repository : mono-repo / multi-module ( flutter UI / Game ) 
---
---
### flutter  
앱의 껍데기 역할로 아래의 역할을 한다. 
1. splash 
2. admob 광고판
3. 랭킹 등록/조회 
4. push notification
---
---
### firebase 
1. 셰계랭킹 DB
2. push notification  
---
### unity6 2D 
1. 게임 ( flutter 모듈로 임베딩 )
2. flutter 와 인터페이스를 통해 점수등 데이터/엑션을 전달 
---

이렇게 첫 시작을 하여 프롬프트로 서로 핑퐁하며, opus 가 나에게 역제안을 하고 그걸 제가 수락 혹은 다른
방향으로 유도하면서 '계획'단계를 진행 했고. 아래와 같은 디렉토리 구조로 프로젝트가 생성 되었습니다.

.. 중략 ...

## 1. Mono-repo Directory Structure

```
road_outlaw/
├── apps/
│   └── flutter_app/              # Flutter 메인 앱
│       ├── android/
│       │   └── unityLibrary/     # Unity export 모듈 (gitignore)
│       ├── ios/
│       │   └── UnityLibrary/     # Unity export 모듈 (gitignore)
│       ├── lib/
│       │   ├── main.dart
│       │   ├── screens/
│       │   │   ├── splash_screen.dart
│       │   │   ├── auth/
│       │   │   │   ├── signin_screen.dart
│       │   │   │   └── signup_screen.dart
│       │   │   ├── home_screen.dart
│       │   │   ├── game_screen.dart      # Unity 게임 호스팅
│       │   │   └── ranking_screen.dart
│       │   ├── services/
│       │   │   ├── auth_service.dart
│       │   │   ├── ranking_service.dart
│       │   │   ├── push_service.dart
│       │   │   └── unity_bridge.dart     # Unity 통신 인터페이스
│       │   ├── models/
│       │   │   ├── user_model.dart
│       │   │   └── score_model.dart
│       │   └── widgets/
│       └── pubspec.yaml
│
├── unity/
│   └── game/         # Unity6 2D 프로젝트
│       ├── Assets/
│       │   ├── Scripts/
│       │   │   ├── GameManager.cs
│       │   │   ├── PlayerController.cs
│       │   │   ├── CarSpawner.cs
│       │   │   ├── ScoreManager.cs
│       │   │   └── FlutterBridge.cs      # Flutter 통신 인터페이스
│       │   ├── Prefabs/
│       │   ├── Sprites/
│       │   └── Scenes/
│       └── ProjectSettings/
│
├── firebase/
│   ├── firestore.rules
│   ├── firestore.indexes.json
│   └── functions/                # Cloud Functions (푸시 알림용)
│       ├── src/
│       │   └── index.ts
│       └── package.json
│
├── docs/
│   ├── interface-spec.md         # Flutter-Unity 인터페이스 명세
│   └── architecture.md
│
├── scripts/
│   ├── build_unity_android.sh
│   ├── build_unity_ios.sh
│   └── deploy_firebase.sh
│
└── README.md
```

---

## 2. Flutter-Unity Interface Specification

### Flutter → Unity (Method Channel)

| Method | Parameters | Description |
|--------|------------|-------------|
| `startGame` | `userId: String` | 게임 시작 |
| `pauseGame` | - | 게임 일시정지 |
| `resumeGame` | - | 게임 재개 |
| `stopGame` | - | 게임 종료 |

### Unity → Flutter (Message Channel)

| Event | Payload | Description |
|-------|---------|-------------|
| `onGameReady` | - | Unity 초기화 완료 |
| `onGameOver` | `{ score: int, distance: int }` | 게임 오버 시 점수 전달 |
| `onScoreUpdate` | `{ score: int }` | 실시간 점수 업데이트 (선택) |

... 중략 ...


지금 까지 Opus로 대화한 내용들을, 아래와 같이 문서화 하도록 요청하였습니다.

계속진행하기 전에, @docs 디렉터리 밑에. processes 디렉토리를 만들고 각 단계를 markdown 으로 먼저 정리해줘. 그리고 현재 진행할 Task들을 @docs/tasks 디렉터리를 만들어서 phase 단계별로 를 정리해주고, 현재 tasks 진행되는 를 active-task.md 로 업데이트 해줘, 그리고 각 task가 끝나면 성공/실패 여부를 체크해 줘야해. 
프로젝트의 작업 목록을 보여주는 화면

우리의 설계(?)상 Flutter 와 Game은 Interface 로 서로 통신하는 '독립적인' 개체들이 되므로, 'phase3 의 유니티 게임'의 경우 flutter base와 interface 규악만 맞추는 조건이라면 어떤 게임이건 붙일 수 있는 상황이 됩니다. ( Game Agent를 따로 만들어서 병렬로도 가능할 것 같네요.)

제가 상상했던 구조로 '클로드 코드'가 잘 맞춰서 생성한 것 같습니다. (킹 갓 오퍼스 사마)

Firebase / Google AdMob ( #phase-2-flutter-base.md )

/model로 sonet형 으로 변경한 후, phase 1번 부터 - 2번까지 해줘! 해줘! 한다음 결과를 보고자 flutter run ( or XCODE ) 를 실행하였는데, '런타임 에러'가 발생합니다. (자기는 빌드에러 안나용! 이라곤 합니다 ^^;;)

녹색 배경의 문자 메시지 스크린샷


Google AdMob 앱ID가 없이는 초기화 할 수 없다 예외가 발생하는 군요.

AdMob 과 함께 향 후 Backend 가 될 Firebase 에 우리 앱을 등록 먼저 진행 하겠습니다.

A) Firebase 에 앱 등록 하기.

1) Firebase Console 접속
https://firebase.google.com/

2) 새 프로젝트 만들기 ( 계속 -> 계속 -> 애널리틱스는 설정하셔도 되고 안하셔도 됩니다. -> 생성 )

한국 웹사이트의 게임 앱 스크린샷

3) AOS/IOS 앱 생성 및 구성파일 다운로드

프로젝트를 생성했으면, 그 프로젝트에서 사용할 APP 을 생성합니다.

해리 종숙
중국어로 된 게임 앱 스크린샷


이 단계에선 자신의 앱이 사용할 앱ID를 결정해야 합니다. 저처럼 flutter 프로젝트를 AI에 시키거나 특정한 명령없이 flutter create 로 프로젝트를 생성하면 임의이 번들 ID가 입력되므로, 앱스토어에 배포할때 문제가 됩니다.
예제에선 앱 번들 ID (IOS) / 패키지 ID ( AOS )를 org.gpters.apps.haakhaak 으로 하고 진행합니다.

안드로이드 파이어베이스


위의 사진처럼 IOS, ANDROID 앱을 등록하시고 구성파일을 다운로드 받으십시오, 3번 firebase SDK추가는 AI 형한테 시킬것 이므로 굳이 지금 읽으실 필요는 없습니다. (나중에 볼수도 있어용)

OS

구성파일

저장위치

AOS

google-services.json

flutter루트/android/app/google-services.json

IOS

GoogleServices-info.plist

flutter루트/ios/Runner/GoogleServices-info.plist


위의 구성파일을 우리 프로젝트에 맞는 위치에 저장해 주세요.

B) Google AdMob

Admob 등록의 경우 여러 선배님들이 말씀해 주셨듯이, 구글 Admob 사이트에 가서 진행을 하시면 됩니다. 저희는 우선 테스트용 AdMob으로 진행을 할 것이므로 Test용 앱아이디/광고ID를 사용합니다.

Google AdMob Mobile Ads SDK > 테스트 광고 사용 설정하기.

  • AOS

    컴퓨터 화면에 표시된 한국 숫자 목록
  • IOS

    화면에 나오는 한국 숫자 목록

    저같은 경우에는 적응형 배너( 게임에 영향을 주지 않을 만큼의 크기에 작은 배너) + 전면광고( 게임이 끝났을때 뜨는 전면 광고 - 보상형으로 할지는 아직 정하지 못했음 ) 인데, 우선 테스트로 "전면광고"만 테스트 해보고록 하겠습니다.

    IOS 전면광고 : ca-app-pub-3940256099942544/4411468910 (앱ID/광고ID)
    AOS 전면광고 : ca-app-pub-3940256099942544/1033173712 (앱ID/광고ID)

    실행 및 테스트


    재료(firebase, Admob)는 모두 준비 되었으니, 아래와 같이 프롬프트를 칩니다.

    AOS/IOS 의 Admob 앱아이디와 테스트용 아이디는 아래와 같아, 반영해줘 
    IOS 전면광고 : ca-app-pub-3940256099942544/4411468910  (앱ID/광고ID) 
    AOS 전면광고 : ca-app-pub-3940256099942544/1033173712  (앱ID/광고ID) 
    ......
     
    테스트를 할 수 있도록 AdMob 테스트 화면을 구성해줘.
    ...... 몇번 핑퐁 .....


Sonet형이 작업을 완료하신 후, flutter run 혹은 xcode 에서 Debug로 실행을 시켜 봅니다.

!) 전면 광고 트리거는 '5번 게임종료 (죽음) 까지는 전면광고가 없고 6회째 부터 전면광고가 종료시 마다
발동한다 입니다.

결과와 배운 점

Admob 을 처음 사용(?)해 본 것.
테스트아이디가 있다는 것을 20기 안드방과 여러 문서를 통해서 파악/반영할 수 있었습니다.
2주차에는 flutter UI/UX를 stitch 등으로 좀 더 다듬고, 게임개발을 시켜볼 계획입니다.

도움 받은 글 (옵션)

[링크] Google AdMob > 테스트 광고 설정하기

3
2개의 답글
지피터스 뉴스레터

이번 주 AI, 딱 쓸 것만

매주 월요일 오후,
읽고 바로 써먹을 AI 소식만