이번에 앱에 딥링크를 적용하면서 처음으로 Firebase가 제공하는 Dynamic Link에 대해 알게 되었다. 구글 없었으면 대체 어떻게 살았을까 싶다.
이번주에는 앱 단에서 Firebase Dynamic 링크를 어떻게 생성하고, 어떻게 수신하는지 알아보도록 하자. 2021년 8월, iOS 14 기준이다.
Dynamic Link란
Firebase에서 제공하는 Dynamic Link는, 같은 링크에 접속했을 때 접속한 플랫폼이 어딘지에 따라 적절한 반응을 하도록 하는 기능이다.
똑같은 링크를 iOS에서 열든, 안드로이드에서 열든, 앱이 설치되어있으면 앱을 열고, 앱이 설치되어있지 않으면 각각 앱스토어, 플레이 스토어에서 해당 앱 다운로드 페이지를 열어준다. 데스크탑으로 들어갔을 때도 개발자가 설정한 링크로 이동될 수 있도록 할 수 있다.
비슷한 기능을 제공하는 서비스로는 Branch의 DeepLinking이 있다.
어떤 경우에 사용할 수 있을까?
예를 들면 사용자를 초대하는 기능에 있다. 만약 우리 앱에서 이벤트를 하는데, 이를 홍보하고 싶을 때 이 다이나믹 링크를 사용할 수 있다.
다이나믹 링크에 앱 내부의 이벤트 페이지로 넘어갈 수 있도록 설정해두고, 해당 링크를 유저들에게 복사하도록 한다.
그러면 유저는 해당 링크를 카카오톡이든 어디든 올려서 홍보할텐데, 그 링크를 누르는 사람은 아이폰이든, 갤럭시든 상관없이 각자 플랫폼에 맞는 앱을 다운로드할 수 있고, 앱 내부 이벤트 페이지에 접근할 수 있다.
이런 식으로 어떤 플랫폼에서 앱으로 접근할지 모르는데, 초대를 위한 링크를 전달해야 할 때 다이나믹 링크의 기능이 굉장히 적절하다.
앱에서 Dynamic Link 생성하기
일단 기본적으로 Firebase 관련 라이브러리가 다운되어있어야 하고, Firebase에 앱을 추가하는 등의 기반 작업이 되어있어야 한다. 이에 대해서는 Firebase 문서를 참고하면 도움이 될 것이다.
그리고 처음으로 다이나믹 링크를 만들기 전에 Firebase Console으로 들어가서 ‘동적 링크’ 메뉴를 한 번 들어가봐야 한다. 그래야 서비스 약관 동의를 진행할 수 있고, 기본적인 URL Prefix를 만들 수 있다. 이를 기반으로 앱에서도 링크를 생성할 수 있다.
기본적인 URL Prefix(아래 예시에서는 example.page.link)를 Firebase Console에서 설정했다면 자신의 Prefix 뒤에 아래와 같이 문구를 붙인 채로 접속해보자.
https://example.page.link/apple-app-site-association들어가보면 아래처럼 JSON 문구가 나올 것이다.
{"applinks":{"apps":[],"details":[{"appID":"com.어쩌고.저쩌고","paths":["NOT /_/*","/*"]}]}}여기서 details가 비어있는 것만 아니라면 이 Prefix를 이용해서 다이나믹 링크를 만들 준비가 되었다고 생각할 수 있다.
기반 준비가 다 되었으면 이 패키지를 import한다.
import FirebaseDynamicLinks그 후 iOS Builder API라는 기능을 사용해 다이나믹 링크를 만들 것이다.
DynamicLinkComponent를 이용해 다이나믹 링크를 생성한다. 이 컴포넌트가 링크를 만들어주는 역할을 하기에 linkBuilder 로 이름 붙인다.
domainURIPrefix 는 아까 Firebase Console에서 설정한 Prefix로 설정한다. 그리고 link 는 우리가 원하는 링크를 작성하면 된다. 다이나믹 링크에 접속하면, 플랫폼에 따라 일련의 과정을 수행한 후에는 이 link 에 적힌 값으로 접근하게 된다. 이 뒤에서 할 것이지만 다이나믹 링크를 ‘수신’할 때 얻는 링크는 여기에 적힌 link 값이 된다. 여기서는 다이나믹 링크를 통해 앱에 들어올 때 앱은 https://example.page.link/openApp 이라는 링크를 얻어서 처리할 수 있게 된다.
컴포넌트에 몇 가지 Parameter를 설정해줘야 한다. 위 코드에서는 iOS, 안드로이드의 앱 번들 ID를 설정해줬고, iOS 앱 스토어 아이디까지 설정해줬다. iOS의 경우에는 앱 스토어 아이디를 설정해주지 않으면 앱이 설치가 되지 않았을 경우 앱 스토어로 연결해주는 기능이 되지 않아서 넣어줘야 했다.
이후 linkBuilder!.url 에 접근해 URL을 얻어낼 수 있었다.
이 외에도 다양한 Parameter들을 설정할 수 있는데, 나의 경우 소셜 메타 데이터를 집어넣기도 했다. 카카오톡, 페이스북, 슬랙 등에 링크를 붙여넣으면 추가적인 정보가 뜰 때가 있다. 그 내용을 만들어줄 수 있다.
DynamicLinkSocialMetaTagParameters 를 선언 후 linkBuilder 에 집어넣어준다. 그리고 위처럼 제목, 썸네일 이미지 링크를 설정해주면 링크를 붙여넣은 곳에서 더 많은 정보를 확인할 수 있다.
위에서 얻은 linkBuilder!.url 의 주소를 확인해보면 아래와 같은 결과가 나온다.
https://example.page.link/?ibi=com%2Exxx%2Exxxios&st=우리 앱에 참여해보세요!&isi=1234567890&apn=com%2Exxx%2Exxxandroid&link=https%3A%2F%2Fexample%2Epage%2Elink%2FopenApp이런 형식이 된다. 자세히 뜯어보면, ibi와 apn는 각 플랫폼의 번들 ID를, 링크는 우리가 설정했던 링크, st는 소셜 메타데이터의 타이틀이다.(이미지 링크는 뺌)
이 태그에 대한 자세한 설명은 동적 링크 URL 직접 만들기 | Firebase (google.com) 여기서 확인할 수 있다.
이렇게 Parameter를 집어넣는 방식을 활용해, iOS나 안드로이드가 아닌 다른 플랫폼(데스크탑 등)에서 접근할 때 어떤 링크로 연결될지도 추가할 수 있다.
let processedLink = linkBuilder!.url!.absoluteString + "&ofl=https://medium.com"이렇게 설정하면 된다.
아무튼 이 긴 링크를 바로 공개해버리면 번들 아이디나 이런저런 내부 정보가 공개될 수가 있어서 이를 짧게 만들고 싶을 것이다.
그럴 때 DynamicLinkComponents.shortenURL 메서드를 사용하면 짧아진 길이의 링크를 얻을 수 있다. 다만, 원래 정해진 규칙을 통해 linkBuilder 에서 URL을 꺼내던 것과 달리, 이 작업은 인터넷 통신이 필요하다. 다이나믹 링크를 서버에 보내주면 서버에서 이를 줄여서 보내준다.
그래서 비동기 처리를 해줘야 하긴 한다. 나의 경우 Combine 프레임워크(RxSwift와 비슷하다고 생각하면 된다)를 이용해 비동기 처리를 진행했다.
이런 식으로 만들어 랜덤한 문자로 짧아진 링크를 얻어낼 수 있다.
만들고 나서도 뭔가 잘 되지 않을 땐, 디버깅을 위해 위에서 얻어낸 링크에다가 &d=1 을 끄트머리에 붙이고 해당 링크로 접속하면 Flow Chart를 보여주는 디버그 화면이 나온다.
앱에서 Dynamic Link 수신하기
다이나믹 링크를 사용자가 클릭했을 때, 우리 앱으로 연결되도록 하는 과정을 만들어보자.
이 과정은 코드보다는 세팅에 문제가 생길 가능성이 크다.
첫 번째로, 프로젝트의 xcodeproj 파일에 접근해 Target-Info로 들어간 후 가장 아래의 URL Types에 위처럼 새로운 타입을 추가해준다. Identifier는 그냥 우리가 인식하기 위한 이름이고 URL Scheme에 앱 번들 아이디를 적어주면 된다.
다음은 같은 파일의 Signing & Capability로 들어가 Associated Domains를 추가해준다. applinks:자신의 URL Prefix를 작성하면 된다. 여기서 applinks: 주소는 iOS에서 앱으로 연결시킬 때 사용하는 주소 형식이다.
만약 Associated Domains가 안보일 경우에는 추가적인 설정이 필요하다. 이는 developer.apple.com으로 접속해서 앱 Identifier를 수정해줘야 한다. 이 관련 설명은 How to Set Up Universal Links to Deep Link on Apple iOS | The Branch Blog 여기를 참고하면 좋을 것 같다.
그 후 AppDelegate에서 앱을 수신하는 코드를 작성하면 된다…인줄 알았는데, 나의 경우 최근에 앱을 만들었기 때문에 SceneDelegate 파일을 가지고 있었고, 관련 설정을 AppDelegate가 아닌 SceneDelegate에서 해줘야 했다.
AppDelegate에서 설정하는 법은 iOS에서 동적 링크 수신 | Firebase (google.com) 이 링크에서 확인할 수 있다.
나의 경우 SceneDelegate에 아래 코드를 추가했다.
여기서 얻는 linkHandled는 링크 생성하기 단계에서 넣은 ‘link’의 값이라고 생각하면 된다.
또한, 앱이 종료된 상태에서 다이나믹 링크를 통해 앱이 켜지는 경우도 핸들링 해주기 위해 다른 scene 함수도 살짝 수정했다.
이 부분은 자신의 SceneDelegate 설정에 따라 적절히 사용하면 된다.
결론
사실 딥링크를 개발하면서 이 기반 세팅 작업도 문제였지만, 여기엔 작성하지 않은 내부 핸들링 작업도 골치 아팠다. 일단 어찌저찌 네비게이션이 되도록 만들긴 했지만, 다른 앱들을 보면 어떻게 이렇게 잘 넘어가게 하는지 궁금할 따름이었다. 내가 SwiftUI를 써서 그런가, 확실히 제한적인 부분이 있는 것일 수도 있겠다 싶은…
아무튼 Firebase Dynamic Link 기능을 사용해볼 수 있어서 좋은 경험이었고, 앞으로도 활용할 수 있는 여지가 굉장히 많을 것 같다는 생각이 든다…
