앱인토스 개발자센터

이 글은 앱인토스 ait 빌드, 리더보드,, 어쩌고 기능을 어떻게 써!! 하시는 분들에게 바칩니다.

앱인토스로 게임을 만드는 분들께 도움이 되길 바랍니다 … ⭐

일단 제일 중요한 ❗사업자 등록❗이 필요합니다.

이게 없으면 앱인토스에 올릴 수가 없어요

있다고 가정하고, 게임까지 다 만들었다(아예 완성X, 80%?)라고 가정한 후 이 단계를 따라오시면 됩니다.

먼저, 게임을 다 만든후 WebGL로 빌드해주세요

앱인토스 시작하기

앱인토스 콘솔

여기 들어가서 회원가입 후 - 워크스페이스에 초대를(본인이 사업자 등록자라면 본인이 만들기) 받은 후 들어갑니다.

워크스페이스(회사명)을 입력한 후, 안에 여러 게임을 동시에 등록할 수 있습니다.

만들게되면 이런 화면이 뜨는데 “앱 등록하기” 버튼을 누르면

앱 정보(이름, 한국어, 영어,,,, ,, 등등)를 쓸 수 있는 칸이 나오는데 다 채워주시면 됩니다.

여기서 미리 준비해야할 것이

⭐ 앱 로고(600px * 600px)

⭐ 정방형 썸네일(1000px * 1000px)

⭐ 가로형 썸네일(1932px * 828px)

이 세가지입니다!!

이런식으로 들어갈 거고, 저는 미리캔버스 사용해서 만들었습니다

다 만들었다면 카테고리를 작성해야하는데 앱 설명은

이런식으로 옆에 뜨는 문구입니다.

리더보드의 점수는 이렇게 뜬다고 예시보기 누르면 이 사진이 뜨게됩니다~!

저는 아래 등급정보에 스토어 링크가 없으니 itch.io에 WebGL로 빌드한 후, 업로드하고 그 링크를 넣어줬어요

자 이제 50%는 준비가 완료됐습니다. 검토 요청 후 토스내에서 검토가 완료되면 워크스페이스가 만들어질 것이고, 저희가 이제부터 할 것은 ait 파일을 빌드하는 방법이에요

AIT 파일 빌드하기

Node.js — Run JavaScript Everywhere

먼저, node js를 다운받아줍니다. 다운 받는 방법은 여러 게시물이 있으니 생략하겠습니다.

⚠️ WebGL로 빌드한 폴더와 경로가 같아야합니다. (ex. desktop - Build - 빌드한 폴더 라면, Build에서 진행)

npm create vite@latest 폴더명

이렇게 한 후 프레임워크는 Vanilla
배리언트는 JavaScript

만들어진 폴더로 이동한 후

npm install

후에 ! 아래부터 차근차근 따라가주세요

npm install @apps-in-toss/web-framework

npx ait init

여기까지 했다면 아래 이것저것 입력하라고 할텐데 사진대로 하면 됩니당

React Native로 해주고, app-name(본인 게임 이름 소문자로)를 입력해줍니다.

이때 빌드한 폴더의 index.html파일을 만들어진 unity-web-wrapper에 덮어씌우기 한 후

유니티 빌드 폴더의 "Build"폴더를 public 폴더 안에 복사

복사를 다 한 후에 ait파일을

npm run build

여기까지하면 ait파일이 빌드가 됩니다.

그 전에, bedrock파일에

import { defineConfig } from '@apps-in-toss/web-framework/config';

export default defineConfig({
  appName: 'crayonfish',
  brand: {
    displayName: '크레용 피쉬', // 화면에 노출될 앱의 한글 이름으로 바꿔주세요.
    primaryColor: '#3182F6', // 화면에 노출될 앱의 기본 색상으로 바꿔주세요.
    icon: "이미지주소링크(위에서 말한것)", // 화면에 노출될 앱의 아이콘 이미지 주소로 바꿔주세요.
    bridgeColorMode: 'inverted',
  },
  web: {
    host: 'localhost',
    port: 5173,
    commands: {
      dev: 'vite',
      build: 'vite build',
    },
  },
  permissions: [],
  outdir: 'dist',
  webViewProps: {
    type: 'game',
  },
});

bridgeColorMode 는 inverted로,

type은 game으로 바꿔주셔야합니다!

여기서 icon은

아까 만든 워크스페이스에 개발 - 앱정보 들어가서 “수정하기”버튼을 누릅니다.

여기서 앱로고 링크를 복사해 bedrock의 icon : null 에 null대신 넣어주면 됩니다.

리더보드 기능은 index.html과 toss.js파일을 만들고 유니티 에디터에서 연결할 버튼 스크립트 짜주고 bedrock 수정해주고 등등 다시 파일을 바꾸고 그 버전으로 ait파일을 빌드하려면

npm run build 를 해주셔야합니다.

AIT 파일 업로드하기

ait 빌드 후 오른쪽 위에 버전 등록을 누르고

아까 만든 ait파일과 출시노트(~수정, ~추가 버전)을 작성하고 등록해주면 목록에 버전, 상태, 출시노트, 생성일, 테스트하기 / 검토요청하기 버튼이 뜹니다

테스트하기 버튼을 누르면 이런 화면이 뜨고, 큐알을 찍거나 링크를 복사해 모바일로 실행하면 토스앱 내에서 테스트할 수 있게 됩니다.

푸시발송하기 누르면 워크스페이스 내 멤버 모두가 토스 알람을 받게됩니다.

검토 요청을 누르게되면 체크리스트 체크 후 검토 요청하기를 누르면 반려사유보기 or 출시하기 버튼이 활성화되며 검토가 완료된 버전은 출시가 가능합니다. (토스 내 게임 앱에서 바로 출시가 됩니다!)

중간에 까먹은 명령어와 리더보드는 빠른 시일내에 올리도록 하겠습니다 ㅠ,ㅠ