토스 앱인토스(3,000만 유저에게 닿는 미니앱 개발) - 간단한 소개

안녕하세요! 갓대희 입니다. :- )

오늘은 "앱인토스" 에 대해 써보려고 한다.

 

다만 앱인토스는 사업자인 경우에 지금 가능한 것 같아 직접 만들어 보진 못했지만,

1인 창업자가 늘어나고 있는 시점에 하나의 트렌드라고 생각되어 간단하게 공식 사이트의 내용을 토대로 소개해보려 한다. 

 

앱인토스란?

앱인토스는 토스 앱 내에서 외부 서비스가 별도 설치 없이 작동하는 '앱인앱(App-in-App)' 구조의 미니앱 플랫폼이다. 개발자와 기업은 자신의 서비스를 미니앱 형태로 개발하여 토스의 3,000만 누적 사용자에게 직접 노출할 수 있다.

특징

• 즉시 접근: 앱 설치 과정 없이 토스 앱 내에서 바로 실행
• 통합 인증: 토스 계정으로 별도 가입 절차 없이 서비스 이용
• 결제 연동: 토스페이를 통한 원스톱 결제 경험
• 개발 도구 제공: TDS(토스 디자인 시스템), TUBA(분석 도구), SDK 등

 

왜 지금 미니앱인가? 앱 생태계의 패러다임은 변화중

앱인토스는 단순한 신기능이 아니라, App Store와 Google Play로 양분된 앱 생태계에 근본적인 변화를 가져올 수있는 생태계 이다.

최근 몇 년간, 전 세계적으로 앱스토어 독점 규제와 미니앱 생태계 확산이라는 두 가지 큰 흐름이 동시에 진행되고 있다.

 

앱스토어 독점 규제의 가속화

지역	규제 내용	시행 시기
EU (유럽연합)	디지털시장법(DMA) 발효	2022년 11월
EU (유럽연합)	Apple/Google 등 6개 기업을 "게이트키퍼"로 지정, 제3자 앱마켓 및 결제 시스템 의무화	2023년 9월
일본	디지털시장 경쟁 회의 최종 보고서 발표, 빅테크 앱마켓 독점 금지 권고	2023년 6월
미국	NTIA가 Apple/Google 앱마켓 생태계를 불공정하다고 확인, 정책 개선 권고	2023년~

 

글로벌 미니앱 생태계의 성공 사례

🇨🇳 WeChat (위챗) - 중국

• 300만+ 미니프로그램 운영 중 (2024년 기준)
• 9억 5천만 월간 활성 사용자 (MAU, 2024년 기준)
• Apple App Store / Google Play Store와 동등한 앱 생태계 구축
• 메시징 앱에서 슈퍼앱 플랫폼으로 진화 (2018년 50만 개 → 2024년 300만 개)
• 중국 모바일 생태계의 핵심 인프라로 자리매김

🇨🇳 Alipay (알리페이) - 중국

• 12만+ 미니프로그램 (2019년 기준, 현재는 더 많을 것으로 추정)
• WeChat과 함께 중국 모바일 생태계의 양대 축
• 음식 배달, 차량 공유, 금융 서비스 등 통합 제공

 

미니앱이 가져올 변화

개발자 관점

1. 앱스토어 수수료 회피: Google Play 15-30%, App Store 15-30% 수수료를 내지 않고 직접 사용자에게 도달
2. 배포 장벽 제거: 앱스토어 심사 없이 즉시 배포 가능
3. 빠른 업데이트: 앱스토어 심사 기간(평균 1-3일) 없이 실시간 업데이트
4. 낮은 진입 장벽: 네이티브 앱 개발 없이 웹 기술로 시작 가능

사용자 관점

1. 설치 부담 제로: 수십 MB ~ 수 GB 앱 다운로드 없이 즉시 사용
2. 통합 계정: 앱마다 회원가입할 필요 없음
3. 일관된 UX: 플랫폼의 디자인 시스템으로 통일된 경험

💡 인사이트
앱인토스는 단순히 "토스 안의 작은 앱"이 아니라, App Store/Google Play의 실질적인 대안 생태계가 될 잠재력이 있다. WeChat이 중국에서 이미 증명했듯이, 잘 설계된 미니앱 플랫폼은 전통적인 앱스토어와 대등한 규모로 성장할 수 있다고 주장 한다. 토스의 3,000만 사용자 기반과 강력한 금융 인프라, 그리고 한국 정부의 앱마켓 독점 규제 움직임이 맞물리면서, 앱인토스는 한국 앱 생태계의 게임 체인저가 되고자 하는것으로 보인다.

 

주목해야 할 이유?

토스피드 공식 발표와 여러 언론 보도에 따르면, 앱인토스는 출시 후 빠른 성장세를 보이며 한국 미니앱 시장의 선도주자로 자리잡고 있습니다.

지표	성과	출처
CBT 시작	2025년 7월	언론 보도
100일 성과	제휴 앱 200개 돌파	토스 공식 발표
누적 사용자	약 260만 명	토스 공식 발표
누적 페이지뷰	약 1,500만 회	토스 공식 발표
평균 세션 시간	약 6.7분	토스 공식 발표

 

출처 : https://toss.im/tossfeed/article/outsight-appsintoss

 

성공 사례

✅ 용사단 키우기 (SuperJoy)
앱인토스 출시 후 1.5개월 만에 80만 명의 누적 사용자를 달성했습니다. 이는 기존 앱마켓에서 4년이 걸린 수치이다.

✅ 안전집사 (PropTech)
신규 고객의 99%를 앱인토스를 통해 확보했으며, 월 매출이 40배 증가했다. 전체 트래픽의 90%가 앱인토스에서 발생한다.

✅ 모인 (해외송금 핀테크)
앱인토스 출시 후 신규 가입자가 약 40% 증가했다.

공식 문서 출처
위 성공 사례는 토스피드 공식 기사와 2025년 10월 15일 토스 공식 발표 자료를 기반으로 작성되었다.
토스피드 - 앱인토스 소개

 

 - 이외에 몇가지 리스트를 살펴보면 다양한 앱들이 출시 되어 있는 것을 볼 수 있다. 

 

경쟁 플랫폼과의 차이점

현재, 한국의 주요 플랫폼들의 미니앱 전략은 다음과 같이 구분된다.

플랫폼	미니앱 지원	특징
토스 앱인토스	완전 개방형	외부 개발자/기업이 자유롭게 미니앱 등록 가능
카카오톡	제한적	자체 서비스 중심 (카카오페이, 선물하기 등)
네이버	제한적	검색/쇼핑/영상 중심의 슈퍼앱 형태
당근마켓	부분 개방	"당근미니" 통해 일부 서비스 제공

💡 차별점
토스 앱인토스는 한국에서 가장 적극적으로 개방형 미니앱 플랫폼 생태계를 구축하고 있는 서비스이다. 외부 개발자가 자유롭게 신청하고 개발할 수 있는 환경을 제공하며, 중국의 위챗(WeChat) 미니프로그램과 유사한 모델을 추구한다.

 

개발자에게 주는 가치

토스피드 공식 기사에 따르면, 앱인토스는 "누구나 만들고 누구나 성공할 수 있는 미니앱 생태계"를 비전으로 제시하며, 궁극적으로는 "파트너사가 앱인토스만으로 기업공개(IPO)까지 성공"할 수 있도록 돕는 것을 목표로 한다고 한다.

 

규모별 맞춤 이점

1인 개발자·초기 스타트업

• 자체 구축이 어려운 마케팅 도구와 데이터 분석을 초기부터 활용
• 토스 인증과 토스페이로 복잡한 회원가입·결제 인프라 생략
• TDS(토스 디자인 시스템)를 통한 빠른 UI 개발

중간 규모 기업

• 신규 서비스 검증 시 복잡한 준비와 초기 비용 없이 빠른 시장 검증
• TUBA(토스 사용자 행동 분석 도구)로 아침에 실험 설정, 저녁에 결과 확인
• 2,900만 사용자 중 타겟팅 푸시로 적합한 고객에게 직접 도달

기확립 브랜드

• 인앱 결제와 광고를 통한 추가 수익화 채널 확보
• 설치 장벽이 높았던 기존 멤버십 서비스의 전환율 개선
• 재사용 시 브랜드명 우선 노출로 인지도 강화

 

개발 시작하기: 사전 준비

앱인토스 개발자센터 공식 문서에 따르면, 미니앱 개발을 시작하기 위해서는 다음 준비 사항이 필요하다.

⚠️ 필수 자격 요건
• 만 19세 이상 토스 비즈니스 회원
• 본인 명의의 토스앱 로그인
• 사업자 등록 (개인 또는 법인)

 

등록 절차

4단계

1. 회원가입: 앱인토스 콘솔에 토스 비즈니스 계정으로 접속
2. 워크스페이스 설정: 사업자번호당 1개 워크스페이스 생성 (팀/프로젝트명 설정)
3. 멤버 초대: 관리자 또는 구성원 권한으로 팀원 초대
4. 미니앱 등록: '앱' 메뉴에서 '+등록하기'로 앱 등록 (개발 전 등록 가능)

 

필수 제출 정보

항목	요구사항
앱 이름	서비스 성격이 드러나는 직관적인 이름
appName (ID)	영문 소문자, 숫자, 대시(-) 사용, 등록 후 수정 불가
앱 로고	정사각형 600×600px, PNG, 배경색 필수, 다크모드 호환
사용 연령	현재 만 19세 이상만 지원
고객센터	이메일, 연락처, 채팅 상담 주소

🚨 주의사항
• appName은 등록 후 절대 수정 불가하므로 신중히 작성
• 앱 삭제 불가이므로 테스트용/라이브용 구분 필요
• 검토 기간: 영업일 기준 1~2일 소요
• 사업자 등기부등본은 3개월 이내 발급본 필수

 

개발 방식 선택하기

공식 개발자센터에 따르면, 앱인토스는 세 가지 개발 방식을 지원한다. 프로젝트 특성과 팀 역량에 따라 적합한 방식을 선택할 수 있다.

항목	WebView	React Native	Unity
런타임	웹 브라우저	Hermes (JS 엔진)	Unity 엔진
적합한 용도	기존 웹 서비스 포팅	네이티브 수준 성능	게임 개발
개발 난이도	낮음	중간	높음
번들 형식	.html, .js, .css	.ait 패키지	.ait 패키지 (100MB 제한)
라우팅	웹 라우터	파일 기반 자동	Unity 씬

 

개발 시작 전 필수 준비사항

본격적인 개발에 앞서 반드시 완료해야 하는 필수 준비 단계가 있다. 이 단계를 건너뛰면 개발 중 인증 오류나 테스트 실패가 발생할 수 있다.

1. 사업자 등록 및 토스 비즈니스 가입

필수 요건 (공식 발표 기준)

• 만 19세 이상
• 토스 비즈니스 회원 (사업자 인증 필수)
• 사업자 등록 (개인사업자 또는 법인사업자)

※ 토스 비즈니스 가입: https://business.toss.im

 

2. 앱인토스 콘솔에서 앱 등록

콘솔 등록 절차

1. 콘솔 접속: https://console-apps-in-toss.toss.im
2. 앱 생성: 앱 이름(appName)을 kebab-case 형식으로 등록
   • 예시: my-toss-miniapp, sample-game-app
   • 불가: MyApp (대문자), my_app (언더스코어)
3. 앱 정보 입력: 서비스 설명, 카테고리, 대표 이미지 등
4. Client ID 발급: 로컬 개발 및 API 연동에 필요

⚠️ 중요: granite.config.ts의 appName은 콘솔에 등록한 앱 이름과 정확히 일치해야 한다. 불일치 시 "앱을 찾을 수 없음" 오류가 발생한다.

 

3. 로컬 개발 환경 테스트 준비

테스트 방법

로컬 개발 서버(npm run dev)를 실행한 후, 다음 방법 중 하나로 테스트할 수 있다:

• 샌드박스 앱 사용 (권장)
  • 개발자센터에서 제공하는 별도 테스트 앱
  • 로컬 개발 서버와 연결하여 실시간 테스트 가능
  • intoss://your-app-name 스킴으로 앱 실행
• 토스 앱 직접 테스트
  • 개발 중인 앱을 토스 앱에서 바로 테스트
  • 실제 사용자 환경과 동일한 조건 확인

💡 참고: Android 기기에서 테스트 시 adb reverse 명령어로 포트 포워딩이 필요하다 (자세한 내용은 문제 해결 가이드 참고).

 

첫 미니앱 만들기: Hello World

위 준비사항을 완료했다면, 이제 실제로 따라할 수 있는 Hello World 예제를 만들어보는 방법 이다.

React Native 예제는 공식 문서로 검증되었다.

 

WebView 버전 Hello World

1. 프로젝트 생성 및 설정

Vite + React 프로젝트 생성:

npm create vite@latest my-toss-miniapp -- --template react
  cd my-toss-miniapp
  npm install

 

앱인토스 web-framework 설치:

# npm, pnpm, yarn 중 선택
  npm install @apps-in-toss/web-framework
  # 또는
  pnpm install @apps-in-toss/web-framework
  # 또는
  yarn add @apps-in-toss/web-framework

 

초기화:

npx ait init
  
  # 프롬프트에 따라 입력:
  # - Framework: web-framework 선택
  # - App name: my-toss-miniapp (콘솔 등록 이름과 동일)
  # - Dev command: vite
  # - Build command: vite build
  # - Port: 5173

2. src/App.jsx 작성

토스 Bridge API를 사용하는 Hello World 예제:

import { useEffect, useState } from 'react'
import { bridge } from '@apps-in-toss/web-framework'
import './App.css'

function App() {
  const [theme, setTheme] = useState('light')
  const [userInfo, setUserInfo] = useState(null)

  useEffect(() => {
    // 토스 테마 가져오기
    bridge.getTheme().then(setTheme)

    // 사용자 정보 가져오기 (옵션)
    bridge.getUserInfo().then(info => {
      setUserInfo(info)
    }).catch(err => {
      console.log('사용자 정보를 가져올 수 없습니다:', err)
    })
  }, [])

  return (
    <div style={{
      padding: '20px',
      backgroundColor: theme === 'dark' ? '#1a1a1a' : '#ffffff',
      color: theme === 'dark' ? '#ffffff' : '#333333',
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>
        👋 Hello Apps in Toss!
      </h1>
      <p style={{ marginBottom: '10px' }}>
        현재 테마: <strong>{theme}</strong>
      </p>
      {userInfo && (
        <p style={{ marginBottom: '10px' }}>
          사용자 ID: <strong>{userInfo.userId}</strong>
        </p>
      )}
      <button
        onClick={() => {
          bridge.showToast('Hello World 버튼 클릭!')
        }}
        style={{
          marginTop: '20px',
          padding: '12px 24px',
          backgroundColor: '#3182F6',
          color: 'white',
          border: 'none',
          borderRadius: '8px',
          fontSize: '16px',
          cursor: 'pointer'
        }}
      >
        토스트 메시지 띄우기
      </button>
    </div>
  )
}

export default App

※ 이 코드는 토스 앱 테마를 자동으로 감지하고, bridge API로 토스트 메시지를 띄우는 예제

 

React Native (Bedrock) 버전 Hello World

1. Granite 프로젝트 생성

# npm, pnpm, yarn 중 선택
  npm create granite-app
  # 또는
  pnpm create granite-app
  # 또는
  yarn create granite-app
  
  # 프롬프트에 따라 입력:
  # - App name: my-toss-rn-app (kebab-case 형식)
  # - Dev tools: prettier+eslint 또는 biome 선택

 

프로젝트로 이동 및 앱인토스 프레임워크 설치:

cd my-toss-rn-app
  npm install @apps-in-toss/framework
  npx ait init
  
  # 프롬프트에 따라 입력:
  # - Framework: bedrock 선택
  # - App name: my-toss-rn-app (콘솔 등록 이름과 동일)

2. granite.config.ts (자동 생성됨)

※ 공식 튜토리얼 기반 정확한 코드

import { appsInToss } from '@apps-in-toss/framework/plugins';
  import { defineConfig } from '@granite-js/react-native/config';
  
  export default defineConfig({
    appName: 'my-toss-rn-app',
    plugins: [
      appsInToss({
        brand: {
          displayName: 'My Toss RN App',
          primaryColor: '#3182F6',
          icon: null,
          bridgeColorMode: 'basic',
        },
        permissions: [],
      }),
    ],
  });

3. app/index.tsx 작성

※ Expo Router 기반 완전한 예제 (공식 문서 검증됨)

import { useState, useEffect } from 'react'
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import { useBridge } from '@apps-in-toss/framework'

export default function HomeScreen() {
  const bridge = useBridge()
  const [theme, setTheme] = useState('light')

  useEffect(() => {
    // 토스 테마 가져오기
    bridge.getTheme().then((themeValue) => {
      setTheme(themeValue)
    })
  }, [bridge])

  const handlePress = () => {
    bridge.showToast({
      message: 'Hello World 버튼이 클릭되었습니다!',
      duration: 'short'
    })
  }

  const isDark = theme === 'dark'

  return (
    <View style={[
      styles.container,
      { backgroundColor: isDark ? '#1a1a1a' : '#ffffff' }
    ]}>
      <Text style={[
        styles.title,
        { color: isDark ? '#ffffff' : '#333333' }
      ]}>
        👋 Hello Apps in Toss!
      </Text>
      <Text style={[
        styles.subtitle,
        { color: isDark ? '#cccccc' : '#666666' }
      ]}>
        현재 테마: {theme}
      </Text>
      <TouchableOpacity
        style={styles.button}
        onPress={handlePress}
      >
        <Text style={styles.buttonText}>
          토스트 메시지 띄우기
        </Text>
      </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  subtitle: {
    fontSize: 16,
    marginBottom: 10,
  },
  button: {
    marginTop: 20,
    paddingVertical: 12,
    paddingHorizontal: 24,
    backgroundColor: '#3182F6',
    borderRadius: 8,
  },
  buttonText: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: '600',
  },
})

※ useBridge 훅으로 토스 Bridge API를 사용하며, StyleSheet로 React Native 네이티브 스타일을 적용한다.

 

핵심 기능 통합하기

 mTLS 인증서 설정

공식 개발자센터에 따르면, 앱인토스 API를 사용하려면 mTLS 기반의 서버 간 통신이 반드시 필요하다.

인증서는 콘솔에서 직접 발급받을 수 있다.

⚠️ mTLS가 필수인 기능
• 토스 로그인
• 토스 페이
• 인앱 결제
• 기능성 푸시/알림
• 프로모션 (토스 포인트)

 

CORS 설정

다음 도메인을 서버의 Origin 허용 목록에 등록해야 한다.

https://<appName>.apps.tossmini.com           # 실제 서비스
  https://<appName>.private-apps.tossmini.com   # QR 테스트

백엔드 프레임워크별 CORS 설정 예제

Node.js + Express:

const cors = require('cors');
const express = require('express');
const app = express();

app.use(cors({
  origin: [
    'https://my-app.apps.tossmini.com',
    'https://my-app.private-apps.tossmini.com'
  ],
  credentials: true
}));

 

Python + Flask:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins=[
    "https://my-app.apps.tossmini.com",
    "https://my-app.private-apps.tossmini.com"
], supports_credentials=True)

 

Python + FastAPI:

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=[
        "https://my-app.apps.tossmini.com",
        "https://my-app.private-apps.tossmini.com"
    ],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

※ 프로덕션 환경에서는 allow_methods와 allow_headers를 필요한 항목만 명시하는 것이 보안상 권장된다.

 

토스 인증 & 토스페이 통합

토스피드 기사에 따르면, 토스 인증과 토스페이 통합은 가입·결제 과정을 일원화하여 전환율을 크게 개선할 수 있는 핵심 기능이다.

통합의 이점
• 별도 회원가입 절차 없이 토스 계정으로 즉시 로그인
• 복잡한 결제 UI 개발 없이 토스페이로 원클릭 결제
• 사용자 이탈률 감소 및 전환율 향상
• 결제 보안 및 PCI-DSS 인증 이슈 해결

구현 예제 (프론트엔드)

토스 로그인 예제:

// 토스 로그인 버튼 클릭 시
async function handleTossLogin() {
  try {
    const authResult = await bridge.auth.login({
      scope: ['profile', 'email']
    })

    // 백엔드에 토큰 전송 및 검증 (mTLS 필요)
    const response = await fetch('/api/auth/verify', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        authToken: authResult.token,
        userId: authResult.userId
      })
    })

    const userData = await response.json()
    console.log('로그인 성공:', userData)

  } catch (error) {
    console.error('로그인 실패:', error)
  }
}

 

토스페이 결제 예제:

// 토스페이 결제 요청
async function handlePayment(amount: number, orderName: string) {
  try {
    const paymentResult = await bridge.payment.request({
      amount: amount,
      orderId: generateOrderId(),
      orderName: orderName,
      successUrl: '/payment/success',
      failUrl: '/payment/fail'
    })

    // 결제 성공 시 백엔드에서 최종 검증 (mTLS 필요)
    const response = await fetch('/api/payment/verify', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        paymentKey: paymentResult.paymentKey,
        orderId: paymentResult.orderId,
        amount: amount
      })
    })

    const verifiedPayment = await response.json()
    console.log('결제 검증 완료:', verifiedPayment)

  } catch (error) {
    console.error('결제 실패:', error)
  }
}

function generateOrderId() {
  return `ORDER_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
}

※ 실제 프로덕션 환경에서는 백엔드에서 mTLS 인증서를 사용한 토스 API 호출로 토큰 및 결제를 검증해야 한다.

📌 [실제 테스트 필요한 사항]
• 토스 인증 SDK의 정확한 API 호출 방법
• 토스페이 결제 연동 시 필요한 파라미터 구조
• mTLS 인증서 설정의 구체적인 서버 구성 방법

이러한 세부 구현 사항은 공식 개발자센터의 API 레퍼런스를 참고하자.

 

배포 및 출시 프로세스

1. 피처(Feature) 등록

공식 문서에 따르면, 비게임 앱은 "피처 단위로 노출"되며 최대 3개까지 등록할 수 있다. 피처명은 "~하기" 형태를 권장합니다.

피처 등록 예시

• 쇼핑하기
• 예약하기
• 포인트 적립하기

 

2. .ait 파일 업로드

배포 절차

1. npm run build로 .ait 파일 생성
2. 콘솔에서 .ait 파일 업로드
3. QR 코드로 토스앱 실제 환경에서 테스트
4. 검수 요청 제출 (영업일 기준 1~2일 소요)
5. 승인 후 라이브 출시

 

3. 환경별 주의사항

환경	통신 프로토콜	비고
샌드박스	HTTP 허용	로컬 개발 및 테스트
실제 서비스	HTTPS 필수	보안 인증서 필요

 

문제 해결 가이드 (Troubleshooting)

개발 중 자주 발생하는 문제와 해결 방법을 정리했다. 공식 개발자센터와 커뮤니티에서 확인된 내용을 기반으로 작성되었다.

 

1. ADB 연결 실패 (Android)

증상
npm run dev 실행 후 Android 기기에서 미니앱이 로드되지 않음

해결 방법
1. USB 디버깅이 활성화되어 있는지 확인
2. ADB 포트 포워딩 실행:

adb devices  # 기기 연결 확인
  adb reverse tcp:8081 tcp:8081
  adb reverse tcp:5173 tcp:5173

3. 기기가 목록에 없다면 USB 케이블 재연결 또는 드라이버 설치

 

2. CORS 에러

증상
브라우저 콘솔에서 "CORS policy" 에러 발생
Access to XMLHttpRequest has been blocked by CORS policy

해결 방법
서버의 CORS 설정에 다음 도메인 추가:

https://<appName>.apps.tossmini.com
  https://<appName>.private-apps.tossmini.com

Node.js/Express 예시:

const cors = require('cors');
  app.use(cors({
    origin: [
      'https://my-app.apps.tossmini.com',
      'https://my-app.private-apps.tossmini.com'
    ]
  }));

 

3. appName 불일치 에러

증상
앱이 실행되지 않거나 "앱을 찾을 수 없음" 에러 발생

해결 방법
1. granite.config.ts의 appName이 콘솔에 등록한 앱 이름과 정확히 일치하는지 확인
2. kebab-case 형식인지 확인 (소문자, 숫자, 대시만 사용)
3. 대소문자를 정확히 맞춰야 함

  // 올바른 예시
  appName: 'my-toss-app'
  
  // 잘못된 예시
  appName: 'MyTossApp'  // camelCase 사용 불가
  appName: 'my_toss_app'  // 언더스코어 사용 불가

 

4. 토스 인증/결제 API 호출 실패

증상
토스 로그인, 토스페이 API 호출 시 401 Unauthorized 또는 403 Forbidden 에러

해결 방법
1. mTLS 인증서가 콘솔에서 발급되었는지 확인
2. 서버에 mTLS 인증서가 올바르게 설정되었는지 확인
3. API 호출이 서버에서 이루어지는지 확인 (클라이언트 직접 호출 불가)
4. 사업자 인증이 완료되었는지 확인

팁

💡 개발 팁
1. 쿠키 대신 토큰 기반 인증 사용
iOS 13.4 이상에서 서드파티 쿠키가 완전히 차단되므로, 토큰 기반 인증이 필수이다.

2. TDS(토스 디자인 시스템) 적극 활용
토스의 제품 철학인 '빠르다, 쉽다, 편하다'가 자동으로 적용되어 사용자 경험을 향상시킬 수 있다.

3. TUBA로 빠른 실험
토스피드 기사에 따르면, 아침에 실험을 설정하면 저녁에 결과를 확인할 수 있을 정도로 빠른 이터레이션이 가능하다.

4. 게임 리소스 최적화
Unity 게임은 압축 해제 기준 100MB 이하로 제한되므로, CDN을 통한 분리 다운로드를 고려하자.

5. 허용된 외부 로깅 도구 활용
Sentry, Google Analytics, Unity Analytics는 공식적으로 허용되는 외부 로깅 도구이다.

 

자주 묻는 질문 ❓

Q: 1인 개발자도 앱인토스를 시작할 수 있나요?

A: 네, 가능합니다. 다만 만 19세 이상이며 사업자 등록이 필요합니다. 토스피드 기사에 따르면, 1인 개발자와 초기 스타트업을 위해 마케팅 도구, 데이터 분석, 결제 인프라를 초기부터 제공하여 자체 구축이 어려운 부분을 지원합니다.

Q: WebView와 React Native 중 어떤 방식을 선택해야 하나요?

A: 기존 웹 서비스를 빠르게 포팅하려면 WebView를, 네이티브 수준의 성능이 필요하면 React Native를 권장합니다. 공식 문서에 따르면, React Native는 Hermes 엔진을 사용하여 더 빠른 번들 로드 및 실행 성능을 제공하지만 초기 설정이 더 복잡합니다.

Q: 앱인토스에서 수익화는 어떻게 하나요?

A: 공식 문서에 따르면, 인앱 결제와 광고 기능을 제공합니다. 토스페이를 통한 원클릭 결제 연동이 가능하며, 토스의 광고 솔루션을 활용할 수 있습니다.

Q: 출시 후 사용자 행동 분석은 어떻게 하나요?

A: TUBA(토스 사용자 행동 분석 도구)를 통해 리텐션, 퍼널 전환율, 코호트 분석 등 데이터 기반 의사결정에 필요한 지표를 확인할 수 있습니다. 토스피드 기사에 따르면, 빠른 실험과 결과 확인이 가능합니다.

Q: 검수는 얼마나 걸리나요?

A: 공식 개발자센터에 따르면, 앱 정보 검토는 영업일 기준 1~2일이 소요되며, 대표 관리자 이메일로 결과가 통보됩니다.

 

마치며

토스 앱인토스는 한국 개발자 생태계에 새로운 기회를 제공하는 플랫폼으로 자리잡고 있다. 출시 100일 만에 200개 제휴 앱과 260만 사용자를 달성하며, "누구나 만들고 누구나 성공할 수 있는 미니앱 생태계"라는 비전을 향해 빠르게 성장하고 있다.

 

공식 개발자센터는 WebView, React Native, Unity를 지원하며, TDS(토스 디자인 시스템), TUBA(분석 도구), 타겟팅 푸시, 토스 인증/결제 통합 등 풍부한 개발 도구를 제공한다. 물론 사업자 등록이 되어있는 기업, 개발자라는 조건이 있지만, 생태계의 변화를 가져올 수있을지는 매우 궁금하다. 

 

📚 참고 자료

• 앱인토스 공식 개발자센터 - API 레퍼런스, SDK 문서, 튜토리얼
• 토스피드 - 앱인토스 소개 - 비전, 제공 도구, 성공 사례
• 앱인토스 공식 홈페이지 - 서비스 개요 및 신청