애플 스마트 앱배너(smart app banner) 달아보세요

애플 스마트 앱배너 알고 계신가요?

 

그래도 나온지 꽤 오래된 기능인데

 

아직 그렇게 많이 쓰지는 않는것 같아요

 

디자인적으로 커스터마이징을 할수 없다는 이유도 있고, 트래킹 관련한 애로사항도 이유가 있을것 같습니다

 

 

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

Apple Developer Documentation

 

스마트 앱배너에 대한 공식문서는 이겁니다

 

 

 

 

앱배너는 이렇게 생겼습니다

 

웹사이트에 모바일 사파리로 접근했을때 스마트앱배너가 설정되어있는경우

 

앱스토어에서 바로 앱을 다운로드 받을수 있도록 배너를 자동생성해줍니다

 

 

 

그리고 굉장히 똑똑하게도(?) 앱이 이미 설치되어있는 경우 좀더 작은 사이즈로 배너가 생성되며

 

설치된 앱을 바로 열수 있도록 open(열기)버튼이 보여집니다

 

 

 

스마트앱배너를 적용하는 방법은 매우 간단합니다

 

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

 

이렇게만 header에 작성해주면 끝이예요

 

앱 id만 교체하여 넣어주면 해당 앱ID의 아이콘과 이름, 설명등을 자동으로 가져와서 배너를 만들어줍니다

 

그래서 스마트 앱배너랍니다

 

 

앱ID는 어떻게 찾냐구요?

 

 

https://tools.applemediaservices.com/app-store

Market with App Store

 

여기 링크에 들어가셔서 앱을 검색하세요

 

path의 /app/ 다음에 나오는 숫자가 앱 ID 입니다

 

https://tools.applemediaservices.com/app/1384790834?country=kr 

Market with the App Store

 

 

방금 소개해드린 meta 태그에는 app-argument 라는 optional한 값이 있는데요

 

이 값은 앱이 열릴때 앱으로 전달되는 url scheme을 지정할수 있습니다

 

그래서 현재 보고 있는 웹사이트의 화면과 대응되는 앱의 화면이 열릴수 있도록 돕습니다

 

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color

theme-color - HTML: HyperText Markup Language | MDN



스마트앱배너의 기본 색상은 smart하게 자동으로 지정됩니다만

 

이 색상을 강제로 지정할수 있습니다

 

바로 theme color를 사용하여 가능합니다

 

<meta name="theme-color" content="#4285f4" />

 

theme-color가 선언된 경우 theme-color에 지정된 색으로 앱배너의 배경색이 세팅됩니다

 

다만 지정된 theme-color를 애플이 무시를 하는 경우가 있는데

 

웹사이트에서 주요하게 쓰인 색과 색대비가 좋지 않은 경우 이 값을 무시하게 되는것 같습니다