안녕하세요. 휴먼스케이프 Hugh 입니다.
저희 레어노트 서비스에는 희귀질환 환자들을 위한 퀄리티 높은 다양한 콘텐츠들이 있는데요. 이 유용한 콘텐츠들을 환우분들에게 널리 알리기 위해 공유 기능이 추가됩니다.
이번 공유 기능은 기존에 푸시를 구현하면서 사용하고 있던 react-native-firebase의 dynamic link를 활용하여 구현하였는데요. react-native로 서비스를 하고 있는 앱이라면 이미 firebase를 사용중일 거라고 예상이 됩니다. 이를 활용하면 네이티브 단의 양 쪽 플랫폼의 딥링크를 구현하는 공수 없이 공유 기능을 추가할 수 있습니다.
구현과정을 간략하게 공유드리겠습니다.
저는 구현을 위해서 아래 두 라이브러리를 사용하였습니다. firebase의 경우 서비스를 하고 있는 앱이라면 이미 대부분 사용중일 거라고 생각되니, dynamic link 부분만 추가적으로 설정하면 될 것 같습니다.
- react-native-firebase(v5.x.x)
- react-native-share
구현이 완료된 결과물의 예상되는 유저 플로우는 아래와 같습니다.
1. 앱에서 콘텐츠 공유 버튼을 눌러서 소셜앱으로 공유
2. 소셜앱에서 공유 받은 링크를 클릭
3. 이미 앱이 설치되어 있다면 앱 내 공유 받은 콘텐츠로 이동, 앱이 없다면 앱 스토어 설치 페이지로 이동
4. pc에서 클릭했다면 특정 페이지로 이동(ex: 홈페이지의 서비스 소개 페이지)위 요구 사항을 충족할 수 있는 dynamic link를 생성하는 방법은 여러 가지가 있습니다. 마케터 분들께서는 firebase console 에서 생성을 하실텐데요.
firebase console을 통해서 생성을 하면 클릭 몇 번으로 요구 사항을 충족시킬 수 있는 링크를 생성을 할 수 있지만, 공유 기능의 경우 앱에서 공유 버튼을 누를 때마다 다른 값을 전달하는 링크를 생성해 주어야 하기 때문에 다른 방법을 사용해야 합니다.
주의해야 할 사항은 firebase console에서 생성한 동적 링크와 프로그래밍으로 생성한 동적 링크의 데이터 수치를 확인 하는 방법이 다르다는 것인데요.
firebase console에서 생성한 동적 링크의 경우 firebase console에서 데이터 수치를 확인할 수 있지만 프로그래밍으로 생성한 동적 링크의 경우 firebase console에서 트래킹이 되지 않아, 동적 링크 데이터 추적을 위한 별도의 analytics api를 호출하거나, 공유 플로우 마다 적절한 로그이벤트를 달아 주어야 합니다.
구현하는 방법의 선택지는 두 가지가 있었습니다.
첫 번째는 firebase link의 DynamicLink 객체를 사용하는 방법이고, 두 번째는 rest api 를 통해서 직접 생성 요청을 보내는 것 입니다.
저는 두 가지 방법으로 다 해보았는데 rest api를 사용하는 경우 좀 더 다양한 속성값들을 활용할 수 있었습니다. 하지만 저의 경우 DynamicLink 객체에 정의된 필드 만으로도 구현이 가능하여 첫 번째 방법으로 구현을 하였습니다.
첫 번째 방법의 예제 코드를 보면 아래와 같습니다.
const link =
new firebase.links.DynamicLink('https://example.com?param1=foo¶m2=bar', 'abc123.page.link')
.android.setPackageName('com.example.android')
.ios.setBundleId('com.example.ios');
firebase.links()
.createShortDynamicLink(link, 'UNGUESSABLE')
.then((url) => {
// ...
});DynamicLink 생성자의 첫 번째 파라미터는 앱에서 인식될 링크로 앱에서 받을 파라미터들을 위와 같이 query string 형식으로 보내주면 됩니다. 두 번째 파라미터는 firebase console에서 만든 dynamic link prefix URL 값이 됩니다. 첫 번째 파라미터의 경우 데스크톱에서 클릭한다면 해당 url로 이동하기 때문에 적절한 url을 사용하면 됩니다.(저희의 경우 레어노트 랜딩 페이지로 이동)
위의 then 절에서 리턴하는 url은 dynamic link로 https://abc123.page.link/{자동생성되는랜덤스트링} 모양으로 생성이 됩니다.
이제 이 url을 share 라이브러리를 이용하여 아래 예제와 같이 사용하면 네이티브 공유 모듈을 호출하여 공유 가능한 앱들의 목록이 보여집니다.
const options = {
message: 'message',
url: 'dynaminLink',
};Share.open(options)
.then(() => {})
.catch((err) => {
err && console.error(err);
});
이제 기능이 완성되었는데요. 최종적으로 동적 링크를 공유받은 사용자의 소셜앱(ex: 카카오톡)에서 공유 템플릿이 이쁘게 보여지려면 동적 링크를 생성할 때 SocialParameter 를 적절하게 세팅해주면 아래와 같은 포맷으로 공유가 됩니다.
여기까지 공유 기능 구현과정을 간단하게 공유드렸는데요. 꼭 firebase가 아니더라도 현재 본인의 서비스에서 사용중인 앱 데이터 분석 플랫폼에서 제공하는 sdk를 이용하면 위와 비슷한 과정으로 구현이 가능합니다.
감사합니다.
[초기에 공유 기능 적용 후 업데이트된 현재 상황]
공유 버튼을 클릭 시 마다 공유 링크 생성 -> 어드민에서 에디터를 이용하여 콘텐츠 등록 시 고유한 공유 링크 생성 후 사용
