레이아웃을 좁히기 위한 크기 조정에 대한 지침
길거나 좁은 보기에 맞게 크기를 조정할 때 조정할 앱의 UI를 디자인합니다. 이 항목의 지침은 다음을 수행하려는 경우에 적용됩니다.
- 앱의 최소 너비를 기본 500픽셀 대신 320픽셀로 수정합니다(좁은 레이아웃).
- 사용자가 높이가 너비보다 커지게 크기를 조정하는 경우 앱이 세로 레이아웃으로 전환하도록 디자인합니다(긴 레이아웃).
일반 권장 사항에 대한 자세한 내용은 Guidelines for supporting multiple screen sizes을 참조하세요. 좁은 레이아웃에 맞게 게임을 디자인하는 방법에 대한 특정 지침은 게임 아이디어 북을 참조하세요.
샘플에 적용된 이러한 지침을 보려면 다음을 참조하세요.
예제
좁은 레이아웃
Windows 스토어 앱의 기본 최소 너비는 500픽셀입니다. 다음은 500픽셀 너비의 앱 모습입니다.
.png "기본 최소 너비 500픽셀의 앱")
다음은 320픽셀 너비의 앱 모습입니다.
.png "좁은 최소 너비 320픽셀의 앱")
500픽셀보다 좁은 최소 너비를 지원하도록 선택할 경우에는 이 크기에서 앱이 작동하고 사용 가능하도록 디자인을 몇 가지 변경해야 합니다. 500픽셀보다 좁은 너비에서 앱이 효율적이 되도록 하려면 권장 사항 및 금지 사항을 따릅니다.
긴 레이아웃
또한 앱의 높이가 너비보다 길 경우 디자인을 변경하도록 선택할 수 있습니다. 예를 들어 높이가 너비보다 클 때 앱이 가로 방향 대신 세로 방향으로 이동하도록 디자인할 수 있습니다.
다음은 전체 화면 크기에서 가로 방향으로 이동하는 앱의 모습입니다.
.png "전체 화면에서 가로 방향으로 이동하는 앱")
다음은 너비보다 높이가 더 긴 앱입니다. 이제 앱이 세로로 이동합니다.
.png "높이가 너비보다 클 때 세로 방향으로 이동하는 앱")
내 앱에서 320픽셀의 최소 너비를 지원해야 합니까?
기본 최소 너비보다 좁은 너비를 지원해야 하는지 여부는 사용자가 앱에서 수행하려는 작업에 따라 달라집니다. 다음은 320픽셀까지 좁은 너비를 지원해야 하는 몇 가지 일반적인 시나리오입니다.
- 멀티태스킹이 앱에 중요합니다.
- 사용자가 앱을 화면에 유지할 수 있게 하려고 합니다.
- 앱이 공유 시나리오에서 다른 앱과 함께 작동합니다.
- 앱이 좁은 너비에서도 잘 작동합니다.
기본 최소 너비인 500픽셀을 유지할 경우에는 좁은 너비의 앱에 대해 특별히 고려할 사항이 없습니다.
권장 사항 및 금지 사항
앱이 전체 화면에서 가로 방향으로 이동할 경우 앱 창의 높이가 너비보다 길어지면 세로 방향으로 이동하도록 전환합니다.
좁은 크기를 수용하려면 앱 너비가 500픽셀보다 작을 경우 다음과 같이 디자인을 변경합니다.
- 더 작은 뒤로 단추 스타일을 사용합니다. 뒤로 단추 크기에 대한 자세한 내용은 기호 아이콘 목록을 참조하세요.
- 왼쪽 여백에 20픽셀을 사용합니다.
- 앱 헤더에 20pt 크기를 사용합니다.
- 페이지 전환 애니메이션 및 콘텐츠 전환 애니메이션에 더 작은 오프셋 값을 사용합니다.
다음은 보통 너비의 계산기 앱입니다.
.png "Bing 여행 앱과 화면을 공유하는 계산기 앱")
다음은 320픽셀 너비의 앱입니다. 현재 왼쪽 여백이 20픽셀이므로 좁은 레이아웃 권장 사항에 따라 헤더 글꼴이 20pt 크기로 줄었습니다.
.png "320픽셀 너비의 계산기 앱(헤더와 여백이 더 작아짐)")
앱이 전체 화면에서 세로 방향으로 이동하는 경우 앱의 높이가 너비보가 길어지면 단일 열이나 창을 표시하도록 축소됩니다. 앱이 단일 열이나 창으로 전환되는 정확한 너비를 결정합니다. 단일 열 또는 단일 창 보기에서 탐색을 포함하여 사용자가 창 간을 이동하도록 해야 합니다.
.png "두 개의 창이 있는 전체 화면에서 세로 방향으로 이동하는 앱")
.png "단일 창의 좁은 너비에서 세로 방향으로 이동하는 앱")
앱 레이아웃과 모든 컨트롤이 최소 크기까지 축소되고 길고 좁은 앱 창에서 모두 사용할 수 있도록 디자인합니다. 고려해야 할 중요한 컨트롤은 다음과 같습니다.
창 크기가 좁은 너비로 변경될 때 사용자를 앱의 다른 부분으로 이동하지 마세요.
좁은 크기에서 앱의 기능을 대부분 유지할 수 없는 경우 기본 최소 크기(500픽셀)보다 좁은 너비를 지원하지 않습니다.
관련 항목
개발자용(HTML)
개발자용(XAML)
Windows.UI.Xaml.VisualStateManager
샘플