인앱 광고 - 배너 광고(WebView)
서비스 소개와 콘솔 설정 방법은 인앱 광고 소개 문서를 참고해 주세요.
WebView에서 배너 광고를 표시할 수 있는 광고 라이브러리예요.
시작하기
배너 광고 API는 토스 앱 5.241.0 이상에서 사용할 수 있어요.
5.241.0 이상
지원
배너 광고 사용 가능
5.241.0 미만
미지원
배너 광고 API 사용 불가
개발 단계에서는 테스트용 광고 ID를 사용해요.
배너 광고 - 리스트형
ait-ad-test-banner-id
배너 광고 - 피드형
ait-ad-test-native-image-id
API 레퍼런스
개요
TossAds.initialize
배너 광고 SDK를 초기화해요. 광고를 표시하기 전에 반드시 한 번 호출해야 해요.
TossAds.attachBanner
특정 DOM 요소에 배너 광고를 부착해요. 스타일 프리셋(theme, tone, variant)이 적용되며, 반환된 객체의 destroy() 메서드로 배너를 제거할 수 있어요.
TossAds.destroyAll
초기화된 모든 배너 슬롯을 제거해요.
각 API는 isSupported() 프로퍼티를 통해 현재 환경에서 해당 기능 사용 가능 여부를 확인할 수 있어요.
이벤트 흐름
배너 광고 SDK 초기화(initialize)
배너 광고 SDK를 초기화해요. 초기화 과정은 비동기로 진행되며, 완료 여부는 콜백으로 전달돼요. 광고를 사용하기 전에 반드시 한 번 초기화해야 하고, 앱의 최상위 컴포넌트에서 한 번만 호출하는 것을 권장해요.
시그니처
파라미터
options ·
TossAdsInitializeOptionsSDK 초기화 시 전달할 옵션 객체예요. 초기화 성공/실패에 대한 콜백을 설정할 수 있어요.
options.callbacks ·
{ onInitialized?: () => void; onInitializationFailed?: (error: Error) => void; }SDK 초기화 과정에서 호출될 콜백을 정의하는 객체예요.
options.callbacks.onInitialized ·
() => voidSDK 초기화가 성공적으로 완료되었을 때 호출돼요.
options.callbacks.onInitializationFailed ·
(error: Error) => voidSDK 초기화에 실패했을 때 호출돼요. 실패 원인은
Error객체로 전달돼요.
TossAdsInitializeOptions
프로퍼티
isSupported() => boolean
현재 실행 중인 환경에서
TossAds.initialize기능을 사용할 수 있는지 확인하는 함수예요. 광고 SDK 초기화를 호출하기 전에 반드시 지원 여부를 확인해야 해요.
예제
배너 광고 부착(attachBanner)
특정 DOM 요소에 배너 광고를 부착해요. 스타일 프리셋(theme, tone, variant)이 적용되며, 반환된 객체의 destroy() 메서드로 배너를 제거할 수 있어요.
TossAds.initialize를 먼저 호출하여 SDK를 초기화한 후에 사용해야 해요.
시그니처
파라미터
adGroupId · 필수 ·
string광고 그룹 단위 ID예요. 콘솔에서 발급받은 값을 입력해요.
target · 필수 ·
string | HTMLElement광고를 부착할 DOM 요소예요.
HTMLElement객체를 직접 전달하거나, CSS 선택자 문자열을 전달할 수 있어요.options ·
TossAdsAttachBannerOptions배너의 스타일 및 광고 이벤트 콜백을 설정할 수 있는 옵션 객체예요.
options.theme ·
'auto' | 'light' | 'dark'배너의 테마를 설정해요. 기본값은
'auto'이며, 시스템 다크모드 설정에 따라 자동 전환돼요.options.tone ·
'blackAndWhite' | 'grey'배너의 배경 톤을 설정해요. 기본값은
'blackAndWhite'예요.options.variant ·
'expanded' | 'card'배너의 형태를 설정해요. 기본값은
'expanded'예요.options.callbacks ·
AttachBannerCallbacks광고 생명주기 이벤트를 수신할 수 있는 콜백 객체예요.
options.callbacks.onAdRendered ·
(payload) => void광고 렌더링이 완료되었을 때 호출돼요.
options.callbacks.onAdImpression ·
(payload) => void광고가 사용자 화면에 노출 가능 상태가 되었을 때 호출돼요.
options.callbacks.onAdViewable ·
(payload) => void광고 노출이 기록되어 수익이 발생했을 때 호출돼요.
options.callbacks.onAdClicked ·
(payload) => void광고가 클릭되었을 때 호출돼요.
options.callbacks.onNoFill ·
(payload) => void표시할 광고가 없을 때 호출돼요.
options.callbacks.onAdFailedToRender ·
(payload) => void광고 렌더링에 실패했을 때 호출돼요.
TossAdsAttachBannerOptions
TossAds.attachBanner 함수의 옵션 타입이에요.
theme
'auto' | 'light' | 'dark'
'auto'
테마 설정. auto는 시스템 다크모드에 따라 자동 전환
tone
'blackAndWhite' | 'grey'
'blackAndWhite'
배경 색상 톤
variant
'card' | 'expanded'
'expanded'
배너 형태. card는 좌우 패딩 + border-radius 적용
callbacks
TossAdsBannerSlotCallbacks
-
광고 이벤트 콜백
TossAdsAttachBannerResult
TossAds.attachBanner 함수의 반환 타입이에요.
destroy(): 부착된 배너를 제거해요. 컴포넌트 언마운트 시 메모리 누수를 방지하기 위해 호출하는 것을 권장해요.
TossAdsBannerSlotCallbacks
배너 광고 이벤트 콜백이에요.
onAdRendered: 광고가 렌더링되었어요.onAdImpression: 광고가 화면에 노출되었어요.onAdViewable: 광고 노출이 기록되었어요. (수익 발생 시점)onAdClicked: 사용자가 광고를 클릭했어요.onAdFailedToRender: 광고 렌더링에 실패했어요.onNoFill: 표시할 광고가 없어요.
TossAdsBannerSlotEventPayload
배너 광고 이벤트 페이로드예요.
slotId: 생성된 슬롯 IDadGroupId: 광고 그룹 IDadMetadata: 광고 메타데이터 (creativeId, requestId)
TossAdsBannerSlotErrorPayload
배너 광고 에러 페이로드예요.
반환값
TossAdsAttachBannerResult 객체를 반환해요. 이 객체의 destroy() 메서드를 호출하여 배너를 제거할 수 있어요.
프로퍼티
isSupported() => boolean
현재 실행 중인 환경에서
TossAds.attachBanner기능을 사용할 수 있는지 확인하는 함수예요. 배너 광고를 부착하기 전에 반드시 지원 여부를 확인해야 해요.
예제
배너 광고 에러 페이로드예요.
모든 배너 슬롯 제거(destroyAll)
초기화된 모든 배너 슬롯을 제거해요.
시그니처
프로퍼티
isSupported() => boolean
현재 실행 중인 환경에서
TossAds.destroyAll기능을 사용할 수 있는지 확인하는 함수예요. 배너 광고 인스턴스를 전체 제거하기 전에 지원 여부를 확인할 때 사용할 수 있어요.
예제
사용 패턴
초기화 타이밍
SDK는 앱 시작 시점에 한 번만 초기화하는 것이 좋아요. 다음과 같은 시점에 초기화를 권장해요 :
앱 최상위 컴포넌트(App.tsx) 마운트 시
광고를 표시할 첫 화면 진입 전
컨테이너 사이즈 설정
광고 컨테이너는 반드시 올바른 사이즈로 설정해야 해요.
메모리 관리
컴포넌트 언마운트 시 배너를 제거해야 메모리 누수를 방지할 수 있어요.
TossAds.attachBanner는 destroy() 메서드를 포함한 객체를 반환하므로, 클린업 시 이를 호출하면 돼요.
에러 처리
항상 onInitializationFailed와 onAdFailedToRender 콜백을 제공하여 에러에 대비해 주세요.
재사용 가능한 커스텀 훅
여러 화면에서 배너 광고를 사용할 때 커스텀 훅으로 분리하면 편리해요.
useTossBanner
SDK 초기화와 배너 부착을 함께 처리하는 훅이에요.
사용 예시
참고:
useTossBanner는 여러 컴포넌트에서 호출해도 안전해요. 이미 초기화된 경우 중복 초기화를 시도하지 않아요.
광고 정책
토스 애즈 SSP 정책
아래 정책을 반드시 지켜주세요. 위반할 경우 광고 노출이 제한될 수 있어요.
본 정책에 명시되지 않은 경우라도, 광고 노출·클릭·성과를 인위적으로 유도하거나 이용자 오인을 발생시키는 행위는 정책 위반으로 간주될 수 있어요.
모든 파트너사는 정책 위반으로 서비스가 종료되는 경우, 서비스 종료 정책을 준수해야 해요.
UI/UX 품질 저하
광고와 콘텐츠의 구분을 불명확하게 하거나, 사용자 의도와 무관한 광고 소비 또는 클릭을 유도하거나, 정상적인 서비스 이용을 방해하도록 UI를 구성하는 행위
"추천 서비스", "금융 팁" 등으로 광고를 위장
Toss Ads 가이드 외 광고 단위의 색상·글꼴 변경
광고의 타이틀·라벨·CTA 문구 및 디자인 임의 수정
사용자 상호작용 요소(버튼, 게임 플레이 영역 등)와 인접하게 광고를 배치하여 의도치 않은 클릭이 발생하도록 하는 구조
동일 화면에 동일 포맷 광고를 2개 이상 배치하는 경우
사용자가 정상적으로 화면을 종료하거나 이전 화면으로 이동하기 어렵게 하는 막다른(Dead-end) 구조
광고와 서비스 CTA의 기능을 사용자가 구분하기 어렵게 구성한 구조
서비스의 정상적인 이용에 필요한 CTA를 인지하거나 접근하기 어렵게 구성한 구조
광고는 반드시 "Ad" 표기를 유지해야 함
모든 광고 UI는 web-base 표준 컴포넌트를 사용해야 함
광고 성과를 인위적으로 유도하거나 사용자 경험을 저해하는 UI/UX 구성 금지
광고 호출 동작 변조
SDK 기본 이벤트 흐름이나 광고 호출 방식을 변경하거나 우회하는 행위
SDK Click / Impression 이벤트 변조
광고 SDK를 거치지 않고 자체 로직으로 광고를 호출하거나 SDK 이벤트를 우회하여 구현하는 경우
Back 버튼을 차단하거나 비정상적으로 제어하여 사용자의 정상적인 화면 종료 또는 이전 화면 이동을 방해하는 경우
SDK 기본 이벤트(Click / Impression) 구조 변조 금지
SDK 외부 API 호출 불가
비정상 트래픽 및 성과 조작
자동화 또는 인위적 방식으로 트래픽 및 광고 성과를 왜곡하는 행위
광고 영역을 주기적으로 Refresh 처리
인위적으로 성과(클릭·노출 등)를 발생시키는 활동
트래픽 품질 기반의 비정상 패턴이 확인될 경우 광고 제한, 제재, 정산 보류
보상·참여형 클릭 유도
광고 클릭과 동시에 보상 또는 혜택을 제공하는 행위
"광고 클릭 즉시 리워드 제공"
"광고 클릭하면 포인트 제공"
광고 소비를 보상과 직접 연결하는 구조 금지
클릭 보상성 문구·이벤트 연동 금지
광고 은닉 또는 겹침
광고를 의도적으로 숨기거나 다른 UI 요소에 가려 사용자가 광고의 존재를 명확히 인지하기 어렵게 만드는 행위
• 투명 광고
• 다른 카드 UI 뒤에 광고 DOM 삽입
• 광고는 노출 상태가 명확히 확인 가능해야 함
UX / Product Principle 운영 원칙
광고도 토스의 UX 원칙을 따라야 해요.
Toss Principle
적용 기준
예시
Simplicity
광고는 명료해야 하며, 추가 설명 없이 의미를 이해할 수 있어야 해요
"지금 보기", "광고 보기" 등 명확 CTA 사용
Clear Action
광고 클릭 후 어떤 행동이 발생할지 사용자가 예측 가능해야 해요
리디렉션·새창 이동 시 고지 문구 노출
No Deception (UX Red Rule)
광고가 예상치 못한 순간, 형태, 위치에서 등장하지 않아야 해요
서비스 진입 직후 전면 배너 금지
Value First
광고는 고객의 서비스 목표를 방해하지 않아야 해요
결제/계좌 개설 흐름 중 광고 삽입 금지
이용 제한 및 제재 조치
앱인토스 광고 지면 또는 서비스가 본 정책을 위반한 경우 제재가 적용될 수 있어요.
제한 절차
제한 조치는 원칙적으로 위반 행위의 누적 정도에 따라 단계적으로 적용돼요. 다만, 위반의 유형이나 중대성에 따라 단일 위반에도 즉시 30일 이용 제한 또는 영구 이용 제한이 적용될 수 있어요.
※ 동시에 확인된 위반은 위반 슬롯의 개수와 관계없이 1회 위반으로 처리돼요. 이후 별도로 위반이 확인되는 경우 위반 횟수가 누적돼요.

부당 수익 처리
정책 위반, 무효 트래픽 또는 기타 부정한 방식으로 발생한 수익은 부당 수익으로 간주될 수 있어요.
부당 수익이 확인되면 해당 금액에 대해 지급 보류 또는 지급 거절이 이루어질 수 있으며, 이미 지급된 금액도 동일하게 환수될 수 있어요.
이의제기 절차
이용 제한 통지를 받은 경우 30일 이내 이의제기를 신청할 수 있어요.
이의제기 자료는 채널톡을 통해 제출할 수 있어요.
제출된 자료는 내부 기준에 따라 검토되며, 필요한 경우 추가 자료를 요청할 수 있어요.
검토에는 영업일 기준 약 1주일이 소요될 수 있어요.
이의제기 신청에 대해서는 제재가 적절했는지 여부를 중심으로 검토하며, 위반 사항을 수정했거나 재발 방지 계획을 제출한 사실만으로는 제재가 해제되지 않아요.
제출된 이의제기 자료를 통해 제재의 근거가 된 위반 사실이 인정되지 않거나 제재 판단에 명백한 오류가 있는 것으로 확인되는 경우에는 제재가 해제될 수 있어요.
반복적이거나 중대한 위반의 경우 서비스 이용이 영구적으로 제한될 수 있어요.
테스트하기
개발 단계에서는 반드시 테스트용 광고 ID를 사용해요. 실제 광고 ID로 테스트하면 정책 위반으로 간주해 불이익을 받을 수 있어요.
WebView 배너 광고 테스트 ID는 시작하기에서 확인할 수 있어요.
출시 전에 아래 항목을 꼭 확인해 주세요.
광고가 정상적으로 로드되는지 확인해요.
클릭 시 의도한 화면으로 이동하는지 확인해요.
뒤로 가기 동작이 정상적으로 작동하는지 확인해요.
결제나 인증 흐름을 방해하지 않는지 확인해요.
자주 묻는 질문
마지막 업데이트
도움이 되었나요?