티스토리 뷰

iOS

iOS) Firebase 에서 동적링크 만들기

hyun99999 2022. 4. 14. 22:48
728x90
반응형

내용

  • Firebase 에서 동적링크를 만들면서 맞닥뜨린 문제와 해결을 적어보겠습니다.

🔥 Firebase 동적 링크

  • 동적 링크란, 접속한 플랫폼이 어디인가에 따라 적절한 반응을 하도록 하는 것이다.
  • 사용자가 특정 앱 화면 링크를 공유하거나 해당 링크를 통해서 앱을 설치했을 때 추천인 코드가 입력되는 프로모션과 같은 혜택을 주는데 사용된다.

Firebase 동적 링크 | Firebase Documentation](https://firebase.google.com/docs/dynamic-links?hl=ko

🔥 Firebase 및 동적 링크 SDK 설정

  • iOS에서 동적 링크를 통해서 접근한 경우를 수신해서 대응할 수 있는 방법이다.

iOS에서 동적 링크 수신 | Firebase Documentation

🔥 동적 링크 애널리틱스 데이터 보기

동적 링크 애널리틱스 데이터 보기 | Firebase Documentation

🔥 동적 링크 만들기

Firebase 에서 동적 링크를 만들기 위해서 아래 포스팅을 참고해서 진행했다.

[iOS - swift] 4. DeepLink (딥 링크) - Dynamic Link (다이나믹 링크) 사용 방법 (Firebase, 공유하기 기능)

iOS - 앱에서 Firebase Dynamic Link 생성하고 수신하기

동적링크의 기능을 살려서

  • 앱이 미설치되어 있다면 앱스토어로 연결.
  • 데스크탑 환경에서 링크를 열게되면 미리 만들어둔 랜딩페이지로 연결.

하도록 해보겠다.

구상

  • isi 파라미터를 통해서 앱이 미설치되어있다면 앱스토어로 연결하려 했다. 이는 Firebase 동적 링크 만들때 설정을 통해서 자동으로 들어간다.
2
  • Firebase 의 문서를 읽고 랜딩 페이지 연결은 ofl 을 통해서 진행하려했다.

Manually constructing a Dynamic Link URL | Firebase Documentation

  • 동적 링크 설정

딥 링크 URL 에 ofl 파라미터를 활용해서 집어넣었다.(이 부분은 잘못된 방법이고, 추후에 해결한 방법이 나온다.)

Apple용 링크 동작 정의 에서 App 프로젝트를 등록하면 해당 프로젝트에 등록된 Apple Store ID 가 isi 파라미터에 추가된다.

  • 위와 같이 입력하면 다음과 같이 정보를 가진다. (잘못된 방법이었기 때문에 수동으로 입력한 ofl 앞뒤로 / 문자가 대체됨을 볼 수 있다.)

문제 인식

  • 에러가 나왔다. 웹에서 URL 을 열었을때 다음과 같은 화면이 나왔다.
  • Firebase 에서 제공하는 링크 미리보기(디버그) 에서 URL pattern 에 문제가 있음을 알게되었다.(맨위 에러)

해결

  • 앞서 읽어본 문서에서 link 부분을 좀 더 자세히 읽어보았다.

Manually constructing a Dynamic Link URL | Firebase Documentation

💡 link 에는 올바른 형식의 URL 이어야하고, 올바르게 URL 인코딩되어야 하고, HTTP 또는 HTTPS를 사용해야 하며, 다른 동적 링크가 될 수 없습니다.

라고 명시하고 있었다.

더 읽어보니

💡 사용자가 데스크탑 웹 브라우저에서 동적 링크를 열면 해당 URL 이 로드된다(ofl 매개변수가 지정되지 않은 경우)

라고 했다.

앞서 놓쳤는데 동적 링크 설정 설명에 보면 딥링크 URL 자체가 데스크톱에서는 해당 URL 이동한다고 했었다.

  • 위와 같이 설정하니 다음과 같은 정보를 가지게 되었다.

아까 입력한 딥 링크 URL 이 link 파라미터에 들어가있었고, 이를 통해서 웹에서 랜딩페이지를 열 수 있도록 하고 있었다.

ofl 파라미터가 지정되어있지 않기때문에 앞서 문서에서 언급된 대로 link 파라미터의 URL 이 열리게 되었다.

(추가적으로 st, si 를 사용해서 소셜 공유 미리보기도 만들어보았다.)

소셜 메타데이터로 링크 미리보기 생성 | Firebase Documentation

옵션을 통해서 생략도 가능했다.

소셜 공유 미리보기도 잘 나왔다.

💡 결과적으로 파이어베이스에서 동적 링크를 만드는 과정에서 옵션을 통해서 딥 링크와 여러가지 파라미터를 가진 동적링크가 자연스럽게 만들어졌다.

이러자 링크 미리보기(디버그) 맨위 오류가 사라졌다. 두번째는 안드로이드 오류이고, 세번째 오류도 해결해보자.

아래의 문서를 확인하니 보안상 https://teamspark.page.link 라는 URL의 패턴 개선이 필요하다고 한다.

Allow specific URL patterns

  • 하지만 이처럼 무료 도메인을 사용했기 때문에 어쩔 수 없었다.

정리

Firebase 에서 동적링크를 만들어서

  • 앱이 설치되었다면 앱을 연다.
  • 앱이 미설치라면 앱스토어를 연다.
  • 데스크탑 환경에서는 설정해둔 웹페이지를 연다.

와 같이 설정해보았다.

앱이 설치되었다면 앱을 열기위해서는 iOS 에서는 Universal Link 를 추가해야 한다. 이 방법도 다음의 포스팅으로 알아보자.

iOS) 유니버셜 링크 적용하기

728x90
반응형
댓글
최근에 올라온 글
최근에 달린 댓글
글 보관함
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
링크
Total
Today
Yesterday