바이브 코딩으로 미니앱 만들기
이 문서에서는 코딩을 한 번도 해보지 않은 분도 앱인토스 미니앱을 끝까지 만들 수 있도록 단계별로 안내해요.
사람과 대화하듯이 설명하면 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을 검색해서 실행해요.
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 사용을 추천해요.
npm install -g @anthropic-ai/claude-codenpm install -g @openai/codexMac 환경에서 권한 오류가 난다면 아래와 같이 입력해 주세요.
sudo npm install -g @anthropic-ai/claude-codesudo npm install -g @openai/codex설치가 끝나면 아래 명령어를 입력하고 버전 숫자가 표시되면 정상적으로 설치된 거예요.
claude --versioncodex --version
3. 앱인토스 기능 연결하기
이 단계는 AI가 앱인토스 기능을 잘 사용할 수 있게 준비하는 과정이에요.
3-1. 패키지 관리자 설치하기
개발 도구를 쉽게 설치하기 위해 패키지 관리자가 필요해요.
Mac
brew.sh에서 코드를 복사해 터미널에 입력해 주세요.
Homebrew는 개발 도구를 쉽게 설치하고 관리할 수 있게 해주는 도구예요.
Password: 라고 표시되면 컴퓨터 비밀번호를 입력하고 엔터를 누르면 돼요. 입력하는 동안에는 아무것도 표시되지 않아요.
Window
터미널에서 아래 명령어를 입력해 주세요.
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Invoke-RestMethod -Uri https://get.scoop.sh | Invoke-Expression3-2. 앱인토스 MCP 설치하기
ax는 앱인토스(Apps in Toss)에서 만든 AI 기반의 MCP/CLI 툴킷으로,
앱인토스 미니앱 개발을 위한 문서화, 코드 예제, 프로젝트 생성, 빌드, 배포까지 전체 워크플로우를 지원해요.
아래 명령어를 입력해서 설치해 주세요.
brew tap toss/tap && brew install axscoop bucket add toss https://github.com/toss/scoop-bucket.git
scoop install ax3-3. Claude MCP 연결하기
아래 명령어를 입력해서 claude mcp를 연결해 주세요.
claude mcp add --transport stdio apps-in-toss ax mcp start아래와 같이 표시되면 정상적으로 설치된 거예요.
4. 프로젝트 만들기
앱을 만들기 전에 코드 파일들이 들어갈 공간, 즉 프로젝트를 먼저 만들어야 해요.
터미널에서 아래 명령어를 실행해 보세요.
# {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 파일을 열어 앱 이름과 주요 색상, 아이콘과 같은 기본 정보를 넣어요.
그리고 아래와 같이 코드를 수정해 주세요.
자세한 내용은 앱 설정 가이드를 참고해 주세요.
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를 실행하고, 원하는 기능을 입력해 보세요.
claudecodex
AI가 코드를 만들고, 파일을 수정하고, 실행까지 도와줘요.
AI에게 잘 요청하는 방법
- 최대한 구체적으로 말해요
- "버튼 만들어줘" 보다 "화면 중앙에 시작하기 버튼을 만들고, 누르면 로그인 페이지로 이동하게 해줘"처럼 말하면 더 정확해요.
- 에러가 나오면 그대로 복사해서 보여줘요
- 에러 메시지를 그대로 AI에게 보여주면 알아서 고쳐줘요.
7. 테스트하고 완성하기
만든 앱 화면을 실시간으로 보면서 수정하고 싶다면 개발 환경 세팅 가이드를 따라해 주세요.
앱이 원하는 대로 만들어졌다면 터미널에서 아래 명령어로 ait 파일을 생성해요.
npm run build
그리고 아래 명령어를 입력해서 폴더를 연 다음에 ait 파일을 콘솔에 업로드 해주세요.
open .explorer .
해당 ait 파일을 앱인토스 콘솔의 ‘앱 출시’ 메뉴에 업로드하면 앱을 테스트할 수 있어요.
테스트하는 방법은 가이드를 참고해 주세요.
8. 앱 출시하기
테스트가 끝나면 앱인토스 콘솔에서 검토를 요청해 주세요.
사용자에게 출시하기 전에는 반드시 출시 가이드를 참고해 주세요.
처음엔 낯설었던 터미널과 코드가 이제 조금은 친숙하게 느껴지셨으면 좋겠어요.
앞으로도 궁금한 게 생기면 언제든 AI에게 물어보며 만들어나가 보세요!
앱을 만든 후에는 유저에게 다가가기 위해 마케팅 가이드도 함께 참고해 보세요.