핀퀴즈(FinQuiz) 개발기 — 토스 미니앱 출시까지

금융 상식을 퀴즈로 배우는 미니앱, 핀퀴즈를 토스 앱 내 앱인토스(AppsInToss) 플랫폼에 출시하기까지의 과정을 기록한다.

왜 만들었나

금융 지식은 알아야 하는데 공부하기가 따분하다. 예금자보호 한도, 복리, LTV, 스태그플레이션 같은 개념을 퀴즈 형식으로 가볍게 익힐 수 있으면 어떨까 싶었다.

마침 토스 앱의 앱인토스 플랫폼이 눈에 들어왔다. 3000만 토스 사용자에게 노출될 수 있는 플랫폼이었고, 금융 앱이니 맥락도 딱 맞았다.

기술 스택

React 19 + TypeScript + Vite
@apps-in-toss/web-framework (WebView 기반 미니앱)
@toss/tds-mobile (토스 디자인 시스템)
Google AdMob (인앱 광고)
AppsInToss Game Center (리더보드)

WebView 기반으로 구현했다. React Native보다 진입 장벽이 낮고, 퀴즈 게임이라는 특성상 복잡한 네이티브 기능이 필요 없었다.

구조

src/
├── pages/
│   ├── Home.tsx     — 카테고리 선택 화면
│   ├── Quiz.tsx     — 퀴즈 화면 (15초 타이머)
│   └── Result.tsx   — 결과 & 리더보드
├── hooks/
│   ├── useAd.ts          — 광고 (전면/보상형)
│   └── useLeaderboard.ts — 전국 순위
├── store/gameStore.ts    — 게임 상태 관리
└── data/questions.ts     — 퀴즈 문제 40개

총 10개 파일. 카테고리는 금융기초 / 주식투자 / 부동산 / 경제용어 4가지. 각 10문제씩, 전체 랜덤 모드도 있다.

개발하면서 겪은 것들

1. SDK 1.x → 2.x 마이그레이션

가장 당황스러웠던 부분이다. 번들을 올렸더니 "지원하지 않는 번들이에요. 최신 SDK를 사용해주세요." 라는 메시지가 떴다.

알고 보니 2026년 3월 23일부터 SDK 1.x로 빌드한 번들은 콘솔 업로드가 차단됐다. 토스 앱이 React Native 0.84 기반으로 업데이트되면서 하위 호환이 끊긴 것이다.

변경 사항:

@apps-in-toss/web-framework 1.5.2 → 2.4.2
빌드 커맨드: granite build → ait build
bridgeColorMode 속성 제거 (2.x에서 deprecated)

마이그레이션 자체는 간단했지만, 타이밍을 놓치면 서비스가 막힌다는 걸 처음 알았다.

2. 일반 브라우저 SDK 크래시 방어

토스 SDK는 토스 앱 브릿지가 없는 환경(일반 브라우저)에서 크래시가 난다. 개발/테스트 환경에서 그냥 열면 바로 흰 화면이 뜬다.

ErrorBoundary로 감싸서 브릿지가 없으면 그냥 앱을 렌더링하도록 처리했다.

class TDSBoundary extends Component {
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  render() {
    if (this.state.hasError) return <App />;
    return <TDSMobileAITProvider>{this.props.children}</TDSMobileAITProvider>;
  }
}

3. 광고 ID 발급 흐름

구글 애드몹에 직접 앱을 등록하는 게 아니다. 앱인토스 개발자센터에서 광고 그룹을 생성하면 앱인토스가 중간에서 AdMob을 처리해준다.

순서:

사업자 정보 등록
정산 정보 입력 (통장 사본 PDF 첨부)
검토 승인 (영업일 2~3일)
광고 그룹 생성 → adGroupId 발급
구글 광고 검토 (별도 진행)

테스트 ID(ait-ad-test-interstitial-id)로 개발하다가 실제 ID로 교체하는 흐름이다.

4. 이용약관 URL 등록

앱인토스 심사에서 서비스 이용약관 URL이 필수다. 별도 서버가 없어서 GitHub Pages로 정적 HTML을 호스팅했다.

→ 핀퀴즈 서비스 이용약관

리더보드

전국 순위 기능은 앱인토스 Game Center API로 구현했다. 별도 서버 없이 submitGameCenterLeaderBoardScore로 점수를 제출하면 자동으로 전국 랭킹에 반영된다.

퀴즈 정답 1개당 10점, 10문제 기준 최고점은 100점이다.

마치며

게임 앱이라 TDS 필수 적용 대상이 아니었고, WebView 기반이라 개발 속도도 빨랐다. SDK 마이그레이션 이슈만 없었다면 훨씬 빠르게 끝났을 것이다.

앱인토스는 생각보다 잘 만들어진 플랫폼이었다. 광고, 리더보드, 사용자 식별 모두 SDK 하나로 해결된다는 게 편했다.

출시 후 반응이 궁금하다. 금융 퀴즈가 토스 사용자들에게 얼마나 먹힐지.