JavaScriptWebMobile

JavaScript - 딥링크(Deep Link), 앱링크(App Link), 웹링크(Web Link) 완벽 정리

링크 종류 개요

모바일 환경에서는 단순한 URL 이상의 링크 체계가 필요합니다.
앱 설치 여부, 플랫폼(iOS/Android), 특정 화면 진입 등을 고려한 다양한 링크 방식이 존재합니다.

종류 설명 대상
웹링크 (Web Link) 일반 HTTP/HTTPS URL 브라우저
딥링크 (Deep Link) 앱 특정 화면으로 직접 이동 앱
앱링크 (App Link) Android의 검증된 딥링크 (HTTPS 기반) Android 앱
유니버설 링크 (Universal Link) iOS의 검증된 딥링크 (HTTPS 기반) iOS 앱
디퍼드 딥링크 (Deferred Deep Link) 앱 미설치 시 설치 후 특정 화면 진입 앱 + 스토어

가장 기본적인 형태의 링크입니다. http:// 또는 https:// 로 시작하며 브라우저에서 열립니다.

https://example.com/products/123
  • 앱이 설치되어 있어도 브라우저에서 열린다.
  • 앱으로 연결하려면 별도의 딥링크 처리가 필요하다.
  • SEO에 유리하고, 공유가 쉽다.

딥링크는 앱의 특정 화면(Activity, Screen) 으로 직접 이동할 수 있는 링크입니다.
URI 스킴(Custom URL Scheme) 방식이 가장 오래된 구현체입니다.

URI 스킴 (Custom URL Scheme)

앱 고유의 스킴을 등록하고 해당 URL로 앱을 실행합니다.

myapp://products/123
twitter://user?screen_name=elonmusk
kakaolink://...

Android - Intent 필터 등록

<!-- AndroidManifest.xml -->
<activity android:name=".ProductActivity">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="myapp" android:host="products" />
  </intent-filter>
</activity>

iOS - Info.plist 등록

<!-- Info.plist -->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string>
    </array>
  </dict>
</array>

JavaScript에서 딥링크 열기

// 앱 실행 시도 후, 실패 시 스토어로 이동
function openDeepLink() {
  const deepLink = 'myapp://products/123';
  const fallbackUrl = 'https://play.google.com/store/apps/details?id=com.example.myapp';

  window.location.href = deepLink;

  // 일정 시간 후 앱이 열리지 않으면 폴백 처리
  setTimeout(() => {
    window.location.href = fallbackUrl;
  }, 2000);
}

URI 스킴의 단점

  • 스킴 충돌: 동일한 스킴을 여러 앱이 사용할 수 있음 (보안 문제)
  • 설치 여부 확인 불가: 앱이 없으면 오류 페이지 또는 무반응
  • iOS 제한: iOS 9 이후 앱 미설치 시 스킴 호출 차단

Android 6.0 (API 23) 이상에서 지원하는 검증된 HTTPS 딥링크입니다.
웹사이트 소유권을 검증하기 때문에 스킴 충돌 문제가 없고, 앱 선택 다이얼로그 없이 바로 앱이 열립니다.

동작 방식

https://example.com/products/123
        ↓ (도메인 소유권 검증됨)
앱이 설치되어 있으면 → 앱의 특정 화면
앱이 없으면 → 브라우저에서 웹페이지 열림

설정 방법

1. AndroidManifest.xml에 Intent 필터 추가

<activity android:name=".ProductActivity">
  <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" />
    <!-- HTTPS 스킴과 실제 도메인 지정 -->
    <data android:scheme="https" android:host="example.com" />
  </intent-filter>
</activity>

웹 서버의 /.well-known/assetlinks.json 경로에 파일을 배포합니다.

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.example.myapp",
      "sha256_cert_fingerprints": [
        "AA:BB:CC:DD:..."
      ]
    }
  }
]

Android는 앱 설치 시 이 파일을 확인하여 도메인 소유권을 검증합니다.

iOS 9 이상에서 지원하는 검증된 HTTPS 딥링크입니다.
앱링크의 iOS 버전이라고 볼 수 있습니다.

동작 방식

https://example.com/products/123
        ↓ (AASA 파일 검증됨)
앱이 설치되어 있으면 → 앱의 특정 화면
앱이 없으면 → Safari에서 웹페이지 열림

설정 방법

1. Xcode — Associated Domains 설정

Signing & Capabilities → Associated Domains 추가
applinks:example.com

2. apple-app-site-association 파일 호스팅

웹 서버의 /.well-known/apple-app-site-association 경로에 배포합니다.

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "TEAMID.com.example.myapp",
        "paths": ["/products/*", "/orders/*"]
      }
    ]
  }
}

iOS는 앱 설치 시 이 파일을 다운로드하여 도메인 연결을 검증합니다.

앱링크 vs 유니버설 링크 비교

항목 앱링크 (Android) 유니버설 링크 (iOS)
플랫폼 Android 6.0+ iOS 9+
검증 파일 assetlinks.json apple-app-site-association
검증 시점 앱 설치 시 앱 설치 시
호스팅 경로 /.well-known/assetlinks.json /.well-known/apple-app-site-association
앱 미설치 시 브라우저로 폴백 Safari로 폴백
선택 다이얼로그 없음 (검증 성공 시) 없음

앱이 설치되어 있지 않은 경우에도 설치 후 특정 화면으로 이동시켜주는 기술입니다.
광고, 마케팅 캠페인에서 많이 활용됩니다.

동작 흐름

1. 사용자가 딥링크 클릭
2. 앱 미설치 확인 → 스토어로 이동
3. 앱 설치 완료
4. 앱 최초 실행 시 링크 정보 복원
5. 목적 화면으로 이동

구현 방법

직접 구현은 복잡하기 때문에 아래 서드파티 솔루션을 주로 사용합니다.

솔루션 특징
Firebase Dynamic Links Google 제공, 무료, Android/iOS 모두 지원
Branch.io 다양한 분석 기능 제공, 유료 플랜 존재
AppsFlyer 마케팅 어트리뷰션 특화
Adjust 광고 효과 측정과 딥링크 통합

Firebase Dynamic Links는 2025년 8월 서비스 종료 예정이므로 대안을 검토해야 합니다.

JavaScript에서 플랫폼별 분기 처리

function openApp(path) {
  const ua = navigator.userAgent;
  const isAndroid = /android/i.test(ua);
  const isIOS = /iphone|ipad|ipod/i.test(ua);

  if (isAndroid) {
    // Android: 앱링크(HTTPS) 또는 URI 스킴
    window.location.href = `https://example.com${path}`;
  } else if (isIOS) {
    // iOS: 유니버설 링크(HTTPS) 또는 URI 스킴
    window.location.href = `https://example.com${path}`;
  } else {
    // 데스크탑: 웹페이지로 이동
    window.location.href = `https://example.com${path}`;
  }
}

Intent URL (Android Chrome 전용)

Android의 Chrome 브라우저에서는 Intent URL을 사용하면 폴백 URL까지 명시할 수 있습니다.

// intent://<host>/<path>#Intent;scheme=<scheme>;package=<package>;S.browser_fallback_url=<url>;end
const intentUrl = `intent://products/123#Intent;scheme=myapp;package=com.example.myapp;S.browser_fallback_url=https://play.google.com/store/apps/details?id=com.example.myapp;end`;

window.location.href = intentUrl;

링크 방식 선택 가이드

앱이 설치된 사용자에게만 앱 화면을 보여주고 싶다
  → 앱링크 (Android) / 유니버설 링크 (iOS) 사용

앱 미설치 사용자도 설치 후 같은 화면으로 보내고 싶다
  → 디퍼드 딥링크 (Firebase / Branch 등 활용)

레거시 환경 지원이 필요하다
  → URI 스킴 + 폴백 URL 조합

웹만으로도 충분하다
  → 일반 웹링크 (PWA 고려)

요약

  • 웹링크: 일반 HTTPS URL, 브라우저에서 열림.
  • 딥링크(URI 스킴): 앱 고유 스킴으로 특정 화면 진입, 스킴 충돌·설치 여부 확인 불가 단점.
  • 앱링크: Android의 HTTPS 기반 검증 딥링크, assetlinks.json으로 도메인 소유권 확인.
  • 유니버설 링크: iOS의 HTTPS 기반 검증 딥링크, apple-app-site-association으로 도메인 연결.
  • 디퍼드 딥링크: 앱 미설치 시에도 설치 후 목적 화면으로 이동, 마케팅·광고에 유용.
Share