iOS 6 Safari 브라우저의 Smart App Banner 기능

iOS 6 부터 모바일 사파리 브라우저에 아주 재밌는 기능이 추가 됐었네요.

바로 어플리케이션에 대한 배너광고를 달아주는건데요.
해당 앱이 깔려 있으면 open 버튼이 나오고 깔려 있지 않으면 앱스토어로 링크를 걸어 줍니다.

그리고 그 링크에는 파라미터를 넣을 수 있어서 어플리케이션을 열 때 해당 파라미터를 전달 받아서 앱의 특정 페이지를 열거나 어떤 상황이 되도록 구현할 수도 있구요.

해당 앱이 그 디바이스에서 실행 가능한지도 자동으로 판별해서 지원하지 않는 디바이스이면 이 배너광고가 나오지 않습니다.

그리고 물론 iOS 버전도 자동으로 체크해서 지원하지 않는 버전이면 이 배너 광고가 나오지 않구요.

이 기능은 간단히 메타태그 한 줄로 처리 가능하도록 했네요.

웹 싸이트 만들 때 사용할 만 한데요.

이 기능은 CNN 사이트 접속했다가 나오길래 신기해서 여기저기 검색해 보고 알아 낸 겁니다.

괜찮은 기능인 것 같아서 일단 애플에서 제공하는 문서를 아래  번역해 뒀습니다.

나중에 유용하게 써 먹을 수 있을 것 같네요.

Promoting Apps with Smart App Banners

iOS 6 버전부터 Safari browser 에 smart App Banner 기능이 추가 됐습니다. 아래 그림에서 보듯이 이 기능은 웹사이트에서 앱 스토어의 앱을 promoting 하는 표준화된 방법을 제공합니다.

Figure 7-1  A Smart App Banner of the Apple Store app

Note: Smart App Banner는 iOS 에서만 보여지고 OS X에서는 보여지지 않습니다.

Smart App Banner는 다른 promotional method들과 비교해서 유저의 browsing experience 면에서 획기적으로 개선 됐습니다. 이 배너는 iOS6 에 implement 되서 웹상에서 일관된 look and feel을 제공해 유저가 알아보기 쉽게 되었습니다. 유저는 이 배너를 tap 하면 다른 third-party 광고가 아니라 앱스토어로 가게 된다는 사실을 신뢰할 수 있게 됐습니다. 이 배너는 웹페이지 상단에 나타납니다. full screen 으로 나타나 웹 콘텐츠를 가리지 않습니다. 그리고 크고 알아보기 쉬운 close button 이 있어 유저가 쉽게 이 배너를 닫을 수 있습니다.


앱이 이미 유저의 디바이스에 인스톨 돼 있으면 이 배너는 다른 모습으로 보이게 됩니다. 유저가 이 배너를 tap 하면 그 깔려 있는 앱이 열리게 되죠. 그리고 만약 유저의 디바이스에 해당 앱이 없다면 배너를 tab 하면 앱스토어의 해당 앱 페이지를 open 하게 됩니다. 유저가 웹사이트로 되돌아오면 배너에 progress bar 가 나타나 이 앱이 다운로드 되는 상황을 알려 줍니다. 앱이 다운로드를 끝마치게 되면 View button 은 open button 으로 바뀌게 됩니다. 이 때 배너를 tap 하면 해당 앱이 open 되죠.


Smart App Banner는 자동으로 해당 앱이 유저 디바이스에서 지원이 되는지 여부를 판단합니다. 그래서 유저의 디바이스가 이 배너기능을 지원하지 않거나 해당 앱이 실행되지 않는 환경이라면 자동으로 이 배너는 나타나지 않게 됩니다.

Implementing a Smart App Banner on Your Website

여러분 웹사이트에 Smart App Banner 를 구현하시려면 페이지의 헤더 안에 아래 메타 태그를 넣어 주세요.

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

콤마(,) 로 나눠지는 세개의 파라미터가 있는데요. 그 내용은 아래와 같습니다.

• app-id: (Required.) 여러분 앱의 unique identifier. iTunes Link Maker 에서 여러분 앱 ID 를 찾으려면 Search Field 에서 여러분 앱 이름을 넣으세요. 그리고 해당 국가와 media type 을 선택하세요. 그리고 여러분 앱을 찾아서 오른쪽 column 에 있는 iPhone App Link 를 선택하세요. 여러분의 앱 아이디는 id 와 ?mt 사이에 있는 9자리 숫자입니다.
  
  

• affiliate-data: (Optional.) 여러분의 iTunes affiliate string 입니다. 만약 여러분이 iTunes affiliate 이 아니라면 http://www.apple.com/itunes/affiliates/ 에서 좀 더 자세한 사항을 읽어 보세요.
  
  

• app-argument: (Optional.) 여러분 native app 에게 context를 제공하는 URL. 이 파라미터를 사용하고 유저의 디바이스에 여러분 앱이 인스톨 돼 있다면 여러분의 iOS app 의 특정 지점을 open 할 수 있습니다. 이 기능은 navigational context 를 보유하고 있을 경우 유용합니다.
  

  • 만약 유저가 웹사이트의 navigational hierarchy 내 깊이 들어와 있다면 해당 document's entire URL을 pass 할 수 있습니다. 그리고 그것을 여러분 앱에서 parse 해서 앱 내의 적당한 곳이 open 되게 할 수 있습니다.

  • 만약 유저가 웹사이트에서 search를 하면 그 query string을 pass 할 수도 있습니다. 그래서 자연스럽게 앱내에서도 그 search가 작동하도록 할 수 있습니다.

  • 유저가 creating content 중이라면 해당 seesion ID를 pass 해서 앱내의 웹 세션 state를 다운로드 하도록 할수도 있습니다.
    
    

  server side script로 각 페이지의 app-argument를 dynamic하게 생성할 수도 있습니다. 그래서 여러분이 원하는 URL을 동적으로 생성할 수 있습니다.
  
  

Note: frame 안에 Smart App Banner를 display 할 수는 없습니다..

Providing Navigational Context to Your App

app delegate로 application:openURL:sourceApplication:annotation: method를 구현하면 해당 URL을 가지고 앱이 시작할 때 어떤 동작을 fire 할 수 있습니다. 즉 pass 한 URL을 interpret 해서 어떤 로직을 만들 수 있죠. app-argument parameter에 세팅한 값은 NSURL url object로서 활용 가능합니다.

Listing 7-1 에제는 native iOS app에 데이터를 pass 하는 웹사이트를 염두에 두고 작성한 겁니다. 이 기능을 구현하기 위해 URL이 string /profile를 포함하고 있는지 여부를 감지합니다.만약 있으면 profile view controller 를 열고 query string에 있는 해당 profile ID number를 pass 합니다.

Listing 7-1  Routing the user to the correct view controller

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
    // in this example, the URL from which the user came is http://example.com/profile/?12345
    // determine if the user was viewing a profile
    if ([[url path] isEqualToString:@"/profile"]) {
        // switch to profile view controller
        [self.tabBarController setSelectedViewController:profileViewController];
        // pull the profile id number found in the query string
        NSString *profileID = [url query];
        // pass profileID to profile view controller
        [profileViewController loadProfile:profileID];
    }
    return YES;
}