1.5시간 안에 바이브 코딩으로 수익형 미니앱 개발하고 3000만 유저에게 런칭하기 with 앱인토스

by

요약

조코딩이 앱인토스를 활용하여 AI 사진관 앱을 기획부터 개발, 런칭, 수익화, 마케팅까지 1.5시간 만에 완성하는 전 과정을 담은 실전 튜토리얼입니다. 바이브 코딩과 AI 도구를 활용해 개발 초보자도 토스 앱 내 3000만 유저에게 서비스를 출시할 수 있는 방법을 상세히 소개합니다.

주요 내용

1. 앱인토스(Apps in Toss) 소개와 바이브 코딩

  • 바이브 코딩: AI 기반 프로그래밍 방식으로, Cursor, Windsurf, Replit 같은 AI 도구를 활용해 초보자도 쉽게 앱을 개발할 수 있는 시대
  • 앱인토스의 장점:
    • 토스 앱 3000만 유저에게 즉시 접근 가능
    • 별도 앱 설치 없이 토스 앱 내에서 실행
    • 앱스토어 심사 과정 생략
    • 토스의 디자인 시스템(TDS) 및 개발 도구 제공
    • 연령, 성별, 지역, 소비 내역 등 정교한 타겟 마케팅 가능

2. AI 사진관 앱 기획

  • 서비스 개요: 셀카 사진 한 장으로 전문 스튜디오 품질의 프로필 사진 생성
  • 기술 스택:
    • Google Gemini 2.5 Flash(나노바나) 모델 활용
    • 기존 스노우, 에픽처럼 여러 장 필요 없이 단 한 장으로 생성 가능
  • 수익 모델:
    • 보상형 광고(Rewarded Ad) 시청 후 AI 프로필 생성
    • 전면 광고(Interstitial Ad)를 폴백으로 구현
    • 스노우(348억원), 에픽(195억원) 연매출 사례 참고

3. 앱인토스 콘솔 설정 및 앱 등록

  • 콘솔 접속: https://apps-in-toss.toss.im
  • 워크스페이스 생성: 여러 앱을 관리할 수 있는 공간
  • 앱 정보 등록:
    • 한글/영어 이름, 앱 ID(app name), 로고, 고객 문의 이메일
    • 로고는 Gemini로 디자인 가이드를 참고해 생성 (600x600px)
    • 카테고리 선택 및 검색 키워드 등록
  • 검토 기간: 1~2 영업일 소요

4. 앱빌더를 활용한 디자인

  • 앱빌더: 토스 디자인 시스템(TDS) 기반 웹 디자인 툴
  • 주요 기능:
    • Quick Start 템플릿 제공 (인트로, 사진 업로드, 로딩 화면 등)
    • 컴포넌트 단위로 화면 구성
    • 플로우 연결 및 프로토타입 미리보기
    • 개발자 모드에서 React 코드 바로 확인 가능
  • 브랜딩 가이드: UX 라이팅, 그래픽, 이모지 등 토스 스타일 가이드 제공

5. 개발 환경 설정

  • 필수 도구:
    • 코드 에디터: Cursor AI (2주 무료 프로 플랜 제공)
    • Node.js: 자바스크립트 실행 환경
  • 클라이언트 환경 설정:
    • Android: Android Studio 설치, SDK Command-line Tools, ADB 환경 변수 등록
    • iOS: Xcode 설치, Command Line Tools, 시뮬레이터 설정
  • 샌드박스 앱 설치: 테스트용 토스 미니앱 APK/IPA 다운로드 및 설치

6. 웹뷰 방식 개발

  • 프로젝트 생성:
    • React + Vite 기반 웹 프로젝트
    • 앱인토스 웹 프레임워크(@toss-dev/appintoss-web-sdk) 설치
    • npx ait init 명령으로 초기 설정
  • 그레나이트 설정(ait.config.ts):
    • 앱 ID, 포트, 브리지 컬러 모드, 아이콘 URL
    • 실 기기 테스트용 호스트 IP 설정
  • TDS 라이브러리 연동: 토스 UI 컴포넌트 활용
  • 라우터 설정: React Router로 피처 단위 경로 분리 (예: /profile)

7. 백엔드 개발 및 Google Cloud 배포

  • Google AI Studio:
    • Gemini 나노바나 모델로 프롬프트 실험
    • “전문 사진 스튜디오에서 찍은 프로필 사진” 프롬프트 작성
    • Get Code로 TypeScript 샘플 코드 확인
  • Google Cloud Run:
    • 함수형 백엔드 서비스 (AWS Lambda 유사)
    • Node.js 22 런타임
    • 환경 변수로 Gemini API 키 설정
    • CORS 오리진 허용 목록 설정 (토스 앱, 로컬 테스트 주소)
  • API 키 관리: .env 파일로 환경 변수 분리

8. 기능 구현 및 테스트

  • 카메라/앨범 접근: 앱인토스 SDK 예제 코드 참고
  • 광고 시스템:
    • 보상형 광고 우선, 실패 시 전면 광고 폴백
    • 테스트용 광고 ID로 샌드박스 테스트
  • AI 이미지 생성:
    • 프론트엔드에서 사진 업로드
    • 백엔드 API로 Gemini 나노바나 호출
    • 생성된 이미지 다운로드 및 공유
  • 샌드박스 테스트: USB 연결 또는 Wi-Fi로 실 기기 테스트

9. 앱 번들 생성 및 출시 준비

  • 출시 가이드 확인:
    • 다크 패턴 방지 정책
    • 미니앱 브랜딩 가이드
    • 피처 단위 노출 (빅게임 앱은 기능별 라우팅 필수)
    • 확대/축소 비활성화 (user-scalable=no)
    • 네비게이션 바에 브랜드 로고 및 이름 표시
  • 브리지 뷰 설정: 토스 앱 진입 시 로딩 화면 (베이직/인버티드)
  • 아이콘 호스팅: Google Cloud Storage에 공개 URL로 업로드
  • 번들 빌드: npm run build로 .ait 파일 생성

10. 대표 관리자 지정 및 앱 버전 등록

  • 대표 관리자 신청: 워크스페이스 멤버 탭에서 사업자 인증 및 약관 동의
  • 앱 버전 등록:
    • .ait 파일 업로드
    • 출시 노트 작성 (사용자 비공개)
    • QR 코드로 실제 토스 앱에서 테스트
  • 피처 등록: AI 프로필 사진 등 기능별 이름 및 이동 URL 설정
  • 검토 요청: 토스팀 심사 후 승인/반려 (1~2 영업일)

11. 수익화 – 인앱 광고 설정

  • 광고 그룹 생성:
    • 보상형 광고: 광고 시청 후 AI 프로필 생성 보상
    • 전면 광고: 폴백용
  • 광고 네트워크: AdMob 자동 연동
  • 광고 ID 교체: 테스트 ID → 실제 광고 ID로 변경 후 재배포
  • 정산 정보 등록: 워크스페이스 설정에서 사업자 정산 정보 입력

12. 마케팅 및 그로스

  • 세그먼트 생성:
    • 나이, 성별, 지역, 통신사, OS 버전
    • 거래 정보 (카테고리별 소비 내역)
    • 금융 성향, 관심사
    • 유저 활동 (최근 미니앱 방문 등)
    • AND/OR 조건으로 정교한 타겟 설정
  • 푸시 알림 캠페인:
    • FCM(Firebase Cloud Messaging) 및 앱 알림 발송
    • 광고성/기능성 메시지 구분
    • 변수 활용 (유저 이름 등)
    • A/B 테스트 (5,000명 샘플링 후 전체 발송)
    • 연말까지 하루 10만 건 무료 발송 이벤트
  • 토스 홈 광고:
    • 토스 앱 메인 화면 상단 배너
    • 캠페인 → 소재 그룹 → 소재 구조
    • 클릭률 높은 템플릿 제공
    • 노출수, 클릭수, 클릭률, 부정 반응 지표 제공
    • 연말까지 무료 광고 이벤트

13. 기타 마케팅 도구

  • 프로모션: 특정 행동 시 토스 포인트 지급 (예: AI 프로필 생성하고 1,000원 받기)
  • 게임 프로필 및 리더보드: 게임 서비스 전용, 랭킹 및 친구 경쟁 기능
  • 공유 리워드: 친구 초대 시 게임 내 보상 지급 (무료 마케팅)

핵심 인사이트

  • 바이브 코딩의 힘: Cursor AI + ChatGPT/Claude로 개발 초보자도 1.5시간 만에 앱 출시 가능. 프롬프트만 잘 작성하면 디자인, 코드, 배포까지 자동화
  • 앱인토스의 파괴력: 앱스토어 심사 없이 토스 3000만 유저에게 즉시 접근. 연령, 소비 내역 등 정교한 데이터 기반 타겟 마케팅으로 광고 효율 극대화
  • 수익화 전략: 광고 단가는 기기/국가별로 차이. 보상형 광고는 단가가 높지만 전면 광고를 폴백으로 설정해 매출 안정성 확보
  • 피처 단위 설계의 중요성: 빅게임 앱은 기능별 라우팅 필수. 하나의 앱 안에 여러 서비스(예: 지브리 사진 변환, AI 프로필 등)를 추가해 확장 가능
  • 연말 무료 이벤트 활용: FCM 하루 10만 건, 토스 홈 광고 무료 제공. 이를 활용하면 초기 트래픽 확보에 수억 원 광고비 절약 가능

관련 자료

  • 앱인토스 개발자센터: https://developers-apps-in-toss.toss.im
  • 앱인토스 개발자커뮤니티: https://techchat-apps-in-toss.toss.im
  • AI 사진관 예제 코드: https://github.com/youtube-jocoding/app-in-toss-ai-photo-studio-example
  • Google Gemini 이미지 생성 가이드: https://ai.google.dev/gemini-api/docs/imagen
  • 조코딩 X 앱인토스 이벤트: 앱 정보 등록 시 스타벅스 쿠폰 및 서비스 수수료 무료 (2025년 12월까지)

Leave a Comment