2025. 5. 9. 02:31ㆍ기술 창고/Flutter
Flutter 로 앱 개발을 완료한 뒤에 수익창출을 위해 구글 광고를 앱에 넣기 위한 과정을 정리해보겠습니다.
https://admob.google.com/intl/ko/home/
Google AdMob: 모바일 앱 수익 창출
인앱 광고를 사용하여 모바일 앱에서 더 많은 수익을 창출하고, 사용이 간편한 도구를 통해 유용한 분석 정보를 얻고 앱을 성장시켜 보세요.
admob.google.com
우선 위의 구글 애드몹 사이트에 접속하여 로그인 및 가입을 진행해줍니다.
회원가입을 하지 않았더라도 간편하게 한번에 로그인까지 진행할 수 있습니다.
왼쪽 상단의 메뉴 버튼에서 앱 항목에 앱 추가를 눌러줍니다.
배포하고자하는 앱 플랫폼에 따라 설정해주고 현재 이미 앱 스토어에 앱이 등록되어있으면 해당 사항을 체크하고 처음 만들어 배포하는 앱이라면 '아니오'를 체크하여 진행해줍니다.
앱 이름을 기입하고 앱 추가 버튼을 클릭합니다.
앱 이름까지 설정했으면 앱 추가가 완료되게 됩니다.
추가가 완료되면 왼쪽 메뉴에서 광고 단위를 클릭하거나 아니면 앱 추가 완료 시 바로 보이는 광고 단위 추가 버튼을 클릭해줍니다.
앱에 넣을 광고 형식을 지정해줍니다.
저의 경우 일단 배너 광고로 진행해보겠습니다.
넣고자 하는 배너 광고의 이름을 아무렇게나 기입하고 광고 단위 만들기 버튼을 눌러줍니다.
이제 제일 중요한 앱 ID와 광고 단위 ID가 나오게 되며 이것을 메모장에 반드시 임시 저장해놓습니다.
그리고 "Google 모바일 광고 SDK 가이드" 텍스트 링크를 눌러줍니다.
"Google 모바일 광고 SDK 가이드" 텍스트 링크를 눌러 접속한 페이지에서 스크롤해서 내리다보면 광고 형식 선택 항목에서 자기가 방금 만든 앱의 광고 배너에 따라 빨간색으로 표시한 구현 버튼을 눌러줍니다.
저의 경우, 배너 광고 였으니 배너 광고 구현 버튼을 누르겠습니다.
접속된 페이지에서 바로 보이는 테스트 전용 광고 단위 ID 도 마찬가지로 따로 임시 저장해놓습니다.
이 ID는 우리가 배포한 상태에서 확인하는 것이 아닌 개발 단계에서 확인하기 위한 테스트 광고 ID 라고 보면 됩니다.
여기까지 완료했으면 아까 앱 ID, 광고 단위 ID 2개가 노출되었던 페이지로 돌아와서 완료 버튼을 눌러줍니다.
이제 앱을 개발했던 IDE 툴로 넘어와서 구글 모바일 광고 디펜던시를 설치해줍니다.
# 명령어 : flutter pub add google_mobile_ads
[안드로이드 앱 광고인 경우]
구글 애드몹 사이트에서 안드로이드 앱 광고 단위를 생성했다면, android -> app -> src -> main -> AndroidManifest.xml 에서 오른쪽 빨간색으로 표시한 meta-data 코드를 넣어주고 value 부분에 아까 복사한 안드로이드 앱 ID를 붙여넣어줍니다.
!! 광고 단위 ID, 테스트 광고 ID 아님 !!
[IOS 앱 광고인 경우]
구글 애드몹 사이트에서 안드로이드 앱 광고 단위를 생성했다면, ios -> Runner -> info.plist 에서 오른쪽 빨간색으로 표시한 코드를 넣어주고 string 부분에 아까 복사한 ios 앱 ID를 붙여넣어줍니다.
!! 광고 단위 ID, 테스트 광고 ID 아님 !!
그리고 main.dart 파일에 넘어와서 모바일 광고 객체를 이니셜라이즈하는 코드를 넣어줍니다.
// 앱 플랫폼에 따른 배너 광고 단위 ID 값 설정
String get bannerAdUnitId {
if (Platform.isAndroid) {
if (kReleaseMode) {
return "{안드로이드 광고 단위 ID}";
} else {
return "{안드로이드 테스트 광고 단위 ID}";
}
} else if (Platform.isIOS) {
if (kReleaseMode) {
return "{IOS 광고 단위 ID}";
} else {
return "{IOS 테스트 광고 단위 ID}";
}
} else {
throw UnsupportedError("unsupported platform");
}
}
// 앱에 노출할 배너 광고 객체 세팅
void setAdmob() {
_bannerAd = BannerAd(
size: AdSize.banner,
adUnitId: bannerAdUnitId,
listener: BannerAdListener(
onAdLoaded: (ad) {
setState(() {});
},
onAdFailedToLoad: (ad, error) {
print(error.message);
},
),
request: AdRequest(),
);
_bannerAd.load();
}이제 광고를 넣고자 하는 screen 파일에서 위의 함수들을 만들어주었습니다.
광고가 노출될 해당 screen 이 구현될 때 setAdmob 함수를 우선 호출하여 노출할 배너 광고 객체를 만들어주는데 이 때, adUnitId 부분에 앱의 플랫폼에 따라 아까 임시 저장해놓은 광고 단위 ID들을 넣어 유닛 ID 를 설정해주도록 합니다.
@override
void initState() {
super.initState();
// 뉴스 정보 api 호출
getNewsInfo();
// 애드몹 광고 초기화
setAdmob();
}현재 제가 광고를 노출할 screen은 stateful 한 페이지이므로 initState 함수를 통해 광고를 초기화하도록 해주었습니다.
body: Column(
children: [
/////////////// 이 부분 /////////////////
SizedBox(
width: _bannerAd.size.width.toDouble(),
height: _bannerAd.size.height.toDouble(),
child: AdWidget(ad: _bannerAd),
),
/////////////////////////////////////////
Expanded(
child: ListView.builder(
itemCount: newsList.length,
itemBuilder: (context, index) {
var newsItem = newsList[index];
return GestureDetector(
child: Container(
margin: EdgeInsets.all(16),
child: Stack(
alignment: Alignment.bottomCenter,
children: [
// 뉴스 이미지 영역
Container(
height: 170,
width: double.infinity,
child:
newsItem["urlToImage"] != null
? ClipRRect(
child: Image.network(
newsItem["urlToImage"],
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(10),
)
: ClipRRect(
child: Image.asset("assets/no_image.png"),
borderRadius: BorderRadius.circular(10),
),
),
// 반투명 텍스트 영역
Container(
width: double.infinity,
height: 57,
decoration: ShapeDecoration(
color: Colors.black.withOpacity(0.7),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10),
),
),
),
child: Container(
margin: EdgeInsets.all(5),
child: Column(
children: [
Text(
newsItem["title"],
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold,
),
maxLines: 1,
// 텍스트 길이가 영역 너비를 초과할 경우 개행되지 않고 ... 처리로 만들어주는 옵션
overflow: TextOverflow.ellipsis,
),
SizedBox(height: 6),
Align(
child: Text(
formatData(newsItem["publishedAt"]),
style: TextStyle(
color: Colors.white,
fontSize: 10,
),
),
alignment: Alignment.bottomRight,
),
],
),
),
),
//
],
),
),
onTap: () {
Navigator.pushNamed(
context,
"/detail",
arguments: newsItem,
);
},
);
},
),
),
],
),이제 광고를 노출할 부분에 AdWidget 을 통해 해당 광고가 노출되도록 해주었습니다.
설정이 완료되었으니 이제 실행해보겠습니다.
제가 지정한 영역에 광고가 나오는 것을 확인할 수 있습니다.