뛰어난 라이브 타일 환경 만들기(1부)

Windows 8 앱 개발자 블로그

Windows 8 엔지니어링 팀에서 제공하는 Windows 8용 Metro 스타일 앱 개발의 이해

뛰어난 라이브 타일 환경 만들기(1부)

  • Comments 0

라이브 타일은 사용자가 여러분의 앱을 다시 찾도록 하는 가장 좋은 방법입니다. 이 글은 폴링 및 로컬 API를 사용하여 앱의 라이브 타일을 업데이트하는 방법을 설명합니다. 이를 통해 Windows 8 시작 화면에서 앱의 특징을 더욱 돋보이게 만들 수 있습니다. 타일에는 앱을 가장 잘 설명해 주는 내용을 넣을 수 있습니다. 앱 타일은 앱의 핵심적인 부분이며 가장 자주 보게 될 부분이기 때문에 사용자가 여러분의 앱을 즐겨 찾을 수 있도록 타일을 잘 활용해 보십시오.

이 글에서는 예제 앱을 통해 다음에 대한 방법을 단계별로 설명합니다.

  1. 타일 업데이트 디자인
  2. 타일 콘텐츠에 적합한 템플릿 선택
  3. 클라우드의 폴링 알림을 사용하여 앱을 실행하고 있지 않을 때 타일 업데이트
  4. 앱이 SDK(Windows 8 SDK 앱 타일 및 배지 샘플)에 포함된 NotificationsExtensions 라이브러리를 사용하여 실행되고 있는 동안 타일을 업데이트합니다.

Contoso Food Trucks 앱 소개

예제 앱인 Contoso Food Trucks를 살펴보겠습니다. 사용자는 이 앱을 통해 이동 중인 푸드 트럭에 대한 정보를 얻을 수 있습니다. 이 앱은 Metro 스타일 앱 사례 연구에 대한 웹 사이트에서 설명했던 것과 같은 앱입니다. 이 블로그 글에서는 이 앱에 라이브 타일을 추가하는 방법을 설명합니다.

시작 화면에 표시되는 다양한 타일 중 하나인 Food Trucks 앱

여러분의 앱은 어떤 강점이 있습니까?

앱의 주된 특징을 염두에 두면 타일에 포함할 콘텐츠와 이를 업데이트할 주기를 파악할 수 있습니다.

Contoso Food Trucks 앱은 사용자들이 즐겨 찾는 푸드 트럭을 파악하고 추적하여 근처에 있는지를 확인할 수 있는 앱입니다. 이러한 이유로 저는 Food Trucks 타일에 다음과 같은 목표를 세웁니다.

  • 특정 위치 근처에 있는 푸드 트럭 파악
  • 사용자가 즐겨 찾는 푸드 트럭 추적

앱 타일을 광고 지면으로 사용하지 마십시오. Windows 앱 스토어 약관에서 대부분의 경우 타일을 사용하여 광고를 하지 못하도록 되어 있습니다.

기본 타일 및 타일 크기

각 앱에는 기본 타일이 있습니다. 이는 사용자가 처음으로 앱을 설치할 때 보게 되는 타일입니다. 기본 타일 로고 이미지는 여러분의 앱 로고 또는 기타 브랜딩을 표시하여 사용자가 앱을 명확히 파악할 수 있도록 합니다.

앱 매니페스트에서 기본 타일 로고 이미지를 정의하면 Windows가 첫 번째 알림을 수신하여 타일을 업데이트할 때까지 이 이미지를 표시합니다. 타일은 표시할 알림이 없는 경우, 예를 들어 현재 타일 알림이 만료되거나 사용자가 앱에 대한 라이브 타일 업데이트를 끄는 경우 기본 이미지로 되돌릴 수 있습니다.

기본 타일 이미지도 타일을 지원하는 크기를 정의합니다. 타일은 정사각형 또는 와이드의 두 가지 크기로 사용할 수 있습니다. 모든 앱은 정사각형 타일을 지원해야 하지만 앱이 와이드 타일을 지원할 수도 있습니다. 앱에서 기본 타일에 와이드 로고 이미지를 제공하지 않는 경우 앱 타일의 크기를 와이드 타일로 조정할 수 없으며 와이드 타일 알림을 받을 수 없습니다. 앱에 와이드 로고 이미지가 포함되어 있는 경우 Windows는 기본적으로 와이드 형식에 이 타일을 표시합니다.

저는 하루에 한 번 이상 타일을 업데이트하며 앱에서 제공하는 콘텐츠에 여분의 공간이 필요하기 때문에 Contoso Food Trucks 앱에서 와이드 타일을 지원하도록 선택했습니다. 제가 기본 타일 로고에 사용하는 이미지들은 다음과 같습니다.

Contoso Food Trucks라는 제목의 직사각형 타일과 큰 트럭 로고가 들어가 있는 Food Trucks라는 제목의 사각형 타일

정사각형 타일과 와이드 타일 모두 알림을 수신할 수 있습니다. 저는 알림을 전송할 때 항상 정사각형 버전과 와이드 버전을 모두 포함시킵니다. 이 방법을 사용하면 사용자가 타일을 더 작은 크기로 조정하는 경우에도 업데이트된 데이터를 보게 됩니다.

앱에 대한 기본 이미지를 만드는 방법에 대한 자세한 내용은 빠른 시작: Microsoft Visual Studio 11 매니페스트 편집기로 기본 타이틀 만들기에서 참조할 수 있습니다. 타일 및 알림 개요에서 타일 크기 개념에 대한 자세한 내용을 참조할 수 있습니다.

타일 업데이트 디자인

근처에 있는 푸드 트럭 파악

이 앱의 좋은 점 중 하나는 사용자가 어떤 푸드 트럭을 찾아갈지를 결정하도록 도와준다는 것입니다. 그래서 어떤 푸드 트럭이 근처에 있는지를 알아야 합니다. 이를 확인하기 위해서 사용자는 앱에서 기본 점심 위치를 설정할 수 있습니다. 사용자가 이 위치를 설정하면 설정한 기본 위치 근처에 현재 어떤 푸드 트럭이 있는지를 알려 줍니다. 이 타일을 업데이트하기 위해 이미지가 없는 템플릿을 선택했습니다.

앱 콘텐츠를 시스템 정의 템플릿에 넣으면 타일도 업데이트되기 때문에 우리가 첫 번째로 해야 할 작업은 콘텐츠에 적합한 템플릿을 선택하는 것입니다. 개발자 센터(타일 템플릿 선택 참조)에서 템플릿 카탈로그를 살펴본 후 와이드 타일에 적합한 TileWideText01 템플릿을 선택했습니다. 정사각형 타일에는 TileSquareText03 템플릿을 선택했습니다. 타일에서 텍스트 문자열만 업데이트할 것이므로 텍스트 전용 템플릿 두 개를 선택했습니다.

최종 선택을 하기 전에 Windows 8 SDK 앱 타일 및 배지 샘플을 이용하여 다양한 템플릿 옵션을 적용해 보았습니다. 이 샘플을 사용하면 다양한 텍스트 문자열 및 이미지를 바꿔 본 후 최종 타일 디자인을 결정할 수 있습니다. 예를 들어 샘플 템플릿을 테스트한 결과, 정사각형 템플릿에서 텍스트가 잘 보이도록 하려면 푸드 트럭의 짧은 이름을 사용해야 한다는 사실을 확인했습니다.

다음 내용이 들어 있는 와이드 직사각형 타일 근처에 있는 Food Trucks / Nom Nom Barbecue Truck / Sushi Truck / Macaroni Makin' Wagon    다음 내용이 들어 있는 정사각형 타일 근처 / Nom Nom / Sushi Truck

알림을 전송하면 타일 업데이트가 생성됩니다. 알림은 단순히 타일 스키마를 작성하는 XML 조각입니다. 이 글의 두 번째 부분에서 설명할 TileUpdateManager.getTemplateContent() 함수 또는 NotificationsExtension 라이브러리를 사용하여 코드에 XML을 작성합니다. 알림은 알림을 렌더링할 때 어떤 타일 템플릿이 사용되는지를 나타내며 템플릿의 레이아웃에 따라 타일에 표시되는 텍스트 및 이미지를 알려 줍니다.

위의 Food Trucks 앱에 표시한 타일 업데이트를 만들기 위해 다음과 같은 타일 XML을 사용했습니다.

타일 XML

<?xml version="1.0" encoding="utf-8" ?>
<tile>
<visual>
<binding template="TileWideText01">
<text id="1">Food Trucks Near You</text>
<text id="2">Nom Nom Barbecue Truck</text>
<text id="3">Sushi Truck</text>
<text id="4">Macaroni Makin' Wagon</text>
</binding>
<binding template="TileSquareText03">
<text id="1">Near You</text>
<text id="2">Nom Nom</text>
<text id="3">Sushi Truck</text>
</binding>
</visual>
</tile>

이 XML에는 와이드 타일 및 정사각형 타일 각각에 적합한 두 가지 <binding> 요소가 포함되어 있습니다. 이 앱은 와이드 타일을 지원하기 때문에 저는 항상 모든 타일 알림에 와이드 및 정사각형 타일 템플릿 바인딩을 제공합니다. 이렇게 하면 사용자가 타일에 대해 설정한 크기에 상관없이 타일이 항상 알림 업데이트 콘텐츠를 표시하게 됩니다. 세 번째 트럭 이름이 더 작은 정사각형 템플릿에 맞지 않기 때문에 정사각형 타일에는 두 가지 트럭 이름만 표시됩니다.

즐겨 찾는 푸드 트럭

이 앱에서 사용자가 즐겨 찾는 푸드 트럭이 어디에 있는지를 알려 주고, 타일에서 사용자가 같은 내용을 알 수 있도록 하려고 합니다. 이 경우 정보가 두 줄의 짧은 텍스트에 맞습니다. 또한 각각의 푸드 트럭을 나타내는 이미지를 사용하여 타일을 더욱 재미있게 꾸며 보겠습니다.

앱 콘텐츠를 시스템 정의 템플릿에 넣으면 타일도 업데이트되기 때문에 우리가 첫 번째로 해야 할 작업은 올바른 템플릿을 선택하는 것입니다. 개발자 센터(타일 템플릿 선택 참조)에서 템플릿 카탈로그를 살펴본 후 이미지 하나와 두 개의 짧은 텍스트 문자열을 지원하는 와이드 타일에 적합한 TileWideImageAndText02 타일 템플릿을 선택했습니다. 정사각형 타일에서는 TileSquarePeekImageAndText04 템플릿을 선택하여 타일에 이미지와 텍스트가 모두 표시되도록 했습니다. 미리 보기 템플릿을 사용하면 일반적인 타일 영역에서 허용되는 것 이상의 콘텐츠를 제공할 수 있습니다. Windows는 미리 보기 템플릿에 애니메이션 효과를 적용하여 정사각형 타일 안의 템플릿에 넣은 이미지와 텍스트 모두를 표시합니다. 따라서 정사각형 타일의 상단 및 하단 프레임이 타일에서 번갈아 표시됩니다. 미리 보기 타일의 콘텐츠는 타일 공간 내에서 위아래로 스크롤되어 제공된 전체 콘텐츠를 표시합니다.

그릴 위의 고기 이미지, 트럭 로고 및 업데이트된 텍스트: Nom Nom Barbecue Truck Washer Ave 및 3번가, 3시까지    그릴 위 고기 이미지, 트럭 로고 및 업데이트된 텍스트: Nom Nom @ Washer Ave 및 3번가, 3시까지

타일 XML

<?xml version="1.0" encoding="utf-8" ?>
<tile>
<visual>
<binding template="TileWideImageAndText02">
<image id="1" src="http://www.contoso.com/foodtrucks/nomnombbq.png"/>
<text id="1">Nom Nom Barbecue Truck</text>
<text id="1">Washer Ave and 3rd until 3</text>
</binding>
<binding template="TileSquarePeekImageAndText04">
<image id="1" src=" http://www.contoso.com/foodtrucks/nomnombbq-square.png"/>
<text id="1">Nom Nom @ Washer Ave and 3rd until 3</text>
</binding>
</visual>
</tile>

이전과 같이 XML 페이로드로 정의된 알림을 사용하여 타일이 어떻게 보이는지를 확인했습니다. 첫 번째 타일과 이 타일의 차이는 이 알림에 이미지를 사용하고 있다는 점입니다. 알림의 이미지는 XML 페이로드에 포함되어 있지 않으며 페이로드에서 다른 위치로 참조됩니다. 이미지는 여기에서 보는 것과 같이 웹 서비스에 있는 것일 수 있고 로컬 컴퓨터에 있는 것일 수도 있습니다. Windows는 알림을 수신하면 사용자에게 이미지가 표시될 때 해당 이미지를 웹 서비스에서 다운로드합니다. 개발 센터의 타일 템플릿에 이미지를 추가하는 방법에서 타일에 이미지를 포함시키는 방법에 대한 자세한 내용을 참조하십시오.

이미지의 콘텐츠 크기(KB 및 픽셀 크기)에 대한 제한이 있습니다. 타일 알림의 경우 이미지가 너무 크면 표시되지 않기 때문에 이러한 제한 기준을 충족하는 이미지를 사용하십시오. 또한 타일은 JPG 및 PNG 이미지만 지원합니다. 개발 센터의 타일 이미지 크기에서 타일에 이미지를 포함시키는 방법에 대한 자세한 내용을 참조하십시오.

2부에서 계속됩니다.

타일을 원하는 대로 표시하는 방법을 알아보았으니 이를 언제 업데이트하는지에 대해 알아보겠습니다. 이 글의 2부에서는 Contoso Food Trucks 앱에 폴링 및 로컬 타일 업데이트를 추가하는 방법을 단계별로 알아보고, 앱에서 타일 업데이트에 대한 폴링을 시작하는 방법, 폴링용 웹 서비스를 만드는 데 사용할 수 있는 예제 ASP.NET 및 PHP를 제공하는 방법을 설명하고 앱에 보조 타일을 추가하고 NotificationsExtension 라이브러리를 사용하여 이를 업데이트하는 방법에 대해서 이야기하겠습니다. 이 글이 라이브 타일로 여러분의 앱을 눈에 띄게 만들 수 있는 방법을 생각해 보는 데 도움이 되었기를 바랍니다.

- Windows 프로그램 관리자, Kevin Michael Woley

이 블로그 글을 쓰는 데 도움을 준 Tyler Donahue와 Nazia Zaman에게 특히 감사드립니다.

  • Loading...
Leave a Comment
  • Please add 5 and 3 and type the answer here:
  • Post