C#, XAML 및 Prism으로 작성한 Windows 스토어 비즈니스 앱에서 타일 작업

상위 섹션: C#, XAML 및 Windows 런타임용 Prism으로 작성한 Windows 스토어 비즈니스 앱 개발

Patterns & Practices 로고

이전 페이지 | 다음 페이지

정기 알림을 통해 업데이트되는 앱 타일을 만드는 방법과 보조 타일 및 딥 링크를 만들어 앱의 특정 콘텐츠를 시작 화면에 홍보하는 방법을 알아봅니다. AdventureWorks Shopper 참조 구현은 이러한 방법과 Windows 런타임용 Prism을 사용하여 보조 타일에서 앱을 시작하는 방법을 보여 줍니다.

다운로드

AdventureWorks Shopper 샘플 다운로드
Prism StoreApps 라이브러리 다운로드
설명서(PDF) 다운로드

코드를 다운로드한 후 참조 구현을 컴파일 및 실행하고 Microsoft Visual Studio 솔루션 구조를 이해하는 방법에 대한 지침은 Windows 런타임용 Prism을 사용하여 시작을 참조하세요.

배울 내용

적용 대상

  • Windows 8.1용 Windows 런타임
  • C#
  • XAML(Extensible Application Markup Language)

주요 결정 사항

타일은 시작 화면에 앱을 표현하는 방법이며 타일을 사용하면 앱이 실행되고 있지 않을 때 사용자에게 풍부하고 눈길을 끄는 콘텐츠를 제공할 수 있습니다. Windows 스토어 앱에 대한 멋진 첫 인상을 사용자에게 제공하려면 타일이 사용자에게 매력적으로 표시되어야 합니다. 다음 목록에는 앱에 대한 타일을 만들 때 결정해야 하는 사항이 요약되어 있습니다.

  • 왜 라이브 타일에 투자해야 합니까?
  • 사용자에게 매력적인 라이브 타일을 만들려면 어떻게 해야 합니까?
  • 타일은 어떤 모양이어야 합니까?
  • 타일 이미지는 어떤 크기여야 합니까?
  • 어떤 타일 템플릿을 사용해야 합니까?
  • 타일 알림을 제공하려면 어떤 메커니즘을 사용해야 합니까?
  • 라이브 타일 콘텐츠는 얼마나 자주 변경해야 합니까?
  • 보조 타일을 시작 화면에 고정하는 기능이 앱에 있어야 합니까?

타일은 라이브(알림을 통해 업데이트됨)이거나 정적일 수 있습니다. 라이브 타일에 투자해야 하는 이유, 사용자에게 매력적인 라이브 타일을 만드는 방법, 타일의 모양 및 크기, 사용해야 하는 타일 템플릿, 라이브 타일 콘텐츠가 변경되어야 하는 빈도, 보조 타일 등 타일에 대한 자세한 내용은 타일 및 배지에 대한 지침, 타일 및 알림 이미지 크기, 타일 템플릿 카탈로그, 알림 보내기보조 타일 개요를 참조하세요.

타일 알림을 제공하는 데 사용할 메커니즘의 선택은 표시할 콘텐츠와 콘텐츠를 업데이트하는 빈도에 따라 달라집니다. 로컬 알림은 다른 알림 메커니즘을 사용하는 경우에도 앱 타일을 최신 상태로 유지하는 적합한 방법입니다. 많은 앱에서는 로컬 알림을 사용하여 앱이 시작되거나 앱 내에서 상태가 변경될 때 타일을 업데이트합니다. 따라서 앱이 시작되고 종료될 때 타일 상태가 최신으로 유지됩니다. 예약된 알림은 업데이트할 콘텐츠를 미리 알고 있는 경우(예: 모임 초대)에 적합합니다. 정기 알림은 최소한의 웹 또는 클라우드 서비스와 클라이언트 투자로 타일 업데이트를 제공하며 동일한 콘텐츠를 광범위한 대상에게 배포하는 뛰어난 방법입니다. 푸시 알림은 실시간 데이터나 사용자에 맞게 개인 설정된 데이터가 앱에 있는 경우에 적합합니다. 또한 푸시 알림은 시간이 중요한 데이터가 있거나 예측할 수 없는 시간에 콘텐츠가 생성되는 경우에도 유용합니다. 정기 알림은 병렬 로드된 앱에 가장 적합한 알림 솔루션을 제공하지만 필요할 때 알림을 제공하지는 않습니다. 또한 정기 알림을 사용하면 웹 또는 클라우드 서비스로 처음 폴링된 후 앱이 다시 시작되지 않는 경우에도 Windows에서 타일 업데이트를 계속 폴링합니다. 자세한 내용은 알림 전달 방법 선택을 참조하세요.

참고  푸시 알림에서는 WNS(Windows 푸시 알림 서비스)를 사용하여 업데이트를 사용자에게 전달합니다. WNS를 사용하여 알림을 전송하려면 먼저 Windows 스토어 대시보드에 앱을 등록해야 합니다. 자세한 내용은 푸시 알림 개요를 참조하세요.

[맨 위로]

AdventureWorks Shopper의 타일

AdventureWorks Shopper 참조 구현에는 중간 크기 및 와이드 기본 타일이 포함되어 있으며, 각 타일의 픽셀 요구 사항에 따라 만들어졌습니다. 타일에 사용자 지정 콘텐츠가 표시될 때 사용자가 식별할 수 있도록 하려면 앱을 나타내는 작은 로고를 선택하는 것이 중요합니다. 자세한 내용은 앱 타일 만들기를 참조하세요.

기본 타일은 정기 알림을 사용하여 30분 간격으로 업데이트하여 시작 화면에서 사용자에게 특정 제품을 광고하는 라이브로 만들어집니다. 정기 알림에서는 빠르게 보기 템플릿을 사용하여 라이브 타일이 두 프레임 사이에서 애니메이션되도록 합니다. 첫 번째 프레임에는 광고 제품의 이미지가 표시되고 두 번째 프레임에는 제품 상세 정보가 표시됩니다. 와이드 및 중간 크기 빠르게 보기 타일 템플릿이 모두 사용됩니다. AdventureWorks Shopper는 와이드 타일로 기본 설정되어 있지만 사용자가 중간 크기 타일로 변경할 수 있습니다. 자세한 내용은 주기적 알림을 사용하여 타일 콘텐츠 업데이트를 참조하세요.

AdventureWorks Shopper에는 ItemDetailPage에서 시작 화면에 특정 제품을 고정하여 보조 타일을 만드는 기능이 포함되어 있습니다. 다음 다이어그램에서는 AdventureWorks Shopper에서 판매된 제품 중 하나로 만든 두 프레임의 보조 타일을 보여줍니다.

시작 화면의 AdventureWorks Shopper 보조 타일

보조 타일을 선택하면 앱이 시작되고 이전에 고정한 제품이 ItemDetailPage에 표시됩니다. 자세한 내용은 보조 타일 만들기를 참조하세요.

[맨 위로]

앱 타일 만들기

타일은 앱의 매니페스트에 정의된 기본 타일로 시작됩니다. 정적 타일은 일반적으로 전체 타일 로고 이미지에 해당하는 기본 콘텐츠를 항상 표시합니다. 라이브 타일은 기본 타일을 업데이트하여 새 콘텐츠를 표시할 수 있지만, 알림이 만료되거나 제거되면 기본 타일로 다시 표시될 수 있습니다. 다음 다이어그램에서는 AdventureWorks Shopper Visual Studio 솔루션의 Assets 폴더에 있는 기본적인 작은 로고 이미지, 중간 크기 로고 이미지 및 와이드 로고 이미지를 보여 줍니다. 각 로고의 배경은 투명합니다. 작은 로고의 경우 타일 알림 콘텐츠와 혼합되므로 특히 중요합니다.

AdventureWorks Shopper 작은 타일 로고

30 x 30 픽셀

AdventureWorks Shopper 정사각형 타일 로고

150 x 150 픽셀

AdventureWorks Shopper 와이드 타일 로고

310 x 150 픽셀

참고  로고를 포함한 이미지 자산은 자리 표시자이며 교육용으로만 사용됩니다. 이미지 자산은 상표로 사용하거나 기타 상업적인 용도로 사용할 수 없습니다.

Visual Studio 매니페스트 편집기를 사용하면 기본 타일을 쉽게 추가할 수 있습니다. 자세한 내용은 빠른 시작: Visual Studio 매니페스트 편집기를 사용하여 기본 타일 만들기를 참조하세요. 이미지 리소스 작업에 대한 자세한 내용은 빠른 시작: 파일 또는 이미지 리소스 사용한정자를 사용하여 리소스에 이름을 지정하는 방법을 참조하세요.

중간 크기 로고만 앱의 매니페스트 파일에 제공되는 경우 앱의 타일이 항상 정사각형입니다. 중간 크기 로고와 와이드 로고가 매니페스트에서 모두 제공되는 경우 앱의 타일은 설치될 때 기본적으로 와이드 타일로 지정됩니다. 와이드 타일을 허용할지 여부도 결정해야 합니다. 이 사항은 앱 매니페스트에서 기본 타일을 정의할 때 와이드 로고 이미지를 제공하여 선택합니다.

주기적 알림을 사용하여 타일 콘텐츠 업데이트

폴링된 알림이라고도 하는 정기 알림은 웹 또는 클라우드 서비스에서 직접 콘텐츠를 다운로드하여 고정된 간격으로 타일을 업데이트합니다. 정기 알림을 사용하려면 앱에서 Windows가 타일 업데이트를 폴링하는 웹 위치의 URI(Uniform Resource Identifier)와 해당 URI를 폴링하는 빈도를 지정해야 합니다.

정기 알림에서는 앱이 웹 또는 클라우드 서비스를 호스트해야 합니다. 유효한 HTTP 또는 HTTPS(Secure Hypertext Transfer Protocol) 웹 주소를 Windows에서 폴링할 URI로 사용할 수 있습니다. 다음 코드 예제에서는 AdventureWorks.WebServices 프로젝트에 있는 TileNotificationController 클래스의 GetTileNotification 메서드를 보여주며, 이 메서드는 타일 콘텐츠를 AdventureWorks Shopper 참조 구현으로 보내는 데 사용됩니다.

AdventureWorks.WebServices\Controllers\TileNotificationController.cs


public HttpResponseMessage GetTileNotification()
{
    var tileXml = GetDefaultTileXml("http://localhost:2112/Images/hotrodbike_red_large.jpg",
                                    "Mountain-400-W Red, 42");
    tileXml = string.Format(CultureInfo.InvariantCulture, tileXml, DateTime.Now.ToShortDateString(), DateTime.Now.ToShortTimeString());

    // create HTTP response
   var response = new HttpResponseMessage();

    // format response
    response.StatusCode = System.Net.HttpStatusCode.OK;
    response.Content = new StringContent(tileXml);

    //Need to return xml format to TileUpdater.StartPeriodicUpdate
    response.Content.Headers.ContentType = 
        new System.Net.Http.Headers.MediaTypeHeaderValue("text/xml");
    return response;
} 


이 메서드는 XML 타일 콘텐츠를 생성하고 형식을 지정하며 HTTP 응답으로 반환합니다. 타일 콘텐츠는 타일 스키마를 준수해야 하며 UTF-8(8비트 Unicode Transformation Format)로 인코딩되어야 합니다. 타일 콘텐츠는 TileWidePeekImage01TileSquarePeekImageAndText02 템플릿을 사용하여 지정합니다. 이는 앱에서는 기본적으로 와이드 타일을 사용하지만 사용자가 정사각형 타일로 변경할 수 있기 때문에 필요합니다. 자세한 내용은 타일 템플릿 카탈로그를 참조하세요.

폴링 간격 30분마다 Windows는 HTTP GET 요청을 URI로 보내고 요청한 타일 콘텐츠를 XML로 다운로드하여 해당 콘텐츠를 앱의 타일에 표시합니다. 이 작업은 다음 코드 예제에 표시된 대로 App 클래스의 OnInitialize 메서드를 사용하여 수행합니다.

AdventureWorks.Shopper\App.xaml.cs


_tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();
_tileUpdater.StartPeriodicUpdate(new Uri(Constants.ServerAddress + "/api/TileNotification"), PeriodicUpdateRecurrence.HalfHour);


TileUpdateManager 클래스의 CreateTileUpdaterForApplication 메서드로 새 TileUpdater 인스턴스를 만들어 앱 타일을 업데이트합니다. 기본적으로 시작 화면의 타일은 새 알림이 현재 알림을 대체할 때까지 단일 알림 콘텐츠를 표시합니다. 그러나 알림 순환을 사용하여 최대 5개의 알림을 큐에 유지하고 타일이 해당 알림 사이를 순환하도록 할 수 있습니다. 이렇게 하려면 TileUpdater 인스턴스에서 true 매개 변수를 사용하여 EnableNotificationQueue 메서드를 호출합니다. 마지막으로 StartPeriodicUpdate를 호출하여 지정한 URI를 폴링하고 받은 콘텐츠로 타일을 업데이트합니다. 이 초기 폴링 후 Windows는 지정된 대로 30분마다 계속 업데이트를 제공합니다. 폴링은 명시적으로 중지하거나 앱을 제거할 때까지 계속됩니다. 그렇지 않으면 앱이 다시 시작되지 않는 경우에도 Windows에서 타일에 대한 업데이트를 계속 폴링합니다.

참고  Windows에서 요청에 따라 폴링하려고 최선을 다하지만 간격이 정확하지 않습니다. 요청한 폴링 간격은 최대 15분까지 지연될 수 있습니다.

기본적으로 정기 타일 알림은 다운로드되고 3일 후에 만료됩니다. 따라서 타일 콘텐츠가 관련된 기간보다 오래 유지되지 않도록 하려면 앱에 적합한 시간을 사용하여 모든 정기 타일 알림에 대해 만료를 설정하는 것이 좋습니다. 또한 웹 또는 클라우드 서비스에 연결할 수 없게 된 경우 또는 사용자가 오랫동안 네트워크에서 연결이 끊어진 경우 부실 콘텐츠를 제거해야 합니다. 이렇게 하려면 X-WNS-Expires HTTP 헤더를 반환하여 만료 날짜 및 시간을 지정합니다.

자세한 내용은 정기 알림 개요, 알림 큐 사용정기 알림에 대한 지침을 참조하세요.

[맨 위로]

보조 타일 만들기

보조 타일을 사용하여 사용자는 시작 화면에서 직접 앱의 특정 위치로 시작할 수 있습니다. 앱에서 사용자 승인 없이 프로그래밍 방식으로 보조 타일을 고정할 수 없습니다. 또한 사용자는 보조 타일 제거를 명시적으로 제어합니다. 따라서 사용자는 가장 많이 사용하는 환경으로 시작 화면을 개인 설정할 수 있습니다.

보조 타일은 메인 앱 타일과 독립적이며 독립적으로 타일 알림을 받을 수 있습니다. 보조 타일이 활성화되면 활성화 컨텍스트가 부모 앱에 제공되어 보조 타일 컨텍스트에서 시작할 수 있습니다.

보조 타일을 만드는 옵션은 시작 화면에 고정 앱 바 단추로 ItemDetailPage의 하단 앱 바에 표시됩니다. 따라서 표시하려는 제품에 대한 보조 타일을 만들 수 있습니다. 보조 타일을 선택하면 앱이 시작되고 이전에 고정한 제품이 ItemDetailPage에 표시됩니다. 다음 다이어그램에서는 시작 화면에 고정 단추를 선택하면 표시되는 플라이아웃의 예를 보여줍니다. 플라이아웃에는 보조 타일의 미리 보기가 표시되며 보조 타일 만들기를 확인하는 메시지가 표시됩니다.

AdventureWorks Shopper 보조 타일 플라이아웃

보조 타일 고정 및 제거 기능은 ISecondaryTileService 인터페이스를 구현하는 SecondaryTileService 클래스에서 제공합니다. App 클래스의 OnInitialize 메서드에서 SecondaryTileService 클래스는 ISecondaryTileService 유형에 대한 유형 매핑으로 Unity 종속성 주입 컨테이너에 등록됩니다. 그런 다음 ISecondaryTileService 유형을 허용하는 ItemDetailPageViewModel 클래스를 인스턴스화하면 Unity 컨테이너에서 유형을 확인하고 SecondaryTileService 클래스의 인스턴스를 반환합니다.

AdventureWorks Shopper에서 보조 타일을 고정하는 데 사용하는 워크플로는 다음과 같습니다.

  1. ItemDetailPage에서 시작 화면에 고정 앱 바 단추를 통해 PinProductCommand를 호출합니다. .

    AdventureWorks.UILogic\ViewModels\ItemDetailPageViewModel.cs

    
    PinProductCommand = DelegateCommand.FromAsyncHandler(PinProduct, () => SelectedProduct != null);
    
    
    
  2. AdventureWorks Shopper가 SecondaryTileService 인스턴스에서 SecondaryTileExists 조건자를 호출하여 타일이 이미 고정되지 않았는지 확인합니다.

    AdventureWorks.UILogic\ViewModels\ItemDetailPageViewModel.cs

    
    bool isPinned = _secondaryTileService.SecondaryTileExists(tileId);
    
    
    
  3. AdventureWorks Shopper가 SecondaryTileService 인스턴스에서 PinWideSecondaryTile 메서드를 호출하여 보조 타일을 만듭니다. SelectedProduct.ProductNumber 속성이 고유한 ID로 사용됩니다.

    AdventureWorks.UILogic\ViewModels\ItemDetailPageViewModel.cs

    
    isPinned = await _secondaryTileService.PinWideSecondaryTile(tileId, SelectedProduct.Title, SelectedProduct.ProductNumber);
    
    
    

    PinWideSecondaryTile 메서드는 SecondaryTile 클래스의 새 인스턴스를 만들어 짧은 이름, 표시 이름, 로고 등의 정보를 제공합니다.

    AdventureWorks.UILogic\Services\SecondaryTileService.cs

    
    var secondaryTile = new SecondaryTile(tileId, displayName, arguments, _squareLogoUri, TileSize.Wide310x150);
    secondaryTile.VisualElements.ShowNameOnWide310x150Logo = true;
    secondaryTile.VisualElements.Wide310x150Logo = _wideLogoUri;
    
    
    
  4. RequestCreateAsync 메서드를 SecondaryTile 인스턴스에서 호출하여 타일 미리 보기를 보여주는 플라이아웃을 표시하고 타일 만들기를 확인하는 메시지를 표시합니다.

    AdventureWorks.UILogic\Services\SecondaryTileService.cs

    
    bool isPinned = await secondaryTile.RequestCreateAsync();
    
    
    
  5. 확인하면 보조 타일이 시작 화면에 추가됩니다.

AdventureWorks Shopper가 시작 화면에서 보조 타일을 제거하는 데 사용하는 워크플로는 다음과 같습니다.

  1. AdventureWorks Shopper가 ItemDetailPage에서 시작 화면에서 제거 앱 바 단추를 통해 UnpinProductCommand를 호출합니다.

    AdventureWorks.UILogic\ViewModels\ItemDetailPageViewModel.cs

    
    UnpinProductCommand = DelegateCommand.FromAsyncHandler(UnpinProduct, () => SelectedProduct != null);
    
    
    
  2. AdventureWorks Shopper가 SecondaryTileService 인스턴스에서 SecondaryTileExists 조건자를 호출하여 타일이 이미 제거되지 않았는지 확인합니다.

    AdventureWorks.UILogic\ViewModels\ItemDetailPageViewModel.cs

    
    bool isPinned = _secondaryTileService.SecondaryTileExists(tileId);
    
    
    
  3. AdventureWorks Shopper가 SecondaryTileService 인스턴스에서 UnpinTile 메서드를 호출하여 보조 타일을 제거합니다. 타일은 SelectedProduct.ProductNumber 속성을 고유한 ID로 사용하여 식별할 수 있습니다.

    AdventureWorks.UILogic\ViewModels\ItemDetailPageViewModel.cs

    
    isPinned = (await _secondaryTileService.UnpinTile(tileId)) == false;
    
    
    

    UnpinTile 메서드는 SelectedProduct.ProductNumber 속성을 고유한 ID로 사용하여 SecondaryTile 클래스의 새 인스턴스를 만듭니다. 기존 보조 타일의 ID를 제공하면 기존 보조 타일을 덮어씁니다.

    AdventureWorks.UILogic\Services\SecondaryTileService.cs

    
    var secondaryTile = new SecondaryTile(tileId);
    
    
    
  4. RequestDeleteAsync 메서드를 SecondaryTile 인스턴스에서 호출하여 제거할 타일의 미리 보기를 보여주는 플라이아웃을 표시하고 타일 제거를 확인하는 메시지를 표시합니다.

    AdventureWorks.UILogic\Services\SecondaryTileService.cs

    
    bool isUnpinned = await secondaryTile.RequestDeleteAsync();
    
    
    
  5. 확인하면 보조 타일이 시작 화면에 제거됩니다.
참고  시작 화면 앱 바를 통해 보조 타일을 제거할 수도 있습니다. 이 경우 제거 정보가 앱에 제공되지 않고 사용자에게 확인하는 메시지가 표시되지 않으며 타일이 더 이상 존재하지 않는다는 알림이 앱에 제공되지 않습니다. 앱이 타일을 제거할 때 수행해야 하는 추가 정리 작업은 다음에 시작할 때 앱에서 수행해야 합니다.

자세한 내용은 보조 타일 개요보조 타일에 대한 지침을 참조하세요.

보조 타일에서 앱 시작

앱이 시작될 때마다 MvvmAppBase 클래스의 OnLaunched 메서드가 호출됩니다. MvvmAppBase 클래스는 Microsoft.Practices.Prism.StoreApps 라이브러리에서 제공됩니다. OnLaunched 메서드의 LaunchActivatedEventArgs 매개 변수에는 앱의 이전 상태와 활성화 인수가 포함됩니다. 앱이 기본 타일로 시작되면 LaunchActivatedEventArgs 매개 변수의 TileId 속성이 패키지 매니페스트의 응용 프로그램 ID와 동일한 값을 갖습니다. 앱이 보조 타일로 시작되면 TileId 속성이 보조 타일을 만들 때 지정한 ID를 갖습니다. MvvmAppBase 클래스의 OnLaunched 메서드는 앱이 일시 중단 후 다시 시작되지 않는 경우 또는 앱이 보조 타일을 통해 시작된 경우에만 App 클래스의 OnLaunchApplication 메서드를 호출합니다. 다음 코드 예제에 표시된 OnLaunchApplication 메서드는 앱 관련 시작 동작을 제공합니다.

AdventureWorks.Shopper\App.xaml.cs


protected override Task OnLaunchApplication(LaunchActivatedEventArgs args)
{
    if (args != null && !string.IsNullOrEmpty(args.Arguments))
    {
        // The app was launched from a Secondary Tile
        // Navigate to the item's page
        NavigationService.Navigate("ItemDetail", args.Arguments);
    }
    else
    {
        // Navigate to the initial page
        NavigationService.Navigate("Hub", null);
    }

    Window.Current.Activate();
    return Task.FromResult<object>(null);
}


이 메서드에서 LaunchActivatedEventArgs 매개 변수에는 앱의 이전 상태와 활성화 인수가 포함됩니다. 앱이 앱 타일에서 시작되는 경우에는 활성화 Arguments 속성에 데이터가 포함되지 않으므로 HubPage로 이동합니다. 앱이 보조 타일에서 시작되는 경우에는 활성화 Arguments 속성에 표시할 제품의 제품 번호가 포함됩니다. 그러면 ItemDetailPage로 이동하여 ItemDetailPageViewModel 인스턴스의 OnNavigatedTo 재정의로 제품 번호를 전달하므로 지정한 제품이 표시됩니다.

[맨 위로]

 

 

표시:
© 2015 Microsoft