[2026] 앱인토스 플러터(Flutter) 출시하기 - ait 번들 생성

 

요즘 ‘앱인토스’라는 게 자주 눈에 띄더라구요😯

이게 뭘까 싶어서 찾아보니,
토스 앱 안에서 실행되는 미니앱을 직접 출시할 수 있는 플랫폼이었습니다!

그동안은 구글 플레이스토어에만 앱을 배포해봤는데,
토스 안에서도 앱을 서비스할 수 있다는 점이 꽤 흥미로워서
이미 만들어둔 앱을 앱인토스에 올려보게 됐습니다.

이번 글에서는 Flutter 앱을 앱인토스로 배포하는 과정을
처음부터 끝까지 정리해보려고 합니다.

같은 과정을 진행하시는 분들께 조금이나마 도움이 되었으면 좋겠습니다!

 

 

1. Flutter Web 빌드하기

flutter build web --release

 

• web 폴더가 없다면 web 폴더 생성하기 

flutter create .

 

 

 

 

2. Vite 프로젝트 생성

💡 왜 Vite를 사용하는가?

Flutter Web은 단독으로는 앱인토스에 바로 배포할 수 없습니다.
그래서 Web 기반 번들 환경(Vite)을 하나 만들고,
그 안에서 iframe으로 Flutter 앱을 띄우는 방식으로 구성합니다.

즉,
Flutter = 실제 앱 UI
Vite = 앱인토스 배포용 껍데기
라고 생각하면 이해하기 쉽습니다.

npm create vite@latest test-vite-project -- --template react-ts

 

Ok to proceed? (y) 가 뜨면 y 하고 엔터

 

React 선택하고 엔터

 

TypeScript 선택하고 엔터

 

Yes 선택하고 엔터

 

 

3. Vite 프로젝트에 앱인토스 SDK 설치

cd test-vite-project
npm install
npm install @apps-in-toss/web-framework

 

 

4. Vite 프로젝트의 public 폴더에 Flutter Web 빌드한 것들 넣기

• build/web안에 있는 내용 모두 복사(web 폴더 자체를 복사 하지 않기)

• test-vite-project/public에 flutter 폴더 생성하여 붙여 넣기

 

• index.html 파일은 test-vite-project/로 옮기기

 

5. Vite 프로젝트의 App.tsx 파일 수정

• test-vite-project/src의 App.tsx 파일 수정

function App() {
  return (
    <iframe
      src="/flutter/index.html"
      style={{
        width: "100%",
        height: "100vh",
        border: "none",
      }}
      title="flutter-app"
    />
  );
}

export default App;

 

6. Vite 프로젝트 테스트하기

cd test-vite-project
npm run dev

잘 실행되는 것을 확인해 줍니다.

 

7. .ait 번들 파일 생성

npx ait init
npm run build

빌드 전에 test-vite-project/granite.config.ts 파일의 설정이
토스 콘솔에 등록한 앱 정보와 동일한지 꼭 확인해 주세요.
(특히 앱 이름, 아이콘 등)

이 부분이 맞지 않으면 심사에서 반려될 수 있습니다.

자세한 설정 가이드는 아래 공식 문서를 참고하시면 됩니다 🙂
https://developers-apps-in-toss.toss.im/bedrock/reference/framework/UI/Config.html

앱인토스 개발자센터

 

 

 

8) 앱인콘솔 출시하기에 .ait 번들 파일 업로드

 

하루 정도 기다리니 승인되어 바로 출시할 수 있었습니다!!🎉​