Windows 앱용 타일

  • 아티클

타일은 시작 메뉴에 표시되는 앱의 표시를 말합니다. 모든 앱에는 타일이 있습니다. Microsoft Visual Studio에서 새 Windows 앱 프로젝트를 만들면 앱 이름 및 로고를 표시하는 기본 타일이 포함됩니다. 앱이 처음 설치되면 Windows에서 이 타일을 표시합니다. 앱이 설치되면 알림을 통해 타일의 콘텐츠를 변경할 수 있습니다. 예를 들어 타일을 변경하여 뉴스 헤드라인 또는 최신 읽지 않은 메시지의 제목과 같은 새 정보를 사용자에게 전달할 수 있습니다.

기본 타일 구성

Visual Studio에서 새 프로젝트를 만들면 앱의 이름과 로고를 표시하는 간단한 기본 타일이 만들어집니다.

타일을 편집하려면 주 UWP 프로젝트에서 Package.appxmanifest 파일을 두 번 클릭하여 디자이너를 엽니다(또는 해당 파일을 마우스 오른쪽 단추로 클릭하고 코드 보기 선택).

  <Applications>
    <Application Id="App"
      Executable="$targetnametoken$.exe"
      EntryPoint="ExampleApp.App">
      <uap:VisualElements
        DisplayName="ExampleApp"
        Square150x150Logo="Assets\Square150x150Logo.png"
        Square44x44Logo="Assets\Square44x44Logo.png"
        Description="ExampleApp"
        BackgroundColor="#464646">
        <uap:SplashScreen Image="Assets\SplashScreen.png" />
      </uap:VisualElements>
    </Application>
  </Applications>

업데이트해야 하는 몇 가지 항목이 있습니다.

  • DisplayName: 이 값을 타일에 표시할 이름으로 바꿉니다.

  • ShortName: 표시 이름이 타일에 맞게 제한되므로 ShortName도 지정하여 앱 이름이 잘리지 않도록 하는 것이 좋습니다.

  • 로고 이미지:

    이러한 이미지를 사용자 고유의 값으로 바꿔야 합니다. 다양한 시각적 크기 조정에 이미지를 제공할 수 있지만 모두 제공할 필요는 없습니다. 앱이 다양한 디바이스에서 잘 보이도록 하려면 각 이미지의 100%, 200% 및 400% 배율 버전을 제공하는 것이 좋습니다. 이러한 자산 생성에 대한 자세한 내용은 앱 아이콘 및 로고를 참조하세요.

    크기 조정된 이미지는 다음 명명 규칙을 따릅니다.

    <이미지 이름>.scale-<배율 인수>.<이미지 파일 확장명>

    예: SplashScreen.scale-100.png

    이미지를 참조할 때 <image name>.<image file extension>(이 예제의 경우 “SplashScreen.png”)으로 참조합니다. 시스템은 사용자가 제공한 이미지에서 디바이스에 적합한 크기 조정된 이미지를 자동으로 선택합니다.

  • 필요하지는 않지만 사용자가 앱 타일의 크기를 해당 크기로 조정할 수 있도록 너비와 큰 타일 크기에 대한 로고를 제공하는 것이 좋습니다. 이러한 추가 이미지를 제공하려면 DefaultTile 요소를 만들고 Wide310x150Logo 및 Square310x310Logo 특성을 사용하여 추가 이미지를 지정합니다.

  <Applications>
        <Application Id="App"
          Executable="$targetnametoken$.exe"
          EntryPoint="ExampleApp.App">
          <uap:VisualElements
            DisplayName="ExampleApp"
            Square150x150Logo="Assets\Square150x150Logo.png"
            Square44x44Logo="Assets\Square44x44Logo.png"
            Description="ExampleApp"
            BackgroundColor="#464646">
            <uap:DefaultTile
              Wide310x150Logo="Assets\Wide310x150Logo.png"
              Square310x310Logo="Assets\Square310x310Logo.png">
            </uap:DefaultTile>
            <uap:SplashScreen Image="Assets\SplashScreen.png" />
          </uap:VisualElements>
        </Application>
      </Applications>

알림을 사용하여 타일 사용자 지정

앱이 설치되면 알림을 사용하여 타일을 사용자 지정할 수 있습니다. 앱이 처음으로 실행될 때 또는 푸시 알림과 같은 이벤트에 응답할 때 이렇게 할 수 있습니다.

타일 알림을 전송하는 방법을 알아보려면 로컬 타일 알림 보내기를 참조하세요.