[RN] Deep Link란?

 

딥 링크(Deep linking)란?

딥링크는 특정 콘텐츠나 페이지로 직접 연결하는 방법이다. 웹 사이트나 모바일 애플리케이션에서 사용되며, 사용자가 앱의 특정 페이지나 기능으로 바로 이동할 수 있게 한다.

 

딥 링크의 필요성

아래는 웹 페이지에서 인스타그램의 특정 계정의 딥링크를 클릭할 때 앱의 설치 여부에 따른 다른 동작 방식을 보여주는 예시이다. 앱이 설치되어 있으면(우측) 인스타그램 앱으로 연결되고, 앱이 설치되어 있지 않으면(좌측) 웹 페이지에서 해당 계정의 페이지가 열리는 방식이다.

 

제 고양이의 인스타그램 계정입니다 🐈

 

유저가 딥 링크를 클릭했을 때 우측처럼 바로 앱의 특정 콘텐츠가 열리는 것이 아닌 앱 마켓으로 연결되거나, 앱의 메인으로 연결된다면 UX에 상당한 불편함이 있을 수 있다. 따라서 유저가 원하는 목적지를 제대로 도달할 수 있게 해주는 딥링크는 중요하다.

 

 

딥 링크의 종류

딥 링크에는 크게 세 가지의 표준 기술이 있다 : URI 스킴, 유니버셜 링크, 앱 링크이다.

 

📌 앱 스킴 (URI 스킴)

딥링크의 가장 초기 형태로, 가장 일반적으로 사용된다. 각 앱 특정 페이지마다 고유 주소(링크)를 설정하여 해당 링크를 클릭하면 앱 내 특정 콘탠츠로 이동한다. URI 스킴은 각 모바일 앱에서 지정한 Scheme으로 시작한다.

예를 들어, 유튜브는 `youtube://`, 멜론(아이폰)은 `meloniphone://` Scheme을 사용한다.

 

이러한 방식의 딥링크는 쉽고 간편하지만 Scheme값의 소유권 문제(중복 문제)가 발생하게 되었고 유니크한 URI를 점령하기 어려워졌다. 예를 들어 2개의 앱이 중복된 Scheme을 가질 경우 둘 중 하나의 딥링크는 하이재킹되어 유실될 수 있다. path등까지 모두 동일하면, Android에서는 딥링크로 오픈할 앱 선택창이 노출되고, iOS는 가장 최근에 설치한 앱이 열린다.

 

각 앱이 Scheme값을 공개적으로 내놓지 않기 때문에 개발자는 자신의 Scheme이 고유한지 확인하기 어려웠다. 이에 대안으로 나온 것이 유니버셜 링크와 앱 링크이다.

 

 

📌 유니버셜 링크와 앱 링크

유니버셜 링크와 앱 링크는 각각 iOS와 Android에서 제공하는 딥링크로, OS에 앱에 대한 도메인을 등록하여 소유권을 증명한다. 앱 빌드 시 앱을 열 도메인을 등록하고, 보안을 위해 등록한 도메인의 특정 경로에 인증 텍스트를 심어 놓는다. 그러면 앱이 설치된 후 OS 레벨에서 해당 도메인 경로의 인증 텍스트와 앱 빌드 시 값이 동일한지 검증하여 소유권을 인지하게 된다. 검증이 완료된 후에는 앱을 삭제하기 전까지 검증이 유효하다.

 

검증된 도메인으로 생성된 딥 링크를 클릭할 때, 앱이 설치된 경우에는 해당 앱의 특정 콘텐츠로 직접 이동하며, (앱이 설치되지 않아) 딥 링크 실패 시에는 해당 도메인의 웹페이지로 이동한다. 이 때 구현에 따라 해당 웹페이지에서 다양한 Fallback이 가능하기 때문에 웹사이트 혹은 마켓으로 보내는 것이 가능하다. (위 인스타그램 경우 또한 유니버셜 링크의 예시이다.)

 

 

---

 

iOS에서 App Scheme으로 딥링크 구현하기

iOS 폴더 내부 AppDelegate.m에 다음과 같은 내용을 추가한다. (iOS 9.x 이후)

// iOS 9.x or newer
#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

 

나의 경우에는 카카오 로그인 기능도 필요했기 때문에 딥링크를 구현하는 코드에 카카오 로그인 URL 처리를 추가하였다.

나의 코드는 아래와 같았다.

#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)app
     openURL:(NSURL *)url
     options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  if ([RNKakaoLogins isKakaoTalkLoginUrl:url]) {
    return [RNKakaoLogins handleOpenUrl:url];
  }
  
  if ([RCTLinkingManager application:app openURL:url options:options]) {
    return YES;
  }

  return NO;
}

 

---

 

이후 앱의 iOS 폴더 내부 프로젝트 이름 > Info.plist에 다음과 같은 내용을 추가해준다. 

<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLName</key>
		<string>{앱 번들 식별자}</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>{앱 스킴}</string>
		</array>
	</dict>
</array>

 

만약 앱 스킴이 hello라면 <string>hello<string> 이렇게 바로 적어주면 된다. 또한 <array> 내부에 <string>으로 카카오 앱 키를 전달할 수 있다.

 

(+ Xcode의 Info > URL Types > URL Scheme으로 설정하는 방법도 있다)

---

 

작업이 완료되면 pod install 후 npx react-native run-ios로 재빌드하면 iOS의 딥링크 세팅이 마무리된다.

 

---

Reference

https://reactnative.dev/docs/linking

https://reactnavigation.org/docs/deep-linking

https://k0502s.tistory.com/568

https://www.airbridge.io/ko/blog/deeplink-101-for-marketers-and-developers