데스크톱 앱용 시작 화면 타일을 사용자 지정하는 방법(Windows 런타임 앱)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
Windows 8.1부터는 Win32 앱 개발자가 시작 화면에 있는 데스크톱 앱 타일의 모양을 사용자 지정할 수 있습니다. Windows 8에서는 이러한 타일이 개발자가 사용자 지정할 수 있는 옵션 없이 시스템에서만 제공되었습니다. 시작 화면 배경색에 따라 타일에 앱 아이콘이 표시되었습니다. Windows 8.1에서는 보다 다양한 기본 타일 모양을 제공할 뿐 아니라 개발자가 고유한 색과 이미지를 사용하여 타일을 추가로 브랜딩할 수 있게 합니다.
데스크톱 앱 타일에 사용할 수 있는 사용자 지정은 다음과 같습니다.
- 사용자 지정, 풀 블리드(full-bleed) 이미지
- 지정된 배경색
- 타일에서 앱 이름을 표시하거나 숨기는 옵션
- 앱 이름을 표시하도록 선택할 경우 지정된 밝거나 어두운 텍스트 색
타일을 완전히 사용자 지정할 수 있지만 기본 타일 모양 변경에 대해서도 알고 있어야 하며 이 변경만으로 충분할 수 있습니다. Windows에서 사용자의 앱에 할당하는 기본 타일은 앱 이름과 앱 아이콘을 표시하는 중간 크기 타일입니다. 그러나 Windows 8.1부터 레이아웃이 변경되어 Windows에서 앱 아이콘의 색을 가져와 해당 아이콘 주변에 유사한 배경색 또는 보조 배경색을 제공합니다.
다음 이미지는 동일한 시작 화면 배경색을 사용할 경우 Windows 8 및 Windows 8.1에서 동일한 기본 타일이 어떻게 표시되는지를 보여 줍니다.
.png "Windows 8 및 Windows 8.1에 표시된 Microsoft Office 타일")
타일을 추가로 사용자 지정하려는 경우 특수 XML 파일을 사용합니다. 이 파일에 사용되는 스키마는 Windows 스토어 앱에 사용되는 타일 스키마와 유사하지만 두 스키마를 혼동하지 마세요. 두 스키마는 서로 교체할 수 없습니다. 이 항목에서는 Square150x150Logo 및 Square70x70Logo 특성만 옵션이고 다른 모든 사항은 필수인 다음 예제 파일을 만드는 과정을 단계별로 안내합니다.
<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<VisualElements
BackgroundColor="#FF0000"
ShowNameOnSquare150x150Logo="on"
ForegroundText="light"
Square150x150Logo="Assets\150x150Logo.png"
Square70x70Logo="Assets\70x70Logo.png"/>
</Application>
사전 요구 사항
- XML 이해
- 명령줄 매개 변수 이해
- 이미지 크기 조정, 고대비 및 지역화된 버전에 대한 리소스 이름 지정 및 패키징 이해. 자세한 내용은 한정자를 사용하여 리소스 이름을 지정하는 방법을 참조하세요.
지침
단계 1: 사용자 지정 XML 파일 만들기
- 타일에 대한 사용자 지정을 지정합니다.
- 실행 파일과 동일한 디렉터리에 배치합니다.
- ".VisualElementsManifest.xml" 확장명을 사용하여 실행 파일과 동일한 이름을 지정합니다. 예를 들어 실행 파일 "contoso.exe"의 경우 함께 제공되는 XML 파일 이름은 "contoso.visualelementsmanifest.xml"입니다.
만든 XML 파일에 다음 코드를 추가합니다.
<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<VisualElements/>
</Application>
단계 2: 배경색 선언
- 필수
- RGB 16진수 값이나 사전 정의된 다음 문자열 중 하나로 지정합니다.
- black
- silver
- gray
- white
- maroon
- red
- purple
- fuchsia
- green
- lime
- olive
- yellow
- navy
- blue
- teal
- aqua
색상 값을 표현하는 두 가지 방법의 예는 다음과 같습니다.
<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<VisualElements
BackgroundColor="#FF0000"/>
</Application>
<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<VisualElements
BackgroundColor="red"/>
</Application>
단계 3: 타일에 앱 이름을 표시할지 여부를 선언합니다.
- 필수
- ShowNameOnSquare150x150Logo 특성의 두 가지 가능한 값은 다음과 같습니다.
- "on" - 이름 표시
- "off" - 이름 숨기기
- 중간(150x150) 타일 크기에만 앱 이름이 표시될 수 있습니다.
앱 이름은 앱 시작 메뉴 바로 가기 파일 또는 바로 가기 파일이 없는 경우 앱 실행 파일의 이름입니다.
<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<VisualElements
BackgroundColor="#FF0000"
ShowNameOnSquare150x150Logo="on"/>
</Application>
단계 4: 전경 텍스트 색 선언
- 필수(ShowNameOnSquare150x150Logo="off"인 경우 포함)
- 타일의 앱 이름을 참조합니다.
- ForegroundText 특성의 두 가지 가능한 값은 다음과 같습니다.
- "light" - 흰색 텍스트
- "dark" - 검정 텍스트
선언된 배경색에 가장 잘 대비되는 값을 선택합니다. 표시 여부와 접근성을 최대화하려면 텍스트 색과 배경색 간의 광도 비율을 4.5 대 1 이상으로 유지합니다. 자세한 내용은 W3C 접근성 표준인 G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text(영문)를 참조하세요.
<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<VisualElements
BackgroundColor="#FF0000"
ShowNameOnSquare150x150Logo="on"
ForegroundText="light"/>
</Application>
단계 5: 이미지 지정
- 옵션
- 기본 아이콘과 배경을 대체할 전체 화상 물림 재단 이미지를 제공합니다.
- 중간(150x150) 및 작은(70x70) 타일 크기만 지원됩니다.
- 일반적인 타일 이미지 제한이 적용됩니다.
- 크기가 1024x1024픽셀보다 작거나 같아야 합니다.
- 파일 크기가 200KB보다 작거나 같아야 합니다.
- 파일 형식이 .png, .jpg, .jpeg 또는 .gif여야 합니다.
중요 사용자 지정 이미지를 선택하는 경우 Square150x150Logo 및 Square70x70Logo 특성에 대한 이미지를 둘 다 지정해야 합니다. 두 특성 중 하나만 지정하면 이 전체 XML 파일이 무시되고 기본 스타일 지정(앱 아이콘 및 배경)이 타일에 적용됩니다.
타일 디자인 모범 사례에서는 타일이 라이브 타일이 아닌 경우 와이드(310x150) 타일과 큰(310x310) 타일에 필요한 추가 화면 공간을 요구하지 않도록 지정합니다. 데스크톱 앱 타일은 항상 정적이며 라이브 타일이 아니므로 이러한 추가 타일 크기는 이 스키마에서 지원되지 않습니다.
이 예제에서 이미지는 YourAppName.VisualElementsManifest.xml 파일의 형제인 "Assets" 폴더에 있습니다. 이러한 파일 이름은 실제 파일 이름이거나 6단계에서 설명하는 크기 조정, 고대비 또는 지역화된 파일에 사용되는 일반 이름일 수 있습니다. 이미지 자산 이름 지정에 대한 자세한 내용은 설명 섹션을 참조하세요.
<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<VisualElements
BackgroundColor="#FF0000"
ShowNameOnSquare150x150Logo="on"
ForegroundText="light"
Square150x150Logo="Assets\150x150Logo.png"
Square70x70Logo="Assets\70x70Logo.png"/>
</Application>
이제 .VisualElementsManifest.xml이 완료되었습니다. 이 파일을 앱 실행 파일의 형제로 앱 설치에 포함합니다.
단계 6: 크기 조정, 지역화 및 고대비에 사용할 이미지 지정
- 옵션(권장)
- 크기 조정, 고대비 또는 지역화된 이미지를 제공하지 않는 경우 이 단계를 건너뛰어도 됩니다.
- 표시 품질을 최대화하려면 5단계에서 지정한 각 이미지에 대해 크기 조정된 전체 자산 집합을 제공합니다. 자세한 내용은 설명 섹션을 참조하세요.
- 일반적인 리소스 관리 시스템 명명 규칙 및 Resource.pri 파일을 사용합니다.
참고 크기 조정된 전체 자산 집합을 제공하지 않는 경우 Windows에서 해당 자산이나 필요에 따라 포함되는 자산의 크기를 조정합니다. 일반적으로 축소가 확대보다 더 나은 결과를 제공하므로 더 큰 크기(140% 또는 180%) 중 하나를 포함하는 것이 가장 좋습니다.
타일을 업데이트할 때 활성화된 시스템 설정에 따라 Windows에서 Resources.pri 파일을 사용하여 집합에서 올바른 이미지 자산을 선택합니다. 이 단계에서 해당 파일을 만들겠습니다.
작업 폴더를 만듭니다. 이 폴더는 앱 설치에 포함되지 않으며, Resources.pri 파일을 만들 때만 사용됩니다. 이 예제에서는 이 폴더를 "CreateResources"라고 합니다.
md %USERPROFILE%\Documents\CreateResources이미지 파일을 저장할 CreateResources의 하위 디렉터리를 만듭니다. 이 예제에서는 "Assets"라고 합니다.
md %USERPROFILE%\Documents\CreateResources\Assets크기 조정, 고대비 및/또는 지역화된 이미지를 "Assets" 폴더에 배치합니다. 필수 명명 및 구조 규칙을 따른 경우 이미지를 단순 목록으로 포함하거나 하위 디렉터리로 구조화하여 포함할 수 있습니다. 이 예제에서는 다음과 같은 크기 조정 및 고대비 자산을 단순 목록으로 제공합니다.
- 150x150Logo.scale-80.png
- 150x150Logo.scale-100.png
- 150x150Logo.scale-140.png
- 150x150Logo.scale-180.png
- 70x70Logo.scale-80.png
- 70x70Logo.scale-100.png
- 70x70Logo.scale-140.png
- 70x70Logo.scale-180.png
- 150x150Logo.scale-80_contrast-white.png
- 150x150Logo.scale-100_contrast-white.png
- 150x150Logo.scale-140_contrast-white.png
- 150x150Logo.scale-180_contrast-white.png
- 150x150Logo.scale-80_contrast-black.png
- 150x150Logo.scale-100_contrast-black.png
- 150x150Logo.scale-140_contrast-black.png
- 150x150Logo.scale-180_contrast-black.png
- 70x70Logo.scale-80_contrast-white.png
- 70x70Logo.scale-100_contrast-white.png
- 70x70Logo.scale-140_contrast-white.png
- 70x70Logo.scale-180_contrast-white.png
- 70x70Logo.scale-80_contrast-black.png
- 70x70Logo.scale-100_contrast-black.png
- 70x70Logo.scale-140_contrast-black.png
- 70x70Logo.scale-180_contrast-black.png
**MakePRI 구성 파일을 만듭니다.**MakePRI.exe에서 Resources.pri에 인덱싱할 이미지를 지정하는 데 사용하는 XML 파일입니다. 다음 명령을 실행하여 이름이 "TestAppConfig.xml"인 구성 파일을 만듭니다. 해당 파일을 CreateResources 폴더에 작성하지 않는다는 점에 유의하세요. 이렇게 하면 구성 파일 자체는 인덱스에 포함되지 않습니다.
중요 MakePRI.exe 명령줄 도구는 무료로 다운로드할 수 있는 Windows SDK에 포함되어 있습니다. Microsoft Visual Studio를 사용하는 경우 MakePRI.exe가 해당 설치의 일부로 시스템에 이미 있습니다.
이 명령과 다음 명령에서는 MakePRI.exe 위치가 경로 내에 있다고 가정합니다. 그렇지 않은 경우 "Program Files\Windows Kits"에서 파일을 검색하고 전체 경로를 명령에 포함합니다.
makepri createconfig /cf %USERPROFILE%\Documents\TestAppConfig.xml /dq lang-en-US_scale-100_contrast-high명령 인수 정의 /cf 만들려는 구성 파일의 경로와 이름입니다. /dq 기본 한정자입니다. 하나 이상의 한정자(lang, scale 등)가 필요합니다. Resources.pri 파일을 만듭니다. 방금 만든 TestAppConfig.xml 구성 파일을 사용하는 다음 명령을 실행하여 CreateResources 디렉터리에서 Resources.pri 파일을 생성합니다.
makepri new /pr %USERPROFILE%\Documents\CreateResources /cf %USERPROFILE%\Documents\TestAppConfig.xml /in TestApp /of %USERPROFILE%\Documents\CreateResources\Resources.pri명령 인수 정의 /pr 프로젝트 파일의 루트 위치입니다. /cf 구성 XML 파일의 경로입니다. /in Resources.pri 파일 내 리소스 인덱스의 이름입니다. 일반적으로 앱 이름과 일치합니다. /of Resources.pri 파일의 출력 위치입니다. 생략하면 /pr 인수로 지정한 프로젝트 루트가 사용됩니다. Resources.pri 파일을 앱 설치에 포함합니다. 앱의 .exe 파일 및 .VisualElementsManifest.xml 파일과 동일한 디렉터리에 배치합니다. 설치하는 동안 앱 바로 가기 파일을 설치하기 전에 ..VisualElementsManifest.xml을 제자리에 배치합니다.
단계 7: 중요! 바로 가기 파일을 새로 고칩니다.
앱이 이미 설치된 경우 새롭거나 업데이트된 ..VisualElementsManifest.xml이 배치되기 전에 바로 가기를 조금 이동해야 합니다. 그렇지 않으면 바로 가기가 무시됩니다. 가상 Contoso 앱에 대한 다음 Windows PowerShell 명령 예제는 이 작업을 수행할 수 있는 다양한 방법 중 한 가지 방법 모델입니다.
(ls "$env:programdata\microsoft\windows\start menu\programs\contoso.lnk").lastwritetime = get-date
설명
중요 .VisualElementsManifest.xml 파일이 무언가 잘못된 경우 타일이 Windows 제공 기본값으로 복원됩니다. 잠재적 파일 오류에 잘못된 XML 파일, 필수 특성 누락, 잘못된 특성 값 또는 찾을 수 없는 이미지가 포함될 수 있습니다.
MakePRI.exe 파일을 dump 명령 옵션과 함께 사용하여 Resources.pri 파일의 내용을 검토할 수 있습니다. 이 작업은 문제를 해결하는 데 유용합니다. MakePRI.exe 도구에 대한 자세한 내용은 MakePRI.exe 구성 및 MakePRI.exe 명령 옵션을 참조하세요.
문제를 해결할 때는 이벤트 뷰어에서 응용 프로그램 및 서비스 로그\Microsoft\Windows\Shell-Core\Operational 로그에 있는 28032 이벤트를 검토할 수도 있습니다. 이벤트 세부 정보 데이터에는 .VisualElementsManifest.xml 파일의 경로, HRESULT 오류 코드, 오류 문자열 등이 포함됩니다.
리소스 관리 시스템 작업
리소스 관리 시스템의 자세한 설명은 이 항목의 범위를 벗어나며, 여기서는 간략한 개요만 살펴보겠습니다. 자세한 내용은 리소스 관리 시스템 항목을 참조하세요.
전체 리소스 이미지 집합은 다음과 같습니다.
- 각 DPI 조정 수준(80%, 100%, 140%, 180%)에 대한 별도 이미지
- 각 이미지의 고대비 버전(검정 위에 흰색 및 흰색 위에 검정)
- 이미지에 텍스트가 포함된 경우와 같이 시스템 언어에 따라 서로 다른 이미지를 타일에 사용하려는 경우 지역화된 이미지
이러한 이미지를 모두 또는 일부만 제공할 수 있습니다.
파일 이름은 name.scale-100.ext, name.scale-100_contrast-black.ext 등의 패턴을 따릅니다. 파일 이름 대신 디렉터리 구조를 통해 한정자를 제공할 수도 있습니다. 그러나 .VisualElementsManifest.xml 파일에서는 파일의 루트 name만 참조합니다. 예를 들어 중간 타일 크기에 대해 다음 파일을 제공할 수 있습니다.
- 70x70Logo.scale-80.png
- 70x70Logo.scale-100.png
- 70x70Logo.scale-140.png
- 70x70Logo.scale-180.png
- 70x70Logo.scale-80_contrast-white.png
- 70x70Logo.scale-100_contrast-white.png
- 70x70Logo.scale-140_contrast-white.png
- 70x70Logo.scale-180_contrast-white.png
- 70x70Logo.scale-80_contrast-black.png
- 70x70Logo.scale-100_contrast-black.png
- 70x70Logo.scale-140_contrast-black.png
- 70x70Logo.scale-180_contrast-black.png
그러나 .VisualElementsManifest.xml 파일에서는 예제와 같이 "70x70Logo.png"만 참조합니다. 현재 시스템 설정에 따라 Windows에서 Resources.pri 파일을 사용하여 나열된 모든 옵션 중에서 70x70Logo 파일의 올바른 버전을 선택합니다. 이 시스템 작동의 기반이 되는 명명 규칙에 대한 전체 자습서는 빠른 시작: 파일 또는 이미지 리소스 사용을 참조하세요.
데스크톱 앱 타일 사용자 지정 XSD
데스크톱 앱용 타일의 사용자 지정에 사용되는 스키마에 대한 XSD는 다음과 같습니다.
<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified"
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:simpleType name="st_nonemptystring">
<xs:restriction base="xs:string">
<xs:minLength value="1"/>
<xs:maxLength value="32767"/>
<xs:pattern value="[^\s]|([^\s].*[^\s])"/>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="st_filenamecharset">
<xs:restriction base="st_nonemptystring">
<xs:pattern value="[^<>":%\|\?\*]+"/>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="st_filename">
<xs:restriction base="st_filenamecharset">
<xs:pattern value="([^/\\]*[^./\\]+)(\\[^/\\]*[^./\\]+)*"/>
<xs:pattern value="([^/\\]*[^./\\]+)(/[^/\\]*[^./\\]+)*"/>
<xs:maxLength value="256"/>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="st_imagefile">
<xs:restriction base="st_filename">
<xs:pattern value=".+\.((jpg)|(png)|(jpeg)|(gif))"/>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="st_color">
<xs:restriction base="xs:string">
<xs:pattern value="#[\da-fA-F]{6}"/>
<xs:pattern value="black|silver|gray|white|maroon|red|purple|fuchsia|green|lime|olive|yellow|navy|blue|teal|aqua"/>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="st_foregroundtext">
<xs:restriction base="xs:string">
<xs:enumeration value="light"/>
<xs:enumeration value="dark"/>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="st_showname">
<xs:restriction base="xs:string">
<xs:enumeration value="on"/>
<xs:enumeration value="off"/>
</xs:restriction>
</xs:simpleType>
<xs:complexType name="ct_visualelements">
<xs:attribute name="Square150x150Logo" type="st_imagefile" use="optional"/>
<xs:attribute name="Square70x70Logo" type="st_imagefile" use="optional"/>
<xs:attribute name="ForegroundText" type="st_foregroundtext" use="required"/>
<xs:attribute name="BackgroundColor" type="st_color" use="required"/>
<xs:attribute name="ShowNameOnSquare150x150Logo" type="st_showname" use="required"/>
</xs:complexType>
<xs:complexType name="ct_application">
<xs:all>
<xs:element name="VisualElements" type="ct_visualelements" />
</xs:all>
</xs:complexType>
<xs:element name="Application" type="ct_application" />
</xs:schema>