개발

유니버셜 링크에 대해 알아보자!

소소ing 2021. 2. 9. 17:20
반응형

앱을 서비스 하다보면 웹에서 앱을 호출해야 할때가 있다. 

이때 iOS에서 사용할 수 있는 방법은 크게 두가지 있다. 

일반적으로 웹에서 앱을 호출하는 방법에 대해서 딥링크라도 명명하고 있다. 

 

iOS에서 딥링크를 사용하는 두 가지 방식

1. 스키마를 이용한 앱 호출

2. 유니버셜 링크를 이용한 앱 호출 

 

 

스키마를 이용한 앱 호출과 유니버셜 링크를 이용한 앱 호출의 가장큰 차이점은 무엇일까?

아마 앱 설치 유무를 판단하는 부분에서의 매끄러움(?) 이라고 할 수 있겠다.

 

매끄러움(?) 이라고 표현을 한 부분은

1. 앱에 고유의 스키마를 지정하더라도 다른 앱에 동일한 스크마 등록이 가능하기 때문에 구분이 모호할 수 있다는 부분

     - A 앱에 aaa:// 스키마를 등록 B앱에 aaa:// 스키마를 등록하여 한 단말기에 두개 앱이 설치되어 있으면 호출이 모호해짐

 

2. 스마트폰에 앱이 설치된 유무를 판단하는 방법이 스키마를 이용할 경우 타임아웃으로 체크를 하는 원초적인 방식

     - Ex)

       setTimeout(function () {

           window.location = "https://itunes.apple.com/app/앱 아이디";

       }, 25);

       window.location = "앱스키마://";

 

3. 스키마를 이용하여 앱을 실행하거나 앱 설치 유무를 판단할때 불필요한 팝업이 발생되는 점 때문이다.

     - 앱이 설치 되어 있지 않을 경우 불필요한 팝업이 출력됨

     - 앱이 설치 되어 있더라도 추가 액션을 수행해 주어야 앱으로 실행 가능

 

 

 

그럼 우선 스키마 연동을 먼저 알아보고 유니버셜링크 연동 부분을 알아보자!

스키마 연동은

1. Xcode - Target 선택 후 - Info 부분으로 이동한다.

 

2. Info 탭에서 URL Types 영역에 내가 사용하고자 하는 URL 스키마를 지정한다. 

아래 화면에서 URL Schemes 부분에 값을 입력해주면 된다. (단, :// 이 문자열을 넣지 않는다.)

 

3. 스키마로 앱이 열릴경우 아래 함수로 이벤트가 수신되며, 해당 함수에서 파라미터를 파싱하여 원하는 액션을 수행하면 된다. 

AppDelegate.swift 안

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool

{

    // 원하는 액션 수행   

    return true

}

 

4. 웹에서 앱을 호출 하려면 아래와 같이 호출한다. 

window.location = "앱스키마://";

 

 

 

 

이제 유니버셜 링크 연동 부분을 알아보면

1.  Xcode - Signing & Capabilities 탭으로 이동 후 Associated Domains를 활성화 한다.

 

2. 이후 위 이미지와 같이 Domains에 웹에서 앱을 호출할 도메인을 지정한다. 

Ex) applinks:www.xxx.com

- 만약 xxx.com 으로 구성된 모든 도메인에서 유니버셜링크를 동작시키고자 한다면 applinks:*.xxx.com 으로 와일드카드 형태도 사용이 가능하다.

 

3. 유니버셜 링크로 앱이 실행될 경우 스키마로 실행될때와 다른 이벤트로 수신이 되면 해당 함수는 아래와 같다. 

AppDelegate.swift 안 

func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool

{   

    if userActivity.activityType == NSUserActivityTypeBrowsingWeb {

            let url = userActivity.webpageURL!

            // 원하는 액션 수행

    }

    return true

}

 

4. apple-app-site-association 파일을 생성한다. (1-3 번까지는 앱 개발자가 해주어야 하며, 이후 작업은 웹 개발자가 해주어야 한다.)

- 아래 예시를 보면 다중 앱에 유니버셜 링크를 넣고자 할 경우 details 배열에 다중으로 기입을 하면 되고, 한개 앱만 등록할 경우 하나만 기입하면 된다. 

- HTTPS인 웹서버 경로에 apple-app-site-association(aasa) 파일을 업로드한다. 루트나 .well-known 서브 디렉토리로 업로드 하면된다.

Ex) 

{

    "applinks": {

        "apps": [],

        "details": [

        {

            "appID": "<App ID Prefix>.<BUNDLE_IDENTIFIER>",

            "paths": [ "*" ]

        },

        {

            "appID": "<App ID Prefix>.<ANOTHER_APP_BUNDLE_IDENTIFIER>",

            "paths": [ "/aaa/*" ]

         },

         {

             "appID": "<App ID Prefix>.<ANOTHER_APP_BUNDLE_IDENTIFIER>",

             "paths": ["/bbb/*","/ccc/*"]

         }

         ]

     }

}

 

5. nginx 설정 (웹 개발자에게 문의필요)

Ex)

// conf.d/site.conf

server {

// 중략

listen 443; // https 에서 동작해야한다.

 

root <홈경로>

 

location /apple-app-site-association {

default_type application/json;

}

}

 

 

6. apple-app-site-association 에 등록한 패스안 위치에서 생성된 링크를 단말기로 클릭 시 앱이 설치되어 있을 경우 자연스럽게 앱이 실행된다. 

반응형