네이티브 광고로 mx 플레이어와 같은 광고 구현하기 1탄 애드몹 기본설정하기

네이티브 광고로 mx 플레이어와 같은 광고 구현하기 1탄 애드몹 기본설정하기

애드몹admob에는 표준화된 광고 형태인 배너광고, 전면광고, 앱오닝광고, 리워드 광고가 있습니다. 하지만 앱의 UI와 잘 어울릴 수도 있지만 아직 규격화 되어 있어 어울리지 않을 수도 있고 커스텀이 되지 않습니다. 앱의 UI와 유사하게 하여 앱와 광고가 잘 맞게 하기 위해서는 네이티브 광고native ads를 사용하면 됩니다. 하지만 네이티브 광고는 커스텀하게 광고를 보여 주기 위해서는 플러터dart문법 보다는 코틀린 아니면 자바, 그리고 UI를 구현하기 위한 지식이 필요합니다.

저는 플러터로 앱개발을 시작했기 때문에 해당 부분에 대한 지식을 깊게는 모르지만 공식 홈페이지 예제를 보면서 공부한 내용을 바탕으로 아래와 같이 mx 플레이어에 나온 큰화면의 광고를 구현해보도록 하겠습니다.

FrameLayout

이것은 플러터의 stack 위젯과 같습니다. 아래로 오는것 일 수록 맨 위에 오게 되어 아래 코드의 왼쪽 위에 Ad 글자를 표시할때 사용 했습니다.

com.googlandroigms.ads.nativeaMediaView

가운데 미디어를 보여주기 위한 부분입니다. 200dp를 사용하면 딱 맞는거 같습니다. 여기에서 dp는 플러터의 width나 height의 크기와 제대로 일치하는 것을 확인했습니다.

패키지 설치

ubspec.yaml에 아래 패키지를 추가하고 pub get을 합니다. dependencies googlemobileads 4.0.0admob 앱 ID 설정

앱 ID를 설정해야 애드몹 광고를 사용할 수 있습니다. 그리고 AndroidManifest.xml에 admob 앱 ID를 아래와 같이 입력하면 됩니다. caapppubxxxxxxxxxxxxxxxxyyyyyyyyyy 이 부분에 자신의 앱 ID를 입력하시면 되고 앱 ID는 애드몹 계정을 만드시면 얻을 수 있습니다.

네이티브 광고 위젯 만들기

이제 위에 위젯을 이용해서 요구하는 화면에 아래와 같은 네이티브 미디어 광고를 송출해볼 수 있을겁니다. 과거 배너광고 보다. 크고 정보량도 많아 수익을 내야하는 앱 개발자 입장에선 좋을 순 있겠지만 이용자 입장에서는 광고는 짜증날수 밖에 없는 요소이니 적당히 활용하는 것이 좋을 거 같습니다. 이렇게 mx 플레이어에서 본 광고를 플러터 네이티브 광고를 이용해서 비슷하게 구현해보았습니다.

자주 묻는 질문