딥링크(Deep Link)에 관하여 (Feat: URL Scheme, App Link, Universal Link)
최근 사내에서 딥링크 관련 레포를 전임(?) 받게됐는데
요게 정확히 어떻게 동작하는지, 다른 방식들과 어떤 차이가 있는지 직접 정리해보면서 알아가보려고 한다!
1. 딥링크란 ?
모바일 환경에서 어떤 링크를 눌렀을 때
사용자를 앱 내의 어떤 화면으로 이동 시켜서 원하는 화면을 보여줄 수 있게 하는 기술이다!
위 예시로, 카카오 결제하기 화면에서 "다음" 이라는 버튼을 눌렀을 때 카카오톡 내 결제하기 화면으로 이동하게 되는데,
이런 것들이 바로 딥링크라고 볼 수 있다.
이런 딥링크 기술은 3가지 종류가 존재하는데, 각 방식과 구현 방법에 대해 알아보자
2. URL Scheme
커스텀 스킴이라고 불리는 URL 스킴은 가장 오래되었고 현 제일 많이 쓰이는 스킴이다.
URL 스킴은 아래와 같은 구조를 갖고 있다.
ex) supertoss://toss/pay(토스), naversearchapp://default?version=1(네이버앱)
- Scheme: 이동하고 싶은 앱 이름
- Host: 서버 주소를 뜻함(딥링크에서 생략 가능)
- Path: 앱에서 들어가고 싶은 페이지
- Params: 페이지의 추가적인 매개변수
URL 스킴에는 단점이 크게 2가지가 있는데,
해당 스킴으로 앱 설치 유무를 파악할 수 없으며 앱이 설치되어 있지 않으면 동작하지 않는다.
그리고, 또 다른 단점은 서로 다른 앱에서 같은 스킴을 사용할 수 있다는 점이다.
Android는 같은 스킴이 있다면 연결 프로그램으로 선택할 수 있는 기능이 있지만, IOS는 존재하지 않는다..
2-1 Andorid에서 구현하기
https://developer.android.com/training/app-links/deep-linking?hl=ko
앱 콘텐츠 딥 링크 만들기 | Android Developers
사용자가 링크를 통해 앱으로 이동할 수 있게 하려면 앱 매니페스트에서 관련 활동에 인텐트 필터를 추가해야 합니다. 이러한 인텐트 필터를 사용하면 모든 활동의 콘텐츠로 연결되는 딥 링크
developer.android.com
공식문서에 아주 친절하게 잘 나와있긴 하지만, 간단하게 구현해보자 !
1. AndroidManifest.xml에 속성 추가
안드로이드 프로젝트를 생성하고 AndroidManifest.xml 파일에서 intent-filter을 추가한다.
<intent-filter>
<!-- Google 검색에서 인텐트 필터에 도달할 수 있도록 ACTION_VIEW 인텐트 작업을 지정 -->
<action android:name="android.intent.action.VIEW"/>
<!-- android:scheme 속성을 포함하는 data 태그를 하나 이상 추가 -->
<!-- android:path 속성 또는 pathPattern이나 pathPrefix을 이용해 다양한 URI 경로 구분 가능 -->
<data android:scheme="beni" host="example" />
<!-- [BROWSABLE], [DEFAULT] 속성 가진 category 태그 추가 -->
<category android:name="android.intent.category.BROWSABLE"/>
<category android:name="android.intent.category.DEFAULT"/>
</intent-filter>
위 코드는 beni://example 라는 스킴으로 동작할 수 있게 한다.
2. intent 데이터 수신
우리가 선언한 intent데이터는 일반적으로 onCreate()나 onStart()와 같은 초기 콜백에서 받아온다
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.main)
// intent속성의 action값을 가져온다
val action: String? = intent?.action
// intent속성의 data값을 가져온다
val data: Uri? = intent?.data
}
해당 값을 이용해서 어느 화면으로 이동할 건지에 대해 정의하면 된다.
2-2 Ios 에서 구현하기
https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app
Defining a custom URL scheme for your app | Apple Developer Documentation
Use specially formatted URLs to link to content within your app.
developer.apple.com
요기도 공식문서가 참 친절하다
1. 유니크한 URL 스킴 등록
xcode의 info 탭에서 URL Types를 추가 해준다.
2. plist에 호출하고자 하는 앱의 URL 스킴의 하위항목을 입력한다.
ApplicationQueriesSchemes 키를 찾고, 만약 해당 키가 없다면 새로 "LSApplicationQueriesSchemes"를 키로 추가한다.
3. URL 스킴 데이터 수신
시스템은 또한 앱이 지원하는 커스텀 파일 타입을 열기 위해 앱 delegate 파일에서 해당 url을 파싱 가능하다.
func application(_ application: UIApplication,
open url: URL,
options: [UIApplicationOpenURLOptionsKey : Any] = [:] ) -> Bool {
// 이 곳에서 파싱해준다.
}
혹은, sceneDelegate에서 파싱 가능하다.
func scene(_ scene: UIScene,
willConnectTo session: UISceneSession,
options connectionOptions: UIScene.ConnectionOptions) {
// 요기서 파싱!
}
3. App Link/Universal Link
URL 스킴의 한계(같은 스킴이 가능한 부분)을 보완하기 위해
Andorid에서는 앱링크, IOS에서는 유니버셜 링크가 등장했다.
커스텀 스킴과 달리 App Link, Universal Link는 표준 웹링크 형태인데,
예를 들어 내 서비스가 웹에서 www.example.com에 운영되고 있으면, 이 링크 그대로 딥링크에 활용하는 것이다.
앱링크/딥링크를 사용하기 위해선 앱/웹 둘다 설정이 필요하다.
3-1 App Link 적용 방법
https://developer.android.com/codelabs/android-app-links-introduction?hl=ko#3
Android App Links 구성, 구현, 확인 | Android Developers
이 Codelab에서는 일련의 식당을 나열하는 Android 앱을 빌드합니다. Android App Links의 설계, 구성, 확인을 돕는 것을 목표로 합니다.
developer.android.com
이전 딥링크 구현와 비슷하게, intent 속성에서 data요소만 바꿔주면 된다.
<intent-filter>
...
<data android:scheme="http" />
<data android:scheme="https" />
<data android:host="example.com" />
<data android:path="/restaurants" />
<data android:pathPrefix="/restaurants/orders" />
</intent-filter>
위 방식으로 설정해놓으면, 아래 URL로 앱에 접근이 가능하다.
- http://example.com/restaurants
- https://example.com/restaurants
- http://example.com/restaurants/orders/*
- https://example.com/restaurants/orders/*
그 다음, 웹사이트와 연결하기 위해 웹 서버 .well-known이라는 path에 assetlinks.json 이라는 파일을 추가해야 한다.
(CRA나 vite-react 템플릿으로 생성한 프로젝트는 public/.well-known 내 파일을 위치시키면 된다.)
ex) https://www.example.com/.well-known/assetlinks.json
[{
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "com.devrel.deeplinksbasics",
"sha256_cert_fingerprints":
["B0:4E:29:05:4E:AB:44:C6:9A:CB:D5:89:A3:A8:1C:FF:09:6B:45:00:C5:FD:D1:3E:3E:12:C5:F3:FB:BD:BA:D3"]
}
}]
해당 파일을 위 형식으로 생겼는데,
- namespace : 모든 Android 앱의 android_app (고정 값)
- package_name : 패키지 이름
- sha256_cert_fingerprints : 앱 인증서의 지문
sha256_cert_fingerprints는 안드로이드 프로젝트에서 생성할 수 있다
3-2 Universal Link 적용 방법
1. IOS 프로젝트에서 Capability - Associated Domains 추가
앱에서 유니버셜 링크를 허용할 도메인을 추가해줘야 한다.
Project > Target > Signing&Capabilities> Associated Domains에 Domains
2. .well-known에 apple-app-site-association(AASA) 파일을 추가한다.
{
"applinks": {
"apps": [],
"details": [
{
"appID": "<TEAM_DEVELOPER_ID>.<BUNDLE_IDENTIFIER>",
"paths": [ "*" ]
},
{
"appID": "<TEAM_DEVELOPER_ID>.<BUNDLE_IDENTIFIER>",
"paths": [ "/articles/*" ]
},
{
"appID": "<TEAM_DEVELOPER_ID>.<ANOTHER_APP_BUNDLE_IDENTIFIER>",
"paths": ["/blog/*","/articles/*"]
}
]
}
}
해당 파일은 위 형식을 가지고 있는데, 각 필드의 의미는 아래와 같다.
- apps: 빈 배열로 유지
- details: 웹사이트에서 핸들링되는 앱들의 목록(한 웹사이트에서 유니버설 링크를 사용하는 여러 앱에 대한 연동 가능)
- appID: 앱의 식별 값으로 팀 아이디와 번들 id를 위해 사용, 형식: <TEAM_DEVELOPER_ID>.<BUNDLE_IDENTIFIER>
- paths: 앱에서 지원하는 웹사이트 경로
* 앱링크, 유니버셜 링크 파싱은 커스텀 스킴 파싱과 거의 유사하게 구현한다.
4. 이 외 스킴
URL 스킴, 앱 링크, 유니버셜 링크 이외에도 여러 링크들이 있다.
많이 쓰이는 방식은 아니라 간단하게 소개하고자 한다
4-1 디퍼드 딥링크(Deferred Deeplink)
디퍼드 딥링크는 문자 그대로 지연된 딥링크를 의미하는데,
앱이 설치되지 않은 유저가 링크를 클릭하면 앱을 설치하고 앱을 실행하기까지를 기다려주고 딥링크를 실행하는 방식을 말한다.
단점은 구현이 복잡하며, OS마다 각각의 디퍼드 딥링크를 구현해줘야 함!
4-2 다이나믹 링크/원링크(Dynamic Link/One Link)
디퍼드 딥링크는 OS별로 구현해줘야 되는 반면,
하나의 링크를 사용하여 자동으로 특정 앱 내 페이지로 이동시키거나 앱스토어로 이동시킨다.
ex) Firebase Dynamic Links, AppsFlyer OneLink
5. 총 정리
| 구분 | 종류 | 플랫폼 | 정의 | 단점 |
| 딥링크(Deep Link) | URL 스킴 | ALL | 앱 내 특정 페이지로 직접 연결 | 앱 설치 과정에서 딥링크 유실, 스킴 중복 가능 |
| 앱 링크(App Link) | AOS | Android 앱과 웹 URL 연결 | 앱 설치 과정에서 딥링크 유실, 특정 OS에서만 사용 가능 |
|
| 유니버셜 링크(Universal Link) | IOS | iOS 앱과 웹 URL 연결 | ||
| 디퍼드 딥링크(Deferred Deeplink) | ALL | 앱 설치 후 특정 페이지로 연결 | OS 별로 따로 구현 | |
| 다이나믹 링크(Dynamic Link) | ALL | OS 상관없이 1개의 링크로 앱 설치 후 특정 페이지로 연결 | 유료, IOS에서 잘 안된다는 평이 있음 |
|
| 원링크(One LInk) | ALL | |||
끝 !
참고 링크
https://miaow-miaow.tistory.com/185
https://tdcian.tistory.com/370
https://skyfox83.tistory.com/567