1명 중 1명이 도움이 되는 것으로 평가 - 이 항목 평가

타일 템플릿 카탈로그(Windows 스토어 앱)

이 항목에서는 타일 알림에 사용할 수 있는 타일 템플릿을 나열하고 각 템플릿의 그림 예를 XML 콘텐츠와 함께 제공합니다.

RTL(오른쪽에서 왼쪽) 언어로 설정된 컴퓨터에 표시할 때는 템플릿이 여기에 표시된 왼쪽 및 오른쪽 설명과 대칭 이동됩니다.

이미지 모음을 표시하는 정적 또는 피크 템플릿에서 큰 정사각형 이미지는 완전 정사각형이 아니라 너비가 높이보다 약간 더 큽니다. 정사각형 이미지를 제공하면 이미지가 너비에 맞게 조정되고 위쪽과 아래쪽이 약간 잘립니다.

중요  대부분의 템플릿에서는 이 항목의 그림과 같이 타일에 로고나 짧은 이름이 포함된 경우 마지막 텍스트 줄이 표시되지 않습니다. 자세한 내용은 빠른 시작: Microsoft Visual Studio 매니페스트 편집기를 사용하여 기본 타일 만들기를 참조하세요.

사각형 타일

사각형 텍스트 전용 템플릿

TileSquareBlock

큰 블록 텍스트의 짧은 문자열 하나가 굵은 보통 텍스트로 이루어진 짧은 한 줄 위에 표시됩니다.

TileSquareBlock 예

샘플 XML

<tile>
  <visual>
    <binding template="TileSquareBlock">
      <text id="1">Text Field 1</text>
      <text id="2">Text Field 2</text>
    </binding>  
  </visual>
</tile>

 

TileSquareText01

첫 번째 줄에는 큰 텍스트의 헤더 문자열 하나가 표시되고, 다음 3줄에는 각각 보통 텍스트 문자열 3개가 표시됩니다. 텍스트는 줄 바꿈되지 않습니다.

TileSquareText01 예
샘플 XML

<tile>
  <visual>
    <binding template="TileSquareText01">
      <text id="1">Text Field 1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
    </binding>  
  </visual>
</tile>

 

TileSquareText02

첫 번째 줄에는 큰 텍스트의 헤더 문자열 하나가 최대 3줄로 줄 바꿈되는 보통 텍스트 문자열 하나 위에 표시됩니다.

TileSquareText02 예
샘플 XML

<tile>
  <visual>
    <binding template="TileSquareText02">
      <text id="1">Text Field 1</text>
      <text id="2">Text Field 2</text>
    </binding>  
  </visual>
</tile>

 

TileSquareText03

보통 텍스트 문자열 4개가 4줄에 표시됩니다. 텍스트는 줄 바꿈되지 않습니다.

TileSquareText03 예
샘플 XML

<tile>
  <visual>
    <binding template="TileSquareText03">
      <text id="1">Text Field 1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
    </binding>  
  </visual>
</tile>

 

TileSquareText04

최대 4줄로 줄 바꿈되는 보통 텍스트 문자열 하나가 표시됩니다.

TileSquareText04 예
샘플 XML

<tile>
  <visual>
    <binding template="TileSquareText04">
      <text id="1">Text Field 1</text>
    </binding>  
  </visual>
</tile>

 

사각형 이미지 전용 템플릿

TileSquareImage

텍스트 없이 전체 타일을 채우는 사각형 이미지 하나가 표시됩니다.

TileSquareImage 예

샘플 XML

<tile>
  <visual>
    <binding template="TileSquareImage">
      <image id="1" src="image1" alt="alt text"/>
    </binding>  
  </visual>
</tile>

 

사각형 보기 템플릿

TileSquarePeekImageAndText01

위쪽: 텍스트 없이 사각형 이미지 하나가 표시됩니다. 아래쪽: 첫 번째 줄에는 큰 텍스트의 헤더 문자열 하나가 표시되고, 다음 3줄에는 각각 보통 텍스트 문자열 3개가 표시됩니다. 텍스트는 줄 바꿈되지 않습니다.

TileSquarePeekImageAndText01 예
샘플 XML

<tile>
  <visual>
    <binding template="TileSquarePeekImageAndText01">
      <image id="1" src="image1" alt="alt text"/>
      <text id="1">Text Header Field 1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
    </binding>  
  </visual>
</tile>

 

TileSquarePeekImageAndText02

위쪽: 텍스트 없이 사각형 이미지가 표시됩니다. 아래쪽: 첫 번째 줄에는 큰 텍스트의 헤더 문자열 하나가 최대 3줄로 줄 바꿈되는 보통 텍스트 문자열 하나 위에 표시됩니다.

TileSquarePeekImageAndText02 예
샘플 XML

<tile>
  <visual>
    <binding template="TileSquarePeekImageAndText02">
      <image id="1" src="image1" alt="alt text"/>
      <text id="1">Text Header Field 1</text>
      <text id="2">Text Field 2</text>
    </binding>  
  </visual>
</tile>

 

TileSquarePeekImageAndText03

위쪽: 텍스트 없이 사각형 이미지가 표시됩니다. 아래쪽: 보통 텍스트 문자열 4개가 4줄에 표시됩니다. 텍스트는 줄 바꿈되지 않습니다.

TileSquarePeekImageAndText03 예
샘플 XML

<tile>
  <visual>
    <binding template="TileSquarePeekImageAndText03">
      <image id="1" src="image1" alt="alt text"/>
      <text id="1">Text Field 1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
    </binding>  
  </visual>
</tile>

 

TileSquarePeekImageAndText04

위쪽: 텍스트 없이 사각형 이미지가 표시됩니다. 아래쪽: 최대 4줄로 줄 바꿈되는 보통 텍스트 문자열 하나가 표시됩니다.

TileSquarePeekImageAndText04 예
샘플 XML

<tile>
  <visual>
    <binding template="TileSquarePeekImageAndText04">
      <image id="1" src="image1" alt="alt text"/>
      <text id="1">Text Field 1</text>
    </binding>  
  </visual>
</tile>

 

와이드 타일

와이드 텍스트 전용 템플릿

TileWideText01

첫 번째 줄에는 큰 텍스트의 헤더 문자열 하나가 표시되고, 다음 4줄에는 보통 텍스트 문자열 4개가 표시됩니다. 텍스트는 줄 바꿈되지 않습니다.

TileWideText01 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWideText01">
      <text id="1">Text Header Field 1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
      <text id="5">Text Field 5</text>
    </binding>  
  </visual>
</tile>

 

TileWideText02

큰 텍스트의 헤더 문자열 하나가 각각 4줄씩, 두 개의 열로 정렬된 짧은 문자열 8개 위에 표시됩니다. 열의 너비는 같습니다.

TileWideText02 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWideText02">
      <text id="1">Text Header Field 1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
      <text id="5">Text Field 5</text>
      <text id="6">Text Field 6</text>
      <text id="7">Text Field 7</text>
      <text id="8">Text Field 8</text>
      <text id="9">Text Field 9</text>
    </binding>  
  </visual>
</tile>

 

TileWideText03

최대 3줄로 줄 바꿈되는 큰 텍스트 문자열 하나가 표시됩니다.

TileWideText03
샘플 XML

<tile>
  <visual>
    <binding template="TileWideText03">
      <text id="1">Text Header Field 1</text>
    </binding>  
  </visual>
</tile>

 

TileWideText04

최대 5줄로 줄 바꿈되는 보통 텍스트 문자열 하나가 표시됩니다.

TileWideText04 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWideText04">
      <text id="1">Text Field 1</text>
    </binding>  
  </visual>
</tile>

 

TileWideText05

보통 텍스트 문자열 5개가 5줄에 표시됩니다. 텍스트는 줄 바꿈되지 않습니다.

TileWideText05 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWideText05">
      <text id="1">Text Field 1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
      <text id="5">Text Field 5</text>
    </binding>  
  </visual>
</tile>

 

TileWideText06

보통 텍스트의 짧은 문자열 10개가 각각 5줄씩, 두 개의 열로 정렬되어 표시됩니다. 열의 너비는 같습니다.

TileWideText06 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWideText06">
      <text id="1">Text Field 1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
      <text id="5">Text Field 5</text>
      <text id="6">Text Field 6</text>
      <text id="7">Text Field 7</text>
      <text id="8">Text Field 8</text>
      <text id="9">Text Field 9</text>
      <text id="10">Text Field 10</text>
    </binding>  
  </visual>
</tile>

 

TileWideText07

큰 텍스트의 헤더 문자열 하나가 각각 4줄씩, 두 개의 열로 정렬된 보통 텍스트의 짧은 문자열 8개 위에 표시됩니다. 열 너비는 첫 번째 열이 레이블로 사용되고 두 번째 열이 콘텐츠로 사용되도록 지정됩니다. 이 템플릿은 TileWideText10과 비슷하지만 첫 번째 열이 더 넓습니다.

TileWideText07 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWideText07">
      <text id="1">Text Field 1</text>
      <text id="2">Text2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text4</text>
      <text id="5">Text Field 5</text>
      <text id="6">Text6</text>
      <text id="7">Text Field 7</text>
      <text id="8">Text8</text>
      <text id="9">Text Field 9</text>
    </binding>  
  </visual>
</tile>

 

TileWideText08

보통 텍스트의 짧은 문자열 10개가 각각 5줄씩, 두 개의 열로 정렬되어 표시됩니다. 열 너비는 첫 번째 열이 레이블로 사용되고 두 번째 열이 콘텐츠로 사용되도록 지정됩니다. 이 템플릿은 TileWideText11과 비슷하지만 첫 번째 열이 더 넓습니다.

TileWideText08 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWideText08">
      <text id="1">Text1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text3</text>
      <text id="4">Text Field 4</text>
      <text id="5">Text5</text>
      <text id="6">Text Field 6</text>
      <text id="7">Text7</text>
      <text id="8">Text Field 8</text>
      <text id="9">Text9</text>
      <text id="10">Text Field 10</text>
    </binding>  
  </visual>
</tile>

 

TileWideText09

큰 텍스트의 헤더 문자열 하나가 최대 4줄로 줄 바꿈되는 보통 텍스트 문자열 하나 위에 표시됩니다.

TileWideText09 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWideText09">
      <text id="1">Text Header Field 1</text>
      <text id="2">Text Field 2</text>
    </binding>  
  </visual>
</tile>

 

TileWideText10

큰 텍스트의 헤더 문자열 하나가 각각 4줄씩, 두 개의 열로 정렬된 보통 텍스트의 짧은 문자열 8개 위에 표시됩니다. 열 너비는 첫 번째 열이 레이블로 사용되고 두 번째 열이 콘텐츠로 사용되도록 지정됩니다. 이 템플릿은 TileWideText07과 비슷하지만 첫 번째 열이 더 좁습니다.

TileWideText10 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWideText10">
      <text id="1">Text Header Field 1</text>
      <text id="2">Txt2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Txt4</text>
      <text id="5">Text Field 5</text>
      <text id="6">Txt6</text>
      <text id="7">Text Field 7</text>
      <text id="8">Txt8</text>
      <text id="9">Text Field 9</text>
    </binding>  
  </visual>
</tile>

 

TileWideText11

보통 텍스트의 짧은 문자열 10개가 각각 5줄씩, 두 개의 열로 정렬되어 표시됩니다. 열 너비는 첫 번째 열이 레이블로 사용되고 두 번째 열이 콘텐츠로 사용되도록 지정됩니다. 이 템플릿은 TileWideText08과 비슷하지만 첫 번째 열이 더 좁습니다.

TileWideText11 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWideText11">
      <text id="1">Txt1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Txt3</text>
      <text id="4">Text Field 4</text>
      <text id="5">Txt5</text>
      <text id="6">Text Field 6</text>
      <text id="7">Txt7</text>
      <text id="8">Text Field 8</text>
      <text id="9">Txt9</text>
      <text id="10">Text Field 10</text>
    </binding>  
  </visual>
</tile>

 

와이드 이미지 전용 템플릿

TileWideImage

텍스트 없이 전체 타일을 채우는 와이드 이미지 하나가 표시됩니다.

TileWideImage 예

샘플 XML

<tile>
  <visual>
    <binding template="TileWideImage">
      <image id="1" src="image1.png" alt="alt text"/>
    </binding>  
  </visual>
</tile>

 

TileWideImageCollection

텍스트 없이 큰 사각형 이미지 하나와 오른쪽에 작은 사각형 이미지 4개가 표시됩니다.

TileWideImageCollection 예

샘플 XML

<tile>
  <visual>
    <binding template="TileWideImageCollection">
      <image id="1" src="image1.png" alt="alt text"/>
      <image id="2" src="image2.png" alt="alt text"/>
      <image id="3" src="image3.png" alt="alt text"/>
      <image id="4" src="image4.png" alt="alt text"/>
      <image id="5" src="image5.png" alt="alt text"/>
    </binding>  
  </visual>
</tile>

 

와이드 이미지 및 텍스트 템플릿

TileWideImageAndText01

와이드 이미지 하나가 최대 2줄로 줄 바꿈되는 보통 텍스트 문자열 하나 위에 표시됩니다.

참고  이 템플릿은 "로고" 또는 "없음"으로만 branding을 허용하며 "이름"으로는 허용하지 않습니다. 따라서 브랜딩 특성을 "이름"으로 설정할 경우 자동으로 "로고"로 되돌립니다.

TileWideImageAndText01 예

샘플 XML

<tile>
  <visual>
    <binding template="TileWideImageAndText01">
      <image id="1" src="image1.png" alt="alt text"/>
      <text id="1">Text Field 1</text>
    </binding>  
  </visual>
</tile>

 

TileWideImageAndText02

와이드 이미지 하나가 2줄로 이루어진 보통 텍스트 문자열 2개 위에 표시됩니다. 텍스트는 줄 바꿈되지 않습니다.

참고  이 템플릿은 "로고" 또는 "없음"으로만 branding을 허용하며 "이름"으로는 허용하지 않습니다. 따라서 브랜딩 특성을 "이름"으로 설정할 경우 자동으로 "로고"로 되돌립니다.

TileWideImageAndText02 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWideImageAndText02">
      <image id="1" src="image1.png" alt="alt text"/>
      <text id="1">Text Field 1</text>
      <text id="2">Text Field 2</text>
    </binding>  
  </visual>
</tile>

 

TileWideBlockAndText01

왼쪽에는 줄 바꿈되지 않은 보통 텍스트 문자열 4개가 표시되고, 오른쪽에는 큰 블록 텍스트가 굵은 보통 텍스트의 짧은 문자열 하나 위에 표시됩니다.

TileWideBlockAndText01 예

샘플 XML

<tile>
  <visual>
    <binding template="TileWideBlockAndText01">
      <text id="1">Text Field 1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
      <text id="5">T5</text>
      <text id="6">Text Field 6</text>
    </binding>  
  </visual>
</tile>

 

TileWideBlockAndText02

왼쪽에는 최대 4줄로 줄 바꿈되는 보통 텍스트 문자열 하나가 표시되고, 오른쪽에는 큰 블록 텍스트가 굵은 보통 텍스트의 짧은 문자열 하나 위에 표시됩니다.

TileWideBlockAndText02 예

샘플 XML

<tile>
  <visual>
    <binding template="TileWideBlockAndText02">
      <text id="1">Text Field 1</text>
      <text id="2">T2</text>
      <text id="3">Text Field 3</text>
    </binding>  
  </visual>
</tile>

 

TileWideSmallImageAndText01

왼쪽에는 작은 이미지 하나가 표시되고, 오른쪽에는 최대 3줄로 줄 바꿈되는 큰 텍스트 문자열 하나가 표시됩니다.

TileWideSmallImageAndText01 예

샘플 XML

<tile>
  <visual>
    <binding template="TileWideSmallImageAndText01">
      <image id="1" src="image1.png" alt="alt text"/>
      <text id="1">Text Header Field 1</text>
    </binding>  
  </visual>
</tile>

 

TileWideSmallImageAndText02

왼쪽에는 작은 이미지 하나가 표시되고, 오른쪽 첫 번째 줄에는 큰 텍스트의 헤더 문자열 하나가 다음 4줄의 보통 텍스트 문자열 4개 위에 표시됩니다. 텍스트는 줄 바꿈되지 않습니다.

TileWideSmallImageAndText02 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWideSmallImageAndText02">
      <image id="1" src="image1.png" alt="alt text"/>
      <text id="1">Text Header Field 1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
      <text id="5">Text Field 5</text>
    </binding>  
  </visual>
</tile>

 

TileWideSmallImageAndText03

왼쪽에는 작은 이미지 하나가 표시되고, 오른쪽에는 최대 5줄로 줄 바꿈되는 보통 텍스트 문자열 하나가 표시됩니다.

TileWideSmallImageAndText03 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWideSmallImageAndText03">
      <image id="1" src="image1.png" alt="alt text"/>
      <text id="1">Text Field 1</text>
    </binding>  
  </visual>
</tile>

 

TileWideSmallImageAndText04

왼쪽에는 작은 이미지 하나가 표시되고, 오른쪽 첫 번째 줄에는 큰 텍스트의 헤더 문자열 하나가 최대 4줄로 줄 바꿈되는 보통 텍스트 문자열 하나 위에 표시됩니다.

TileWideSmallImageAndText04 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWideSmallImageAndText04">
      <image id="1" src="image1.png" alt="alt text"/>
      <text id="1">Text Header Field 1</text>
      <text id="2">Text Field 2</text>
    </binding>  
  </visual>
</tile>

 

TileWideSmallImageAndText05

왼쪽에는 큰 텍스트의 헤더 문자열 하나가 최대 4줄로 줄 바꿈되는 보통 텍스트 문자열 하나 위에 표시됩니다. 오른쪽에는 크기가 3:4인 작은 이미지가 하나 표시됩니다.

TileWideSmallImageAndText05 예제
샘플 XML

<tile>
  <visual>
    <binding template="TileWideSmallImageAndText05">
      <image id="1" src="image1.png" alt="alt text"/>
      <text id="1">Text Header Field</text>
      <text id="2">Text Field</text>
    </binding>  
  </visual>
</tile>

 

와이드 보기 템플릿

TileWidePeekImageCollection01

위쪽: 텍스트 없이 큰 사각형 이미지 하나와 오른쪽에 작은 사각형 이미지 4개가 표시됩니다. 아래쪽: 큰 텍스트의 헤더 문자열 하나가 최대 4줄로 줄 바꿈되는 보통 텍스트 문자열 하나 위에 표시됩니다.

TileWidePeekImageCollection01 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWidePeekImageCollection01">
      <image id="1" src="image1.png" alt="alt text"/>
      <image id="2" src="image2.png" alt="alt text"/>
      <image id="3" src="image3.png" alt="alt text"/>
      <image id="4" src="image4.png" alt="alt text"/>
      <image id="5" src="image5.png" alt="alt text"/>
      <text id="1">Text Header Field 1</text>
      <text id="2">Text Field 2</text>
    </binding>  
  </visual>
</tile>

 

TileWidePeekImageCollection02

위쪽: 텍스트 없이 큰 사각형 이미지 하나와 오른쪽에 작은 사각형 이미지 4개가 표시됩니다. 아래쪽: 첫 번째 줄에는 큰 텍스트의 헤더 문자열 하나가 표시되고, 다음 4줄에는 보통 텍스트 문자열 4개가 표시됩니다. 텍스트는 줄 바꿈되지 않습니다.

TileWidePeekImageCollection02 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWidePeekImageCollection02">
      <image id="1" src="image1.png" alt="alt text"/>
      <image id="2" src="image2.png" alt="alt text"/>
      <image id="3" src="image3.png" alt="alt text"/>
      <image id="4" src="image4.png" alt="alt text"/>
      <image id="5" src="image5.png" alt="alt text"/>
      <text id="1">Text Header Field 1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
      <text id="5">Text Field 5</text>
    </binding>  
  </visual>
</tile>

 

TileWidePeekImageCollection03

위쪽: 텍스트 없이 큰 사각형 이미지 하나와 오른쪽에 작은 사각형 이미지 4개가 표시됩니다. 아래쪽: 최대 3줄로 줄 바꿈되는 큰 텍스트 문자열 하나가 표시됩니다.

TileWidePeekImageCollection03 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWidePeekImageCollection03">
      <image id="1" src="image1.png" alt="alt text"/>
      <image id="2" src="image2.png" alt="alt text"/>
      <image id="3" src="image3.png" alt="alt text"/>
      <image id="4" src="image4.png" alt="alt text"/>
      <image id="5" src="image5.png" alt="alt text"/>
      <text id="1">Text Header Field 1</text>
    </binding>  
  </visual>
</tile>

 

TileWidePeekImageCollection04

위쪽: 텍스트 없이 큰 사각형 이미지 하나와 오른쪽에 작은 사각형 이미지 4개가 표시됩니다. 아래쪽: 최대 5줄로 줄 바꿈되는 보통 텍스트 문자열 하나가 표시됩니다.

TileWidePeekImageCollection04 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWidePeekImageCollection04">
      <image id="1" src="image1.png" alt="alt text"/>
      <image id="2" src="image2.png" alt="alt text"/>
      <image id="3" src="image3.png" alt="alt text"/>
      <image id="4" src="image4.png" alt="alt text"/>
      <image id="5" src="image5.png" alt="alt text"/>
      <text id="1">Text Field 1</text>
    </binding>  
  </visual>
</tile>

 

TileWidePeekImageCollection05

위쪽: 텍스트 없이 큰 사각형 이미지 하나와 오른쪽에 작은 사각형 이미지 4개가 표시됩니다. 아래쪽: 왼쪽에는 작은 이미지 하나가 표시되고, 오른쪽 첫 번째 줄에는 큰 텍스트의 헤더 문자열 하나가 최대 4줄로 줄 바꿈되는 보통 텍스트 문자열 하나 위에 표시됩니다.

TileWidePeekImageCollection05 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWidePeekImageCollection05">
      <image id="1" src="image1.png" alt="alt text"/>
      <image id="2" src="image2.png" alt="alt text"/>
      <image id="3" src="image3.png" alt="alt text"/>
      <image id="4" src="image4.png" alt="alt text"/>
      <image id="5" src="image5.png" alt="alt text"/>
      <image id="6" src="image6.png" alt="alt text"/>
      <text id="1">Text Header Field 1</text>
      <text id="2">Text Field 2</text>
    </binding>  
  </visual>
</tile>

 

TileWidePeekImageCollection06

위쪽: 텍스트 없이 큰 사각형 이미지 하나와 오른쪽에 작은 사각형 이미지 4개가 표시됩니다. 아래쪽: 왼쪽에는 작은 이미지 하나가 표시되고, 오른쪽에는 최대 3줄로 줄 바꿈되는 큰 텍스트 문자열 하나가 표시됩니다.

TileWidePeekImageCollection06 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWidePeekImageCollection06">
      <image id="1" src="image1.png" alt="alt text"/>
      <image id="2" src="image2.png" alt="alt text"/>
      <image id="3" src="image3.png" alt="alt text"/>
      <image id="4" src="image4.png" alt="alt text"/>
      <image id="5" src="image5.png" alt="alt text"/>
      <image id="6" src="image6.png" alt="alt text"/>
      <text id="1">Text Header Field 1</text>
    </binding>  
  </visual>
</tile>

 

TileWidePeekImageAndText01

위쪽: 와이드 이미지 하나가 표시됩니다. 아래쪽: 최대 5줄로 줄 바꿈되는 보통 텍스트 문자열 하나가 표시됩니다.

참고  이 템플릿은 "로고" 또는 "없음"으로만 branding을 허용하며 "이름"으로는 허용하지 않습니다. 따라서 브랜딩 특성을 "이름"으로 설정할 경우 자동으로 "로고"로 되돌립니다.

TileWidePeekImageAndText01 예

샘플 XML

<tile>
  <visual>
    <binding template="TileWidePeekImageAndText01">
      <image id="1" src="image1.png" alt="alt text"/>
      <text id="1">Text Field 1</text>
    </binding>  
  </visual>
</tile>

 

TileWidePeekImageAndText02

위쪽: 와이드 이미지 하나가 표시됩니다. 아래쪽: 보통 텍스트 문자열 5개가 5줄에 표시됩니다. 텍스트는 줄 바꿈되지 않습니다.

참고  이 템플릿은 "로고" 또는 "없음"으로만 branding을 허용하며 "이름"으로는 허용하지 않습니다. 따라서 브랜딩 특성을 "이름"으로 설정할 경우 자동으로 "로고"로 되돌립니다.

TileWidePeekImageAndText02 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWidePeekImageAndText02">
      <image id="1" src="image1.png" alt="alt text"/>
      <text id="1">Text Field 1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
      <text id="5">Text Field 5</text>
    </binding>  
  </visual>
</tile>

 

TileWidePeekImage01

위쪽: 와이드 이미지 하나가 표시됩니다. 아래쪽: 큰 텍스트의 헤더 문자열 하나가 최대 4줄로 줄 바꿈되는 보통 텍스트 문자열 하나 위에 표시됩니다.

TileWidePeekImage01 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWidePeekImage01">
      <image id="1" src="image1.png" alt="alt text"/>
      <text id="1">Text Header Field 1</text>
      <text id="2">Text Field 2</text>
    </binding>  
  </visual>
</tile>

 

TileWidePeekImage02

위쪽: 와이드 이미지 하나가 표시됩니다. 아래쪽: 첫 번째 줄에는 큰 텍스트의 헤더 문자열 하나가 표시되고, 다음 4줄에는 보통 텍스트 문자열 4개가 표시됩니다. 텍스트는 줄 바꿈되지 않습니다.

TileWidePeekImage02 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWidePeekImage02">
      <image id="1" src="image1.png" alt="alt text"/>
      <text id="1">Text Header Field 1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
      <text id="5">Text Field 5</text>
    </binding>  
  </visual>
</tile>

 

TileWidePeekImage03

위쪽: 와이드 이미지 하나가 표시됩니다. 아래쪽: 최대 3줄로 줄 바꿈되는 큰 텍스트 문자열 하나가 표시됩니다.

TileWidePeekImage03 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWidePeekImage03">
      <image id="1" src="image1.png" alt="alt text"/>
      <text id="1">Text Header Field 1</text>
    </binding>  
  </visual>
</tile>

 

TileWidePeekImage04

위쪽: 와이드 이미지 하나가 표시됩니다. 아래쪽: 최대 5줄로 줄 바꿈되는 보통 텍스트 문자열 하나가 표시됩니다.

TileWidePeekImage04 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWidePeekImage04">
      <image id="1" src="image1.png" alt="alt text"/>
      <text id="1">Text Field 1</text>
    </binding>  
  </visual>
</tile>

 

TileWidePeekImage05

위쪽: 와이드 이미지 하나가 표시됩니다. 아래쪽: 왼쪽에는 작은 이미지 하나가 표시되고, 오른쪽 첫 번째 줄에는 큰 텍스트의 헤더 문자열 하나가 최대 4줄로 줄 바꿈되는 보통 텍스트 문자열 하나 위에 표시됩니다.

TileWidePeekImage05 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWidePeekImage05">
      <image id="1" src="image1.png" alt="alt text"/>
      <image id="2" src="image2.png" alt="alt text"/>
      <text id="1">Text Header Field 1</text>
      <text id="2">Text Field 2</text>
    </binding>  
  </visual>
</tile>

 

TileWidePeekImage06

위쪽: 와이드 이미지 하나가 표시됩니다. 아래쪽: 왼쪽에는 작은 이미지 하나가 표시되고, 오른쪽에는 최대 3줄로 줄 바꿈되는 큰 텍스트 문자열 하나가 표시됩니다.

TileWidePeekImage06 예
샘플 XML

<tile>
  <visual>
    <binding template="TileWidePeekImage06">
      <image id="1" src="image1.png" alt="alt text"/>
      <image id="2" src="image2.png" alt="alt text"/>
      <text id="1">Text Header Field 1</text>
    </binding>  
  </visual>
</tile>

 

라이브 타일

다음 예에서는 다양한 유형의 응용 프로그램에서 라이브 타일 템플릿을 사용할 수 있는 방법을 보여 줍니다.

게임

라이브 타일을 사용하여 사용자에게 게임 진행 상황을 상기시키거나, 고득점을 보여 주거나, 게임 업데이트를 알림으로써 게임을 하도록 유도할 수 있습니다.

돌아가며 하는 게임

라이브 타일을 사용하여 게임에서 사용자의 차례가 되었을 때 게임 진행 상황에 대한 정보와 함께 차례를 알려 줄 수 있습니다.

이 예에서는 게임의 현재 상태를 보여 주는 이미지(1)와 게임을 함께 하고 있는 상대방 및 상대방의 상태를 보여 주는 이미지(2)를 번갈아 표시하는 와이드 타일 TileWidePeekImage06 템플릿을 보여 줍니다.

또한 게임의 작은 이미지와 사용자 차례가 되었음을 알리는 텍스트(3)를 번갈아 표시하는 사각형 타일 TileSquarePeekImageAndText01 템플릿을 보여 줍니다.

돌아가며 하는 게임의 예

소셜 게임

라이브 타일을 사용하여 게임 초대나 누락된 초대 또는 친구들의 고득점을 보여 줌으로써 사용자가 게임을 하도록 유도할 수 있습니다.

이 예에서는 게임 최고 점수가 갱신되었다는 메시지(1)와 해당 점수에 대한 자세한 정보(2)를 표시하는 와일드 타일 TileWideText09 템플릿을 보여 줍니다.

또한 작은 영역에 새로운 고득점 정보를 표시하는 사각형 타일 TileSquareText04 템플릿을 보여 줍니다.

소셜 게임의 예

게임 다시 시작

라이브 타일을 사용하여 사용자가 게임을 그만둔 부분부터 다시 시작하도록 유도할 수 있습니다.

이 예에서는 사용자가 마지막으로 게임 진행 상황을 저장한 지점의 이미지(1)와 사용자 게임에 대한 정보(2)를 표시하는 와이드 타일 TileWideImageAndText02 템플릿을 보여 줍니다.

또한 사용자가 게임에서 마지막으로 저장한 지점에 대한 자세한 정보를 표시하는 사각형 타일 TileSquareText02 템플릿을 보여 줍니다.

게임 다시 시작하기의 예

게임 업데이트

라이브 타일을 사용하여 게임에 대해 제공되는 새로운 다운로드 콘텐츠나 기타 업데이트가 있음을 사용자에게 알릴 수 있습니다.

이 예에서는 게임의 이미지(1)와 게임 업데이트에 대한 정보(2)를 표시하는 와이드 타일 TileWideImageAndText02 템플릿을 보여 줍니다.

또한 게임의 이미지와 게임 업데이트에 대한 정보(3)를 번갈아 표시하는 사각형 타일 TileSquarePeekImageAndText04 템플릿을 보여 줍니다.

타일에는 선택 지점이 단 한 곳이므로 사용자를 게임이나 다운로드 사이트 중 어느 한쪽으로 안내할 수 있습니다.

게임 업데이트의 예

 

소셜 앱

소셜 앱에서 라이브 타일을 사용하면 앱이 맨 위에 표시되어 있지 않을 경우에도 사용자가 앱에 몰입하게 할 수 있습니다.

상태 업데이트

라이브 타일을 사용하여 사용자가 친구에 대해 최신 정보를 유지하도록 할 수 있습니다.

이 예에서는 상태나 댓글을 추가한 사람의 이미지(1)와 함께 그 사람의 이름과 댓글 첫 부분 텍스트(2)를 표시하는 와이드 타일 TileWideSmallImageAndText04 템플릿을 보여 줍니다.

또한 상태나 댓글을 추가한 사람의 짧은 이름과 텍스트를 표시하는 사각형 타일 TileSquareText02 템플릿을 보여 줍니다.

상태 업데이트의 예

사진 및 이미지

게시물이나 댓글이 이미지나 사진을 참조할 경우 업데이트를 표시할 때 라이브 타일에 이미지를 포함할 수 있습니다.

이 예에서는 사진(1)과 사진에 대한 댓글(2)을 번갈아 표시하는 와이드 타일 TileWidePeekImage05 템플릿을 보여 줍니다.

또한 사진과 사진에 대한 댓글을 번갈아 표시하는 사각형 타일 TileSquarePeekImageAndText04 템플릿을 보여 줍니다. 댓글은 작은 타일에 맞게 잘립니다(3).

사진의 예

사용자 또는 그룹

보조 타일을 사용하여 사용자가 친구나 가족 또는 동료를 시작 페이지에 고정할 수 있습니다. 컬렉션 타일 템플릿을 사용하여 라이브 타일에 그룹 구성원의 이미지를 표시할 수 있습니다. 피크 타일을 사용하여 그룹 구성원에게 관련 업데이트를 보여 줄 수 있습니다.

이 예에서는 그룹 구성원의 이미지 모음(1)과 그룹 구성원이 최근에 게시한 메시지(2) 및 해당 그룹 이름(3)을 번갈아 표시하는 와이드 타일 TileWidePeekImageCollection05 템플릿을 보여 줍니다.

또한 그룹 구성원에 대한 업데이트와 관련 그룹 구성원의 이미지(4)를 번갈아 표시하는 사각형 타일 TileSquarePeekImageAndText02 템플릿을 보여 줍니다.

사진의 예

이벤트

라이브 타일을 사용하여 위치, 이름, 참석한 친구 등을 비롯한 이벤트 정보를 보여 줄 수 있습니다. 또한 이벤트에 보조 타일을 사용하여 사용자가 시작 페이지를 고정하게 할 수도 있습니다. 이렇게 하면 사용자가 본인이 참석하거나 주최하는 이벤트에 대해 최신 정보를 손쉽게 볼 수 있습니다.

이 예에서는 이벤트 이미지(1)와 이벤트에 참석한 친구들의 이미지 모음(2) 및 총 참석자 수 등과 같은 이벤트 정보를 번갈아 표시하는 와이드 타일 TileWidePeekImageCollection02 템플릿을 보여 줍니다.

또한 이벤트나 이벤트 참석자의 이미지(3)와 총 참석자 수 등과 같은 이벤트 정보를 번갈아 표시하는 사각형 타일 TileSquarePeekImageAndText04 템플릿을 보여 줍니다.

사진의 예

요약 정보

라이브 타일을 사용하여 앱의 업데이트 요약을 표시할 수 있습니다. 요약은 대개 그리 매력적인 알림이 아니지만 사용자가 시작 화면에 개인 정보를 표시하려 하지 않을 때 유용합니다.

이 예에서는 총 업데이트 수(1)와 다양한 범주의 업데이트 요약(2)을 표시하는 와이드 타일 TileWideBlockAndText01 템플릿을 보여 줍니다.

또한 총 업데이트 수를 표시하는 사각형 타일 TileSquareBlock 템플릿을 보여 줍니다.

사진의 예

 

뉴스 앱

뉴스 앱에 라이브 타일을 사용하여 최신 뉴스의 미리 보기를 보여 줌으로써 사용자의 관심을 끌 수 있습니다. 라이브 타일에는 대상을 하나만 지정할 수 있기 때문에 사용자가 앱의 첫 페이지에서 쉽게 볼 수 있는 뉴스를 표시해야 합니다.

특집 기사

라이브 타일을 사용하여 특집 기사에서 가장 주목을 끄는 부분을 표시할 수 있습니다. 라이브 타일은 기사 목록을 번갈아 표시하여 사용자에게 그날의 뉴스에 대한 개요를 제공할 수 있습니다.

이 예에서는 기사 이미지와 헤드라인 텍스트(1)를 모두 표시하는 와이드 타일 TileWideImageAndText01 템플릿을 보여 줍니다. 또한 헤드라인(2)만 표시하는 사각형 타일 TileSquareText04 템플릿을 보여 줍니다.

헤드라인이 긴 기사의 경우 와이드 타일 TileWideText04 템플릿과 같은 다른 라이브 타일 템플릿을 사용하여 텍스트를 추가할 수 있습니다.

특집 기사의 예

긴 헤드라인의 기사

헤드라인이 긴 기사의 경우 텍스트를 추가할 수 있는 라이브 타일 템플릿을 사용할 수 있습니다.

이 예에서는 이미지를 포함하지 않으며 작은 글꼴(1)을 사용하는 와이드 타일 TileWideText04 템플릿을 보여 줍니다. 이 타일을 사용하면 사용자가 기사의 헤드라인을 전체를 볼 수 있습니다.

또한 축약판 헤드라인 텍스트(2)를 표시하는 사각형 타일 TileSquareText04 템플릿을 보여 줍니다. 사각형 타일에서 잘린 헤드라인 텍스트로도 사용자가 의미를 이해할 수 있는지 확인해야 합니다.

긴 헤드라인의 예

짧은 헤드라인의 기사

헤드라인이 짧은 기사의 경우 큰 글꼴을 사용하여 텍스트를 표시하는 라이브 타일 템플릿을 사용할 수 있습니다.

이 예에서는 짧은 헤드라인을 큰 글꼴을 사용하여 표시하는 와이드 타일 TileWideText03 템플릿을 보여 줍니다. 이 템플릿을 사용할 경우 헤드라인 텍스트가 잘리지 않는지 확인해야 합니다.

사각형 타일 템플릿을 사용할 경우 TileSquareText04 템플릿처럼 작은 글꼴(2)을 사용하여 사각형 타일의 축소된 공간에 적합한 템플릿을 사용하세요.

짧은 헤드라인의 예

큰 이미지 표시

피크 타일을 사용하여 기사 이미지와 기사 헤드라인 텍스트를 번갈아 표시할 수 있습니다. 이 경우 타일에는 텍스트 없이 이미지가 표시되므로 독자가 이미지를 쉽게 알아볼 수 있도록 해야 합니다.

이 예에서는 기사 이미지와 긴 헤드라인 텍스트(1)를 번갈아 표시하는 와이드 타일 TileWidePeekImageAndText01 템플릿을 보여 줍니다.

또한 기사 이미지와 긴 헤드라인 텍스트를 생략하여 표시하는 사각형 타일 TileSquarePeekImageAndText04 템플릿을 보여 줍니다.

큰 이미지의 예

여론 조사 및 통계

그래프나 차트를 표시하는 이미지를 추가하여 기사에 대한 여론 조사 결과나 통계를 보여 줄 수 있습니다.

이 예에서는 여론 조사 결과의 이미지(1)와 여론 조사 결과를 설명하는 텍스트(2)를 표시하는 와이드 타일 TileWideImageAndText01 템플릿을 보여 줍니다.

또한 여론 조사 결과를 설명하는 텍스트만 표시하는 사각형 타일 TileSquareText04 템플릿을 보여 줍니다.

여론 조사 및 통계의 예

블로그 및 오피니언 기사

작은 이미지 타일을 사용하여 블로그나 오피니언 기사 저자의 이미지를 표시할 수 있습니다. 저자에 초점을 맞춰서 오피니언 기사를 다른 유형의 뉴스와 구분할 수 있습니다.

이 예에서는 저자의 사진과 이름 및 헤드라인 텍스트(1)를 표시하는 와이드 타일 TileWideSmallImageAndText03 템플릿을 보여 줍니다.

또한 작은 글꼴을 사용하여 저자의 이름과 헤드라인 텍스트(2)를 표시하는 사각형 타일 TileSquareText04 템플릿을 보여 줍니다. 작은 글꼴을 사용하면 헤드라인 텍스트의 더 많은 부분을 독자가 볼 수 있습니다.

블로그 및 오피니언 기사의 예

동영상

라이브 타일을 사용하여 동영상을 실행할 수 있습니다.

이 예에서는 동영상의 관련 스크린샷(1), "동영상:"이라고 하는 동영상 헤드라인(2) 및 타일이 동영상을 시작함을 나타내는 재생 배지(3)를 표시하는 와이드 타일 TileWideImageAndText02 템플릿을 보여 줍니다.

또한 스크린샷과 재생 배지를 표시하는 사각형 타일 TileSquareImage 템플릿을 보여 줍니다.

 예

뉴스 범주

보조 타일을 사용하여 사용자가 특정 범주의 뉴스 기사를 고정함으로써 받아 보는 콘텐츠를 개인 설정하도록 할 수 있습니다. 피크 타일 템플릿을 사용하여 일련의 관련 기사를 번갈아 표시할 수 있습니다.

이 예는 최신 경제 뉴스를 표시하는 고정된 타일을 보여 줍니다. 이 예에서는 작은 이미지의 회사 로고(1)와 큰 글꼴의 축약된 헤드라인(2)을 표시하는 와이드 타일 TileWideSmallImageAndText01 템플릿을 보여 줍니다.

또한 축약된 헤드라인 텍스트(3)만 표시하는 사각형 타일 TileSquareText04 템플릿을 보여 줍니다.

범주의 예

 

생산성

라이브 타일을 사용하여 사용자가 작업에 대해 지속적으로 최신 상태를 유지하게 할 수 있습니다. 예를 들어 공유 문서에 대해 이루어진 새로운 변경을 알리고, 중요한 이벤트를 추적하며, 작업 목록을 표시할 수 있습니다.

노트 작성

라이브 타일을 사용하여 사용자가 자신의 노트를 쉽게 보고, 문서의 변경에 관한 노트를 업데이트하게 할 수 있습니다>

이 예에서는 문서를 수정한 사용자의 이미지(1), 문서의 제목(2) 및 문서가 마지막으로 업데이트된 시간(3)을 표시하는 와이드 타일 TileWideSmallImageAndText02 템플릿을 보여 줍니다.

또한 문서의 제목과 마지막으로 업데이트된 시간만 표시하는 사각형 타일 TileSquareText04 템플릿을 보여 줍니다.

두 가지 예 모두에서, 문서가 수정되었음을 나타내는 알림별 배지(4)를 보여 줍니다.

노트의 예

일정 및 약속

라이브 타일을 사용하여 임박한 약속에 대한 정보를 보여 줄 수 있습니다. 위치, 시간 및 자세한 정보를 포함하여 약속에 관한 정보를 보여 줄 수 있습니다.

이 예에서는 약도 이미지(1)와 약속에 대한 정보를 표시하는 와이드 타일 TileWideSmallImageAndText04 템플릿을 보여 줍니다.

또한 약속에 대한 주요 정보만 표시하는 사각형 타일 TileSquareText04 템플릿을 보여 줍니다.

일정 및 약속의 예

작업 목록

라이브 타일을 사용하여 사용자에게 작업 정보를 표시할 수 있습니다. 와이드 타일 템플릿을 사용하여 여러 항목을 표시하거나, 사각형 타일 템플릿을 사용하여 한 번에 한 개의 항목을 표시할 수 있습니다.

이 예에서는 글꼴 문자를 사용하여 작업 상태(1)를 표시하고, 작업 목록의 여러 항목(2)을 보여 주는 와이드 타일 TileWideText11 템플릿을 보여 줍니다.

또한 목록의 각 작업을 번갈아 표시하고 목록의 작업 수가 표시된 배지(3)를 표시하는 사각형 타일 TileSquareText04 템플릿을 보여 줍니다.

작업의 예

데이터 동기화

라이브 타일을 사용하여 사용자의 파일이나 데이터가 클라우드, 서버 또는 공유 디렉터리와 동기화될 때 변경 사항을 사용자에게 알릴 수 있습니다. 또한 남은 공간이나 대역폭이 부족할 때 경고를 표시할 수도 있습니다.

이 예에서는 변경 내역 및 변경한 사람에 대한 알림(1)과 파일 변경에 대한 자세한 목록(2)을 표시하는 와이드 타일 TileWideText02 템플릿을 보여 줍니다.

또한 변경 요약을 표시하는 사각형 타일 TileSquareBlock 템플릿을 보여 줍니다.

데이터 동기화의 예

 

엔터테인먼트 및 미디어 앱

라이브 타일을 사용하면 사용자가 개인 설정한 추천을 통해 새 콘텐츠를 찾아보고, 재생 목록과 출시 예정 콘텐츠를 표시함으로써 즐겨 찾는 아티스트 및 쇼에 대해 보다 자세한 정보를 볼 수 있습니다.

영화 및 프로그램

라이브 타일을 사용하여 사용자에게 개봉 예정인 영화나 프로그램 편을 알릴 수 있습니다. 또한 소셜 앱의 평가 순위나 추천을 포함할 수도 있습니다.

이 예에서는 프로그램의 이미지와 친구로부터의 프로그램 추천(1)을 번갈아 표시하는 와이드 타일 TileWidePeekImage05 템플릿을 보여 줍니다.

또한 프로그램의 이미지(2)와 친구로부터의 추천(친구 이미지 제외)(3)을 표시하는 사각형 타일 TileSquarePeekImageAndText04 템플릿을 보여 줍니다.

영화의 예

일시 중지된 영화 및 프로그램

라이브 타일을 사용하여 일시 중지된 영화를 타일에 표시함으로써 사용자에게 상기시킬 수 있습니다.

이 예에서는 일시 중지된 영화에서 마지막으로 시청한 장면의 이미지(1)와 해당 영화가 일시 중지되었음을 나타내는 일시 중지 배지(2)를 표시하는 와이드 타일 TileWideImage 템플릿을 보여 줍니다.

또한 일시 중지한 영화 마지막 장면의 일부 이미지와 일시 중지 배지를 표시하는 사각형 타일 TileSquareImage 템플릿을 보여 줍니다.

일시 중지된 타일이 사용자에게 얼마나 관련된 것인지를 염두에 두어야 합니다. 음악은 며칠 후 다시 이어서 듣지 않을 수 있어도, 영화는 하루나 이틀 후에 다시 이어서 보는 경우가 많습니다.

일시 중지된 영화의 예

음악

라이브 타일을 사용하여 현재 재생 중인 음악과 아티스트 정보를 표시할 수 있습니다. 소셜 앱의 댓글과 평가 순위 및 출시 예정인 발행물과 음악 앨범을 포함할 수 있습니다.

이 예에서는 아티스트나 앨범의 이미지(1)와 음악, 아티스트 및 앨범에 대한 정보(2)를 표시하는 와이드 타일 TileWideSmallImageAndText02 템플릿을 보여 줍니다.

또한 작은 서식으로 음악에 대한 중요한 정보(3)만 표시하는 사각형 타일 TileSquareText04 템플릿을 보여 줍니다.

음악의 예

사진

라이브 타일을 사용하여 사진이나 앨범의 미리 보기 이미지를 표시할 수 있습니다. 사용자가 이미지를 만들거나 편집할 수 있는 앱의 경우 라이브 타일을 사용하여 앱에서 사진에 적용할 수 있는 효과를 보여 줄 수 있습니다.

이 예에서는 사진 앨범의 이미지 모음(1), 앨범 작성자의 이미지(2) 및 앨범 콘텐츠의 이름과 설명(3)을 표시하는 와이드 타일 TileWidePeekImageCollection05 템플릿을 보여 줍니다.

또한 앨범의 사진 하나와 앨범 정보를 번갈아 표시하는 사각형 타일 TileSquarePeekImageAndText04 템플릿을 보여 줍니다.

사진의 예

 

쇼핑 앱

라이브 타일을 사용하여 일간 특가 상품이나 맞춤식 상품 제안을 표시함으로써 앱에 상품 목록을 표시할 수 있습니다. 또한 타일을 사용하여 거래가 처리되거나 배송되었을 때 판매자와 구매자에게 알릴 수도 있습니다.

구매 추천

라이브 타일을 사용하여 신제품과 특별 상품 또는 사용자가 관심을 가질 만한 상품에 대한 추천을 표시할 수 있습니다.

이 예에서는 곧 있을 휴가와 관련된 이미지와 판매 정보(1)를 표시하는 와이드 타일 TileWideImageAndText01 템플릿을 보여 줍니다.

또한 이미지 없이 판매 정보(2)를 표시하는 사각형 타일 TileSquareText02 템플릿을 보여 줍니다.

추천의 예

카탈로그

카탈로그 상품에 대한 이미지 모음을 표시하는 라이브 타일을 사용할 수 있습니다.

이 예에서는 카탈로그의 여러 관련 상품 이미지(1)를 표시하는 와이드 타일 TileWideImageCollection 템플릿을 보여 줍니다.

또한 카탈로그의 한 개 상품 이미지(2)를 표시하는 사각형 타일 TileSquareImage 템플릿을 보여 줍니다. 한 번에 하나의 이미지만 표시하면서 관련 이미지를 번갈아 표시할 수 있습니다.

카탈로그의 예

구매자 알림

앱에서 상품 입찰을 지원할 경우 사용자가 상품을 낙찰받거나, 다른 입찰자가 더 높은 가격으로 입찰했거나, 상품이 배송되었거나 할 때 라이브 타일을 사용하여 이를 사용자에게 알릴 수 있습니다.

이 예에서는 구매자를 위한 업데이트를 큰 글꼴(1)로 표시하고 업데이트에 대한 자세한 정보를 작은 글꼴(2)로 표시하는 와이드 타일 TileWideText09 템플릿을 보여 줍니다.

또한 업데이트와 요약 정보를 표시하는 사각형 타일 TileSquareText04 템플릿을 보여 줍니다.

구매자 알림의 예

판매자 알림

구매자 알림과 마찬가지로 상품이 판매되었을 때 판매자에게 알릴 수 있습니다. 상품을 대량으로 판매하는 판매자의 경우 재고 변경이나 판매량 등의 일반 분석 정보를 업데이트하여 판매자에게 알려 줄 수 있습니다.

이 예에서는 전체 판매에 대한 개요를 큰 글꼴(1)로 표시하고 자세한 정보를 작은 글꼴(2)로 표시하는 와이드 타일 TileWideText07 템플릿을 보여 줍니다.

또한 하루 판매량 등과 같은 구체적인 정보(3)를 표시하는 사각형 타일 TileSquareText02 템플릿을 보여 줍니다.

타일 알림에서는 상품 판매 시 판매자에게 이를 알리거나 기본 분석 정보를 표시함으로써 판매자가 최신 재고 정보를 확인할 수 있게 합니다.

판매자 알림의 예

장바구니

라이브 타일을 사용하여 사용자 장바구니에 있는 상품의 요약 정보를 표시할 수 있습니다.

이 예에서는 장바구니에 있는 상품 수(1)와 장바구니에 있는 상품에 대한 자세한 정보(2)를 표시하는 와이드 타일 TileWideBlockAndText01 템플릿을 보여 줍니다.

또한 카트에 있는 총 상품 수만(3) 표시하는 사각형 타일 TileSquareBlock 템플릿을 보여 줍니다.

장바구니의 예

범주 및 설명 검색

보조 타일을 사용하여 사용자가 특정 범주의 상품, 희망 목록 또는 개인 설정한 카탈로그 검색을 고정하도록 할 수 있습니다.

이 예에서는 제품 범주의 이미지(1)와 곧 있을 세일 등과 같이 제품 범주에 대한 자세한 정보(2)를 표시하는 와이드 타일 TileWideSmallImageAndText01 템플릿을 보여 줍니다.

또한 제품 범주의 이미지와 사용자에게 새로운 정보를 알리는 경고 배지(3)을 표시하는 사각형 타일 TileSquareImage 템플릿을 보여 줍니다.

범주의 예

 

재무 앱

라이브 타일을 사용하여 사용자의 관심 종목에 대한 최신 주가와 정보, 시장 지수, IPO나 큰 변화 등과 같은 추세를 표시하는 라이브 타일을 사용할 수 있습니다.

개인 재무

라이브 타일을 사용하여 사용자에게 지출 요약 정보를 제공할 수 있습니다. 시작 페이지에 표시할 정보를 선택할 수 있는 옵션을 사용자에게 제공하세요.

이 예에서는 사용자 지출에 대한 요약 정보(1)와 사용자에게 과소비를 알려 주는 경고 배지(2)를 표시하는 와이드 타일 TileWideText03 템플릿을 보여 줍니다.

또한 작은 영역에 요약 정보와 경고 배지를 표시하는 사각형 타일 TileSquareText04 템플릿을 보여 줍니다.

개인 재무의 예

대금 청구

라이브 타일을 사용하여 사용자에게 처리해야 하는 청구서나 결제를 상기시킬 수 있습니다.

이 예에서는 결제 금액 요약 정보(1)와 사용자에게 다음 결제 금액을 알려 주는 큰 글꼴 문자와 날짜(2)를 표시하는 와이드 타일 TileWideBlockAndText01 템플릿을 보여 줍니다.

또한 사용자에게 다음 결제 금액을 알려 주는 글꼴 문자와 날짜만 표시하는 사각형 타일 TileSquareBlock 템플릿을 보여 줍니다.

대금 청구의 예

금융 시장

라이브 타일을 사용하여 사용자가 소유하거나 관심 종목 및 자산의 실적을 보여 줄 수 있습니다.

이 예에서는 글꼴 문자를 사용하여 주가의 등락 여부(1)를 나타내고, 주식 목록과 현재 주가 및 그날의 주가 변동률(2)을 표시하는 와이드 타일 TileWideText06 템플릿을 보여 줍니다.

또한 관심 종목과 현재 주가를 요약하여 표시하는 사각형 타일 TileSquareText03 템플릿을 보여 줍니다.

금융 시장의 예

개별 종목

보조 타일을 사용하여 사용자가 시작 페이지에 특정 주식을 고정하고, 한눈에 볼 수 있는 주식 정보를 수신하도록 할 수 있습니다.

이 예에서는 주식 실적 그래프 이미지(1), 주식 및 현재 주가에 대한 자세한 정보(2), 정보가 마지막으로 업데이트된 시간을 보여 주는 타임스탬프(3)를 표시하는 와이드 타일 TileWideSmallImageAndText02 템플릿을 보여 줍니다.

또한 작은 서식으로 타임스탬프와 주식 정보를 표시하는 사각형 타일 TileSquareText03 템플릿을 보여 줍니다.

개별 종목의 예

 

관련 항목

TileTemplateType enumeration
앱 타일 및 배지 샘플
빠른 시작: 타일 업데이트 보내기
타일 XML 스키마
타일 및 타일 알림 개요
타일 및 알림 이미지 크기

 

 

© 2013 Microsoft. All rights reserved.