Read Original
#Frontend

토스는 어떻게 광고 속에 게임을 넣었을까

토스는 어떻게 광고 속에 게임을 넣었을까
01

Summary

토스가 상용 SDK 없이 광고 속에 직접 플레이어블 게임을 구동한 비결

자체 광고 엔진 위에 웹뷰 브릿지와 MRAID 표준을 얹어 완성한 하이브리드 플레이어블 광고 개발기

토스는 대규모 게임 광고 유치를 위해 웹 기술 기반의 플레이어블 광고를 직접 구현했습니다. 상용 SDK 대신 하이브리드 앱의 핵심인 웹뷰 브릿지 구조와 업계 표준인 MRAID 규약을 도입하여 가볍고 유연한 광고 시스템을 구축했습니다. 표준 API와 토스 전용 API를 영리하게 분리해 유지보수성까지 챙긴 시니어 엔지니어의 설계 노하우를 소개합니다.

  • 01게임 광고 전환율을 극대화하는 플레이어블 광고의 작동 원리 규명
  • 02서드파티 SDK 의존성을 제거하고 웹뷰에 mraid.js 브릿지를 동적으로 주입하는 독자적 파이프라인 구축
  • 03MRAID 표준 규약 중 실제 사용되는 핵심 API만 선택적으로 구현하여 기술 부채와 유지 비용 최소화
  • 04TypeScript의 판별 유니온을 활용해 네이티브-웹뷰 간 양방향 통신 타입 안정성 확보
  • 05표준 API와 자체 확장 기능 전역 객체를 분리 설계하여 상호 영향도 배제

RECOMMENDATION

하이브리드 앱 환경에서 서드파티 SDK 없이 웹뷰와 네이티브 간 안정적이고 확장 가능한 인터페이스를 설계하려는 프론트엔드 및 모바일 개발자에게 실무적인 참고서로 권장합니다.

The Problem

토스 앱 내 광고 지면에서 게임 광고주들의 선호도가 높은 플레이어블 광고를 지원하지 못해 게임 광고 유치에 한계가 있었습니다. 상용 SDK를 도입할 경우 자체 구축한 기존 광고 서버 시스템과의 통합 및 통제가 어려워지는 문제가 있었습니다.

The Solution

웹뷰에 단일 HTML 형태의 게임 광고 소재를 띄우고, 자바스크립트 브릿지 규약인 MRAID 표준을 기반으로 한 mraid.js를 직접 구현하여 네이티브 앱과 광고 간 양방향 통신을 지원했습니다. 실제 서빙할 소재가 호출하는 필수 API만 부분 구현하고, 표준 외 기능인 엔드카드는 별도의 전역 객체인 tossPlayableAds로 분리하여 설계했습니다.

The Result

서드파티 SDK 없이도 플레이어블 광고를 직접 제어할 수 있게 되었으며, 미지원 API 호출 시에도 안전하게 에러 이벤트를 반환해 앱 크래시를 방지했습니다. 또한 API 표면을 최소화한 덕분에 MRAID 3.0 업그레이드 시에도 단 수백 줄의 코드 추가만으로 효율적으로 대응할 수 있었습니다.

Trade-off

MRAID 표준 스펙 전체를 구현하지 않고 필요한 일부 API만 부분 구현했기 때문에, 향후 새로운 광고 소재가 미지원 API를 호출할 경우 정상 동작하지 않을 수 있으며 이에 대응하기 위해 지속적으로 사양을 모니터링하고 추가 구현해야 하는 유지보수 부담이 존재합니다.

03

Key Concepts

Concept · 01

MRAID (Mobile Rich Media Ad Interface Definitions)

모바일 리치 미디어 광고와 인앱 네이티브 앱 간의 인터페이스를 정의하는 IAB Tech Lab의 글로벌 업계 표준 규약입니다. 광고 소재가 플랫폼에 구애받지 않고 네이티브 기능과 안전하게 통신할 수 있도록 돕습니다.

  • 토스는 서드파티 SDK 대신 MRAID 표준을 브릿지 규약으로 선택해 여러 광고 네트워크 소재 수급을 원활하게 만듦
  • 스펙 전체 대신 실제 서빙하는 소재의 API만 부분 구현하고 미지원 시 안전하게 예외 처리하도록 설계
Concept · 02

웹뷰 브릿지 (WebView Bridge)

하이브리드 앱 환경에서 웹 콘텐츠와 네이티브 앱 간에 양방향 메시지를 송수신할 수 있게 지원하는 기술입니다. 웹뷰 내에 특정 인터페이스나 스크립트를 주입하여 네이티브 기능을 제어합니다.

  • mraid.js를 브릿지로 활용해 단일 HTML 기반의 게임 소재가 네이티브 앱에 설치 전환 및 광고 닫기 이벤트를 알리도록 구현
  • JSON 형태의 단일화된 메시지 규약을 채택해 복잡한 네이티브 플랫폼 채널을 깔끔하게 분기 처리
Concept · 03

플레이어블 광고 (Playable Ads)

사용자가 앱을 실제로 다운로드하기 전, 광고 지면 내에서 미니 게임 형태로 핵심 콘텐츠를 미리 체험해 볼 수 있는 인터랙티브 광고 유형입니다. 설치 유도 및 광고 대비 투자 수익률 개선에 매우 효과적입니다.

  • 토스 지면에 게임 광고주들의 예산을 유치하기 위해 새롭게 지원하기로 정의한 핵심 광고 소재 포맷
  • HTML5 단일 파일 형태로 제작되어 웹뷰 내에서 독립적인 게임 루프를 실행