이 내용이 도움이 되었나요?

바이브 코딩으로 미니앱 만들기 ​

코드를 몰라도 괜찮아요.
AI가 대신 코드를 작성하고, 필요한 설정을 하고, 파일도 만들어줘요.
우리는 "어떤 앱을 만들고 싶은지 말로 설명"만 하면 돼요.

이렇게 AI와 대화하면서 앱을 만드는 방식을 바이브 코딩이라고 해요.

이 가이드에서는 바이브 코딩을 통해 앱인토스 미니앱을 처음부터 끝까지 만드는 방법을 안내해요.

이 문서는 Claude Code와 Codex 같은 AI 도구를 사용해
미니앱을 만드는 과정을 따라갈 수 있도록 구성되어 있어요.

어떤 걸 써야 할지 고민된다면, Claude Code를 먼저 사용해보는 걸 추천해요.
더 자연스럽게 대화하면서 작업하기 쉬워요.

이 가이드는 이런 분들을 위한 내용이에요

  • 코딩을 한 번도 해본 적 없는 분
  • 아이디어는 있지만 어떻게 만들지 막막한 분
  • AI를 활용하여 빠르게 앱을 만들어보고 싶은 분

준비하기 ​

딱 2가지만 준비하면 시작할 수 있어요.

터미널은 이렇게 열어요

앞으로는 "터미널"이라는 창에서 명령어를 입력할 거예요.

  • 맥: Cmd + Space → 터미널 검색 → 실행
  • 윈도우: Win 키 → PowerShell 검색 → 실행

처음 써보는 분들도 그대로 따라 하면 괜찮아요.

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

먼저 확인해주세요

앱을 만들기 전에 앱인토스 오픈 정책을 꼭 확인해 주세요.
정책을 지키지 않으면 앱이 반려되거나 운영이 제한될 수 있어요.

콘솔에서 앱 등록하기 문서를 따라 미니앱을 먼저 등록해 주세요.
영업일 기준 1~2일 정도 승인 시간이 필요해요.

2. Node.js 설치하기 ​

AI가 명령어를 실행하려면 Node.js가 필요해요.
Node.js 공식 사이트에서 LTS 버전을 다운로드해서 설치해 주세요.

설치가 끝나면 터미널에서 아래 명령어를 입력해 보세요.
버전 숫자가 나오면 정상이에요.

sh
node -v

1단계: AI 도구 설치하기 ​

이제 AI 코딩 도구를 설치할게요.

터미널에서 아래 명령어를 그대로 실행하세요.

sh
npm install -g @anthropic-ai/claude-code
sh
npm install -g @openai/codex

설치가 끝나면 잘 설치됐는지 확인해요.

sh
claude --version
sh
codex --version

처음 실행하면 로그인해요

  • Claude Code: claude 입력 → 브라우저에서 로그인
  • Codex: codex 입력 → 로그인 진행

한 번만 로그인하면 계속 사용할 수 있어요.

2단계: 앱인토스 기능 연결하기 ​

AI가 앱인토스 기능을 잘 사용할 수 있도록 연결해 줄게요.

ax 설치하기 ​

sh
brew tap toss/tap && brew install ax
sh
scoop bucket add toss https://github.com/toss/scoop-bucket.git
scoop install ax

설치 중 오류가 나면?
  • 맥: Homebrew가 없다면 brew.sh에서 설치해 주세요.
  • 윈도우: Scoop이 없다면 아래 명령어를 입력하세요.
sh
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Invoke-RestMethod -Uri https://get.scoop.sh | Invoke-Expression

AI에 연결하기 ​

sh
claude mcp add --transport stdio apps-in-toss ax mcp start
sh
# 1. 터미널에서 codex를 실행하세요.
codex

# 2. Codex 안에서 아래를 순서대로 입력하세요.
$skill-installer
install GitHub repo toss/apps-in-toss-skills path apps-in-toss

3단계: 프로젝트 만들기 ​

이제 진짜 앱을 만들어볼게요.

작업할 폴더로 이동한 뒤 아래 명령어를 입력하세요.

터미널에서 명령어 한 줄이면 샘플 프로젝트가 만들어져요.

sh
npx create-ait-app my-mini-app

몇 가지 질문이 나오면 추천대로 선택하면 돼요.

항목추천 선택
TDS (토스 디자인 시스템)Y
AI 도구claude 또는 codex
예제 코드space를 눌러 필요한 기능을 선택하세요 (인앱결제, 인앱광고)

대화형 프롬프트 없이 한 줄로 세팅하고 싶다면
sh
npx create-ait-app my-mini-app --inline --pm npm --tds --skills --ai claude --sample iap,iaa
sh
npx create-ait-app my-mini-app --inline --pm npm --tds --skills --ai codex --sample iap,iaa
Claude에게 직접 맡기고 싶다면

프로젝트 폴더에서 claude를 실행하고 아래 프롬프트를 입력하세요.

앱인토스 웹뷰 미니앱 프로젝트를 처음부터 세팅해줘.
Vite + React + TypeScript로 만들고,
앱인토스 SDK(@apps-in-toss/web-framework)랑 TDS(@toss/tds-mobile)도 설치하고,
npx ait init까지 해줘.

Claude가 직접 명령어를 실행하고 파일을 만들어 줘요. 허용만 눌러주면 돼요.

4단계: 미니앱 설정하기 ​

콘솔에서 등록한 앱 정보로 설정해 주세요.

프로젝트 폴더에서 granite.config.ts 파일을 열어 앱 이름, 아이콘 등을 입력하면 돼요.
공통 설정 문서를 참고해 설정해 주세요.

sh
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",
});

5단계: AI와 함께 미니앱 만들기 ​

이제 가장 중요한 단계예요.

AI에게 원하는 앱을 말로 설명해 주세요.

sh
claude
sh
codex

이렇게 실행한 뒤, 원하는 기능을 입력해요.

>|

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

이렇게 말해보세요

  • 구체적으로 말할수록 좋아요.
    "버튼 만들어줘" 보다
    "화면 중앙에 시작하기 버튼을 만들고, 누르면 로그인 페이지로 이동하게 해줘"처럼 말하면 더 정확해요.

  • 에러가 나도 괜찮아요.
    에러 메시지를 그대로 AI에게 보여주면 알아서 고쳐줘요.

6단계: 빌드하고 업로드하기 ​

앱이 완성되면 아래 명령어를 실행하세요.

sh
npm run build

빌드가 완료되면 프로젝트 폴더에 .ait 파일이 생성돼요.
토스앱 테스트하기 문서를 참고하여 콘솔에 업로드하면 끝이에요.

7단계: 미니앱 출시하기 ​

토스앱에서 최종 테스트를 마쳤다면, 앱인토스 콘솔에서 검토를 요청하고 미니앱을 출시할 수 있어요.
미니앱 출시 문서를 참고하여 미니앱을 출시하세요.