웹 페이지에 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로 봤을 때는 스크린샷까지 나타납니다.

Leave a Comment

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