코코스 크리에이터로 .ait 파일을 만드는데 어려움을 겪고 있습니다

Cocos
1

샘플코드를 활용해서 메뉴얼에 나온대로 해봐도 .ait 파일 생성을 계속 실패하고 있습니다.
다른분의 질문글을 읽어보고 그대로 해봐도 계속 .ait 파일 생성에 실패를 하네요.

코코스 크리에이터 3.8.7 을 사용하고 있는데 어느 부분이 문제인지 확인도 어렵습니다.

코코스 관련 문서 혹은 어떤 구조로 이루어 지고 있는지 설명을 좀 부탁드립니다.

2

안녕하세요, GitHub - toss/apps-in-toss-cocos-examples: 앱인토스 Cocos Creator 예제 예제를 참고하셨으나 실패한다는 말씀이시죠?

프로젝트 구조나 오류 경험하신 것이 있으면 로그 공유주실 수 있을까요?

3

안녕하세요.

예제로도 확인이 어려우시다면. 제가 진행하고있는 시퀸스 참고한번 해보시면 좋을것으로 예상됩니다.

코코스는 개발환경시 사용자가 직접 핸들링을 많이 해야해서 조금 수정할 곳이많습니다.

아래 코드 요소는 수동으로 셋팅하는 방법이므로 작업해보시고 안되시면 질문해주세요.

어디서 어떻게 안되고 어떤 에러로 어딴 문제를 발생하는지 상세히 알려주시면 도움드리겠습니다.

우선 저의 개발환경은 다음과 같습니다.

engine : cocos creator 3.8.7
editor : vs code
node js 18+


##  프로젝트 구조 설정

최종 프로젝트 구조는 다음과 같아야 합니다:


your-game/
├── assets/                    # Cocos Creator 에셋
├── build/                     # Cocos 빌드 출력 (자동 생성)
│   └── web-mobile/           # 웹 빌드 결과물
├── toss-wrapper/             # Toss 래핑용 폴더 (직접 생성)
│   ├── .granite/
│   │   └── app.json          # Toss 앱 설정
│   ├── src/
│   │   └── toss-bridge.js    # Toss SDK 브릿지
│   ├── public/               # Cocos 빌드 복사 위치 (자동 생성)
│   ├── package.json
│   ├── vite.config.ts
│   └── index.html            # 엔트리 HTML
├── MAKE_GRADLE/              # 빌드 스크립트 폴더 (선택)
│   ├── Toss_build_auto.bat   # 자동 빌드 스크립트
│   └── fix-cocos-build.js    # Cocos 빌드 수정 스크립트
└── ...


---

## 3. toss-wrapper 폴더 생성

### 3.1 폴더 및 파일 생성


# 프로젝트 루트에서 실행
mkdir toss-wrapper
cd toss-wrapper
mkdir src
mkdir .granite


### 3.2 package.json 생성

`toss-wrapper/package.json`:


{
  "name": "your-game-name",
  "version": "1.0.0",
  "description": "Your Game for Toss",
  "main": "index.html",
  "scripts": {
    "dev": "granite dev",
    "build": "granite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@apps-in-toss/web-framework": "^1.5.1"
  },
  "devDependencies": {
    "vite": "^6.1.0"
  }
}


### 3.3 .granite/app.json 생성

`toss-wrapper/.granite/app.json`:


{
  "appName": "your-game-name",
  "permissions": []
}


> **중요**: `appName`은 토스 콘솔에서 생성한 앱 이름과 동일해야 합니다.

### 3.4 vite.config.ts 생성

`toss-wrapper/vite.config.ts`:

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  publicDir: 'public',
  build: {
    outDir: 'dist/web',
    rollupOptions: {
      input: {
        main: 'index.html',
        'toss-bridge': resolve(__dirname, 'src/toss-bridge.js'),
      },
      output: {
        entryFileNames: (chunkInfo) => {
          if (chunkInfo.name === 'toss-bridge') {
            return 'toss-bridge.js';
          }
          return 'assets/[name]-[hash].js';
        },
      },
    },
    assetsInlineLimit: 0,
  },
  optimizeDeps: {
    exclude: ['public'],
  },
});


### 3.5 toss-bridge.js 생성

`toss-wrapper/src/toss-bridge.js`:


/**
 * Toss SDK Bridge
 * @apps-in-toss/web-framework의 함수들을 window.TossSDK로 노출
 */

import {
    openGameCenterLeaderboard,
    submitGameCenterLeaderBoardScore,
    getGameCenterGameProfile,
    IAP,
    GoogleAdMob,
} from '@apps-in-toss/web-framework';

// TossSDK namespace로 export
window.TossSDK = {
    // Game Center / Leaderboard
    openGameCenterLeaderboard,
    submitGameCenterLeaderBoardScore,
    getGameCenterGameProfile,

    // In-App Purchase
    IAP,

    // AdMob
    GoogleAdMob,
    loadAppsInTossAdMob: GoogleAdMob.loadAppsInTossAdMob,
    showAppsInTossAdMob: GoogleAdMob.showAppsInTossAdMob,
};

console.log('[Toss Bridge] TossSDK loaded');

export {};


### 3.6 의존성 설치


cd toss-wrapper
npm install

 **참고**:
 `granite` CLI는 `@apps-in-toss/web-framework`에 포함되어 있습니다.

---

## 4. Cocos Creator 웹 빌드

### 4.1 빌드 설정

1. Cocos Creator 열기
2. 메뉴: **Project → Build**
3. 다음과 같이 설정:

| 설정 항목 | 값 |
|-----------|-----|
| Platform | **Web Mobile** |
| Build Path | `build` (기본값) |
| Main Bundle Compression Type | `Merge All JSON` (권장) |
| MD5 Cache | **OFF** (권장) |

### 4.2 빌드 실행

1. **Build** 버튼 클릭
2. 빌드 완료까지 대기
3. `build/web-mobile/` 폴더 생성 확인

### 4.3 빌드 결과 확인

build/
└── web-mobile/
    ├── index.html
    ├── assets/
    ├── cocos-js/
    └── ...

---

## 5. .ait 파일 생성

### 5.1 수동 빌드 방법

#### Step 1: index.html 수정

`build/web-mobile/index.html`을 열고 `<body>` 태그 바로 아래에 다음 스크립트 추가:

<body>
  <!-- Toss Web Framework Bridge -->
  <script type="module" src="/src/toss-bridge.js"></script>

  <!-- 기존 내용 -->
  ...
</body>


#### Step 2: Cocos 빌드 복사


# toss-wrapper/public 폴더가 있으면 삭제
rmdir /s /q toss-wrapper\public

# Cocos 빌드를 toss-wrapper/public으로 복사
xcopy /e /i /y build\web-mobile toss-wrapper\public

# index.html도 toss-wrapper 루트에 복사
copy toss-wrapper\public\index.html toss-wrapper\index.html


#### Step 3: .ait 빌드


cd toss-wrapper
npm run build


#### Step 4: 결과 확인

빌드 성공 시 `toss-wrapper/` 폴더에 `.ait` 파일이 생성됩니다:


toss-wrapper/
├── your-game-name.ait    ← 이 파일을 토스에 업로드
├── dist/
│   └── web/
└── ...
4

자세한 답변 너무 감사드립니다. 방금전에 일단 .ait 파일을 생성하는 것 까지는 성공했습니다.

저는 아예 웹빌드를 새로운 프로젝트로 빼내서 AI 도움을 좀 받으면서 실행했더니 빌드가 되기는 했습니다.

써주신 글을 보니까 거의 같은 형태로 진행이 되었네요.

코코스나 웹프로젝트가 처음이라 아직 부족한 부분이 많습니다. ㅠㅠ

출시까지는 조금 더 공부를 해야겠네요

잘부탁드립니다. 선배님