타일 및 배지

Applies to Windows and Windows Phone

iOS 앱은 배지로 해당 아이콘을 업데이트하지만 Windows 스토어 앱은 한 걸음 더 나아가 라이브 타일을 사용합니다.

다음 동영상에서는 iOS 앱의 아이콘과 Windows 스토어 앱의 라이브 타일을 비교합니다.

많은 iOS 앱은 앱 아이콘에 배지 숫자를 사용하여 요약이나 동적 상태 정보를 표시하는데, 사용자가 앱을 시작하지 않고도 정보를 볼 수 있는 쉬운 방법을 제공하기 때문입니다. iOS에서는 메일 앱의 읽지 않은 메일 수, 소셜 미디어 앱의 게시물 수, 해결되지 않은 할 일 작업 등 다른 숫자를 최대 네 개까지 표시할 수 있습니다. 종종 아이콘 배지 숫자는 푸시 알림에 대한 응답으로 업데이트되지만 로컬 알림을 통해 업데이트하거나 프로그래밍 방식으로 업데이트할 수도 있습니다.

Windows 8에서 타일은 시작 화면에 있는 앱의 표현이며 static 또는 live일 수 있습니다.

  • static 타일에는 항상 앱의 매니페스트에 정의된 기본 콘텐츠가 표시됩니다.
  • live 타일은 프로그래밍 방식으로 업데이트되며 새로운 정보를 표시하는 데 사용됩니다. 라이브 타일을 사용하면 앱을 시작하지 않고도 사용자에게 풍부하고 흥미로운 정보를 제공할 수 있습니다. iOS 배지와 마찬가지로 라이브 타일은 푸시 알림에 대한 응답, 로컬 알림으로 업데이트하거나 프로그래밍 방식으로 업데이트할 수 있습니다.

Windows 스토어 앱 라이브 타일

Windows 스토어 앱의 기본 타일은 앱의 매니페스트 파일(Package.appxmanifest)에 정의되어 있습니다. 개발자는 앱 로고 또는 앱 이름을 표시하거나 둘 다 표시하지 않도록 선택할 수 있습니다. 빠른 시작: Microsoft Visual Studio 매니페스트 편집기를 사용하여 기본 타일 만들기를 참조하세요. 앱이 설치된 후에는 런타임에 알림을 사용하여 타일 콘텐츠를 업데이트할 수 있습니다. 빠른 시작: 타일 업데이트 보내기를 참조하세요.

Windows 스토어 앱 타일은 다른 크기로 표시할 수 있습니다. 기본적으로 정사각형 타일만 사용되며 필요합니다. 앱이 다른 크기의 타일을 지원하는 경우 사용자가 언제든지 라이브 타일의 형식을 변경할 수 있습니다. 라이브 타일에 대한 자세한 내용은 타일 및 배지에 대한 지침 및 검사 목록을 참조하세요.

Windows 8 라이브 타일

iOS 앱 배지 숫자와 Windows 스토어 앱 라이브 타일 비교

배지 숫자를 사용하여 iOS 앱 아이콘에 동적 정보를 표시한 경우 라이브 타일은 동일한 작업 외에 더 많은 작업을 수행할 수 있습니다.

다음 표에서는 앱 아이콘 또는 앱 타일을 정의하고 배지나 다른 콘텐츠로 업데이트하는 데 필요한 다양한 단계를 보여 줍니다.

단계iOSWindows 8
앱에 대한 아이콘이나 타일을 만듭니다. 앱 번들에서 하나 이상의 아이콘을 추가합니다. info.plist 파일에서 CFBundleIconFiles 아이콘 파일 키를 사용하여 아이콘 파일을 정의합니다. Visual Studio 응용 프로그램 매니페스트 파일의 응용 프로그램 UI 창에서 아이콘 파일을 설정합니다. 빠른 시작: Microsoft Visual Studio 매니페스트 편집기를 사용하여 기본 타일 만들기를 참조하세요.
응용 프로그램 이름을 정의 합니다.info.plist 파일에서 CFBundleDisplayName(번들 표시 이름) 키의 값을 설정합니다.Visual Studio 응용 프로그램 매니페스트 파일의 응용 프로그램 UI 창에서 앱의 짧은 이름을 설정합니다. 빠른 시작: Microsoft Visual Studio 매니페스트 편집기를 사용하여 기본 타일 만들기를 참조하세요.
앱 아이콘/타일에서 배지를 업데이트합니다.현재 UIApplication 클래스의 applicationIconBadgeNumber 속성을 설정합니다.배지 템플릿 XML에서 BadgeUpdateManager 클래스를 검색합니다. 배지 요소의 값을 문자 모양의 값으로 설정하고 BadgeUpdateManager 클래스를 사용하여 업데이트합니다. 빠른 시작: 배지 업데이트 보내기를 참조하세요.
아이콘/타일 이미지를 변경합니다.해당 없음TileUpdateManager 클래스를 사용하여 타일 템플릿을 나타내는 XML 문서를 검색합니다. 템플릿의 image 요소 값을 새 이미지로 설정합니다. 새 TileNotification을 만들고 TileUpdateManager를 사용하여 알림을 업데이트합니다. 빠른 시작: 타일 업데이트 보내기를 참조하세요.
타일에서 알림 메시지를 변경 합니다.해당 없음TileUpdateManager 클래스를 사용하여 타일 템플릿을 나타내는 XML 문서를 검색합니다. 템플릿의 text 요소 값을 새 메시지로 설정합니다. 새 TileNotification을 만들고 TileUpdateManager를 사용하여 알림을 업데이트합니다.

 

샘플 앱

앱을 만듭니다.

이 샘플에서는 C# 새 앱 템플릿을 사용하여 앱을 만듭니다.

  • Microsoft Visual Studio를 시작합니다.
  • 파일 메뉴에서 새 프로젝트를 클릭합니다.
  • Windows 스토어가 아직 선택되지 않은 경우 설치됨 > 템플릿 > Visual C#을 확장하고 Windows 스토어를 클릭합니다.
  • 새 앱(XAML)이 아직 선택되지 않은 경우 클릭합니다.
  • 이름위치 상자에 앱의 이름(예: AppTile)과 위치를 입력하거나 기본값을 그대로 유지합니다.
  • 확인을 클릭합니다.

앱에 대해 기본 타일을 정의합니다.

  • 150 x 150 픽셀(logo.png) 이미지와 30 x 30 픽셀(logo_small.png) 이미지 두 개를 준비합니다.
  • Visual Studio의 솔루션 탐색기 창에서 두 이미지를 자산 디렉터리로 끕니다.
  • 솔루션 탐색기 창에서 Package.appmanifest 파일을 두 번 클릭하여 엽니다.
  • 응용 프로그램 UI 탭에서 로고 텍스트 상자에 Assets\logo.png를 입력하고 작은 로고 텍스트 상자에 Assets\logo_small.png를 입력합니다.
  • 예를 들어 짧은 이름 텍스트 상자에 Garden Flowers를 입력합니다.
  • 디버그 > 디버깅 시작을 클릭하여 앱을 실행합니다.

    작동 중인 라이브 타일

타일에서 배지를 업데이트합니다.

  • 디버그 > 디버깅 중지를 클릭하여 응용 프로그램을 중지합니다.
  • Visual Studio에서 MainPage.xaml 파일의 여는 <GridViewGrid.Row="0" Grid.Column="0" …> 태그와 닫는 </GridView> 태그 사이에 다음 XAML 코드를 추가합니다.
    
    
                <TextBlock HorizontalAlignment="Left" Margin="256,219,0,0" TextWrapping="Wrap"                        
    Text="This a simple app that shows you how to use Live Tile in Windows 8. Click below to update the tile." FontSize="30" VerticalAlignment="Top" Height="201" Width="851" />
                <Button Content="Update the tile" HorizontalAlignment="Left" Margin="256,425,0,0" VerticalAlignment="Top" Height="59" Width="194" FontSize="24" Click="UpdateTile_Click"/>
                <Button Content="Update the badge" HorizontalAlignment="Left" Margin="523,425,0,0" VerticalAlignment="Top" Height="59" Width="245" FontSize="24" Click="UpdateBadge_Click"/>
    
    
    
    

    Visual Studio에서 MainPage.xaml.csMainPage 클래스에 다음 코드를 추가합니다.

    
           private void UpdateBadge_Click(object sender, RoutedEventArgs e)
            {
                XmlDocument badgeXml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);
                //Assign a value to badge
                XmlElement badgeElement = (XmlElement)badgeXml.SelectSingleNode("/badge");
                badgeElement.SetAttribute("value", "1");
                // Create the badge notification and send it to the badge.
                BadgeNotification badge = new BadgeNotification(badgeXml);
                BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);
            }
    private void UpdateTile_Click(object sender, RoutedEventArgs e)
            {
            }
    
    
    

    파일 맨 위에 다음 코드를 추가해야 합니다.

    
    using Windows.Data.Xml.Dom;
    using Windows.UI.Notifications;
    
    

    디버그 > 디버깅 시작을 클릭하여 앱을 다시 실행합니다. 응용 프로그램에서 배지 업데이트 단추를 클릭합니다.

    작동 중인 라이브 타일

    시작 화면을 방문하면 타일에서 업데이트된 배지 숫자(1)가 표시됩니다.

    작동 중인 라이브 타일

4. 타일 이미지 및 알림 메시지를 변경합니다.

  • 디버그 > 디버깅 중지를 클릭하여 응용 프로그램을 중지합니다.
  • 다른 150 x 150 픽셀 이미지(Strelitzia.png)를 솔루션 탐색기의 자산 폴더로 끕니다.
  • Visual Studio에서 MainPage.xaml.cs 파일의 UpdateTile_Click 메서드를 다음 코드로 바꿉니다.
    
            private void UpdateLiveTile()
            {
                //Template for tile and retrieve its XML contents
                XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText03);
                XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
                tileTextAttributes[0].InnerText = "Strelitzia";
                tileTextAttributes[1].InnerText = "growing";
                tileTextAttributes[2].InnerText = "in my garden";
                //Add an image for notification
                XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
                ((XmlElement)tileImageAttributes[0]).SetAttribute("src", "Assets\\Strelitzia.png");
                ((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "Strelitzia");
                //Create the notification based on the XML content 
                TileNotification tileNotification = new TileNotification(tileXml);
                // Send the notification to the app tile
                TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
            }
    
    
    

    여기서는 타일에 TileSquarePeekImageAndText03 템플릿을 사용합니다. 응용 프로그램 및 사용자에게 표시할 상태 유형에 따라 여러 가지 다양한 템플릿에서 선택할 수 있습니다. 타일 템플릿 카탈로그를 참조하세요. 이 템플릿은 텍스트가 없는 이미지와 잠깐 표시되거나 위아래로 움직이는 네 줄 텍스트가 있는 정사각형 타일로 구성됩니다.

    템플릿 XML에서 텍스트 요소를 검색하고 위에 표시된 세 줄을 사용하여 값을 설정합니다. 또한 타일 템플릿 XML에서 이미지 요소를 검색하고 src 특성을 Assets\Strelitzia.png로 설정합니다. 마찬가지로 alt 특성을 Strelitzia로 설정합니다.

    그런 다음 새 TileNotification 개체를 만들고 TileUpdateManager 클래스를 사용하여 타일을 업데이트합니다. 또한 아래에 표시된 대로 MainPage.xaml.cs 파일의 MainPage 생성자에 두 줄을 추가합니다.

    
            public MainPage()
            {
                this.InitializeComponent();
                BadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear();
                TileUpdateManager.CreateTileUpdaterForApplication().Clear();
            }
    
    
    

    이러한 두 줄은 앱을 다시 실행하는 동안 배지와 알림을 지웁니다.

    디버그 > 디버깅 시작을 클릭하여 앱을 다시 실행합니다. 응용 프로그램에서 타일 업데이트 단추를 클릭합니다.

    시작 화면을 방문하면 타일 업데이트가 표시됩니다.

    작동 중인 라이브 타일

    첫 번째 이미지는 로고 및 배지 숫자가 있는 새 Strelitzia 이미지로 업데이트된 타일을 보여 줍니다. 두 번째 이미지는 로고 및 배지 숫자와 함께 메시지가 잠깐 표시되는 몇 초 후의 타일을 보여 줍니다.

관련 항목

iOS 개발자용 항목
iOS 개발자용 리소스
iOS 개발자용 Windows 8 컨트롤
iOS 개발자용 Windows 8 도움말
타일 및 배지 항목
타일, 배지 및 알림
타일 템플릿 카탈로그
빠른 시작: 타일 업데이트 보내기
타일 및 배지에 대한 지침 및 검사 목록
빠른 시작: 배지 업데이트 보내기

 

 

표시:
© 2015 Microsoft