토스 · 미니앱 플랫폼

토스 앱 — 앱인토스 미니앱 플랫폼

하나의 백엔드가 여러 개의 앱인토스(Apps-in-Toss) 미니앱과 어드민 콘솔을 함께 서빙하는 멀티테넌트 플랫폼입니다. 지금은 하위에 게임 세 개 — 투데이, 도각, 괴짜들 — 과 위치 기반 기록 앱 피그노트가 올라가 있습니다.

토스 미니앱 네 개 — 오늘의 선택, 도각도각, 내가 만난 괴짜들, 피그노트
토스 안에서 도는 미니앱 네 개 — 왼쪽부터 투데이(오늘의 선택), 도각(도각도각), 괴짜들(peek-a-moo), 피그노트

플랫폼 개요

앱인토스는 토스 앱 안에서 바로 실행되는 미니앱 플랫폼입니다. 미니앱을 하나씩 만들 때마다 서버를 새로 띄우는 대신, 백엔드 하나를 멀티테넌트로 설계해 여러 미니앱이 나눠 쓰도록 만들었습니다. 미니앱마다 백엔드에 테넌트(appName)가 1:1로 발급되고, 모든 데이터는 그 테넌트 스코프 안에서만 읽고 쓰입니다. 새 미니앱을 붙일 때 하는 일은 테넌트 등록 → CORS 오리진 추가 → 앱별 API 연결, 이 세 단계뿐입니다.

어드민 콘솔에서는 테넌트 등록과 설정, 콘텐츠 관리(이미지·소리 업로드), 게시 기준, 클릭 통계를 한자리에서 관리합니다. 미니앱은 어드민이 넣어준 콘텐츠를 앱별 API로 받아 가고, 어드민은 미니앱에서 쌓인 통계를 되받는 구조입니다.

미니앱이 백엔드를 쓰는 정도는 서로 다릅니다. 괴짜들은 오늘의 괴짜 선정, 정답 판정, 밥알·미션·칭호·도감·순위까지 전부 백엔드에 의존하는 가장 무거운 테넌트이고, 도각은 클릭 진행 상태와 해금 여부만 주고받습니다. 투데이는 진행 상태를 미러링하는 클라우드 세이브와 계정 연동만 주고받습니다. 같은 플랫폼 위에 얹혀 있어도 필요한 만큼만 붙이면 되도록 만든 결과입니다.

네 번째로 올라간 피그노트는 예외입니다. 위치 판정과 사진 저장, 사물 앵커 임베딩까지 서버가 져야 할 몫이 커서 이 멀티테넌트 백엔드에 얹지 않고 전용 백엔드를 따로 세웠습니다. 토스 쪽에서 공유하는 것은 앱인토스 SDK를 다루는 방식과 배포 파이프라인이고, 데이터는 완전히 분리돼 있습니다. 같은 플랫폼 안에서도 무게가 다른 앱은 갈라 두는 편이 낫다는 판단이었습니다.

기술적 접근

백엔드는 Fastify와 Prisma로 짰고 GCP Cloud Run에서 돌립니다. 데이터베이스는 클라우드가 아니라 집에 둔 홈랩 PostgreSQL을 쓰는데, Cloud Run 컨테이너에 cloudflared 사이드카를 붙여 터널로 접속합니다. 업로드된 파일은 컨테이너가 재시작돼도 남아야 해서 GCS 버킷을 gcsfuse로 /data/uploads에 마운트해 보존합니다.

미니앱은 Vue 3와 앱인토스 SDK 3.x로 만들고, ait build로 번들을 만들어 앱인토스 콘솔에 올립니다. 어드민 콘솔은 Vue 3 + TypeScript + Vite로 만든 다크 단일 테마 SPA이고 Firebase Hosting에 배포합니다. 백엔드와 어드민은 Unity로 만든 앱인토스 게임과도 공유하기 때문에, 응답 계약을 깨는 변경은 하지 않고 필드 추가만 하는 것을 규칙으로 두고 있습니다.

하위 미니앱 4종

오늘의 선택 타이틀 화면
타이틀 화면
menu_book
투데이

오늘의 선택

출근길 횡단보도에서 시작해 서로 다른 하루를 지나 같은 집으로 돌아오는 내러티브 선택형 어드벤처입니다. 모바일 세로 전용이고, 장면 242개·선택지 519개·엔딩 26개 규모의 시나리오가 코드가 아니라 데이터로 들어 있습니다. 진행 상태는 기기에 저장하고, 계정을 연동하면 클라우드 세이브로 같은 기록을 안드로이드와 나눠 씁니다. 웹으로 먼저 공개했고, 앱인토스 편입은 준비 중입니다.

Vue 3 TypeScript 엔딩 26 미니게임 18
안드로이드 앱 소개 보기 arrow_forward
도각도각 모바일 스위치 탐색 화면
스위치 탐색 화면
keyboard
도각

도각도각

키캡을 클릭해 게임 재화인 '각'을 모으는 클리커 게임입니다. 클릭이 쌓이면 등급이 오르고, 각을 써서 스위치와 꾸미기 기능을 영구 해금합니다. 총 도각 40만(장인도각)에 닿으면 3D 키캡 스튜디오가 자동으로 열립니다. 중간중간 타이밍 러시·초시계 챌린지·얼음 키캡 같은 미니게임이 무작위로 끼어듭니다. 웹판 도각도각에서 스튜디오만 떼어내 만든 독립 미니앱입니다.

Vue 3 Pinia three.js Tailwind 4
도각도각 웹 소개 보기 arrow_forward
내가 만난 괴짜들 게임 화면 — 실루엣과 정답 입력창
오늘의 괴짜 화면
psychology_alt
괴짜들

내가 만난 괴짜들 peek-a-moo

매일 00시에 '오늘의 괴짜' 한 마리가 새까만 실루엣으로 등장합니다. 탭하면 괴짜가 자기 대사를 목소리로 떠들고, 그 목소리와 실루엣만 단서로 삼아 이름을 맞혀야 합니다. 정답은 동물 종이 아니라 운영자가 붙인 엉뚱한 이름이라, '날아다니는 돼지'의 정답은 날으라 돈까스가 됩니다. 틀려도 정답과 겹치는 글자는 알려주고, 오답이 쌓일 때마다 실루엣이 한 단계씩 벗겨져 다섯 번이면 전부 드러납니다. 대신 많이 드러날수록 보상은 줄어듭니다. 재화 '밥알'로 앞뒤 글자·글자 수 힌트를 사고, 광고를 보면 하루 한 마리를 더 만나는 보너스 라운드가 열립니다. 촌스럽고 웃긴 B급 톤으로 화면을 통일했습니다. 같은 백엔드와 같은 테넌트를 그대로 쓰는 안드로이드 앱으로도 이식해 구글 플레이 출시를 준비하고 있습니다.

Vue 3 TTS 대사 칭호 31종 괴짜 도감 토스 광고
안드로이드 앱 소개 보기 arrow_forward
피그노트 포스트잇 상세 화면
발견한 포스트잇
edit_location_alt
피그노트

피그노트 pignote

장소에 사진과 메시지를 포스트잇처럼 남기고, 그 반경 안에 실제로 들어가야 열리는 위치 기반 기록 앱입니다. 기록하고 발견할수록 캐릭터 '피그'가 자랍니다. 앞의 셋과 달리 Vue가 아니라 Flutter 웹 빌드를 앱인토스 번들로 포장했고, 안드로이드 앱·웹과 같은 코드에서 나옵니다. 데이터는 이 플랫폼의 멀티테넌트 백엔드가 아니라 피그노트 전용 백엔드가 맡습니다. 토스에서는 SDK가 위치와 공유를 대신 처리하고 구글 로그인 버튼을 숨기며, 계정은 익명 키로 잇습니다.

Flutter 웹 Apps-in-Toss SDK 위치 · 카메라 권한 전용 백엔드
피그노트 소개 보기 arrow_forward

주요 기능

workspaces 멀티테넌트 백엔드 — 미니앱마다 테넌트 1:1, 데이터 스코프 격리
admin_panel_settings 어드민 콘솔 — 테넌트·콘텐츠·게시 기준·클릭 통계 관리
cloud_upload 파일 업로드 — GCS 버킷을 gcsfuse로 마운트해 재배포에도 보존
vpn_lock 홈랩 DB 연결 — Cloud Run에 cloudflared 사이드카 터널
ios_share 토스 네이티브 연동 — 공유 시트, 딥링크(intoss://), 다크 내비게이션 바
campaign 토스 광고 연동 — 보상형 전면광고(힌트·보너스 라운드)와 배너 3지면
notifications_active 푸시 알림 — 매일 11시 '오늘의 괴짜 등장' 안내
sports_esports Unity 게임 공유 — 같은 백엔드·어드민을 앱인토스 Unity 게임과 함께 사용

화면 갤러리

프로젝트 정보

분류 토스 미니앱 · 게임 플랫폼
하위 미니앱 투데이(오늘의 선택), 도각(도각도각), 괴짜들(peek-a-moo), 피그노트(pignote)
미니앱 Vue 3, TypeScript, Apps-in-Toss SDK 3.x (피그노트는 Flutter 웹)
어드민 Vue 3, Vite, Firebase Hosting
Backend Node.js, Fastify, Prisma, PostgreSQL
Infra GCP Cloud Run, GCS(gcsfuse), cloudflared 터널
주요 기술
멀티테넌시 Google OAuth three.js