모바일 웹 앱 사용자를 네이티브 앱 사용자로 전환

모바일 웹사이트와 네이티브 앱을 공들여 정성껏 개발했음에도 불구하고 네이티브 앱의 전환율이 웹보다 더 우수하다고 가정해 보겠습니다. 이러한 경우 모바일 웹 사용자가 앱을 다운로드하도록 유도하면 비즈니스에 도움이 될 수 있습니다. 사용자의 이동을 유도하는 것은 쉬운 일은 아니지만 동적 링크를 사용하면 도움이 됩니다. 코드를 거의 작성하지 않고도 모바일 웹의 링크를 클릭한 사용자를 앱의 해당 페이지로 안내할 수 있기 때문입니다. App Store 또는 Google Play 스토어로 이동하여 앱을 먼저 설치해야 하더라도 링크 정보가 그대로 유지됩니다.

주요 이점

• 모바일 웹 사용자를 네이티브 앱 사용자로 최대한 자연스럽고 편안하게 전환할 수 있습니다.
• 사용자가 앱을 시작할 때 사이트에서 조회하던 콘텐츠를 그대로 표시할 수 있습니다.
• 통합 작업이 거의 필요 없습니다.

이제 시작하는 방법을 안내해 드리겠습니다.

시작하기 전에

앱 콘텐츠에 대한 딥 링크 지원

모바일 웹 사용자를 네이티브 앱 사용자로 전환하려면 사용자가 앱을 열 때 웹에서 보던 콘텐츠를 그대로 표시해야 합니다. 따라서 모바일 웹 사용자를 앱으로 유도하려면 앱에서 콘텐츠로 연결되는 딥 링크를 수신할 수 있어야 합니다.

iOS Universal Links 또는 Android App Links를 구현했으면 이 작업은 이미 완료된 상태일 수 있습니다. 그렇지 않은 경우에는 웹사이트의 URL을 가져와 앱에서 사용자에게 해당 콘텐츠를 표시하는 로직을 앱에 추가합니다.

Firebase 및 동적 링크 SDK 설정

새 Firebase 프로젝트를 설정하고 앱에 동적 링크 SDK를 설치합니다(iOS, Android, C++, Unity). 동적 링크 SDK를 설치하면 사용자가 앱을 설치한 후 Firebase에서 동적 링크와 관련된 데이터를 전달할 수 있습니다. SDK가 없으면 설치 전 클릭 정보를 설치 후 사용자 정보에 연결할 방법이 없습니다.

웹페이지에 '앱에서 열기' 링크 추가

이제 웹사이트 사용자를 네이티브 앱으로 유도할 링크를 설정할 차례입니다. 사용자가 아직 앱을 설치하지 않았더라도 걱정하지 마세요. 동적 링크가 알아서 처리해 줍니다.

웹사이트의 각 페이지에서 동적 링크를 동적으로 생성합니다. 콘텐츠가 딥 링크를 지원하도록 이미 설정했으므로 콘텐츠가 있는 페이지의 URL을 link 매개변수로 사용할 수 있습니다.

이러한 링크의 예시는 다음과 같습니다.

<a href="https://example.page.link/?link=https://www.example.com/content?item%3D1234&apn=com.example.android&ibi=com.example.ios">Open this page in our app!</a>

apn 매개변수(Android) 또는 ibi 매개변수(iOS)에 지정된 앱이 설치되지 않은 경우 사용자가 기기에서 이 링크를 열면 앱을 설치할 수 있도록 Play 스토어 또는 App Store로 이동하게 됩니다. 앱을 설치하면 앱이 열리고 link 매개변수에 지정된 URL이 앱에 전달됩니다.

앱에서 링크된 콘텐츠 열기

다음으로 앱에 전달된 링크를 수신하고 링크된 콘텐츠를 열어야 합니다. 동적 링크 SDK를 사용하면 간단합니다.

iOS

iOS에서는 application:continueUserActivity:restorationHandler: 메서드를 구현하여 동적 링크를 수신합니다. 복원 핸들러에서 handleUniversalLink:completion:을 호출하여 동적 링크를 가져올 수 있습니다. 앱에 동적 링크가 전달되면 FIRDynamicLink의 url 속성에서 이 링크를 가져올 수 있습니다. 예를 들면 다음과 같습니다.

[[FIRDynamicLinks dynamicLinks]
    handleUniversalLink:userActivity.webpageURL
             completion:^(FIRDynamicLink * _Nullable dynamicLink,
                          NSError * _Nullable error) {
      NSString *link = dynamicLink.url;
    }];

FIRDynamicLinks.dynamicLinks()?.handleUniversalLink(userActivity.webpageURL!) { (dynamiclink, error) in
    let link = dynamiclink.url
}

또한 앱에 커스텀 스킴 URL로 전달된 동적 링크를 수신하려면 application:openURL:options: 메서드에서 dynamicLinkFromCustomSchemeURL:을 호출해야 합니다. 예를 들면 다음과 같습니다.

FIRDynamicLink *dynamicLink = [[FIRDynamicLinks dynamicLinks] dynamicLinkFromCustomSchemeURL:url];
if (dynamicLink) {
  NSString *link = dynamicLink.url;
  // ...
  return YES;
}

let dynamicLink = FIRDynamicLinks.dynamicLinks()?.dynamicLinkFromCustomSchemeURL(url)
if let dynamicLink = dynamicLink {
  let link = dynamiclink.url
  // ...
  return true
}

이제 link 매개변수의 값을 확보했으니 링크된 콘텐츠를 사용자에게 표시합니다.

Android

Android에서는 getDynamicLink() 메서드를 사용하여 동적 링크의 데이터를 가져옵니다.

Firebase.dynamicLinks
        .getDynamicLink(intent)
        .addOnCompleteListener { task ->
            if (!task.isSuccessful) {
                // Handle error
                // ...
            }

            val invite = FirebaseAppInvite.getInvitation(task.result)
            if (invite != null) {
                // Handle invite
                // ...
            }
        }
MainActivity.kt

FirebaseDynamicLinks.getInstance()
        .getDynamicLink(getIntent())
        .addOnCompleteListener(new OnCompleteListener<PendingDynamicLinkData>() {
            @Override
            public void onComplete(@NonNull Task<PendingDynamicLinkData> task) {
                if (!task.isSuccessful()) {
                    // Handle error
                    // ...
                }

                FirebaseAppInvite invite = FirebaseAppInvite.getInvitation(task.getResult());
                if (invite != null) {
                    // Handle invite
                    // ...
                }
            }
        });
MainActivity.java

이제 link 매개변수의 값을 확보했으니 링크된 콘텐츠를 사용자에게 표시합니다.