Tile과 Toast Notification 사용하기

UWP 앱을 개발 완료 후 스토어에 등록하고, 사용자들이 설치를 하는 것까지 어느정도 정상적으로 이루어진다고 생각하면, 이제 앱을 지속적으로 사용할 수 있도록 관심을 끌어주어야 합니다. 그래야 궁금해서 앱을 자꾸 실행 시켜보게 되겠죠?

타일에 새로운 컨텐츠가 있다가 알려주니 자꾸 누르고 싶죠?

이렇게 Notification을 발생시켜서 관심을 끌 수도 있습니다.

성공적인 앱 개발을 위한 Tile과 Notification 발생하는 방법에 대해서 알아 보도록 하겠습니다.

0. 참고

UWP 앱에 대한 타일, 배지 및 알림

Adaptive and interactive toast notifications for Windows 10

이 예제는

Windows 10 Version 1607

Visual Studio 2015 Update 3

Windows 10 SDK 14393(Anniversary)

에서 만들어 졌습니다. 이전 버전에서는 필수 구성요소를 설치하거나 업데이트 하셔야 합니다.

1. 적응형 타일 만들기

적응형 타일을 만드는 방법에 대해 설명하도록 하겠습니다.

Visual Studio 2015를 실행하고, File -> New -> Project를 선택하고, 아래 그림처럼 TileSample이라고 입력합니다.

다음에 나오는 대상 버전과 최소 버전은 기본 상태로 나두고 OK를 눌러서 프로젝트를 생성합니다.

새로운 프로젝트가 생성이 되었습니다~

Tile이나 Toast Notification은 모두 xml 형태의 일정 약식을 이용해서 만들어 지는 녀석들입니다. 그런데, xml을 동적으로 생성하기위해 쉽지 않기 때문에, 이 부분을 코드로 쉽게 만들 수 있도록 지원하는 Nuget Packages를 제공하고 있습니다. 이제 NuGet Package를 설치하도록 하겠습니다.

프로젝트를 선택 -> 마우스 오른쪽 버튼 클릭 -> Manage NuGet Packages 클릭

NotificationsExtensions 을 검색창에 입력한 후 NotificationsExtensions.Win10을 설치합니다.

설치를 하면, 코드나 Xaml을 이용해서 타일을 자신이 원하는 형태로 100%만들 수 있는 것이아니라, 기본적으로 일정 양식이 존재합니다. 그래서, 그 양식을 쉽게 볼 수 있도록 Notifications Visualizer라는 UWP 앱을 이용해서 볼 수 있으며,  이 블로그 게시물에서 자세한 정보를 얻을 수 있고 여기에서 알림 시각화 도우미를 다운로드할 수 있습니다.

(다운로드하는데 시간이 오래걸리는 것은 함정!!)

알림 시각화 도우미 앱 화면

2. 코딩으로 타일 만들기

Xaml로 타일을 구성할 수 있기는 하지만, 타일은 동적으로 내용을 변경 할 수 없기 때문에 대부분 코딩으로 만들어서 사용합니다. 그럼 현재 타일 모양을 한번 살펴 보도록 하죠

F5를 눌러서 실행 합니다. 실행하시기 전에 x86, Local Machine가 선택되어 있는지 확인 부탁드립니다. 예제로 올리는 셈플들은 프로젝트를 열면, 기본이 ARM, Device로 설정이 되어있기 때문에 이대로 실행하면 에러가 발생합니다.

한번 실행하면 컴퓨터에 TileSample 앱이 설치 됩니다. 시작 버튼을 누른 후 찾아서 마우스 오른쪽 버튼 클릭해서 Pin To Start를 클릭합니다.

클릭하면 아래와 같이 시작화면에 추가됩니다. 이제 여기에 X자 모양 말고 원하는 택스트가 출력되도록 해보겠습니다.

3. MainPage.xaml

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button Content="1. Basic Update Tile" Click="ButtonBase_OnClick"/>
        </StackPanel>
    </Grid>

4. MainPage.xaml.cs

        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            var content = new TileContent
            {
                Visual = new TileVisual
                {
                    TileSmall = new TileBinding
                    {
                        Content = new TileBindingContentAdaptive
                        {
                            Children =
                            {
                                new TileText {Text = "Small"}
                            }
                        }
                    },
                    TileMedium = new TileBinding
                    {
                        Content = new TileBindingContentAdaptive
                        {
                            Children =
                            {
                                new TileText {Text = "Medium"}
                            }
                        }
                    },
                    TileWide = new TileBinding
                    {
                        Content = new TileBindingContentAdaptive
                        {
                            Children =
                            {
                                new TileText {Text = "Wide"}
                            }
                        }
                    },
                    TileLarge = new TileBinding
                    {
                        Content = new TileBindingContentAdaptive
                        {
                            Children =
                            {
                                new TileText {Text = "Large"}
                            }
                        }
                    }
                }
            };

            var manager = TileUpdateManager.CreateTileUpdaterForApplication();
            manager.Update(new TileNotification(content.GetXml()));

        }

소스를 보시면 간단하게 몇줄만 입력하면 타일을 만들 수 있는걸 알 수 있습니다. 맨 아래 manager는 내가만든 타일을 앱의 타일에 반영하는 부분입니다.

여기서 알 수 있는 내용은 타일의 크기가 4가지 이기 때문에 타일을 설정할 때 4가지 크기에 맞는 내용을 입력해 넣어야 한다는 것입니다. 타일의 크기는 앱 사용자가 자신이 원하는 형태로 변경할 수 있으며, 기본적으로 시작화면에 넣을 때는 Medium 형태로 추가됩니다.  하지만, 4가지를 넣는다고 하더라도, 모바일은 3가지 종류만 지원하기 때문에 3가지만 보여집이다. ^^

에..그런데 지금 확인했는데..제일 큰 타일에 대한 정보를 제공해도, 꼭 변경이 가능하지는 않군요;; 지금 TileSample의 경우 가장 큰 넘으로 변경하는 메뉴가 표시되지 않습니다. 뭔가 사연이 있을 것 같은데..나중에 찾으면 다시 올리도록 하겠습니다.

5. 텍스트 스타일 적용

        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            var content = new TileContent
            {
                Visual = new TileVisual
                {
                    TileSmall = new TileBinding
                    {
                        Content = new TileBindingContentAdaptive
                        {
                            Children =
                            {
                                new TileText {Text = "Small Header", Style = TileTextStyle.Base},
                                new TileText {Text = "Small content", Style = TileTextStyle.CaptionSubtle},
                            }
                        }
                    },
                    TileMedium = new TileBinding
                    {
                        Content = new TileBindingContentAdaptive
                        {
                            Children =
                            {
                                new TileText {Text = "Medium Header", Style = TileTextStyle.Base},
                                new TileText {Text = "Medium content", Style = TileTextStyle.CaptionSubtle},

                            }
                        }
                    },
                    TileWide = new TileBinding
                    {
                        Content = new TileBindingContentAdaptive
                        {
                            Children =
                            {
                                new TileText {Text = "Wide Header", Style = TileTextStyle.CaptionSubtle},
                                new TileText {Text = "Wide content", Style = TileTextStyle.Base},
                            }
                        }
                    },
                    TileLarge = new TileBinding
                    {
                        Content = new TileBindingContentAdaptive
                        {
                            Children =
                            {
                                new TileText {Text = "Large Header", Style = TileTextStyle.Base},
                                new TileText {Text = "Large content", Style = TileTextStyle.CaptionSubtle},
                            }
                        }
                    }
                }
            };

과거와 다른점은 택스트의 어느줄이나 원하는 스타일을 적용할 수 있다는 것이군요. 좀 편하게 변경된 것 같습니다.

캬오~ 그 아래 내용들을 보니 옛날에는 꿈도 못꾸던 것들이 잔득 들어가 있군요, 하위 그룹 나누는 것 부터 신세계입니다..하하;;; 그룹에 대한 내용들은 직접 살펴 보세용

6. 이미지

이미지를 표시하는 방법을 살펴 보겠습니다. 이미지의 파일 크기와 이미지 크기에 대한 제한이 있다고 합니다.

• Small (70x70) (Windows only)
• Small (71x71) (Windows Phone only)
• Medium (150x150)
• Wide (310x150)
• Large (310x310) (Windows only)
  

웹에서 이미지 땡겨서 보여줄라구 해도 사이즈가 정확하게 맞아야 할 것 같기는 한데.. 한번 시도를 해보았는데, 실패했습니다. 일단, 이미지를 짤라서 앱에 포함한 후에 다시 시도해 보았습니다. 이미지를 복사한 후 프로젝트에 있는 Assets 폴터를 선택하고 붙여 넣기를 하면 해당 폴더에 이미지가 복사 됩니다.

                    TileWide = new TileBinding
                    {
                        Content = new TileBindingContentAdaptive
                        {
                            Children =
                            {
                                new TileText {Text = "우주소녀 - 성소", Style = TileTextStyle.Base},
                                new TileImage {Source = new TileImageSource("Assets/girl.png"), RemoveMargin = true}
                            }
                        }
                    },

이미지 출력이 잘되네요.. 참 버튼을 클릭한 후에 좀 기다려야 타일이 변하면서 내용이 표시됩니다. 참고하세요

7. Toast Notification

이번에는 Toast Notification에 대해서 살펴 보겠습니다.  위에서 설치했던 NotificationsExtensions.Win10 nugget package project url로 이동하면, 셈플을 다운로드 할 수 있습니다.

셈플을 실행 시켜 보면 다음과 같이 한눈에 보기 좋은 내용이 표시 됩니다. (Notifications Visualizer를 이용용해도 비슷합니다.)

간단하게 작업 완료 메시지를 출력할 수도 있고, 버튼이나 텍스트 박스를 추가해서 사용자의 입력을 받을 수도 있습니다. 과거에는 생각도 못하던 기능들이 추가 되어있습니다.

1) 간단한 메시지 출력

MainPage.xaml에 버튼을 추가 합니다.

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button Content="1. Basic Update Tile" Click="ButtonBase_OnClick"/>
            <Button x:Name="BasicToast" Content="2. Basic Toast" Click="BasicToast_OnClick"/>
        </StackPanel>
    </Grid>

MainPage.xaml.cs에 2개의 메소드를 추가합니다.

        private void BasicToast_OnClick(object sender, RoutedEventArgs e)
        {
            //토스트 컨텐츠 생성
            var toastContent = new ToastContent
            {
                Visual = new ToastVisual
                {
                    BindingGeneric = new ToastBindingGeneric
                    {
                        Children =
                        {
                            new AdaptiveText {Text = "TileSample - First Toast"}
                        }
                    }
                }
            };
            ShowToast(toastContent);
        }
        /// <summary>
        /// 토스트 출력
        /// </summary>
        /// <param name="toastContent"></param>
        private void ShowToast(ToastContent toastContent)
        {
            try
            {
                Debug.WriteLine(toastContent.GetContent());
                ToastNotificationManager.CreateToastNotifier().Show(new ToastNotification(toastContent.GetXml()));
            }
            catch (Exception ex)
            {
                var dontWait = new MessageDialog(ex.ToString()).ShowAsync();
            }
        }

정말 간단한 토스트가 출력되었습니다. 아이콘이 표시되지 않는 것은 해당 아이콘이 앱에 포함되어 있지 않기 때문입니당~

2) 아이콘과 버튼을 가지는 토스트를 만들어 보겠습니다.

MainPage.xaml 을 수정합니다.

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button Content="1. Basic Update Tile" Click="ButtonBase_OnClick"/>
            <Button x:Name="BasicToast" Content="2. Basic Toast" Click="BasicToast_OnClick"/>
            <Button x:Name="ButtonToast" Content="3. Button Toast" Click="ButtonToast_OnClick"/>
        </StackPanel>
    </Grid>

성소 이미지는 위에서 사용했던 그 이미지 입니당~

        private void ButtonToast_OnClick(object sender, RoutedEventArgs e)
        {
            //토스트 컨텐츠 생성
            var toastContent = new ToastContent
            {
                Visual = new ToastVisual
                {
                    BindingGeneric = new ToastBindingGeneric
                    {
                        Children =
                        {
                            new AdaptiveText {Text = "우주소녀", HintStyle = AdaptiveTextStyle.Header},
                            new AdaptiveText {Text = "성소 입니다.", HintStyle = AdaptiveTextStyle.Body},
                        },
                        AppLogoOverride = new ToastGenericAppLogo()
                        {
                            Source = "Assets/girl.png",
                            HintCrop = ToastGenericAppLogoCrop.Circle
                        },
                    }
                },
                Launch = "ButtonToast",
                Actions = new ToastActionsCustom
                {
                    Buttons =
                    {
                        new ToastButton("좋아요", "like"),
                        new ToastButton("싫어요", "hate")
                    }
                }
            };
            ShowToast(toastContent);
        }

자~ 아이콘과 버튼이 포함된 토스트가 출력되었습니다. 하하..여기서 뭘 눌러야 하는지는 아시겠죠?

8. 그런데..

Toast Notification은 단순히 알림 수준의 내용이 아니라, 선택을 했을 때 후속 처리를 해줘야 하는 녀석입니다. 하지만, 안타깝게도 Toast Notification 포스트들을 살펴보니 자세하게 나와있는 녀석은 없는 것 같습니다.

혹시라도 찾게 되면 추가하도록 하겠습니다. (혹시라도 요청하시면 제가 작성할수는 있습니다..쿨럭)

9. Source

TileSample.zip