딥링크 심화 — Universal Links와 App Links
딥링크는 외부에서 앱의 특정 화면으로 직접 이동하는 기술입니다. 마케팅, 공유, 푸시 알림에서 필수입니다.
딥링크 종류
| 종류 | URL 형태 | 앱 미설치 시 |
|---|---|---|
| URL Scheme | myapp://detail/123 | 에러 |
| Universal Links (iOS) | https://myapp.com/detail/123 | 웹으로 이동 |
| App Links (Android) | https://myapp.com/detail/123 | 웹으로 이동 |
Universal Links (iOS)
// apple-app-site-association (웹 서버에 배치)
// https://myapp.com/.well-known/apple-app-site-association
{
"applinks": {
"apps": [],
"details": [
{
"appID": "TEAMID.com.myapp",
"paths": ["/detail/*", "/profile/*", "/share/*"]
}
]
}
}
// Xcode에서 Associated Domains 추가
// Signing & Capabilities → + Capability → Associated Domains
// applinks:myapp.com
App Links (Android)
<!-- android/app/src/main/AndroidManifest.xml -->
<activity android:name=".MainActivity">
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="https" android:host="myapp.com" android:pathPrefix="/detail" />
</intent-filter>
</activity>
// assetlinks.json (웹 서버에 배치)
// https://myapp.com/.well-known/assetlinks.json
[{
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "com.myapp",
"sha256_cert_fingerprints": ["SHA256:..."]
}
}]
React Navigation 딥링크 처리
import { NavigationContainer } from '@react-navigation/native';
import { Linking } from 'react-native';
const linking = {
prefixes: ['myapp://', 'https://myapp.com'],
config: {
screens: {
MainTabs: {
screens: {
Home: 'home',
Detail: 'detail/:id',
Profile: 'profile/:userId',
},
},
Settings: 'settings',
},
},
// 앱이 종료된 상태에서 딥링크로 실행 시
async getInitialURL() {
const url = await Linking.getInitialURL();
if (url != null) return url;
// 푸시 알림에서의 딥링크 처리
const notification = await getInitialNotification();
return notification?.data?.deepLink ?? null;
},
};
function App() {
return (
<NavigationContainer linking={linking}>
<RootNavigator />
</NavigationContainer>
);
}
테스트
# iOS 시뮬레이터
xcrun simctl openurl booted "https://myapp.com/detail/42"
xcrun simctl openurl booted "myapp://detail/42"
# Android 에뮬레이터
adb shell am start -a android.intent.action.VIEW -d "https://myapp.com/detail/42"
# Expo
npx uri-scheme open "myapp://detail/42" --ios
Deferred Deep Links
앱이 설치되지 않은 상태에서 링크를 클릭하면:
- 앱 스토어로 이동
- 앱 설치
- 앱 실행 시 원래 의도한 화면으로 이동
사용자 → https://myapp.com/detail/42 클릭
→ 앱 미설치 → 앱 스토어로 이동
→ 앱 설치 후 실행
→ detail/42 화면으로 자동 이동 (Deferred Deep Link)
정리
- URL Scheme 은 간단하지만 앱 미설치 시 에러가 발생합니다
- Universal Links / App Links 는 웹 폴백을 제공하므로 더 안전합니다
- 웹 서버에
apple-app-site-association과assetlinks.json을 배치해야 합니다 - React Navigation의
linking설정으로 URL 패턴과 화면을 매핑 합니다 - 푸시 알림 + 딥링크 를 연동하면 알림 탭 시 적절한 화면으로 이동할 수 있습니다
댓글 로딩 중...