Jetpack Compose를 사용하여 AdMob 배너 광고 추가하기

Jetpack Compose를 사용하여 AdMob 배너 광고 추가하기

안녕하세요! 이번 블로그 포스트에서는 Jetpack Compose를 사용하여 안드로이드 앱에 AdMob 배너 광고를 추가하는 방법을 단계별로 설명드리겠습니다. Jetpack Compose는 기존의 XML 레이아웃 파일 대신 Kotlin 코드로 UI를 구성하는 방식으로, 더욱 간결하고 효율적으로 UI를 만들 수 있습니다. 그럼 시작해 보겠습니다!

1. AdMob 계정 생성 및 광고 단위 ID 얻기

먼저, AdMob 계정을 생성하고 로그인합니다. 그런 다음 새 앱을 등록하고 광고 단위 ID를 생성합니다. 이 ID는 나중에 필요합니다.

2. Gradle 설정

AdMob SDK를 추가하기 위해 build.gradle 파일을 수정합니다.

프로젝트 수준의 build.gradle 파일:

 

allprojects {
    repositories {
        google()
        mavenCentral()
    }
}

 

앱 수준의 build.gradle 파일:

plugins {
    id 'com.android.application'
    id 'kotlin-android'
}

android {
    compileSdk 35

    defaultConfig {
        applicationId "com.example.mycomposeapp"
        minSdk 21
        targetSdk 35
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary = true
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion '1.4.0'
    }
    packagingOptions {
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
}

dependencies {
    implementation 'androidx.core:core-ktx:1.10.0'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.0'
    implementation 'androidx.activity:activity-compose:1.7.0-beta01'
    implementation 'androidx.compose.ui:ui:1.4.0-beta01'
    implementation 'androidx.compose.ui:ui-tooling-preview:1.4.0-beta01'
    implementation 'androidx.compose.material3:material3:1.1.0-alpha06'
    implementation 'com.google.android.gms:play-services-ads:22.1.0'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.4.0-beta01'
    debugImplementation 'androidx.compose.ui:ui-tooling:1.4.0-beta01'
    debugImplementation 'androidx.compose.ui:ui-test-manifest:1.4.0-beta01'
}

3. AndroidManifest.xml 수정

AndroidManifest.xml 파일에 AdMob 앱 ID를 추가합니다.

 

<manifest>
    <application>
        <!-- Replace with your actual AdMob app ID -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    </application>
</manifest>

4. AdMob 초기화 및 배너 광고 추가

MainActivity.kt 파일을 수정하여 Jetpack Compose 내에서 AdMob 배너 광고를 로드합니다.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import com.google.accompanist.admob.AdMobBanner
import com.google.accompanist.admob.AdMobBannerSize
import com.google.android.gms.ads.MobileAds
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        MobileAds.initialize(this) {}

        setContent {
            MyApp {
                AdMobBannerAd()
            }
        }
    }
}

@Composable
fun MyApp(content: @Composable () -> Unit) {
    Box(modifier = Modifier.fillMaxSize()) {
        content()
    }
}

@Composable
fun AdMobBannerAd() {
    val context = LocalContext.current

    AndroidView(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp),
        factory = { context ->
            AdView(context).apply {
                this.setAdSize(AdSize.BANNER)
                adUnitId = context.getString(R.string.admob_banner_id)
                loadAd(AdRequest.Builder().build())
            }
        }
    )
}

 

이 예제에서는 Jetpack Compose를 사용하여 AdMob 배너 광고를 앱의 하단에 추가했습니다. 광고 단위 ID를 실제로 생성한 ID로 교체하는 것을 잊지 마세요. 이를 통해 Jetpack Compose 환경에서도 AdMob 광고를 성공적으로 통합할 수 있습니다.

 

배너광고 예시

 

추가적으로, 다른 유형의 광고(예: 전면 광고, 보상형 광고)를 추가하려면 AdMob 공식 문서를 참고하시기 바랍니다.

이상으로 Jetpack Compose를 사용하여 AdMob 배너 광고를 추가하는 방법에 대해 알아보았습니다. 도움이 되셨길 바랍니다! 질문이나 의견이 있으시면 댓글로 남겨주세요. 감사합니다.