Smart App Banner란?

스마트 앱 배너란?

스마트 앱 배너는 애플 앱스토어에서 앱을 홍보하는 표준 방식을 의미한다.

 

iOS에서 공식지원하는 Smart App Banner는 웹 페이지의 최상단에 위치하게 된다. 

안타깝게도 안드로이드 환경에서는 따로 제공해 주는 게 없기 때문에 Smart App Banner와 비슷하게 따로 구현해줘야 한다. 

 

Smart App Banner는 iOS에서 공식 지원한다는점, 해당 App이 사용자 Device에서 지원가능한지 여부를 자체 판단하여 배너를 보여주고 안 보여주는 점, 기타 구현과 대응에 힘을 쏟을 필요가 없다는 점 등등 다양한 장점을 가지고 있다고 생각된다. 

 

그렇다면 무조건 Smart App Banner를 쓰는게 좋은 게 아닐까?
꼭 그렇지는 않은 게, 커스터마이징이 힘들다는 점이다.


특히 디자인적인 요소가 제공하는 사이트와 많이 다를때 매우 난감한 상황이 발생할 수 있다.


아무래도 시스템 배너이기 때문에 개발자가 커스터마이징 할 수 없는 영역이고, 만약 디자인적인 요소를 많이 해친다면 따로 구현하는 게 옳다.

구현 방법

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

정말 간단하게 메타태그만 설정하면 된다고 한다.

- app-id : 앱의 고유 식별자를 입력해주면 된다. 앱의 고유 식별자를 통해 아이콘/이름/설명등을 자동으로 가져와 배너로 만들어서 보여준다.

- app-argument : 이 값은 선택사항인데, 앱의 딥링크를 의미한다고 생각하면 된다. 만약 앱을 설치한 경우 웹사이트에서 앱의 해당 위치로 보내준다.

벤치마킹

자 그러면 당연하게도 실제로 적용한 사이트가 있을지 궁금한 것이 인지상정! 몇몇 사이트를 찾아보니까

"KREAM"에서 해당 기능을 사용하고 있다는 것을 발견하였다.

그런데 재밌는 건 apple-itunes-app이라는 메타 태그가 디버깅 모드로 찾아봐도 없다는 점이다...? (내가 못 찾은 걸 수도)

그러면 안 쓰는 건까? 싶기도 하지만 디버깅 모드로 보면 확실히 시스템 영역으로 보여 쓰는 거 같기는 하다.

 

모바일 환경의 사파리에서는 스마트 앱 배너가 노출되는 거 같고 (우측),

pc환경에서는 반응형으로 구현되어 있는데, 모바일로 판단되는 크기면 직접 만든 배너가 노출되는 듯하다. (좌측)

요약

스마트 앱 배너는 iOS에서 공식 지원한다. 

장점 

• 해당 App이 사용자 Device에서 지원가능한지 여부를 자체 판단하여 배너를 보여주고 안 보여준다. 
• 기타 구현과 대응에 힘을 쏟을 필요가 없다. 

단점 

• 커스터마이징이 힘들다. 어차피 안드로이드는 구현해야 해서 굳이 써야 하나 싶기도 하고 애매하다.

---

참고: https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners

Promoting Apps with Smart App Banners | Apple Developer Documentation