윈도우8의 타일(Tile)과 알림(Notification) 3

3. 타일 알림(Tile Notification)

알림 관련 API는 대부분은 Windows.UI.Notifications 네임스페이스에 있다.

로컬 타일 알림은 다른 알림 전달방법과 달리 자동으로 알림이 만료되지 않으며 만료 시간은 지정 할 수 있다. 로컬에서 타일을 업데이트 하면 다시 업데이트 되기 전까지는 계속 같은 정보가 표시된다는 의미다. 오래되거나 유효하지 않은 정보를 사용자에게 지속적으로 표시해주기 보다는 타일에 표시하는 정보의 만료 시간 또한 지정하는 것이 좋겠다.

 

3.1 타일 템플릿(Tile template)

정적인 앱의 대표 이미지인 기본 타일에 추가로 앱에서 실시간으로 타일에 정보를 업데이트 하기 위해서는 타일 템플릿을 사용해야 하며 xml 구조를 사용하고 있다. 이전 윈도우폰7에서는 타일을 업데이트 하기 위한 몇 가지 요소와 배경 이미지만이 API로 존재하였고 푸쉬 알림(Push Notification)에서만 xml을 사용하였으나 윈도우8에서는 타일을 업데이트하기 위해 xml 구조를 사용하여 공통된 템플릿을 제공한다.

 

[예제 1] 타일 템플릿 구조

<tile>   <visual lang=”ko-KR”>     <binding template="TileWideImageAndText01" branding=”logo”>       <image id="1" src="image1.png"/>       …       <text id="1">Text Field 1</text>       …     </binding>    </visual> </tile>

 

타일 템플릿의 기본 요소는 tile, visual, binding, text, image가 있으며 구조는 예제 1과 같이 사용되고 미리 사용 할 템플릿을 선택 후 binding의 template에 명시하면 된다. 주로 사용되는 추가 속성으로 언어를 명시하는 lang이 있으며 visual, binding, text 태그의 속성으로 사용된다. branding 속성으로는 타일의 왼쪽 밑에 이름 또는 로고를 표시 해 줄 수 있다. binding은 visual 태그 안에서 요소를 여러 개 추가 할 수 있다.

image와 text는 binding 태그 안에서 템플릿에 따라 여러 개가 쓰일 수 있으므로 구분 할 수 있는 값으로 id 태그를 사용하고 있으며 1부터 시작한다.

Image의 src는 이미지 파일의 URI를 나타내며 파일의 위치에 따라 아래 형식을 먼저 써준다.

·         http:// 또는 https://
웹 기반 이미지

·         ms-appx:///
앱 배포시 패키지에 포함된 이미지

·         ms-appdata:///local/
로컬 저장소에 저장된 이미지(Windows.Storage.ApplicationData.Current.LocalFolder)

웹에 이미지가 있을 경우는 src=”http://image.png”와 같이 써주면 된다.

 

--------------------------------------------------------------------------------------------------------------

타일의 템플릿의 전체 속성은 msdn의 Tile schema(http://msdn.microsoft.com/ko-kr/library/windows/apps/br212859.aspx) 페이지를 참고하기 바란다.

--------------------------------------------------------------------------------------------------------------

 

템플릿은 현재 46가지가 있으며 TileTemplateType에 정의 되어 있고TileUpdateManager.GetTemplateContent를 통해 원하는 템플릿의 XML을 얻어 올 수 있다.

 

 [예제 2] 타일 템플릿 사용

TileTemplateType tileTemplate = Windows.UI.Notifications.TileTemplateType.TileSquareText03; XmlDocument tileXml = Windows.UI.Notifications.TileUpdateManager.GetTemplateContent(tileTemplate);   // tileXml 속성 변경 XmlNodeList tileTextAttributes= tileXml.GetElementsByTagName("text"); tileTextAttributes[0].AppendChild(tileXml.CreateTextNode("타일 업데이트"));   TileNotification tileNotification = new Windows.UI.Notifications.TileNotification(tileXml); TileUpdater tileUpdater = Windows.UI.Notifications.TileUpdateManager.CreateTileUpdaterForApplication(); tileUpdater.Update(tileNotification);

 

예제 2와 같이 템플릿 XML의 값을 변경하여 그 값으로 TileNotification 객체를 생성할 수 있으며 생성된 객체 XML 값은 Content 속성을 사용해서 확인 할 수 있다. 실제 업데이트 되는 시간을 변경하고 싶으면 TileNotification의 ExpirationTime 속성을 변경하면 되고 생성된 TileNotification으로 앱의 기본 타일을 업데이트 하기 위해서는 TileUpdateManager.CreateTileUpdaterForApplication 함수를 이용해서 TileUpdater 객체를 얻어온다. 이렇게 얻어온 TileUpdater 객체를 이용하면 타일을 업데이트 및 알림 지움, 설정 등 실제 컨트롤 할 수 있으며 그 중 Update를 이용하면 타일에 반영되어 시작 화면에서 확인 할 수 있다.

 

코드에서는 TileSquareText03 템플릿을 이용해 XML 코드를 가져와 속성 값을 변경하고 앱의 기본 정사각형 타일을 업데이트 하였다. 코드에서와 같이 기본 타일을 업데이트 하기 위해서는 TileUpdateManager의 GetTemplateContent와 CreateTileUpdaterForApplication을 사용하면 된다.

예제 2의 결과는 그림 4와 같다. 배경색은 앱 매니페스트에서 지정한 Background color이다.

<그림4> 타일 업데이트

 

두가지 크기의 타일을 모두 지원 하는 앱에서 타일을 업데이트 하는 방법은 예제 3과 같다.

[예제 3] 정사각형과 와이드 타일 업데이트

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01); XmlDocument squareTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareImage);   // tileXml, squareTileXml 속성 변경 XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image"); ((XmlElement)tileImageAttributes[0]).SetAttribute("src", "ms-appx:///images/blueWide.png"); XmlNodeList squareTileImageAttributes = squareTileXml.GetElementsByTagName("image"); ((XmlElement)squareTileImageAttributes[0]).SetAttribute("src"," ms-appx:///images/blueSquare.png");   // XML 코드 합치기 IXmlNode node = tileXml.ImportNode(squareTileXml.GetElementsByTagName("binding").Item(0), true); tileXml.GetElementsByTagName("visual").Item(0).AppendChild(node);   TileNotification tileNotification = new Windows.UI.Notifications.TileNotification(tileXml); Windows.UI.Notifications.TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);   // 생성된 실제 XML 코드 <tile>     <visual>         <binding template="TileSquareImage">             <image id="1" src="ms-appx:///images/blueSquare.png"/>         </binding>         <binding template="TileWideImageAndText01">             <image id="1" src="ms-appx:///images/blueWide.png"/>         </binding>     </visual> </tile

 

GetTemplateContent를 이용해 정사각형과 와이드 타일 템플릿을 얻어와 두 XML 값을 변경한 후 visual 태그 밑에 binding 태그는 중복이 가능하므로 한곳의 binding 요소를 다른 곳의 visual 태그 밑에 추가해서 하나의 XML 코드로 타일을 업데이트하면 된다. 복잡해 보일 수 있으나 XML라이브러리를 이용해서 두개의 XML을 합쳤을 뿐이다.

예제 3의 결과는 그림 5와 같다. 파란색 배경인 blueSquare.png와 blueWide.png를 사용하였으며 와이드 타일의 아래 배경색은 앱 매니페스트에서 지정한 Background color이다.

<그림5> 정사각형과 와이드 타일 업데이트

 

업데이트 된 타일 알림은 TileUpdateManager의 Clear 함수를 호출하면 앱의 기본 타일로 초기화 된다. 또한 TileUpdateManager의 Setting 속성으로 NotificationSetting 객체를 얻어오면 타일의 업데이트 가능 여부를 확인 할 수 있다.

로컬이 아닌 푸쉬 및 정기 알림으로 원격에서는 업데이트만 되며 업데이트된 내용을 삭제는 안 된다.

 

3.2 타일 알림 큐(Cycling tile notifications)

윈도우8의 타일은 최대 5개까지 타일 알림을 자동으로 순환 가능하다. 아래 예제를 통해 알아보자.

[예제 4] 타일 알림 큐 사용

// 알림 큐 사용 TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);   // 타일 템플릿 얻어오기 및 값 변경 TileNotification tileNotification = new TileNotification(tileXml); tileNotification.Tag = "TagName";   // 타일 업데이트 작업 …

 

알림 큐는 사용하기 전에 TileUpdateManager의 EnableNotificationQueue를 true로 호출하면 되고 반대로 사용하지 않을 경우는 false로 호출하면 된다. 타일 알림 큐는 최근 추가한 5개까지 타일 알림이 자동으로 순환되서 타일에 표시되고 각 타일을 구분하는 방법은 TileNotification 객체의 Tag 속성이며 이 값이 이전 타일 알림의 Tag와 같으면 업데이트 되고 값이 다르면 추가 된다. Tag는 16자 이하의 문자열을 입력해주면 된다. 타일 알림 큐는 뉴스 같은 앱에서 타일 알림 앱을 계속 추가해서 최신 뉴스 항목을 실시간으로 표시 해줄 때 사용하면 된다.

3.3 배지(Badge)

배지는 타일의 오른쪽에 표시되고 숫자(Numeric)나 시스템에 미리 정해진 문자(Glyph)를 보여줄 수 있다. 숫자는 1-99까지 표시 가능하고 99가 넘을 경우는 99로 표시된다. 문자 배지는 시스템에 정의된 상형 문자만 표시가 가능하고 주로 앱의 상태를 표시하는데 사용한다.

<표 3> 문자 배지 종류

상태	문자 모양
none	미표시
activity
alert
avaiable
away
busy
newMessage
paused
playing
unavailable
error
attention

 

[예제 5] 배지 템플릿 구조 및 사용

// 템플릿 구조 <badge value="activity"/>   XmlDocument badgeXml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeGlyph);   // badgeXml 속성 변경 XmlElement badgeElement = (XmlElement)badgeXml.SelectSingleNode("/badge"); badgeElement.SetAttribute("value", "newMessage");   BadgeNotification badge = new BadgeNotification(badgeXml); BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);

 

예제 5는 문자 배지를 newMessage로 변경하여 업데이트 하였으며 결과는 그림 6와 같다.

<그림6> 배지 업데이트

 

배지 템플릿도 타일 알림과 비슷한 구조로 업데이트되며 타일에 사용된 이름들에서 Tile을 Badge로 바꿔서 BadgeNotification, BadgeUpdateManager 객체를 통해 업데이트가 된다. 배지가 업데이트 되면 정사각형과 와이드 타일에 모두 반영되고 배지를 지우는 방법 또한 타일과 같이 BadgeUpdateManager의 Clear 함수를 호출하면 된다.

타일과 거의 비슷하게 사용하지만 타일의 일부가 아니며 타일을 업데이트해도 영향을 받지 않는다. 타일 알림과는 독립적으로 업데이트가 되며 로컬 및 푸쉬, 정기 알림 등의 원격에서도 업데이트 및 업데이트 내용을 삭제가 가능하다.

배지는 타 모바일 플랫폼에서도 동일한 명칭으로 사용되고 있으며 숫자만 사용가능 한 것에 비해 윈도우8에서는 미리 정의된 문자를 통해 상태 값도 표현 가능하고 타일 알림과 함께 사용하면 좀더 많은 정보를 사용자에게 표시 해 줄 수 있다.

 

3.4 보조 타일(Secondary tile)

보조 타일은 앱의 컨텐츠에 따라 타일을 여러 개 추가해서 각 타일에 특정 컨텐츠를 실시간 표시하고 관련 페이지로 직접 실행하게 해준다. 뉴스의 특정 카테고리를 시작화면에 추가하여 카테고리의 최근 뉴스를 타일을 통해 서비스 한다거나 소셜 앱에서 특정 친구의 최근 글을 타일을 통해 보고 실행하여 친구의 페이지를 확인할 수 있다.

보조 타일의 API는 보통 알림 관련 기능들과 달리 Windows.UI.StartScreen 네임스페이스에 포함되어 있으며 SecondaryTile 클래스를 이용하여 관리 한다. 앱 배포시 기본으로 시작화면에 표시되는 앱 타일과 달리 보조 타일은 사용자에 의해서만 동적으로 추가되므로 앱의 프로젝트에서 기본 타일에 설정하였던 사항들을 SecondaryTile 객체를 통해 생성하고 타일 추가 시 전달한 ID값으로 타일을 구분한다. 앱 타일과 같이 타일 알림과 배지 알림도 사용 가능하다.

 

[예제 6] SecondaryTile 생성자

public SecondaryTile(   string tileId,   string shortName,   string displayName,   string arguments,   TileOptions tileOptions,   Uri logoReference )

 

보조 타일의 생성은 SecondaryTile 클래스를 이용한다. tileId는 타일의 고유 아이디를 나타내며 보조 타일의 수정 및 삭제에 사용된다. shortName은 기본 타일에 설정했던 짧은 이름과 같고 보조타일에 표시되는 이름이다. displayName은 전체 프로그램 목록 등에서 작은 타일로 표시될 때 툴팁(tooltip)으로 제공되며 길이 제한은 없다. arguments는 보조 타일 생성 후 사용자가 보조 타일을 통해 앱을 실행했을 때 앱에 전달되는 인자값(OnLaunched 이벤트의 args.Arguments 인자)이며 2048개의 문자를 사용 가능하다. tileOptions은 TileOptions 열거형을 통해 기본 타일에서 정의했던 로고의 표시 유무를 설정한다. 마지막으로 logoReference는 정사각형 타일의 이미지를 설정한다. 이외에도 와이드 타일의 이미지를 추가로 지정 가능한 생성자도 있으며 tileId만 전달하거나 인자가 없는 생성자도 있으나 기본적으로 예제 6 생성자의 인자값은 전달해줘야 생성이 된다. 기본 타일에 있던 Foreground text등의 설정은 생성된 객체의 속성을 통해 지정 한다.

 

[예제 7] 보조 타일 생성

SecondaryTile secondaryTile = new SecondaryTile(TileId,                                                 "보조 타일",                                                 "보조 타일 샘플",                                                 .ToLocalTime().ToString(),                                                 TileOptions.ShowNameOnLogo | ShowNameOnWideLogo,                                                 new Uri("ms-es/redSquare.png"),                                                 new Uri("ms-es/redWide.png")); secondaryTile.ForegroundText = ForegroundText.Light;   // 보조 타일 추가 확인 bool isPinned = await e.RequestCreateForSelectionAsync(GetElementRect((FrameworkElement)sender), opups.Placement.Below);   if (isPinned) {     // 보조 타일 추가 성공 } else {     // 보조 타일 추가 실패 }

 

예제 7과 같이 SecondaryTile 객체를 통해 보조 타일 생성을 위한 값을 지정한 후 실제 생성은RequestCreateForSelectionAsync 함수를 이용하며 호출 시 사용자에게 타일 추가 요청 창이 뜬다.함수의 종류에는 Point와 Rect의 값을 이용해서 추가 요청 창이 뜨는 위치를 지정할 수 있는 함수가 포함되어 있으며 리턴값인 bool값을 통해 호출 성공여부를 알 수 있다.

예제 7을 실행하면 그림 7과 같이 사용자에게 보조 타일 고정을 알리는 창이 뜨며 사용자가 고정 버튼(Pin to Start)을 누르면 화면에 보이는 이미지와 같이 타일이 생성된다.

<그림7> 보조 타일 고정

 

보조 타일의 알림은 앱 타일 알림의 몇 가지 함수에서 SecondaryTile이라는 이름을 사용할 뿐 사용법이 거의 비슷하며 아래 예제를 통해 알아보자.

 

[예제 8] 보조 타일 알림

// 보조 타일 업데이트 string tileXmlString = "<tile>"                      + "<visual>"                      + "<binding template='TileWideText04'>"                      + "<text id='1'>보조 타일 업데이트</text>"                      + "</binding>"                      + "<binding template='TileSquareText04'>"                      + "<text id='1'>보조 타일 업데이트</text>"                      + "</binding>"                      + "</visual>"                      + "</tile>";   Windows.Data.Xml.Dom.XmlDocument tileDOM = new Windows.Data.Xml.Dom.XmlDocument(); tileDOM.LoadXml(tileXmlString); TileNotification tile = new TileNotification(tileDOM);   TileUpdateManager.CreateTileUpdaterForSecondaryTile(TileId).Update(tile);   // 보조 타일 배지 업데이트 string badgeXmlString = "<badge value='6'/>"; Windows.Data.Xml.Dom.XmlDocument badgeDOM = new Windows.Data.Xml.Dom.XmlDocument(); badgeDOM.LoadXml(badgeXmlString); BadgeNotification badge = new BadgeNotification(badgeDOM);   BadgeUpdateManager.CreateBadgeUpdaterForSecondaryTile(TileId).Update(badge);

 

예제에서는 타일 템플릿을 문자열로 XML코드를 만들었으며 TileWideText04와 TileSquareText04 템플릿을 각각 와이드와 정사각형 타일에 텍스트와 함께 적용하였다. 타일 알림에서 사용했던 타일 템플릿을 사용하여 TileNotification 객체를 생성한 부분 까지는 앱 타일 알림 사용법과 같고TileUpdateManager를 통해 업데이트 시 CreateTileUpdaterForSecondaryTile에 SecondaryTile 생성시 전달했던 아이디값을 전달해주고 Update를 호출하면 된다. 배지 업데이트 또한 BadgeUpdateManager의 CreateBadgeUpdaterForSecondaryTile에 보조 타일 아이디를 전달해서 업데이트 한다.

CreateTileUpdaterForApplication를 CreateTileUpdaterForSecondaryTile로CreateBadgeUpdaterForApplication를 CreateBadgeUpdaterForSecondaryTile로 바꿔서 보조 타일 을 구분할 수 있는 아이디를 전달 했을 뿐 앱 타일의 알림 사용법과 같음을 알 수 있다.