적응형 인라인 배너(SwiftUI)
적응형 인라인 배너는 장치에서 광고 크기를 최적화하여 최대 효율을 제공하는 유연한 배너 광고 형식입니다.
이 광고 유형은 개발자가 광고에 허용 가능한 최대 너비 및 높이를 설정할 수 있게 하지만, 최적의 광고 크기는 여전히 자동으로 결정됩니다. 최적의 광고 크기를 선택하기 위해, 내장된 적응형 배너는 고정 높이가 아닌 최대 높이를 사용합니다. 따라서 성과를 높일 여지가 있습니다.
이 형식은 콘텐츠 피드 기반 앱이나 광고에 초점을 둘 수 있는 시나리오에 자주 사용됩니다.
모양
이 가이드는 iOS 앱에서 SwiftUI로 적응형 인라인 배너를 연동하는 방법을 설명합니다. 코드 예시와 함께 형식 사용 권장 사항과 추가 자료 링크를 제공합니다.
사전 요구 사항
- 빠른 시작에 설명된 SDK 통합 단계를 수행하세요.
- 광고 SDK를 미리 초기화하세요.
- 최신 Yandex Mobile Ads SDK 버전을 사용하고 있는지 확인하세요. 미디에이션을 사용하는 경우, 최신 통합 빌드 버전을 실행하고 있는지도 확인하세요.
구현
SwiftUI에서 적응형 인라인 배너를 연동하는 주요 단계:
BannerSize.inline(width:maxHeight:)와 광고 단위 ID가 포함된AdRequest로BannerState를 만듭니다.Banner(state:)를 뷰 계층에 추가하고 해당BannerState를 전달합니다..onAdLoad,.onAdFailure로 이벤트를 구독하고, 필요 시.onAdClick,.onAdImpression을 사용합니다.- Adfox를 사용하는 경우
BannerState내부AdRequest로 추가 설정을 전달합니다. - 표시:
Banner가 화면에 나타나고BannerState가 설정되면 로드가 시작되며, 로드 성공 후 광고 높이가 갱신됩니다.
적응형 인라인 배너 연동 시 유의사항
-
.onAdFailure에서 오류를 받은 직후 새 광고를 로드하는 것은 권장하지 않습니다. 반드시 해야 한다면 재시도 횟수를 제한하세요. -
올바른 표시를 위해 SwiftUI에서
BannerSize.inline(width:maxHeight:)와 부모 컨테이너 제약(너비, 패딩)으로 크기를 지정하세요. 바깥frame만 고정하고 적응형 높이를 무시하면 렌더링이 틀어질 수 있습니다. -
사용 가능한 전체 너비 사용을 권장하며, 대부분 기기 전체 화면 너비입니다. 앱 패딩과 안전 영역을 고려하세요.
-
스크롤 가능한 콘텐츠에 두기 적합합니다. 배너 높이는 화면 높이와 같거나 API에 따라 최대 높이로 제한될 수 있습니다.
-
SwiftUI에서는
Banner(state:)와BannerState(size: .inline(width:maxHeight:), request:)를 사용합니다.width는 컨테이너 사용 너비,maxHeight는 허용 최대 높이입니다(UIKit의BannerAdSize.inlineSize(withWidth:maxHeight:)와 유사). -
동일 기기·크기 매개변수에서는 로드 후 광고 영역이 안정적이며 높이는
Banner내부 레이아웃에 반영됩니다.
배너 만들기 및 표시
SwiftUI 계층에 Banner(state:)를 추가하고 .inline(width:maxHeight:) 크기의 BannerState와 광고 ID가 들어 있는 AdRequest를 전달합니다.
width는 화면 또는 부모 컨테이너 너비로 두고 패딩·안전 영역을 반영하는 것이 좋습니다.
Yandex Advertising Network에서 받은 광고 단위 ID(adUnitId)가 필요합니다.
SwiftUI 화면 예시:
import SwiftUI
import YandexMobileAds
struct InlineBannerView: View {
@State private var bannerState: BannerState?
var body: some View {
VStack {
if let bannerState {
Banner(state: bannerState)
.onAdLoad { _ in
// 광고 로드 성공
}
.onAdFailure { error in
// 로드 오류
}
}
Button("배너 로드") {
bannerState = BannerState(
size: .inline(width: 320, maxHeight: 320),
request: AdRequest(adUnitID: "R-M-XXXXX-YY")
)
}
}
}
}
광고 로드
BannerState가 설정된 Banner가 뷰 계층에 나타나거나 새 BannerState가 할당될 때 로드가 시작됩니다. BannerState(size:request:)를 호출할 때마다 새 상태가 만들어지며 로드가 시작됩니다.
로드 성공·실패, 클릭, 노출 추적은 onAdLoad, onAdFailure, onAdClick, onAdImpression 수정자를 사용합니다.
AdRequest로 사용자 관심사, 페이지 컨텍스트, 위치 등을 넘겨 요청을 확장할 수 있습니다. 광고 타겟팅을 참고하세요.
예: 새 BannerState로 로드 시작(성공 시 .onAdLoad 호출):
struct InlineBannerView: View {
@State private var bannerState: BannerState?
func loadAd() {
bannerState = BannerState(
size: .inline(width: 320, maxHeight: 320),
request: AdRequest(adUnitID: "R-M-XXXXX-YY")
)
}
var body: some View {
VStack {
if let bannerState {
Banner(state: bannerState)
.onAdLoad { _ in }
.onAdFailure { _ in }
}
Button("로드", action: loadAd)
}
}
}
광고 표시
로드가 끝나면 광고가 Banner 안에 표시되며 크리에이티브 수신 후 크기가 갱신됩니다. 피드나 스택에서 적절한 위치에 두세요(예: 패딩이 있는 ScrollView + VStack).
struct InlineBannerView: View {
@State private var bannerState: BannerState?
var body: some View {
ScrollView {
VStack {
// 피드 콘텐츠
Text("콘텐츠")
if let bannerState {
Banner(state: bannerState)
.onAdLoad { _ in }
.onAdFailure { _ in }
}
}
.padding()
}
}
}
적응형 인라인 배너 연동 테스트
데모 블록으로 테스트
광고 통합 및 앱 자체를 테스트하기 위해 테스트 광고를 사용하는 것이 좋습니다.
모든 광고 요청에 대해 테스트 광고가 반환되도록 보장하기 위해 특별한 데모 광고 배치 ID를 생성했습니다. 광고 통합을 확인하는 데 사용하세요.
데모 adUnitId: demo-banner-yandex.
Важно
앱을 스토어에 게시하기 전에 데모 배치 ID를 Yandex Advertising Network 인터페이스에서 획득한 실제 ID로 교체해야 합니다.
사용 가능한 데모 광고 배치 ID 목록은 테스트용 데모 광고 단위 섹션에서 찾을 수 있습니다.
연동이 올바른지 확인
네이티브 콘솔 도구를 사용하여 광고 통합을 테스트할 수 있습니다.
자세한 로그를 보려면 YMAMobileAds 클래스의 enableLogging 메서드를 호출하세요.
YMAMobileAds.enableLogging()
SDK 로그를 보려면 콘솔 도구로 이동하여 Subsystem = com.mobile.ads.ads.sdk를 설정하세요. 카테고리와 오류 수준별로 로그를 필터링할 수도 있습니다.
광고 통합에 문제가 있는 경우, 문제에 대한 상세한 보고서와 해결 방법에 대한 권장 사항을 받게 됩니다.
추가 자료
-
GitHub 링크.