Showing posts with label App. Show all posts

Friday, 21 October 2011

[DEV] iPhone iAd Programming - 마소

iAd는 iOS4부터 등장한 광고 방식의 하나다(스티브 잡스가 WWDC 2010에서 iAd로 만든 애플리케이션을 갖고 나와 직접 시연을 하기도 했다). 기존에 아이폰에서는 광고를 노출하는 방법으로 admob이라는 것이 많이 쓰였다(www.admob.com, 현재는 구글이 인수한 상태다). 이 admob과 iAd는 사용자에게 노출되는 초기 화면에 배너 형태의 뷰를 채택했다.
두 가지 방식 모두 아이폰 개발자들에게 개발킷을 제공하고 있다. 두 가지 방식 모두 아이폰 개발자들에게 개발킷을 제공하고 있다.

<화면 1> iAd의 일반적인 형태(좌)와 iAd의 예(출처 : www.admob.com)>

iAd JS
애플은 iAd를 사용해 광고를 작성하는 사람들을 위해 샘플로 iAdTester 애플리케이션과 여러 가지 샘플 리소스를 제공하고 있다. iAd JS가 바로 그것이다. iAd JS를 설치하고 iAd가 동작하는 원리를 알아보자.

iAd JS는 iOS4와 같이 제공되는 iAd를 위한 개발킷이다. JS라는 이름에서도 알 수 있듯이 JavaScript 라이브러리와 Web Kit 기반의 브라우저 모듈로 구성돼 있다. 현재 설치를 위해 필요한 사항은 다음과 같다.

Xcode 3.2.3 이상 맥 OS X v10.6, 아이폰4 SDK(iPhone simulator)

설치를 위해서는 애플의 개발자 사이트에서 해당 SDK를 다운받아 설치하면 된다. 현재 얻을 수 있는 최신 버전은 4.0.2다.

Xcode 설치 후에 iAd JS를 설치한다. 설치 후 디렉토리는 <화면 2>와 같이 구성된다.

iAdJS라는 디렉토리의 하위 디렉토리에 iAd에서 사용되는 각종 버튼이나 리소스들이 포함돼 있다. 각 디렉토리의 성격은 <표 1>과 같다.

<표1> 각 디렉토리 정보

이제 iAd 테스트 프로그램을 아이폰에 설치하고 샘플용으로 제작된 iAd 애플리케이션을 실행해 보자. 이것을 통해 iAd 배너로 아이폰에서 표현될 수 있는 여러 가지 광고 형태를 알 수 있다.

sample.ad의 설치와 활용
iAdTester.app를 아이튠즈를 이용해 설치한다. 테스트 애플리케이션은 단지 아이튠즈의 ‘응용 프로그램’ 디렉토리로 드래그&드롭하는 것으로 끝이다. <화면 5>와 같은 형태로 설치된다. 동기화 시켜주는 것을 기억하자.

<화면 3> iAdTester 애플리케이션의 설치

동기화되면 아이폰에서 <화면 4>의 왼쪽과 같이 애플리케이션 아이콘이 나타난다. 실행하면 오른쪽과 같은 화면을 볼 수 있다. 일반적으로 Xcode로 애플리케이션을 만들 때는 iAd 버튼이 Object 창에 포함돼 있다. 따라서 IB로 원하는 위치로 가져와 배치할 수도 있다.

<화면 4> 테스트 프로그램의 아이콘(좌)과 iAd tester 프로그램 초기화면

iAdTester.app 애플리케이션이 설치된 후에는 iAdJS/ samples/ 디렉토리 아래에 있는 sample.ad라는 디렉토리 전체를 zip으로 압축, iTunes의 iAd Tester 도큐멘트 디렉토리에 드래그&드롭한다. 그리고 동기화해 sample.ad.zip 파일이 아이폰으로 전송되도록 한다.

<화면 5> 아이튠즈를 통해 iAd 샘플 전송하기

iAd JS 패키지에 포함된 iAdTester.app 프로그램으로 사용자는 간단한 동작 테스트를 해 볼 수 있다. <화면 4>의 오른쪽 화면을 보면 ‘Pick Ad’라는 버튼이 있는데, 이것으로 패키지에 포함된 샘플 파일을 테스트할 수 있다.

이 과정에서도 알 수 있지만 실제 iAd를 위한 화면은 *.ad라는 확장자를 가진 번들 파일로 구성된다. *.ad 파일은 압축된 형태로, 아이튠즈를 통해 아이폰으로 전송될 수 있으며, 원격지에 있는 파일들도 접근할 수 있게 된다.

*.ad 파일의 구조
압축된 형태로 된 *.ad 파일은 <화면 6>과 같은 디렉토리 구조로 돼 있다. <화면 6>이 iAd의 기본이 되는 디렉토리 형태다.

<화면 6> iAd sample 디렉토리

sample.ad의 각 디렉토리와 파일을 살펴보자.

● AdUnit
이곳에 iAd의 최초 페이지가 위치하게 된다(index.html 파일로 시작된다).
● Creatives
이 디렉토리 아래에 사용자가 원하는 형태의 배너 버튼 등을 둘 수 있다. 만약 개발자가 이미지 형태의 버튼을 보여주고 싶으면 이 디렉토리 아래에 서브 디렉토리를 두고 해당 contents를 넣으면 된다.
● iAd.plist
이 파일은 배너의 여러 가지 속성을 갖고 있는 xml 파일이다. <화면 7>과 같은 속성들을 갖고 있다.

<화면 7> iAd.plist의 default 구성

version="1.0" encoding="UTF-8"?>

"http://www.apple.com/DTDs/PropertyList-1.0.dtd">

background-color

ffffff
   action
   landing-page
   initial-orientation

portrait
   supported-orientations
   portrait
   scrolling

accessibility-description
A Sample Ad

<리스트 1> plist의 xml 파일 내용

● action
화면상에서 사용자가 배너를 터치할 경우 동작에 관한 키다. landing-page, web, call과 같은 값이 있다. landing-page는 Ad 화면을 iAd 뷰 화면에서 보여주고, web은 웹페이지로 이동하게 된다. call은 전화를 할 수 있도록 한다. <화면 8>과 같이 사용할 수 있다.

<화면 8> sample ad 최초 화면(좌)과 Ad View 여부 문의

● initial-orientation
최초로 iAd가 실행되었을 경우 초기화 위치를 보여준다. portrait, landscape가 사용된다.
● supported-orientation
사용 중에 센서에 의한 iAd 화면의 가로, 세로, 모든 방향의 지원 여부를 정의해 준다. portrait, landscape, all이 사용된다.
● scrolling
ad 페이지의 스크롤 지원 여부를 결정한다. TRUE, FALSE가 사용된다.
● background-color
배너를 터치한 후에 ad페이지로 변경될 때의 화면 색상을 hex 포맷으로 입력하도록 한다.
● accessibility-description
accessibility가 사용 가능할 때 사용자에게 정보 문구 등을 보여주도록 하는 키다.
● external-url
ad 번들 내에 있는 것과 다른 ad host의 URL을 사용하고 싶을 때 사용하면 된다. <화면 9>는 http://www.google.com/을 키 값으로 설정했을 때의 iAd 화면이다.

<화면 9> external-url 설정시

이상으로 iAd에서 사용되는 디렉토리와 속성을 나타내는 plist 파일의 내용을 살펴봤다. 향후 iAd를 통한 광고를 하기 위해 각 사이트마다 모바일 페이지를 별도로 만드는 작업이 필요할 것이다.

iAd의 구성요소들
이제 iAd의 구성요소들을 살펴보자.

● iAd 배너 프레임의 사이즈
기본적으로 세로로 보여질 때는 320×50 픽셀 사이즈의 배너가 존재하고 가로로 보여질 때는 480×32 픽셀 사이즈의 배너가 보여진다. iAd를 작성하는 사람들은 배너의 사이즈를 고려해서 작성해야 한다.
● 지원되는 이미지 파일과 소리 파일
배너를 위해 사용될 수 있는 이미지 파일의 형식은 세 가지인데 GIF, JPG, PNG 등을 지원한다. 각 파일은 투명도 등을 임의로 지정할 수 있다. 이 중에서 PNG 파일의 형식이 가장 높은 해상도를 유지할 수 있는데, 파일의 사이즈는 가장 크다. 백그라운드로 사용할 때 이것을 극복하기 위해 CSS 파일에 타일형태로 지정하거나 WebKit 그라데이션을 이용할 수 있다.
소리파일은 WAV, AIF, MP3, AAC-LC 등을 지원한다. 가장 적당한 오디오 포맷은 AAC다. 또한 아이폰은 MPEG-4 비디오를 재생하기 위해 H.264 코덱을 사용하고 있다.
iAd는 <표 2>와 같은 비디오 포맷과 사이즈를 지원한다(출처: iAd Design Guidelines).

<표 2> iAd 지원 비디오 해상도의 정보

● 비주얼 효과들
배너에서는 WebKit에서 제공되는 비주얼 효과들을 지원한다(3D Fold Out, 3D Boxes, Plane Flip, Drop, Fade In, Wipe). iAd 배너 내부의 Contents가 변경되는 경우도 마찬가지로 3D Box Rotation, 3D Switch, Drop, Fade, Wipe, Panel Flip)과 같은 비주얼 효과들을 지원한다.
● 웹 기반의 배너 표시
HTML과 JavaScript를 사용해서 다이내믹하게 iAd 버튼을 장식할 수 있다(RSS feed로부터의 Headlines, XML feed로부터 스포츠 스코어를 볼 수도 있다. Time of day로 현재 시간을 표시하는 것도 가능하다).

iAd JS 컴포넌트의 활용
iAd JS 컴포넌트의 활용법을 알아보자.

● 인라인 비디오
기존에 아이폰의 비디오 플레이어에서 한 페이지로 보여지던 비디오 창이 iAd에서는 HTML5의

도록 한다. 기존 방식과 다른 점은 백그라운드로 애플리케이션이 실행되고 있다는 것이다. core Ad에서 사용되는 비디오 클립은 속도나 여러 가지 이유로 2분을 넘지 않는 것이 좋다.

<화면 10> 비디오 스트리밍

● 인라인 오디오
<화면 11>과 같이 Audio data를 표시하는 오디오 인디케이터 아이콘 등이 iAd JS를 통해 제공된다.

<화면 11> 오디오 인디케이터 아이콘(출처 : iAd_Design_Guide)

iAd JS에 포함된 컴포넌트 테스트
iAd JS에서 사용되는 여러 가지 컴포넌트들이 iAdJS/tests 디렉토리에 들어있다. 이들은 iAd.css, iAd.js에 기술돼 있는 스크립트를 읽어서 동작하게 된다. 대표적인 iAd 컴포넌트를 살펴보자.

● Button
버튼은 <화면 12>와 같은 효과를 낼 수 있도록 돼 있다.

<화면 12> 버튼효과

● CarouselView
<화면 13>과 같이 돌아가는 아이템 선택 버튼을 가진 뷰를 표시한다. 화면 상에 보이는 영역을 flip하면 메뉴들이 회전하는 애니메이션을 볼 수 있다.

<화면 13> 세로 회전 테이블(좌)와 가로 회전 테이블

NavigationBar
상단에 <화면 14>와 같은 control을 위한 버튼과 바가 표시되는 컴포넌트다.

<화면 14> NavigationBar

NavigationController
<화면 15>는 툴바 버튼과 네비게이션 바를 애니메이션 효과와 함께 토글하는 컴포넌트다.

<화면 15> NavigationController

<화면 16> PickerView

PickerView
아이폰에서 사용되는 PickerView와 같은 동작을 하는 컴포넌트다.

이 밖에도 Progress 바를 표시하는 ProgressView, 아이템의 등급을 별로 표시하는 Rating, 화면의 스크롤 타입을 정의해 놓은 ScrollView, SearchBar를 포함하는 뷰, 아이템을 특정 바(bar) 위에 올려서 분리해 놓은 SegmentedControl, 스위치를 끄고 켜는 형태의 Switch, 옆으로 밀어내기 방식으로 화면 뷰를 변경하는 Slider, 테이블 뷰를 재현한 TableView, 툴바와 탭바의 형식을 보여주는 Toolbar 등의 컴포넌트가 있다.

● TableView
<화면 17>과 같이 여러 개의 개별 셀로 구성된 화면으로 만들 수도 있고, 아이템을 Group형태로 표현할 수도 있다(<화면 18> 참조).

<화면 17> TableView

<화면 18> Group Table

● ViewScale
화면에 보여질 뷰의 해상도를 조절할 수 있도록 하는 컴포넌트다. 상단에 폭과 높이를 설정할 수 있는 버튼이 있다.
● 지도와 위치 정보 표시
iAd를 활용해 광고를 할 때, 소비자들에게 쇼핑할 수 있는 가게의 위치 정보 등을 제공할 때 맵을 사용하면 유용하다. 전체적인 지도 UI는 아이폰에 있는 지도 애플리케이션에서 사용하는 것과 유사하다. 이것을 위해 <화면 19>와 같이 지도와 위치 정보를 표시할 수 있다. 또한 tel 태그를 사용해 전화번호를 사용자에게 제공, 아이폰의 전화 기능과 연동하는 것도 가능하다.

<화면 19> 지도 표지(좌), 전화와 email(출처 : iAd_Design_Guide)

Xcode에서 iAd의 구현
최신 버전의 아이폰 SDK에는 iAd를 자신의 애플리케이션에 적용하기 위한 Framework와 Object가 제공된다. 애플에서 제공한 iAd 배너를 활용해 iAd test 프로그램을 만들어 보자. 여기서 사용된 Xcode SDK의 버전은 다음과 같다. 3.2.3 버전부터 iAd 배너 Object가 포함되어 있다.

프로젝트의 생성
새로운 프로젝트로 View-based Application을 선택하고 프로젝트의 이름은 iOS4iAd로 했다.

IB에서 iAd 배너 Object 가져오기
Xcode 소스 tree에서 iOS4iAdViewController를 선택해 IB를 시작한다. Xcode 3.2.3과 함께 배포된 IB에서는 <화면 20>과 같은 iAd Object가 추가된 것을 확인할 수 있다. 이것을 IB의 뷰로 드래그해 구성한다.

<화면 20> iAd Object

iAd framework 추가
이제는 아이폰 SDK 4.0에 추가로 제공된 iAd Framework을 추가해야 한다. <화면 21>과 같이 Groups & Files 트리에서 Frameworks 항목에 추가한다.

<화면 21> iAd .framework Add

빌드와 테스트 iAd 배너 확인
빌드하면 <화면 22>와 같은 배너가 표시되고, 클릭했을 때 애플에서 제공하는 테스트 광고를 볼 수 있다(테스트 광고를 보기 위해서는 반드시 인터넷에 연결돼 있어야 한다).

<화면 22> Test App 빌드

<화면 23> 배너를 클릭했을 때의 초기화면

Delegate와 배너 이벤트
iAd 배너를 클릭하면 기존의 애플리케이션과 델리게이트를 통해 상호 동작하게 된다(현재 iAd Delegate는 계속 개발 중이다). iAd의 Delegate 함수들은 ADBannerView.h에 정의돼 있다. 따라서 개발자가 Delegate를 구현하지 않아도 기본적인 배너 이벤트는 동작하게 된다. iAd Delegate를 사용하기 위해 다음과 같이 추가한다.

- bannerViewDidLoadAd: 새로운 배너가 로드됐을 때 불려진다.
- bannerViewActionShouldBegin:willLeaveApplication: 배너 뷰가 실행되기 전에 실행된다.
- bannerViewActionDidFinish: 배너 뷰가 종료됐을 때 불려진다.
- bannerView:didFailToReceiveAdWithError: 배너 뷰를 실행하다가 에러가 발생했을 경우 불려진다.

이 외에도 다음과 같이 배너의 사이즈를 정의해 둔 선언도 있다.

extern NSString * const ADBannerContentSizeIdentifier320×50
extern NSString * const ADBannerContentSizeIdentifier480×32

<리스트 2>는 iAd 배너가 처음으로 로드될 때 delegate 함수가 어떻게 호출되는지 보여준다.

- 에서 ADBannerViewDelegate를 추가한다.
#import

#import
@interface iOS4iAdViewController : UIViewController {

ADBannerView *banner;
}
@property (nonatomic, retain) IBOutlet ADBannerView *banner;

@end

에 @synthesize로 banner를 선언한다.
@synthesize banner;

- 메인 뷰가 로드될 때 iAd banner의

delegate를 등록한다.
- (void)viewDidLoad {
[super viewDidLoad];
banner.delegate = self;
}

<리스트 2> delegate 함수의 호출 방법

<리스트 2>에 앞서 언급한 delegate 함수들이 동작하는지 테스트 코드를 작성해 봤다. iAd 배너가 로드되는 경우와 되지 않을 때로 나눠 함수를 호출하게 된다(인터넷 연결 여부에 따라서 iAd 동작이 달라진다).

- (void)bannerView:(ADBannerView*)banner didFailToReceiveAdWithError:(NSError *)error
{

NSLog(@"배너가 로드되지 않았습니다.");
   UIAlertView *alert; = [[UIAlertView alloc]
   initWithTitle:@""

message:@"iAd배너가 로드되지 않았습니다."
   delegate:self
   cancelButtonTitle:@"확인"
   otherButtonTitles:nil

[alert show];
[alert release];
}

<리스트 3> iAd 배너 load fail 예외 처리

<화면 24> 네트워크가 사용 불가능한 상황

(void)bannerViewDidLoadAd:(ADBannerView

*)banner {
   NSLog(@"배너가 로드되었습니다.");
   UIAlertView *alert; = [[UIAlertView alloc]

initWithTitle:@""
   message:@"iAd 배너가 로드되었습니다."
   delegate:self
   cancelButtonTitle:@"확인"

otherButtonTitles:nil
[alert show];
[alert release];
}

<리스트 4> iAd 배너 load enable 상태

<화면 25> 네트워크가 사용 가능한 상황

이번 호에 사용된 소스코드들은 <이달의 디스켓>을 통해 확인해 보길 바란다.

참고자료
1. ADBannerView_Ref.pdf
2. ADBannerViewDelegate_Ref.pdf
3. iAd_Design_Guide.pdf
4. iAd_Guide.pdf
5. iAd_ReferenceCollection.pdf

기사원문보기

[Dev] 모바일 광고 솔루션 '카울리' 튜토리얼 -마소

국내 첫 번째 모바일 광고 솔루션 ‘카울리’퓨쳐스트림네트웍스에서는 국내 최초로 모바일 광고 솔루션인 카울리 시스템을 지난 4월에 오픈했다. 카울리 시스템을 활용해 광고 수익을 얻는 방법을 알아보자.

먼저, 카울리 광고 시스템을 적용하는 절차를 살펴보자

- 카울리 홈페이지에 애플리케이션 등록(카울리 홈페이지 주소 : http://www.cauly.net)
- 카울리 SDK를 자신의 앱에 적용(SDK는 홈페이지에서 애플리케이션을 등록하면 다운 받을 수 있다)

여기서는 SDK를 본인의 애플리케이션에 적용하는 방법을 중점적으로 살펴본다. 자신의 애플리케이션을 카울리 홈페이지에 등록하는 방법은 가이드 페이지에 친절히 설명돼 있기 때문에 각자 방문해 살펴보는 것으로 대신한다(카울리 가이드 페이지: http://www.cauly.net/guide_index.jsp).

현재 카울리 SDK는 아이폰용 SDK만을 출시한 상태로, 조만간 안드로이드용 SDK와 아이패드용 SDK도 출시할 예정이니 개발자가 선택할 폭이 더욱 넓어질 전망이다. 현재 출시된 아아폰용 SDK를 기준으로 설명을 진행한다.

카울리 SDK의 구성 및 설치
SDK의 구성
애플리케이션을 성공적으로 등록했다면 이미 카울리 SDK를 다운로드가 됐다. 현재 SDK는 1.0.3 버전까지 출시돼 있지만 버전은 수시로 업그레이드됨으로 항상 새로운 카울리 소식에 귀 기울이도록 하자.

SDK를 다운로드 하면 2개의 압축 파일이 있다.

- CaulySDK- 실제 SDK가 들어있는 파일(압축을 풀면 include 디렉터리가 나옴)
- Cauly-example - 카울리 SDK를 적용한 간단한 예제 프로젝트

설치
카울리 SDK를 적용시키기 위해선 다음 프레임워크를 프로젝트에 포함시켜야 하며, <화면 1>은 프레임워크를 포함시킨 모습이다.

CaulySDK의 압축을 풀고 안에 있는 include 디렉터리를 개발하는 앱에 포함시킨다(<화면 2> 참조).

Foundation
UIKit
CoreGraphics
MapKit
QuartzCore

<리스트 1> 카울리 SDK 적용을 위해 포함시킬 프레임워크

<화면 1> 카울리를 위한 프레임워크들을 add시킨 화면

<화면 2> 개발하려는 앱에 카울리 파일들을 add시킨 화면

카울리 SDK적용
카울리 SDK는 광고가 보이는 영역인 카울리 뷰를 제공하는 작업을 수행한다. 개발자는 생성된 카울리 뷰를 자신이 원하는 뷰에 붙여 광고를 노출시키면 되는데, 이때 카울리 뷰를 붙일 객체는 카울리 프로토콜을 따르도록 구현해야 한다. <리스트 2>와 <리스트 3>은 카울리 프로토콜과 카울리 뷰 객체의 인터페이스다.

@protocol CaulyProtocol
@required
- (NSString *) devKey;
@optional
- (NSString *) gender; // male, female, all
- (NSString *) age; // 10, 20, 30, 40, 50, all
- (NSString *) gps; // 위도, 경도
- (REFRESH_PERIOD) rollingPeriod;
// CPC광고 교체주기 REFRESH_PERIOD Type값을 설정.
- (ANIMATION_TYPE) animationType;
// CPC광고 교체시 광고가 나오는 애니메이션 설정 ANIMATION_TYPE type값을 설정.
// 아래의 함수를 정의하면, 광고를 정상적으로 수신하고
// 뷰를 생성한 후 마지막으로 AdReceiveCompleted를 호출한다.
// 뷰의 위치를 지정하거나 사이즈를 조정하는 목적으로 활용이 가능하다.
- (void)AdReceiveCompleted:(CaulyView *)adView;
// 아래 함수는 CPM광고를 클릭해 CPM광고가 사라지고 나서 호출된다.
- (void)closeCPMAd;
@end

<리스트 2> 카울리 프로토콜

@protocol CaulyProtocol;
@interface CaulyView : UIView {
}
// CPC View 요청
+ (CaulyView *)requestADWithProtocol:(id)delegate;
// CPM View 요청
+ (CaulyView *)requestFullADWithProtocol:(id)delegate;
+ (NSString *)version;
@end

<리스트 3> 카울리 뷰

카울리 뷰를 붙이기 위해선 카울리 뷰를 붙이려는 뷰가 카울리 프로토콜을 따라야 한다. 예제 프로젝트에 있는 내용을 통해 카울리 뷰를 담고 있는 뷰 컨트롤러에서 카울리 프로토콜을 작성한 예들을 살펴보자(<리스트 4>, <리스트 5> 참조).

@interface Cauly_exampleViewController : UIViewController {
UIWindow *window;
}
- (void)init:(UIWindow*)aWindow;
- (void)AddCPM;
@end

<리스트 4> 헤더파일

#pragma mark CaulyProtocol method
- (NSString *) devKey
{
    return @"CAULY"; // CAULY는 테스트용 개발코드다. 제품 배포 시에는 발급받은 애플리케이션 고유개발코드로 변환해야 한다.
}
// 성별 값을 리턴한다. “male”, “female”, “all”
- (NSString *) gender
{
    return @"all";
}
// 현재 애플이 실행되는 위치정보값을 리턴한다. “위도, 경도”
- (NSString *) gps
{
    return @" ";
}
// 광고 교체주기값을 설정한다.
- (REFRESH_PERIOD) rollingPeriod {
    return TEN_SEC;
}
// 광고가 바뀔 때의 효과를 설정한다.
- (ANIMATION_TYPE) animationType {
    return CURLUP;
}
// 광고 데이터를 받고나면 호출된다.
- (void)AdReceiveCompleted:(CaulyView *)adView {
    NSLog(@"AdReceiveCompleted.");
}
// 전면광고를 종료시키면 호출된다.
// 전면광고와 배너광고를 동시에 노출시킬 수 없기에 전면광고가 종료된 뒤 배너광고를 노출시켜야 한다.
- (void)closeCPMAd {
// [caulyCPM removeFromSuperview];
    CaulyView *cauly = nil;
    //CPC 광고 예제 : 320*48 사이즈
    cauly = [CaulyView requestADWithProtocol:self];
    cauly.frame = [self.view convertRect:CGRectMake(0, 20, 320, 48) fromView:self.view.superview];
    [self.view addSubview:cauly];
}
#pragma mark -

<리스트 5> 소스파일(카울리 프로토콜을 구현한 부분)

헤더파일을 통해 알 수 있듯, 카울리 뷰를 담고 있는 객체는 카울리 프로토콜을 구현해야 한다. 카울리 프로토콜에서 반드시 구현해야 하는 메소드는 바로 devKey 메소드다.

이 메소드는 개발자가 개발한 앱의 고유식별자(APP ID)를 리턴하는 메소드로서, 카울리 홈페이지에서 애플리케이션 등록 시 카울리 시스템에서 발급하는 APP ID를 넣어주면 된다. 만일 이 값이 잘못된 값일 경우 광고노출이 정상적으로 이루어지지 않으므로 주의해야 한다.

그 외에 성별, 위치(GPS)정보를 리턴하는 메소드가 있다. 이 메소드들은 옵션사항이지만 이들 정보를 넣어두면 좀 더 타겟팅 된 광고를 제공할 수 있어 사용자들이 광고를 보다 많이 터치하게 돼 그에 따른 개발자의 수익이 증가한다. 따라서 가급적 해당정보를 넣어 두는 것이 좋다.

rollingPeriod 메소드는 광고의 변경주기를 설정하는 메소드다. 만약 메소드를 작성하지 않으면 기본값으로 10초가 설정된다. 설정값은 CaulyProtocol.h에 정의돼, 현재는 10초와 무변경(NONE), 두 가지 옵션만 제공된다(<리스트 6> 참조).

typedef enum {
TEN_SEC = 0,
NONE,
} REFRESH_PERIOD;

<리스트 6> rollingPeriod 메소드

animationType 메소드는 광고가 바뀔 때 나오는 애니메이션 효과를 설정하는 값을 리턴하는 메소드로 네 가지 애니메이션 효과와 효과없음으로 설정할 수 있다. 설정값은 동일하게 Cauly Protocol.h에 정의돼 있다.

typedef enum {
    CURLUP = 0,          // 위로 감아올리는 애니메이션
    CURLDOWN,            // 아래로 감아내리는 애니메이션
    FLIPFROMLEFT,        // 왼쪽 방향으로 뒤집는 애니메이션
    FLIPFROMRIGHT,       // 오른쪽 방향으로 뒤집는 애니메이션
    NOANIMATION          // 애니메이션 생략
} ANIMATION_TYPE;

<리스트 7> animationType 메소드

카울리 프로토콜은 2개의 callBack 메소드를 제공하는데, 하나는 카울리 광고정보를 전달 받았을 때 호출되는 AdReceive Completed 메소드이고 다른 하나는 전면광고를 터치(또는 종료버튼 터치)해 전면광고가 종료될 때 호출되는 closeCPMAd 메소드이다.

현재 카울리는 한 화면에 하나의 배너광고만을 보이도록 제한하고 있다. 또 전면광고와 배너광고를 동시에 보이는 것도 제한하고 있다. 따라서 전면광고가 보인 후 바로 배너광고를 보여주려면 closeCPMAd 메소드를 통해 전면광고가 종료되는 시점을 설정한다.

인터페이스의 사용법은 간단하다. 가장 핵심적인 메소드로서 배너광고(CPC)를 요청하는 requestADWithProtocol 메소드와 전면광고를 요청하는 requestFullADWithProtocol 메소드가 있는데 각 메소드 별 사용법을 <리스트 8>과 <리스트 9>에 작성했다.

    CaulyView* cauly = nil;
    cauly = [CaulyView requestFullADWithProtocol :self];
    cauly.frame = [window convertRect:CGRectMake (0, 0, 320, 480) fromView:window.superview];
    [window addSubview:cauly];

<리스트 8> requestFullADWithProtocol 메소드(전면광고)

requestFullADWithProtocol 메소드를 호출하면 SDK 내부에서 카울리 뷰 객체를 생성해 리턴한다. 이때 카울리 뷰가 이용할 델리게이트 객체를 메소드 인자로 넘겨주게 되는데(<리스트 7>에서는 self객체) 해당 객체는 카울리 프로토콜에서 정의한 메소드들을 구현해놔야 한다. 그 후 생성된 객체를 받아서 프레임을 설정하고 어떤 뷰에 붙일 것인지를 결정해서 붙이면 된다.

    CaulyView* cauly = nil;
    cauly = [CaulyView requestADWithProtocol :self];
    cauly.frame = [self.view convertRect:CGRect Make(0, 20, 320, 48) fromViewelf.view.superview];
    [self.view addSubview:cauly];

<리스트 9> requestADWithProtocol 메소드(배너광고)

배너광고도 전면광고와 거의 동일하다. 단지 배너광고는 광고크기가 320x48 이므로 프레임 설정을 이에 맞추면 된다. 성공적으로 광고를 붙였다면 <화면 3>같이 광고가 나오는 실제화면을 만날 수 있다.

<화면 3> 성공적으로 카울리 뷰를 붙인 화면

고려해야 할 사항
앞서 말했듯 카울리 뷰를 붙일 때는 고려해야 할 사항이 있다. 우선 전면광고의 경우 특별한 제약이 없지만 이미지를 서버로부터 받아와야 하므로 너무 잦은 광고요청을 할 경우 네트워크 사용량이 늘어난다. 배너광고의 경우 하나의 뷰에 광고 하나만 붙이도록 제한을 둔 것은 악의를 갖고 광고를 악용하는 것(이하 어뷰징)을 방지하기 위함이다. 이처럼 어뷰징을 방지하기 위해 개발자들이 요구를 해도 제공하지 않는 기능 및 메소드가 몇 가지 있는데 이것들은 보다 나은 광고환경을 제공해 궁극적으로 개발자와 광고주 모두의 이익을 키우게 하기 위한 정책적 결정이므로 개발자들의 너그럽게 이해해야 한다.

카울리 플랫폼은 진화 중
이상으로 자신이 개발한 앱에 카울리 SDK를 적용해 광고를 노출시키는 방법에 대해 살펴봤다. 몇 가지 주의사항만 유념한다면 큰 어려움 없이 광고를 노출시킬 수 있을 것이다.

현재 카울리는 계속 발전하고 있다. 지난 4월 SDK 0.9.0 버전이 최초 출시된 이래 몇 번의 업데이트를 거치면서 성능과 안정성이 크게 개선됐으며 다양한 기능이 추가됐다. 하지만 아직 갈 길은 멀다. 다양한 플랫폼을 지원하는 SDK가 속속 출시될 예정이며, 아이폰 SDK도 기능과 안정성, 사용자 편의성을 크게 향상시킨 2.0버전이 출시될 예정이다.

모바일 산업은 하루가 다르게 발전하고 있고 수익창출환경도 끊임없이 변화하고 있다. 카울리는 스스로도 변화하는 환경에 능동적으로 대처하고 있는 만큼, 개발자들은 카울리라는 든든한 동반자를 선택한다면 거친 모바일 산업에서 승자가 될 수 있을 것이라 확신한다.

현재 퓨쳐스트림네트웍스에서는 SDK 작업에 어려움을 겪는 개발자를 위해 고객센터(1544-8867 Cauly@futurestream. co.kr)를 운영 중이며, 언제든 관련내용에 대한 친절한 안내를 받을 수 있으니 개발도중 의문사항 있으면 주저없이 연락하자.

기사원문보기

Friday, 25 March 2011

iPhone for Kids - Baby's First App Store Download

Can the iPhone be the ultimate parenting tool? Or is it just a new-age pacifier?

기사 원문 보기

Wednesday, 19 January 2011

Apple to allow "uncensored" Playboy app

Apple's stance on porn has always been a prudish 'NO.' But in a bold movie, Hugh Hefner announced on Twitter the App Store will stock old and new issues of Playboy on the iPad store shelves as of March 2011.

Go to the article