토스 미니앱 4개 개발 경험 공유
토스(Toss)의 3천만 사용자 기반에 미니앱(Mini App) 서비스를 출시할 기회를 포착하며 개발 시작
React Native 또는 WebView 기반으로 개발 가능하며, 본문은 웹 프레임워크 Granite와 TDS 활용 경험을 공유함
로그인 기능 연동 시 mTLS 인증서 기반의 별도 백엔드 구축이 필요하며, 비게임 콘텐츠로 분류 시 등급 분류 절차 간소화 가능
광고 수익화(Ad Monetization)는 AdMob 미디에이션을 통해 배너, 전면형, 리워드 형식으로 간편하게 연동 가능
네 개의 미니앱 개발을 통해 진입 장벽(Entry Barrier)이 낮음을 확인하고, 반복 개발로 개발 속도 향상(Development Speed Improvement)을 경험함
토스 미니앱 개발을 위한 웹 프레임워크와 디자인 시스템
토스 미니앱 개발 시 Granite 웹 프레임워크와 TDS(토스 디자인 시스템) 활용은 필수적이다. Granite는 과거 Bedrock으로 불렸던 프레임워크로, 웹 기반 미니앱 개발의 기반을 제공한다.
TDS 적용의 중요성: 비게임 미니앱의 경우, TDS 사용이 사실상 강제되며 미사용 시 심사 통과가 어려울 수 있다. 버튼, 슬라이더 등 UI 컴포넌트를 직접 개발할 필요 없이 제공되는 컴포넌트를 활용하여 개발 시간 단축 및 일관된 사용자 경험(Consistent User Experience) 확보가 가능하다.
AI 연동: 토스에서 제공하는 가이드라인에 따라 AI 기능을 연동하면, mcp 기능 연동이 자동화되어 개발 편의성이 증대된다.
로그인 기능 구현 시 백엔드 및 인증서 연동 고려사항
토스 미니앱에서 로그인 기능을 구현하려면 클라이언트 측(Client-side) 인가 코드(Authorization Code) 발급 이후, 서버 측(Server-side)에서 토큰 교환 및 사용자 정보 조회가 반드시 필요하다. 이 과정에서 mTLS(상호 TLS) 인증서를 사용한 보안 강화가 요구된다.
별도 백엔드 구축: 로그인 연동 시 Vercel과 같은 외부 플랫폼에 별도의 백엔드(Backend)를 구축하고 mTLS 인증서 관련 설정을 진행해야 한다. 이는 초기 개발 복잡도를 증가시키는 요인이다.
데이터 미저장 정책(Zero-Retention Policy): 로그인 기능을 사용하지 않거나, 평가값만 저장하는 방식(예: localStorage 활용)을 채택하면 백엔드 및 인증서 관련 복잡성을 완전히 제거할 수 있어, 출시 난이도를 크게 낮출 수 있다.
게임물 등급 분류 절차 간소화를 위한 콘텐츠 전략
게임물 등급 분류(GRAC)는 게임 장르 미니앱 개발 시 추가적인 행정 절차를 요구한다. 이를 간소화하기 위해 '승패·점수 경쟁 없는 콘텐츠'로 기획하는 전략이 유효하다.
비게임 콘텐츠 분류: 퀴즈, 자가진단, 기록 앱 등은 경쟁 요소가 없으므로 비게임 콘텐츠로 분류되어 등급 심사 절차를 생략할 수 있다. 이는 개발 및 출시 속도를 크게 향상시킨다.
리텐션 루프(Retention Loop) 설계: '수상한 알' 앱처럼, 단발성 콘텐츠를 넘어 사용자가 지속적으로 재방문할 동기를 부여하는 리텐션 루프(예: 부화 대기 → 수집 → 다음 알) 설계가 중요하다. 이를 위해 로그인 및 백엔드 연동을 고려할 수 있다.
AdMob 기반의 간편한 광고 수익화 연동
토스 미니앱은 Google AdMob 미디에이션을 통해 다양한 광고 형식을 간편하게 연동하여 수익화를 진행할 수 있다. 광고 그룹 ID만 입력하면 자동으로 광고가 노출된다.
광고 형식: 배너(Banner), 전면형(Interstitial), 리워드(Rewarded) 광고 형식을 지원한다. 리워드 광고는 사용자에게 재화 등의 보상을 제공하는 경우에 효과적이다.
실시간 입찰(Real-time Bidding): AdMob은 여러 광고 네트워크와 연동하여 실시간 입찰 방식으로 최적의 광고를 노출시켜 수익을 극대화한다.
수익화 전략: 진단 앱처럼 보상이 없는 경우, 리워드 광고보다는 배너나 전면형 광고를 중심으로 구성하는 것이 사용자 경험을 해치지 않으면서 수익을 창출하는 데 유리하다.
반복 개발을 통한 미니앱 개발 생산성 향상 패턴
여러 개의 미니앱을 개발하면서 코드 재사용 및 템플릿화를 통해 개발 생산성을 크게 향상시킬 수 있다. 특히, 첫 앱에서 겪었던 시행착오를 바탕으로 다음 앱 개발 시 빌드 설정, 광고 컴포넌트, 자가진단 흐름 등을 재활용하는 것이 효과적이다.
구조 복사 및 내용 변경: '회사 다닐까 말까' 앱에서 만든 골격을 '신조어 능력 검정시험' 앱에 그대로 가져와 콘텐츠만 변경하는 방식으로 개발 속도를 높였다.
점진적 기능 추가: 첫 앱에서 로그인 및 백엔드 연동으로 어려움을 겪었지만, 이후 앱에서는 필요에 따라 점진적으로 기능을 추가하며 개발 복잡도를 관리하는 방식을 익혔다.
AI 활용: 개발 과정 전반에 걸쳐 AI 챗봇을 활용하면 초기 골격 생성 및 문제 해결에 도움을 받을 수 있다.
