웹 페이지에 iOS6의 Smart App Banner 적용하기

iOS6의 새로운 기능 중 하나가 Smart App Banner입니다.
이 기능은 쉽게 말해서 아래와 같이 iOS에 내장된 Safari로 특정 웹페이지를 호출했을 때 화면 상단에 App 배너가 나타나게 하는 기능입니다.

적용을 위해서는 웹 페이지에 간단한 메타태그 한 줄만 넣어주면 됩니다.
참 간단하죠.

 

자 그럼 위 태그에 입력해야할 값들에 대해서 알아보겠습니다.

1. name

이 부분은 그냥 위와 같이 적어주시면 됩니다. itunes에 적용된 앱이라는 것을 명시하기 위함입니다.

2. content

2.1. app-id (필수)

앱스토어에 등록된 앱이 부여받은 ID값입니다. 이 값을 알기 위해서는 http://itunes.apple.com/linkmaker/ 에서 검색을 합니다.
저는 아래와 같이 아임리얼맛집을 검색했습니다.

하단에 결과가 나왔죠?  그럼 하단 오른쪽에 있는 “iPhone App Link”를 살포시 눌러줍니다.
아래와 같이 검색된 앱의 상세정보가 나타납니다.

여기에서 중요한 부분은
주소 중 “/idXXXXXXXXX?mt=” 의 XXXXXXXXX에 위치한 숫자입니다.
이 숫자가 app-id에 들어갈 ID값입니다.

2.2. affilidate-data (선택)

이 부분은 관련된 컨텐츠를 등록하기 위한 필드이며, http://www.apple.com/itunes/affiliates/ 에서 등록을 해야 사용이 가능합니다.
따로 테스트해 볼 방법은 없는 상황이라 자세한 사항은 위에 명시한 사이트에서 얻으셔야 합니다.
검색을 하다보니 잘 설명된 링크를 얻었습니다. http://david-smith.org/blog/2011/12/28/user-friendly-itunes-affiliate-links/

2.3. app-argument (선택)

URL이 입력되며, 입력된 URL은 Facebook에서 제공하는 Deep-Linking과 유사하게 해당 앱의 특정 컨텐츠를 열어줄 수도 있습니다.
물론 앱과의 프로토콜은 맞춰야겠죠.
예를 들어, 핀터레스트의 특정 컨텐츠의 상세 페이지에서 Smart Banner의 열기(View)를 터치했을 때 핀터레스트 앱이 실행되고 해당 페이지로 이동하는 역할을 합니다.
scheme://protocol_text 형식으로 명명하고 앱의 아래 메소드에 이에 대한 정의를 구현하면 됩니다.

테스트를 위해 만들어 본 페이지는 http://y8k.me/SmartTest/ 에서 보실 수 있습니다.
iPad로 봤을 때는 스크린샷까지 나타납니다.

0 Shares:
댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like

iOS6에서 다시 태어난 UUID!

iOS5부터 deprecated된 기기의 UDID를 가져오는 메소드 때문에 골머리 썩고 있는 업체가 많은 것으로 알고 있다. 사실 나부터 이것…