딥링크는 외부에서 앱의 특정 화면으로 직접 이동하는 기술입니다. 마케팅, 공유, 푸시 알림에서 필수입니다.


딥링크 종류

종류URL 형태앱 미설치 시
URL Schememyapp://detail/123에러
Universal Links (iOS)https://myapp.com/detail/123웹으로 이동
App Links (Android)https://myapp.com/detail/123웹으로 이동

Universal Links (iOS)

JSON
// apple-app-site-association (웹 서버에 배치)
// https://myapp.com/.well-known/apple-app-site-association
{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "TEAMID.com.myapp",
        "paths": ["/detail/*", "/profile/*", "/share/*"]
      }
    ]
  }
}
PLAINTEXT
// Xcode에서 Associated Domains 추가
// Signing & Capabilities → + Capability → Associated Domains
// applinks:myapp.com

App Links (Android)

XML
<!-- 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>
JSON
// 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 딥링크 처리

TSX
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>
  );
}

테스트

BASH
# 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

앱이 설치되지 않은 상태에서 링크를 클릭하면:

  1. 앱 스토어로 이동
  2. 앱 설치
  3. 앱 실행 시 원래 의도한 화면으로 이동
PLAINTEXT
사용자 → https://myapp.com/detail/42 클릭
→ 앱 미설치 → 앱 스토어로 이동
→ 앱 설치 후 실행
→ detail/42 화면으로 자동 이동 (Deferred Deep Link)

정리

  • URL Scheme 은 간단하지만 앱 미설치 시 에러가 발생합니다
  • Universal Links / App Links 는 웹 폴백을 제공하므로 더 안전합니다
  • 웹 서버에 apple-app-site-associationassetlinks.json을 배치해야 합니다
  • React Navigation의 linking 설정으로 URL 패턴과 화면을 매핑 합니다
  • 푸시 알림 + 딥링크 를 연동하면 알림 탭 시 적절한 화면으로 이동할 수 있습니다
댓글 로딩 중...