티스토리 뷰

반응형
이 포스트의 내용은 iOS Universal Links in Xamarin.Forms and ASP.NET Core (https://marcofolio.net/ios-universal-links-xamarin-forms-asp-net-core/) 을 번역한 자료입니다. 한글로 표현하기 어색하거나 모호한 문장은 임의로 조정하거나 삭제하였으므로 필요한 경우 원문을 참고하시기 바랍니다. 또한 언제든지 원저자의 요청에 의해 게시물이 내려지거나 수정될 수 있음을 알려드립니다. 마지막으로 이 글은 개인적인 학습목적으로 번역한 자료이며, 따라서 오역이나 잘못된 해석이 포함되어 있을 수 있으며 이로인한 어떠한 일체의 보장을 하지 않습니다.

Universal Links를 사용하면 iOS 앱과 웹 사이의 끊김없는 사용자 경험을 제공할 수 있습니다. Universal Links는 iOS 9 부터 제공되었으며 구현을 위한 풍부한 문서를 제공하고 있습니다. 이 포스트에서는 Xamarin.Forms에서 Universal Links를 구현하는 방법에 대해 집중하고자 합니다.

여기에서는 Xamarin.Forms와 Azure에 호스팅 된 ASP.NET Core 웹사이트를 이용하여 데모를 제작하였습니다. 데모 소스코드는 Github에서 확인하실 수 있습니다.

사전준비

시작하기 앞서 아래와 같은 환경이 필요합니다.

  • Visual Studio for Mac 설치 (Windows 환경에서는 Visual Studio)
  • 웹사이트를 배포하기 위한 Azure구독
  • 아이폰 스마트폰 (주의: iOS Universal Link는 iOS 시뮬레이터에서 동작하지 않습니다. iOS9 이상의 운영체제가 설치된 물리적인 아이폰 장치가 필요합니다.)

가장 먼저 Visual studio를 실행한 후 New Solution..을 통해 새로운 Xamarin.Forms 앱 솔루션을 생성합니다. iOS만 사용할 예정이므로 솔루션 생성 시 Target Platform에서 Android를 체크 해제하셔도 됩니다. 솔루션의 이름은 UniLink (Universal Links의 줄임말)로 정하였습니다.
UniLink 프로젝트 추가

솔루션이 생성되면 솔루션을 마우스 우클릭 한 후 AddNew Project...를 선택하고 ASP.NET Core Web Application 프로젝트를 선택하고 이름은 UniLink.Web으로 지정하였습니다.
UniLink 프로젝트 구조
이제 모든 준비가 끝났으니 본격적으로 Universal Links 작업을 진행하도록 합시다.

앱 설정하기

iOS 프로젝트에서 Info.plist 파일을 열고 Bundle Identifier를 입력합시다. 여기에서는 net.marcofolio.UniLink로 결정하였습니다. 이 값은 추후에 사용할 예정이니 기억해두세요.
Bundle Identifier 설정

Apple Developer Center에 방문하신 후 Register an App ID에서 앱 등록을 진행해주세요.
App Id 등록

앱 등록을 진행하실 때는 아래를 참고해주세요.

  • App Id Prefix를 확인하실 수 있습니다. (여기에서는 CBDD34BUH7입니다.) Bundle Identifier과 마찬가지로 추후에 사용될 예정이니 따로 저장해두세요.
  • Explicit App Id를 선택하시고 위에서 결정한 Bundle Identifier를 입력해주세요. (여기에서는 net.marcofolio.UniLink)
  • App Services아래의 Associated Domains을 체크해주세요.

남은 앱 등록과정을 마무리해주세요. 이제 Visual Studio에서 작업을 시작해봅시다.

apple-app-site-association 파일

apple-app-site-association 파일(줄여서 AASA 파일)은 웹사이트에 게시되는 JSON파일로서 앱과 상호작용할 URL정보가 포함됩니다. ASP.NET Core 프로젝트의 wwwroot 폴더를 선택하신 후 New file...을 선택해주세요. 파일 이름은 apple-app-site-association(확장자 없음)으로 해주시고 파일을 추가해주세요. 파일은 다음의 요구사항을 충족해야합니다.

  • HTTPS를 지원해야합니다.
  • 파일은 루트에 위치하거나 .well-known 폴더 하위에 위치해야 합니다.
  • 파일명은 확장자 없이 apple-app-site-association여야 합니다.
  • 128KB 보다 커서는 안됩니다.

아래는 apple-app-site-association 파일의 기본버전 입니다.

{
    "applinks": {
      "apps": [],
      "details": [
        {
          "appID": "CBDD34BUH7.net.marcofolio.UniLink",
          "paths": [ "*" ]
        }
      ]
    }
}
  • appIdApp Id PrefixBundle Identifier를 조합하여 기술해주세요.
  • paths는 앱에서 받아들일 수 있는 URL 패턴을 입력해주세요. 이 포스트는 시연이 목적이므로 '*'을 사용하여 모든 URL을 받아들일 수 있게 하였습니다.

이 파일의 Properties에서 Copy to Ouput Directory 값을 Copy Always로 설정해주세요. 여기까지 진행하셨다면 프로젝트는 다음과 같을 것입니다.
AASA 파일 추가 결과

ASP.NET은 기본적으로 Unknown 파일유형을 지원하지 않습니다. AASA파일은 Unknown 파일이므로 이를 지원할 설정이 필요합니다. Startup.cs파일을 열고 AASA파일을 지원할 수 있도록 Configure 메서드에 아래 설정을 추가해주세요.

app.UseStaticFiles(new StaticFileOptions
{
    ServeUnknownFileTypes = true,
    DefaultContentType = "application/json"
});

중요: 위 설정은 데모 목적으로 작성된 것입니다. 위 설정을 활성화하면 모든 UnknownfileTypesapplication/json으로 제공되며 또한 ServeUnknownFileTypes를 활성화하는 것은 보안문제를 발생시킬 수 있습니다. 실제 제품 개발에서는 다른 을 찾아 진행해주세요.

참고
ServeUnknownFileTypes를 활성화하는 것은 보안 문제를 야기할 수 있으므로 아래와 같은 방법으로 진행하는 것이 권장됩니다.
1. Controllers 폴더에 UnknownFileController.cs 파일 추가
2. UnknownFileController.cs 파일을 아래와 같이 구성
//Controller 이름은 원하는 이름으로 설정
public class UnknownFileController : Controller
{
    [Route("~/apple-app-site-association")] //외부에서 접근할 주소 설정
    public ActionResult AppleAppSiteAssociation()
    {
        //반환할 파일 경로 설정
        string file = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "apple-app-site-association");
        return PhysicalFile(file, "application/json");
    }
}

이제 ASP.NET Core 웹사이트를 마우스 우클릭한 후 Deploy를 선택하여 Azure에 배포해주세요. 일단 모든 배포과정이 완료되면 YOURAPP.azurewebsites.net 주소로 방문하여 게시된 웹사이트를 확인하실 수 있습니다. 브라우저를 통해 AASA 파일에 접근할 수 있는지 확인해봅시다.
https://YOURAPP.azurewebsites.net/apple-app-site-association

AASA 파일에 접근가능하다면 AASA-Validator를 통해 모든 설정이 정상적으로 진행되었는지 확인해주세요. 만약 모든 단계를 통과한다면 앱에서 URL을 사용할 준비가 완료된 것입니다.
AASA-Validator

링크 접근 처리하기

Visual Studio의 iOS Project에서 Entitlements.plist파일을 열어주세요. Associated Domains를 찾고 appinks:도메인(예:appinks:YOURAPP.azurewebsites.net) 형태로 추가해주세요.
Entitlements.plist

마지막으로 Xamarin.Forms 프로젝트의 App Class에서 OnAppLinkRequestReceived 메서드를 오버라이드해주세요. 사용자가 Universal Links를 통해 앱을 실행한 경우 OnAppLinkRequestReceived 메서드가 호출되게 됩니다.

protected override async void OnAppLinkRequestReceived(Uri uri)
{
    //Universal App Link를 통해 앱이 실행된 경우 처리추가
   ...
    var page = new AppLinkPage();
    await MainPage.Navigation.PushAsync(page);

    base.OnAppLinkRequestReceived(uri);
}

전달받은 uri 매개변수를 분석하고 특정 페이지로 이동하는 형태로 처리하실 수 있습니다.

테스트

이제 모든 작업을 마무리했으므로 테스트를 진행할 수 있습니다. 앱을 스마트폰에 배포하고 사파리를 실행해주세요. 웹사이트 주소를 입력하시면 브라우저 상단에 배너가 나타나며 사용자에게 관련 앱을 실행할 수 있음을 알려주게 됩니다.

사용자가 OPEN 버튼을 터치하면 OnAppLinkRequestReceived 메서드가 실행되고 이 메서드에서 URL을 해석하여 적절한 결과를 사용자에게 노출시킬 수 있습니다. 테스트 중에 문제가 발생한다면 Universal Links에 대한 문제해결 절차를 따라보시기 바랍니다.

마무리 & 다운로드

여기까지 Xamarin.Forms에서 iOS Universal Links를 설정하는 간단한 데모를 다루어보았습니다. Universal Links를 통해 앱을 실행할 때 적절한 결과를 출력하기 위해 샘플 코드를 약간 수정하였습니다. 전체 프로젝트 소스코드는 Github에서 찾아보실 수 있습니다.

다음에는 전달되는 URL을 바탕으로 OnAppLinkRequestReceived 메서드에서 적절한 페이지를 출력하는 방법과, 예제를 바탕으로 AASA 파일에 대해 배워보는 시간을 가질 것입니다. 좀더 자세한 정보를 원하시면 Deep LinkingUnversal Links를 확인해보세요.

댓글