카테고리: iOSIT

SwiftUI 구글 광고 Google Ads 추가 Part 1

개요

SwiftUI공부를 시작 하며, 개인프로젝트로 하나를 만들어 보자 하는 마음에 SwiftUI 구글 광고(Google Ads)를 추가 해보기로 하였습니다. 처음 해보는 SwiftUI인 만큼 미흡한 코드는 많이 존재 하겠으나, 참고만 부탁 드립니다. 이걸 시작으로 더더욱 발전 해봐야죠!

SwiftUI 구글 광고 달기 사전 준비물

  • Google AdsMob 계정가입
  • 앱 등록
  • iOS 13 이상 개발환경 ( SwiftUI가 iOS 13부터 가능 합니다 )
  • Xcode 14.1 이상 ( Google Ads SDK 요구 사항 )
  • 코코아팟 설치 – Swift 패키지 매니저도 있지만, 아직은 CocoaPods를 권장 한다고 나오네요.
    (터미널에서 sudo gem install 명령어를 통한 코코아팟을 실행하여 설치, 자세한 내용은 CocoaPods.org에서 확인)
sudo gem install

SwiftUI 구글 광고를 위한 프로젝트 환경 설정

프로젝트 생성에 대해서는 이번 글 에서 언급하지 않습니다. 프로젝트 생성에 관하여 궁금 하신분은 아래의 링크 페이지를 확인 해주세요.

SwiftUI 구글 광고를 추가 하기 위해 CocoaPods를 추가 하기 위한 해당 프로젝트의 경로에 Podfile을 생성 해야 합니다. 기존 파일이 있는 경우, 해당 파일에 추가로 작성 하시면 됩니다.

프로젝트가 있는 폴더에 진입 후 아래의 명령어를 터미널을 통하여 실행 하시면 됩니다.

pod init

터미널 명령어가 궁금 하시다면?

터미널 명령어 설명

생성이 완료 되었다면, 다음과 같은 파일 목록에서 Podfile문서를 열어 주도록 하겠습니다. 별도의 프로그램 없이 기본 텍스트 편집기로 열어 주셔도 무방 합니다.

텍스트 편집기를 통하여 파일을 열었으면 아래의 CocoaPods를 등록 하겠습니다.

pod 'Google-Mobile-Ads-SDK'

위의 명령어 입력 후 반드시 저장 후 다시 터미널 화면 창으로 돌아가서 pod install –repo-update 명령어로CocoaPods를 설치 해줍니다.

pod install --repo-update

정상적인 CocoaPods 설치 후 프로젝트명.xcworkspace 파일로 실행 시키면 됩니다.

SwiftUI 구글 광고 노출 info.plist 등록

프로젝트 선택 > TARGETS에서 선택 후 상단 탭에서 Info선택 > Info 목록에서 중 + 표시 선택 후 GADApplicationIdentifier 입력

중간에 목록 추가는 아무데나 마우스를 올려 보시면 Key부분 오른쪽+ 표시가 나올텐데 그 부분을 누르면 됩니다.

위의 이미지의 순서를 따라 화살표 방향대로 진행 하시면 좌측 네비게이션 목록에 info라는 파일이 생성 됩니다.

네비게이션 목록에 생긴 info.plist 파일을 우클릭 하여 Open As > Source Code 로 진입 합니다.

위와 같은 화면이 나타나면 선택된 영역에 Google Ads 가이드 페이지에서 제공하는 스니펫을 붙여 넣기 해 줍니다.

SwiftUI 구글 광고 코드 작성

이제 등록은 모두 완료 했고, 최종 목표인 SwiftUI 구글 광고를 노출 시키기 위한 코드 작성을 진행 해보겠습니다.

초기화 소스 코드 등록

//
//  GoogleAdsSampleApp.swift
//
//  SwiftUI에서 Appdelegate 영역이라 생각하면 되는 페이지
//  SwiftUI 프로젝트를 생헝 하면 프로젝트명App.swift로 자동 생성

import SwiftUI
import GoogleMobileAds // CocoaPads로 설치한 구글 광고 모듈

@main
struct GoogleAdsSampleApp: App {
    
    // 기존 Swift 환경에서 Appdelegate에 있는 
    // application(_ application, didFinishLaunchingWithOptions) 
    // 대신 init() 사용
    init() {
        // 구글 광고 초기화 코드. 앱의 실행마다 호출 되도록 등록
        GADMobileAds.sharedInstance().start(completionHandler: nil)
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

프로젝트 생성시 함께 만들어 지는 프로젝트명App.swift 파일에 작성을 진행 해줍니다.

8번 라인 : SwiftUI 구글 광고 노출에 사용하기 위한 모듈 호출

16 ~ 19번 라인 : SwiftUI 구글 광고 노출을 초기화 해주기 위한 생성 코드. 해당 부분은 기존 프로젝트를 생성하면 함께 만들어 지던 Appdelegate.swift 파일에서 application(_ application, didFinishLaunchingWithOptions)의 기능을 하는 부분 이라 생각 하면 될 것 같습니다.

배너 소스 코드 작성

아래의 소스 코드는 구글 배너 광고 예제 페이지를 토대로 작성하였고, 아직 정확하게는 모르지만 SwiftUI에서 동작 하도록 조금의 변형만 주었습니다.

배너 광고 예제 페이지
//
//  RectangleBannerView.swift
//
//  직사각형 배너 뷰

import SwiftUI
import GoogleMobileAds

// 직사각형 배너 뷰
struct RectangleBannerView: UIViewControllerRepresentable {
    private let adsPubId = "ca-app-pub-3940256099942544/2934735716" // 구글 광고 테스트 아이디
    
    // Swift에서 UIViewController에 있는
    // override func viewDidLoad() { } 부분
    func makeUIViewController(context: Context) -> some UIViewController {
        let bannerView = GADBannerView(adSize: GADAdSizeBanner)
        return addBannerViewToView(bannerView)
    }
    
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {
        
    }
    
    // 광고 하단 직사각형 배너 추가
    func addBannerViewToView(_ bannerView: GADBannerView) -> UIViewController {
        let googleAdsContainerVC = UIViewController()
        
        bannerView.translatesAutoresizingMaskIntoConstraints = false
        googleAdsContainerVC.view.addSubview(bannerView)
        googleAdsContainerVC.view.addConstraints(
            [NSLayoutConstraint(item: bannerView,
                                attribute: .bottom,
                                relatedBy: .equal,
                                toItem: googleAdsContainerVC.view.safeAreaLayoutGuide,
                                attribute: .bottom,
                                multiplier: 1,
                                constant: 0),
             NSLayoutConstraint(item: bannerView,
                                attribute: .centerX,
                                relatedBy: .equal,
                                toItem: googleAdsContainerVC.view,
                                attribute: .centerX,
                                multiplier: 1,
                                constant: 0)
            ])
        
        // 광고를 로드 하는 광고 단위 ID. Google Ads 사이트에서 발급 받은 앱ID 등록
        bannerView.adUnitID = adsPubId
        // 광고 노출 시킬 컨트롤러
        bannerView.rootViewController = googleAdsContainerVC
        // 광고 호출 시작
        bannerView.load(GADRequest())
        
        return googleAdsContainerVC
    }
}

SwiftUI 구글 광고 호출

//
//  GoogleAdsSampleApp.swift
//  
//  메인 페이지의 모습

import SwiftUI
import GoogleMobileAds

struct ContentView: View {
    
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")

            // 직사각형 배너 호출
            RectangleBannerView()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

19번 라인 : 위에서 생성한 직사각형 배너를 호출 한 모습 입니다. 그 외의 소스는 프로젝트 생성시의 기본 소스코드들 입니다.

메인 화면에서 RectangleBannerView()를 호출 한 모습으로, 아래 빨간 네모 박스가 광고 영역입니다.


마무리 및 추가 자료

이번 글에서는 SwiftUI를 사용하여 iOS 애플리케이션에 Google Ads 광고를 추가하는 방법에 대해 알아보았습니다. 우리는 Google AdsMob 계정 설정부터 시작하여 SwiftUI 프로젝트 환경 설정, 광고 코드 작성에 이르기까지의 전체 과정을 단계별로 살펴보았습니다. SwiftUI와 Google Ads를 처음 사용하는 분들에게 이 글이 유용한 가이드가 되었기를 바랍니다.

더 깊이 있는 학습을 위해 아래의 추가 자료들을 추천합니다:

  1. SwiftUI 공식 문서: SwiftUI에 대한 기본적인 이해를 돕기 위한 Apple의 공식 문서를 참고하세요.
  2. Google Mobile Ads SDK 문서: Google 광고를 더욱 효과적으로 활용하기 위한 Google Mobile Ads SDK 공식 문서를 참조하세요.
  3. iOS 앱 개발 기초: iOS 앱 개발에 대한 전반적인 이해를 돕는 Stanford 대학의 무료 온라인 강좌를 추천합니다.(영어 사이트)
  4. CocoaPods 사용법: CocoaPods에 대한 자세한 사용법을 알아보려면 CocoaPods 공식 웹사이트를 방문해보세요.
  5. SwiftUI 커뮤니티: SwiftUI에 대한 다양한 질문과 답변, 경험을 공유할 수 있는 SwiftUI Reddit 커뮤니티에 참여해보세요.

이 글을 통해 SwiftUI와 Google Ads를 활용한 개발에 대해 좀 더 깊이 이해하고, 여러분의 애플리케이션 개발에 유용하게 활용할 수 있기를 기대합니다. 다음 글에서 더 유익한 정보를 공유할 예정이니 계속해서 관심을 가져주시길 바랍니다.

감사합니다!

SOOAR

최근 게시물

실업급여 최대한 활용하는 법 2024년 최신 정보 완벽 정리

실업급여는 일자리를 잃은 후 경제적 어려움을 겪고 있는 분들에게 큰 도움이 되는 제도로, 고용보험에 가입한…

% 수일전에

제4이동통신사 스테이지엑스 자격 취소와 법적 대응

스테이지엑스의 제4이동통신사 자격이 자본금 부족 문제로 과기정통부에 의해 취소될 위기에 처했습니다. 스테이지엑스는 법적 대응을 예고하며…

% 수일전에

삼성전자 접근성 기능의 모두를 위한 기술 활용법

삼성전자는 저시력자와 청각 장애인을 위한 다양한 접근성 기능을 제공합니다. 릴루미노 윤곽선, 토크백, 실시간 자막, 주변…

% 수일전에

iOS Swift UILabel 둥근 모서리를 적용 해보자

iOS 앱 개발에서 UILabel 둥근 모서리 뷰의 시각적 요소를 조정하는 것은 사용자 경험을 향상시키는 중요한…

% 수일전에

프리랜서 고용 시 체크리스트 4가지 반드시 확인해야 할 필수 사항들

프리랜서 고용 시 체크리스트는 뭘까? 프리랜서를 고용하는 것은 많은 기업과 개인에게 유용한 방법이 될 수…

% 수일전에