여러 화면 크기 지원을 위한 지침

아티클
05/18/2015

Windows 및 Windows Phone 스토어 앱은 다양한 화면 크기와 해상도의 다양한 장치에서 실행될 수 있습니다. 사용자가 화면 방향을 수정할 수 있습니다. 앱이 Windows에서 실행 중인 경우 크기를 최소 너비로 다시 설정하거나 다른 앱 옆에 표시할 수 있습니다. 전화, 태블릿, 노트북, 데스크톱, PPI 장치 중 어디에서 앱을 실행하든 UI는 깔끔하게 표시되고 정상적으로 작동합니다. 모든 화면 크기와 방향에 맞게 조정되는 UI를 디자인할 경우 다음 지침을 따르세요.

창 크기를 축소하도록 Windows 스토어 앱을 조정하는 방법에 대한 자세한 지침은 Guidelines for resizing to narrow layouts을 참조하세요.

설명

앱은 작은 휴대폰 화면, 보통 크기의 노트북 화면, 통합 장치 또는 PPI 장치 화면 등 다양한 크기의 화면에서 실행될 수 있습니다. 화면 크기와 해상도에 따라 앱에서 활용할 수 있는 보이는 영역의 크기가 달라집니다.

태블릿 장치의 샘플 앱

큰 데스크톱 모니터의 샘플 앱

다음 용어는 여러 화면 크기에 맞는 크기 조정을 이해하는 데 중요합니다.

화면 크기	화면의 실제 크기(인치). 일반적으로 대각선 크기로 측정됩니다.
화면 해상도	화면에서 지원하는 가로 및 세로 픽셀 수입니다. 예: 1366x768.
가로 세로 비율	너비 대 높이로 표현되는 화면의 모양입니다. 예: 16:9.

플랫폼, 컨트롤 및 템플릿은 모두 다양한 화면 크기, 해상도 및 가로 세로 비율을 지원하도록 디자인되었습니다. 대부분 앱 레이아웃의 크기는 변경 내용을 표시하도록 자동으로 조정되지만 모든 화면에서 예측 가능하고 직관적인 방식으로 배치되도록 하려면 최상위 레이아웃, 콘텐츠 영역, 앱 탐색 및 명령을 고려해야 합니다.

다음 표는 앱을 디자인할 때 고려해야 할 가장 중요한 화면 크기를 보여 줍니다.

전체 화면 크기(유효 픽셀 해상도)	장치 설명
1366x768	태블릿, 컨버터블 및 여러 노트북(16:9 가로 세로 비율), 기준 노트북/데스크톱 해상도
1920x1080	대형 노트북 및 장치(16:9 가로 세로 비율)
2560x1440	초대형 통합 장치(16:9 가로 세로 비율)
1280x800 및 800x1280	세로 우선 적용 소형 장치(16:10 가로 세로 비율)
1024x768 및 768x1024	가로 우선 적용 소형 장치(4:3 가로 세로 비율)
1371x857 및 857x1371	소형 장치(16:10 가로 세로 비율)
384x640	4.5인치 전화(15:9 가로 세로 비율)
400x711	4.7인치 전화(16:9 가로 세로 비율)
450x800	5.5인치 전화(16:9 가로 세로 비율)
491x873	6인치 전화(16:9 가로 세로 비율)

Windows Phone이 아닌 Windows에서 실행하도록 앱을 디자인할 경우 두 앱에서 화면을 공유하거나 앱의 크기를 최소 너비로 조정할 때 사용할 수 있는 화면 크기를 고려합니다.

분할 화면 크기(유효 픽셀 해상도)	설명
672x768	1366x768 장치에서 절반으로 분할된 화면
500x768	앱의 기본 최소 크기. 1024x768 장치에서 절반으로 분할된 화면
320x768	320픽셀 최소 너비를 지원하는 앱의 최소 크기

권장 크기 조정은 Guidelines for scaling to pixel density을 참조하세요.

중요한 전체 화면 및 분할 화면 창 크기

권장 사항 및 금지 사항

가능하면 유연한 컨트롤을 사용하여 자동으로 재배치되는 콘텐츠를 지원합니다. 유연한 컨트롤은 XAML Grid control, CSS 그리드, CSS 다중 열 레이아웃 및 ScrollViewer control을 포함합니다. 예를 들어 그리드는 디스플레이 장치의 화면 해상도에 따라 사용 가능한 공간을 채우기 위해 UI에서 특정 부분의 크기를 조절하고 사용 가능한 화면 공간을 기반으로 콘텐츠를 다른 셀에 할당합니다.
최소 크기의 화면에서 조정되고 작동하도록 앱 레이아웃과 컨트롤을 디자인합니다.
- Windows 스토어 앱의 기본 최소 너비: 500px.
- Windows 스토어 앱의 기본값이 아닌 최소 너비: 320px.
- Windows Phone 스토어 앱의 최소값(조정 불가): 384px(세로) 및 640px(가로).
UI와 컨트롤은 아래로 최소값(위 목록 참조)까지 모든 크기의 화면에서 사용할 수 있어야 합니다. 고려해야 할 중요한 컨트롤은 다음과 같습니다.
앱이 큰 화면의 공간을 효과적으로 사용하고 레이아웃이 자동으로 재배치되도록 디자인합니다. 큰 공간을 비워 두지 마세요.
가장 중요한 장치 크기에서 앱이 잘 작동하는지 테스트합니다. 실제 장치에서 앱을 테스트할 뿐만 아니라 Windows 스토어 앱용 Microsoft Visual Studio 시뮬레이터를 사용하여 다양한 실제 화면 크기, 해상도 및 방향에서 앱 실행을 시뮬레이션할 수 있습니다.
모든 input fields에 대해 최소 크기를 지정합니다. 최소 크기를 지정하면 사용자가 창 크기를 조정할 때 입력 필드가 사라지지 않습니다.
앱의 입력 필드가 가상 키보드로 가려지지 않는지 테스트합니다.
절대 위치 지정을 사용할 경우 주의하세요. 잘못 사용할 경우 UI가 창 크기 및 방향 변화에 응답하지 않을 수 있습니다. 레이아웃을 하드 코드하지 않고 런타임에 계산된 위치를 사용하여 UI를 배치합니다.
여러 픽셀 밀도에 대해 디자인합니다. 자세한 내용은 픽셀 밀도에 맞게 크기를 조정하기 위한 지침을 참조하세요.

Windows 스토어 앱 전용

앱이 기본 최소 너비인 500픽셀 이상에서 작동하는지 확인합니다. 구체적인 권장 사항은 Guidelines for narrow layouts을 참조하세요.
앱이 더 작은 크기에서도 잘 작동하고 사용자가 앱을 화면에 유지하도록 하려는 경우 기본값이 아닌 최소 너비 320픽셀을 지원할 수 있습니다.
사용자가 앱 크기를 조정할 때 현재 작업을 계속할 수 있도록 합니다. 예를 들어 앱의 현재 페이지, 스크롤 막대의 상태, 선택 항목 및 초점을 그대로 유지합니다.
모든 크기의 화면에서 참 메뉴를 지원합니다. 플라이아웃과 창의 크기가 적절히 조정되도록 합니다.

Windows 8에서 사용자는 세 가지 보기 상태(전체 화면, 사이드 및 채우기)로만 앱 크기를 조정할 수 있습니다. Windows 8.1에서 사용자는 전체 화면부터 최소 너비까지 임의의 너비로 앱 크기를 조정할 수 있습니다.

추가 사용법 지침

방향 변경 자동 지원

사용자는 휴대폰, 태블릿 및 모니터를 회전할 수 있습니다. 앱에서 고정 레이아웃을 사용하지 않는 경우 Windows에서 가로 방향과 세로 방향을 자동으로 처리합니다. 개발자는 앱의 너비가 레이아웃에 미치는 영향만 고려하면 됩니다.

유연한 레이아웃을 차단하는 것이 적합한 경우에 대한 자세한 내용은 아래 고정 레이아웃 섹션을 참조하세요.

가로 및 세로 레이아웃

크기 조정된 앱의 동작(Windows 스토어 앱에만 해당)

사용자가 화면에 여러 개의 앱을 열어 놓은 경우 다음과 같은 고유한 UI 조작 방식에 유의하세요.

사용자가 참 메뉴를 호출할 경우 앱 크기 또는 화면에서 앱의 위치에 관계없이 사용자가 마지막으로 사용한 앱에 참 메뉴가 적용됩니다.
화면의 각 앱 사이에는 핸들이 있습니다. 사용자는 핸들을 밀어 앱 창의 크기를 조정합니다. 핸들은 또한 현재 초점이 잡힌 앱을 표시합니다.
사용자가 앱 사이의 핸들을 잡고 앱의 최소 너비보다 작은 너비로 앱 크기를 조정하려고 하면 앱이 화면에서 사라집니다.
화면에 여러 개의 앱이 열려 있을 때 사용자가 장치 또는 모니터를 회전하면 앱의 방향이 전환되지 않습니다.

고정 레이아웃

대부분의 앱에서는 화면 크기 및 해상도 변환에 맞게 조정되고 콘텐츠를 자동으로 재배치하는 동적 레이아웃을 사용할 수 있습니다. 그러나 앱에 고정 레이아웃이 필요한 경우도 있습니다. 콘텐츠를 기반으로 하지 않거나 그래픽 무결성에 의존하지 않는 앱(예: 게임 앱)에서는 고정(절대) 레이아웃을 사용해야 합니다. Windows에서는 플랫폼에 기본으로 제공되는 "영역 안에 맞추기" 방식으로 이러한 앱을 지원합니다.

앱에 다양한 화면 크기에 맞게 자동으로 조정되지 않는 고정 레이아웃이 필요하다고 결정한 경우 다음 이미지에서처럼 영역 안에 맞추기 방식을 사용하면 다양한 화면 크기에서 고정 레이아웃으로 화면을 채울 수 있습니다.

고정 레이아웃 게임을 위한 영역 안에 맞추기

영역 안에 맞추기를 구현하려면 다음을 수행하세요.

기준 해상도(예: 1366x768픽셀(PC/태블릿) 또는 384x640픽셀(전화))에 대한 레이아웃을 디자인합니다. 이 레이아웃은 대형 화면에 맞춰질 레이아웃입니다.
ViewBox 컨트롤(ViewBox in JavaScript and HTML 또는 Viewbox in C#/VB/C++ and XAML) 내에 고정된 콘텐츠를 배치합니다. ViewBox 컨트롤은 화면에 맞게 고정 레이아웃의 크기를 조정합니다.
ViewBox 컨트롤의 크기가 100% 너비 및 높이로 조정되었는지 확인합니다.
ViewBox의 고정 크기 속성을 레이아웃의 고정 픽셀 크기(예: 1366x768 또는 384x640)로 정의합니다.
레터박스 색을 선택합니다. 고정 컨트롤은 가로 세로 비율 또는 화면 크기 변경에 대한 응답으로 동적으로 변경되지 않으므로 영역 안에 맞추기 기술은 자동으로 앱 콘텐츠를 중심에 맞추고 레터박스(가로 또는 세로) 처리합니다. 최상위 수준 앱 레이아웃의 색에 따라 레터박스 막대의 색이 결정됩니다. 하드웨어와 조화를 이루는 검정색 같은 어두운 색, 의도적으로 보이는 회색과 같은 중립 색 또는 앱 콘텐츠 색과 일치하는 색을 선택하는 것이 좋습니다.
벡터 또는 고해상도 자산을 제공합니다. 영역 안에 맞추기 기술은 대형 데스크톱 모니터에서 앱을 디자인 크기의 180%(Windows) 또는 280%(Windows Phone)까지 다양한 크기에 맞춥니다. SVG(Scalable Vector Graphics, XAML(Extensible Application Markup Language) 또는 디자인 기본 형식과 같은 벡터 자산은 크기 조정으로 인한 아티팩트나 흐림 없이 크기가 조정됩니다. 래스터 자산(예: 비트맵 이미지)이 필요한 경우 MRT 자산을 제공합니다.

다음 이미지는 벡터 이미지(왼쪽)와 스칼라 이미지(오른쪽)의 크기를 확대하여 비교했을 때 스칼라 이미지의 화질이 더 떨어짐을 보여줍니다.
ViewBox 컨트롤에 적응 컨트롤을 배치하지 마세요.