화면 크기 및 중단점

아티클
04/16/2022
읽는 데 6분 걸림

Windows 앱은 태블릿, 데스크톱, TV 등을 포함하는 Windows 실행하는 모든 디바이스에서 실행할 수 있습니다. 각 디바이스에 대해 UI를 최적화하는 대신 Windows 에코시스템에서 많은 수의 디바이스 대상 및 화면 크기를 사용하여 몇 가지 주요 너비 범주("중단점"이라고도 함)를 디자인하는 것이 좋습니다.

소형(640픽셀 이하)
중간(641~1007픽셀)
대형(1008픽셀 이상)

팁

특정 중단점에 맞게 디자인할 때는 화면 크기가 아닌 앱에서 사용할 수 있는 화면 공간(앱의 창) 크기를 고려해서 디자인하세요. 앱이 전체 화면으로 실행되면 앱의 창과 화면 크기가 동일하지만, 앱이 전체 화면이 아닐 때는 창이 화면보다 작습니다.

중단점

다음 표에서는 다양한 크기 클래스와 중단점을 설명합니다.

Responsive design breakpoints

크기 클래스	중단점	일반적인 화면 크기	디바이스	창 크기
소형	최대 640px	20"~65"	Tv	320x569, 360x640, 480x854
보통	641 - 1007px	7"~12"	태블릿	960 x 540
대	1008ps 이상	13" 이상	PC, 노트북, Surface Hub	1024 x 640, 1366 x 768, 1920 x 1080

TV가 왜 "소형"으로 간주됩니까?

대부분의 TV는 물리적으로 상당히 크며(일반적으로 40~65인치) 고해상도(HD 또는 4K)를 지원하므로, 3미터 거리에서 시청하는 1080P TV 설계는 책상 앞에서 30cm 정도 거리를 두고 사용하는 1080p 모니터 설계와는 다릅니다. 거리에 대해 말할 때, TV의 1080픽셀은 훨씬 가까운 540픽셀 모니터에 가깝습니다.

XAML의 유효 픽셀 시스템은 자동으로 보기 거리를 고려합니다. 컨트롤 또는 중단점 범위에 대한 크기를 지정하면 "유효" 픽셀을 실제로 사용하는 것입니다. 예를 들어 1080 이상 픽셀에 대한 응답 코드를 만드는 경우 1080 모니터는 해당 코드를 사용하지만 1080p TV는 그렇지 않습니다. 1080p TV에 1080개의 물리적 픽셀이 있더라도 유효 픽셀은 540개이기 때문입니다. 즉, 작은 화면에 대한 디자인과 유사한 TV에 대한 디자인을합니다.

유효 픽셀 및 배율

XAML은 모든 디바이스 및 화면 크기에서 쉽게 읽을 수 있고 상호 작용할 수 있도록 UI 요소를 자동으로 조정하는 데 도움이 됩니다.

디바이스에서 앱이 실행될 때 시스템은 화면에 UI 요소가 표시되는 방식을 정규화하는 알고리즘을 사용합니다. 이 크기 조정 알고리즘은 가시거리 및 화면 밀도(인치당 픽셀)를 고려하여 물리적 크기가 아닌 인식되는 크기를 최적화합니다. 크기 조정 알고리즘을 통해 3미터 떨어진 Surface Hub 10에 표시된 24픽셀 글꼴이 몇 센티미터 떨어진 5인치 휴대폰에 표시된 24픽셀 글꼴과 동일한 시인성을 보입니다.

Content is scaled differently on different devices based on how far away the user is expected to be from the device's screen

크기 조정 시스템의 작동 방식 때문에 XAML 앱을 디자인할 때 실제 물리적 픽셀이 아닌 유효 픽셀로 디자인합니다. 유효 픽셀(epx)은 가상 측정 단위이며, 화면 밀도와 무관하게 레이아웃 크기와 간격을 표시하는 데 사용됩니다. 지침에서는 epx, ep, px를 번갈아 사용합니다.

디자인할 때는 픽셀 밀도 및 실제 화면 해상도를 무시해도 됩니다. 대신, 크기 클래스에 대한 유효 해상도(유효 픽셀로 나타낸 해상도)를 고려해서 디자인합니다(자세한 내용은 화면 크기 및 중단점 문서 참조).

팁

이미지 편집 프로그램에서 화면 모형을 만드는 경우 DPI를 72로 설정하고 이미지 크기를 목표로 하는 크기 클래스의 유효 해상도로 설정하세요.

4의 배수씩 확장

$A 4 epx image being scaled to many dimensions without fractional pixels.$

UWP 앱에서 UI 요소의 크기, 여백, 위치는 항상 4epx의 배수여야 합니다.

XAML은 크기가 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, 400%인 다양한 디바이스에서 확장됩니다. 기준 단위는 정수를 이 안정화까지 스케일링할 수 있는 4입니다(예: 4 x 125% = 5, 4 x 150% = 6). 4의 배수를 사용하면 모든 UI 요소가 전체 픽셀에 맞춰지고, UI 요소의 선명하고 날카로운 가장자리가 보장됩니다. (텍스트에는 이 요구 사항이 없으며, 해당 크기와 위치를 지정할 수 있습니다.)