AI로 미니앱 만들기

코딩 경험이 없어도 괜찮아요. AI와 함께라면 앱인토스 미니앱을 처음부터 끝까지 만들 수 있어요.
이 문서는 Claude Code, Cursor, Codex 등 AI 도구를 활용해 미니앱을 개발하는 전체 과정을 안내해요.

이런 분께 도움이 돼요

코딩을 전혀 해본 적 없는 분
앱 아이디어는 있지만 만드는 방법을 모르는 분
AI로 빠르게 미니앱을 만들어 보고 싶은 분

1. 준비하기

앱을 만들기 전에 딱 4가지만 준비하면 돼요.

1-1. 앱인토스 오픈 정책 확인하기

앱인토스 오픈 정책을 반드시 확인해 주세요.
정책을 지키지 않으면 앱이 승인되지 않거나 나중에 사용할 수 없게 될 수 있어요.

1-2. 콘솔에서 앱 등록하기

앱을 만들기 전에 앱인토스 콘솔에 앱 정보를 등록해야 해요.
앱 등록 가이드를 보고 그대로 따라 해주세요. 승인까지는 보통 영업일 기준 1~2일 정도 걸려요.

1-3. Node.js 설치하기

Node.js는 AI 도구(Claude Code, Codex 등)를 설치하고 실행하는 데 필요한 프로그램이에요.
Node.js 공식 사이트에서 다운로드해서 설치해 주세요.

윈도우 환경에서는 드롭다운에서 Windows를 선택해 주세요.

설치가 끝나면 터미널에서 아래 명령어를 입력해 보세요. 버전 숫자가 표시되면 정상적으로 설치된 거예요.

터미널이란

터미널은 컴퓨터에게 글로 명령을 내리는 창이에요. AI 도구도 이 창에서 실행해요.

맥은 Cmd + Space 를 누른 뒤 터미널을 검색해서 실행해요.
윈도우는 Win 키를 누른 뒤 PowerShell을 검색해서 실행해요.

bash

node -v

1-4. VS code 설치하기

VS Code(Visual Studio code)는 코드를 편집하는 프로그램이에요.
하단 터미널에서 AI에게 코드 수정을 요청할 수 있어요.
VS Code 공식 사이트에서 다운로드해서 설치해 주세요.

설치가 끝나면 VS Code를 실행해 주세요.

좌측 상단 익스플로러 버튼을 눌러 미니앱 프로젝트 폴더를 생성해요.

상단 메뉴에서 Terminal → New Terminal을 클릭하면 화면 하단에 터미널이 열려요.

2. AI 도구 설치하기

이제 앱을 대신 만들어 줄 AI 도구를 설치해요.
vscode의 터미널에 아래 내용을 그대로 복사해서 붙여 넣고 실행해 보세요.
처음 시작할 때는 Claude Code 사용을 추천해요.

Claude CodeCodex

bash

npm install -g @anthropic-ai/claude-code

bash

npm install -g @openai/codex

Mac 환경에서 권한 오류가 난다면 아래와 같이 입력해 주세요.

Claude CodeCodex

bash

sudo npm install -g @anthropic-ai/claude-code

bash

sudo npm install -g @openai/codex

설치가 끝나면 아래 명령어를 입력하고 버전 숫자가 표시되면 정상적으로 설치된 거예요.

Claude CodeCodex

bash

claude --version

bash

codex --version

3. 앱인토스 기능 연결하기

AI가 앱인토스 기능을 정확하게 사용할 수 있도록 MCP를 설치하고 연결하는 단계예요.

MCP가 왜 필요한가요?

AI는 기본적으로 앱인토스 SDK 사용법, API 구조 같은 도메인 지식을 알고 있지 않아요.
MCP를 연결하면 AI가 앱인토스 문서와 코드 예제를 자동으로 참조해서 훨씬 정확한 코드를 만들어줘요.

3-1. 패키지 관리자 설치하기

개발 도구를 쉽게 설치하기 위해 패키지 관리자가 필요해요.

Mac

brew.sh에서 코드를 복사해 터미널에 입력해 주세요.
Homebrew는 개발 도구를 쉽게 설치하고 관리할 수 있게 해주는 도구예요.

Password: 라고 표시되면 컴퓨터 비밀번호를 입력하고 엔터를 누르면 돼요. 입력하는 동안에는 아무것도 표시되지 않아요.

Window

터미널에서 아래 명령어를 입력해 주세요.

bash

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Invoke-RestMethod -Uri https://get.scoop.sh | Invoke-Expression

3-2. 앱인토스 MCP 설치하기

ax는 앱인토스(Apps in Toss)에서 만든 AI 기반의 MCP/CLI 툴킷으로,
앱인토스 미니앱 개발을 위한 문서화, 코드 예제, 프로젝트 생성, 빌드, 배포까지 전체 워크플로우를 지원해요.
아래 명령어를 입력해서 설치해 주세요.

macOSWindow

bash

brew tap toss/tap && brew install ax

bash

scoop bucket add toss https://github.com/toss/scoop-bucket.git
scoop install ax

3-3. AI 도구에 MCP 연결하기

사용하는 AI 도구에 맞게 MCP를 연결해 주세요.

Claude Code

bash

claude mcp add --transport stdio apps-in-toss ax mcp start

아래와 같이 표시되면 정상적으로 설치된 거예요.

Cursor를 사용한다면

아래 버튼을 클릭하면 자동으로 연결돼요.

버튼이 작동하지 않으면 .cursor/mcp.json 파일을 생성하거나 수정해 아래 내용을 추가해 주세요.

json

{
  "mcpServers": {
    "apps-in-toss": {
      "command": "ax",
      "args": ["mcp", "start"]
    }
  }
}

4. 프로젝트 만들기

앱을 만들기 전에 코드 파일들이 들어갈 공간, 즉 프로젝트를 먼저 만들어야 해요.
터미널에서 아래 명령어를 실행해 보세요.

bash

# {appName} 에는 개발자센터 콘솔에서 앱을 등록할 때 입력한 appName을 넣어 주세요. (예: npx create-ait-app my-mini-app)
npx create-ait-app {appName}

질문이 나오면 아래와 같이 선택해 주세요.

TDS(Toss Design System)를 사용할까요? → Y 입력 후 엔터
AI를 위한 skills를 추가할까요? → 화살표로 Claude Code 이동 후 엔터
예제 코드를 추가할까요? → 인앱 결제 / 인앱 광고 선택 후 엔터

아래와 같이 표시되면 프로젝트가 정상적으로 만들어진 거예요.

5. 앱 정보 입력하기

좌측의 granite.config.ts 파일을 열어 앱 이름과 주요 색상, 아이콘과 같은 기본 정보를 넣어요.

그리고 아래와 같이 코드를 수정해 주세요.
자세한 내용은 앱 설정 가이드를 참고해 주세요.

bash

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

export default defineConfig({
  appName: "my-mini-app", // 콘솔에 입력한 appName을 입력하세요.
  brand: {
    displayName: "앱 이름", // 콘솔에 입력한 앱 이름을 입력하세요.
    primaryColor: "#FF91D5", // 화면에 노출될 앱의 기본 색상으로 바꿔주세요.
    icon: "", // 콘솔에서 업로드한 이미지의 URL을 입력하세요.(콘솔의 앱 정보에서 업로드한 이미지를 우클릭해 링크 복사 후 넣어주세요)
  },
  web: {
    host: "localhost",
    port: 5173,
    commands: {
      dev: "vite dev",
      build: "vite build",
    },
  },
  permissions: [],
  outdir: "dist",
});

6. AI와 함께 미니앱 만들기

이제 본격적으로 AI와 함께 앱을 만드는 단계예요.
터미널에서 아래 명령어를 입력해서 AI를 실행하고, 원하는 기능을 입력해 보세요.

Claude CodeCodex

bash

claude

bash

codex

AI가 코드를 만들고, 파일을 수정하고, 실행까지 도와줘요.

AI에게 잘 요청하는 방법

구체적으로 말할수록 정확해요
"버튼 만들어줘"보다 "화면 중앙에 시작하기 버튼을 만들고, 누르면 로그인 페이지로 이동하게 해줘"처럼 말해요.
에러가 나오면 그대로 복사해서 보여줘요
에러 메시지를 그대로 AI에게 붙여 넣으면 알아서 고쳐줘요.

7. 샌드박스 앱으로 테스트하기

만든 앱 화면을 실시간으로 확인하고 싶다면 샌드박스 앱을 사용해요.
설치 방법과 실행 방법은 샌드박스 테스트하기 문서를 참고해 주세요.

앱이 원하는 대로 만들어졌다면 터미널에서 아래 명령어로 ait 파일을 생성해요.

bash

npm run build

그리고 아래 명령어를 입력해서 폴더를 연 다음에 ait 파일을 콘솔에 업로드 해주세요.

MacWindow

bash

open .

bash

explorer .

해당 ait 파일을 앱인토스 콘솔의 ‘앱 출시’ 메뉴에 업로드하면 앱을 테스트할 수 있어요.
테스트하는 방법은 가이드를 참고해 주세요.

8. 앱 출시하기

테스트가 끝나면 앱인토스 콘솔에서 검토를 요청해 주세요.
사용자에게 출시하기 전에는 반드시 출시 가이드를 참고해 주세요.

처음엔 낯설었던 터미널과 코드가 이제 조금은 친숙하게 느껴지셨으면 좋겠어요.
앞으로도 궁금한 게 생기면 언제든 AI에게 물어보며 만들어나가 보세요!

앱을 만든 후에는 유저에게 다가가기 위해 마케팅 가이드도 함께 참고해 보세요.

더 잘 활용하기

Cursor나 다른 IDE를 사용하는 개발자라면, 앱인토스 문서를 AI에 직접 연결해서 더 정확한 코드를 생성할 수 있어요.

Apps In Toss Skills 설치하기

Claude Code, Codex 같은 LLM 환경에서 앱인토스 공식 문서를 기반으로 답변을 받고 싶다면 Apps In Toss Skills를 설치해 주세요.
docs-search 스킬은 앱인토스 전체 문서를 키워드와 의미 유사도 기반으로 검색해줘요.

Claude CodeCodex

bash

/plugin marketplace add toss/apps-in-toss-skills
/plugin install knowledge-skills@apps-in-toss-skills

bash

# $skill-installer 실행 후 아래 프롬프트 입력
install GitHub repo toss/apps-in-toss-skills path apps-in-toss

설치 후 아래와 같이 사용할 수 있어요.

Search guide with docs-search "How to develop Apps In Toss Mini App"

Cursor @docs 등록하기

Cursor를 사용한다면 앱인토스 문서를 직접 인덱싱해서 @docs 명령으로 참조할 수 있어요.

Cursor 우측 상단 톱니바퀴(⚙️) 아이콘을 클릭해요.
왼쪽 메뉴에서 Indexing & Docs를 선택해요.
Docs 섹션에서 +Add Doc 버튼을 클릭해요.
아래 표에서 필요한 문서 URL을 추가해요.

유형	설명	URL
기본 문서 (권장)	핵심 기능 위주의 문서	`https://developers-apps-in-toss.toss.im/llms.txt`
전체 문서	모든 기능 포함, 토큰 소모 많음	`https://developers-apps-in-toss.toss.im/llms-full.txt`
예제 코드	코드 예제만 빠르게 참고	`https://developers-apps-in-toss.toss.im/tutorials/examples.html`
TDS (WebView)	TDS WebView 문서	`https://tossmini-docs.toss.im/tds-mobile/llms-full.txt`
TDS (React Native)	TDS React Native 문서	`https://tossmini-docs.toss.im/tds-react-native/llms-full.txt`

llms-1

등록 후에는 @docs로 명시적으로 참조할 수 있어요.

@docs 앱인토스 인앱광고 샘플 코드 작성해줘

AI로 미니앱 만들기 ​

1. 준비하기 ​

1-1. 앱인토스 오픈 정책 확인하기 ​

1-2. 콘솔에서 앱 등록하기 ​

1-3. Node.js 설치하기 ​

1-4. VS code 설치하기 ​

2. AI 도구 설치하기 ​

3. 앱인토스 기능 연결하기 ​

3-1. 패키지 관리자 설치하기 ​

3-2. 앱인토스 MCP 설치하기 ​

3-3. AI 도구에 MCP 연결하기 ​

4. 프로젝트 만들기 ​

5. 앱 정보 입력하기 ​

6. AI와 함께 미니앱 만들기 ​

7. 샌드박스 앱으로 테스트하기 ​

8. 앱 출시하기 ​

더 잘 활용하기 ​

Apps In Toss Skills 설치하기 ​

Cursor @docs 등록하기 ​

AI로 미니앱 만들기

1. 준비하기

1-1. 앱인토스 오픈 정책 확인하기

1-2. 콘솔에서 앱 등록하기

1-3. Node.js 설치하기

1-4. VS code 설치하기

2. AI 도구 설치하기

3. 앱인토스 기능 연결하기

3-1. 패키지 관리자 설치하기

3-2. 앱인토스 MCP 설치하기

3-3. AI 도구에 MCP 연결하기

4. 프로젝트 만들기

5. 앱 정보 입력하기

6. AI와 함께 미니앱 만들기

7. 샌드박스 앱으로 테스트하기

8. 앱 출시하기

더 잘 활용하기

Apps In Toss Skills 설치하기

Cursor @docs 등록하기