픽셀 밀도에 맞게 크기 조정에 대한 지침

아티클
05/18/2015

Windows 런타임 앱(Windows, Windows Phone 또는 두 플랫폼에서 모두 실행되는)은 화면의 픽셀 밀도에 관계없이 일관된 가독성과 기능을 제공하기 위해 자동으로 크기가 조정됩니다. 이러한 지침에 따라 다양한 픽셀 밀도를 사용하는 장치에 맞게 크기가 조정될 때 앱 UI의 품질을 유지합니다.

이러한 지침은 Silverlight를 사용하는 Windows Phone 앱에 적용되지 않습니다. Silverlight 관련 지침은 Multi-resolution apps for Windows Phone 8을 참조하세요.

표준 및 HD 슬레이트 간 픽셀 밀도의 차이

설명

크기 조정을 사용하지 않으면 화면에 표시되는 실제 개체 크기는 장치의 픽셀 밀도가 증가할수록 더 작아집니다. UI 요소가 너무 작아서 터치할 수 없거나 텍스트가 너무 작아서 읽을 수 없는 경우 Windows는 자동으로 다음 크기 조정 안정 상태에 따라 앱 크기를 조정합니다.

Windows 스토어 앱:

1.0(100%, 크기 조정이 적용되지 않음)
1.4(140% 크기 조정)
1.8(180% 크기 조정)

Windows Phone 스토어 앱:

1.0(100%, 크기 조정 없음)
1.4(140% 크기 조정)
2.4(240% 크기 조정)

Windows는 실제 화면 크기, 화면 해상도, 화면 DPI 및 폼 팩터를 기반으로 어떤 크기 조정 안정 상태를 사용할지 결정합니다. 화면 사양이 특정 임계값을 충족하면 Windows에서 다음으로 높은 크기 조정 안정 상태를 사용합니다. ResolutionScale(Windows) 또는 RawPixelsPerViewPixel(Windows Phone)을 사용하여 배율 인수를 결정할 수 있습니다.

앱 크기가 자동으로 조정되지만 장치의 픽셀 밀도에 관계없이 UI가 깔끔하게 표시되고 제대로 작동하도록 다음 지침에 따라 앱 크기 조정을 준비합니다.

권장 사항 및 금지 사항

확장 가능한 벡터 그래픽을 사용합니다. Windows에서 이러한 형식의 크기가 눈에 띄는 아티팩트 없이 자동으로 조정됩니다. JavaScript 앱의 경우 SVG를 사용합니다. C#, C++ 또는 Visual Basic으로 작성된 앱에서 XAML 정의 그래픽을 사용할 수 있습니다.
앱 패키지에서 비트맵 이미지에 대한 리소스 로드를 사용하고 각 배율 인수에 대해 별도의 이미지를 제공합니다. 이미지 파일 이름에 배율 인수를 포함합니다(예: Assets\Square7070Logo.scale-100.png). Windows에서 현재 크기에 맞는 이미지를 자동으로 로드합니다. DPI 샘플에 따라 크기 조정에서는 이미지를 위해 로드되는 리소스의 사용 방법을 보여 줍니다.

앱 인증과 관련된 이미지 요구 사항을 보려면 앱 이미지 선택을 참조하세요. 명명 규칙에 대한 자세한 내용은 빠른 시작: 파일 또는 이미지 리소스 사용(JavaScript 및 HTML을 사용하는 Windows 스토어 앱) 또는 빠른 시작: 파일 또는 이미지 리소스 사용(C#/VB/C++ 및 XAML로 작성한 Windows 스토어 앱)을 참조하세요.
다양한 크기 조정 안정 상태에 대한 자산을 만들 경우:
- 비트맵 이미지를 100%로 디자인하여 수동으로 크기를 늘리지 마세요. 고품질 이미지 프로그램을 사용하는 경우에도 흐릿한 결과가 나타날 수 있습니다.
- 큰 고해상도 이미지 크기를 줄여도 항상 선명하고 깔끔한 결과가 나타나는 것은 아닙니다. 그러나 원래 벡터를 사용할 수 없는 경우에는 수동으로 저해상도 파일의 크기를 늘리는 것보다 고해상도 파일의 크기를 줄이는 것이 좋습니다.
앱이 코드를 사용하여 런타임에 이미지를 로드하고 있는 경우(예: XAML 또는 HTML이 아니라 DirectX를 사용하여 UI를 만드는 경우) ResolutionScale(Windows) 또는 RawPixelsPerViewPixel(Windows Phone)을 사용하여 배율을 결정하고, 배율에 따라 수동으로 이미지를 로드합니다.
파일 시스템 이미지에는 Thumbnail API를 사용합니다. 미리 보기 API는 더 작은 버전 이미지를 미리 보기용으로 캐시하여 성능을 최적화합니다. 자세한 내용은 효율적인 파일 시스템 액세스를 참조하세요.
큰 이미지가 로드될 때 레이아웃이 변경되지 않도록 자동 크기 조정을 사용하지 않고 대신에 이미지에서 너비 및 높이를 지정합니다.
인쇄 그리드 단위 및 보조 단위를 사용합니다. 주 그리드 단위로 20px, 부 그리드 단위로 5px의 정의된 인쇄 그리드 단위를 사용하여 해당 레이아웃에서 픽셀 반올림으로 인한 픽셀 이동이 발생하지 않도록 합니다. 5px로 나눌 수 있는 크기의 단위를 사용할 경우 픽셀 반올림이 발생하지 않습니다.
원격 웹 이미지에 해상도 미디어 쿼리를 사용합니다. 앱이 JavaScript를 사용하고 원격 웹 이미지가 있으면 background-image 속성과 함께 CSS @media 해상도 미디어 기능을 사용하여 런타임 시 이미지를 대체합니다.
크기가 5px의 배수로 지정되는 이미지를 사용하지 마세요. 5px의 배수가 아닌 단위를 사용하면 140%, 180% 및 240%로 확대했을 때 픽셀 이동이 발생할 수 있습니다.