Sunny's Dev

 안경훈 linuxgood@gmail.com|리눅스와 맥OS에 관심이 많으며, 모바일 디바이스에서 동작되는 사용자 중심의 프로그램을 개발하는 것에 흥미를 가지고 있다. 현재 삼성SDS에서 근무 중이다.

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 구성

<리스트 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의 <video> tag를 통해 <화면 10>과 같이 부분적으로 보여질 수 있도록 한다. 기존 방식과 다른 점은 백그라운드로 애플리케이션이 실행되고 있다는 것이다. 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 함수가 어떻게 호출되는지 보여준다. 

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

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

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

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

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

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

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

이달의 디스켓 : iOS4-09.zip

출처 :
http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=35836