길고 좁은 레이아웃에 맞게 창 크기를 조정하기 위한 지침

사용자가 길거나 좁은 보기로 앱 크기를 조정하는 시나리오를 위해 추가 창 크기 옵션을 지원하도록 선택할 수 있습니다. 다음과 같은 두 가지 시나리오가 있습니다.

  • 사용자가 높이가 너비보다 커지게 크기를 조정하는 경우 앱이 세로 레이아웃으로 전환하도록 디자인합니다(긴 레이아웃).
  • 최소 너비를 기본 500픽셀 대신 320픽셀로 수정합니다(좁은 레이아웃).

다음은 500픽셀 너비의 앱 모습입니다.

기본 최소 너비 500픽셀의 앱

다음은 320픽셀 너비의 앱 모습입니다.

좁은 최소 너비 320픽셀의 앱

기본 최소 너비인 500픽셀을 유지할 경우에는 좁은 너비의 앱에 대해 특별히 고려할 사항이 없습니다. 사용자가 앱의 크기를 조정할 때 유연하게 적용되도록 앱을 디자인하면 됩니다.

최소 너비 320픽셀을 지원하도록 선택할 경우에는 좁은 너비에서 앱이 작동하고 사용 가능하도록 디자인을 몇 가지 변경해야 합니다.

앱의 높이가 너비보다 클 때마다 앱의 디자인을 변경하도록 선택할 수도 있습니다. 예를 들어 높이가 너비보다 클 때 앱이 가로 방향 대신 세로 방향으로 이동하도록 디자인할 수 있습니다.

다음은 전체 화면 크기에서 가로 방향으로 이동하는 앱의 모습입니다.

전체 화면에서 가로 방향으로 이동하는 앱

다음은 높이가 너비보다 클 때 세로 방향으로 이동하도록 전환된 앱의 모습입니다.

높이가 너비보다 클 때 세로 방향으로 이동하는 앱

최소 너비 선택

320픽셀의 최소 너비를 지원해야 하는지 여부를 어떻게 결정할까요? 앱에서 지원하려는 시나리오를 고려해 보세요. 다음은 320픽셀까지 좁은 너비를 지원해야 하는 몇 가지 일반적인 시나리오입니다.

  • 앱이 좁은 너비에서도 잘 작동합니다.
  • 멀티태스킹이 앱에 중요합니다.
  • 사용자가 앱을 화면에 유지할 수 있게 하려고 합니다.
  • 앱이 공유 시나리오에서 다른 앱과 함께 작동합니다.

지침

다음 지침에 따라 좁은 너비에 맞게 앱을 디자인하세요.

  • 500픽셀보다 작은 너비에서 전체 기능을 유지할 수 있는지 또는 기능을 축소해야 하는지 여부를 확인합니다. 최대한 많은 기능을 유지해야 합니다.
  • 앱이 전체 화면에서 가로 방향으로 이동할 경우 앱 창이 길어지면 세로 방향으로 이동하도록 전환합니다. 앱이 가로 이동에서 세로 이동으로 레이아웃을 전환하도록 할 정확한 너비를 결정합니다. 앱 높이가 너비보다 커지면 바로 세로 이동으로 전환하는 것이 좋습니다.
  • 앱이 좁은 너비로 표시될 때 좁은 크기를 수용하도록 디자인 변경 사항을 추가합니다. 좁은 레이아웃으로 변경할 정확한 너비를 결정합니다. 앱 너비가 500픽셀보다 작아질 경우 이와 같이 변경하는 것이 좋습니다. 디자인 변경에는 다음이 포함됩니다.Bing 여행 앱과 화면을 공유하는 계산기 앱320픽셀 너비의 계산기 앱(헤더와 여백이 더 작아짐)
  • 전체 화면에서 앱이 세로 방향으로 이동하는 경우 앱이 좁은 너비에 있을 때 단일 열이나 창으로 크기를 줄입니다. 앱이 단일 열이나 창으로 전환하도록 할 정확한 너비를 결정합니다. 단일 열이나 단일 창 보기에서 창 간의 탐색 기능을 포함해야 합니다.

    두 개의 창이 있는 전체 화면에서 세로 방향으로 이동하는 앱

    단일 창의 좁은 너비에서 세로 방향으로 이동하는 앱

  • 창 크기가 좁은 너비로 변경될 때 사용자를 앱의 다른 부분으로 이동하지 마세요.
  • 앱 레이아웃과 모든 컨트롤이 최소 크기까지 축소되고 길고 좁은 앱 창에서 모두 사용 가능하며 제대로 표시되도록 디자인합니다. 고려해야 할 중요한 컨트롤은 다음과 같습니다.
  • 좁은 레이아웃에 맞게 게임을 디자인하는 방법에 대한 특정 지침은 게임 아이디어 북을 참조하세요.

관련 항목

320픽셀 너비까지 크기가 조정되는 창의 레이아웃 샘플
너비보다 높이가 더 긴 창의 레이아웃 샘플
빠른 시작: 앱 레이아웃 정의
빠른 시작: 다양한 창 크기에 맞는 앱 디자인
픽셀 밀도에 맞게 크기 조정에 대한 지침
레이아웃 선택
터치 상호 작용 디자인
크기 조정에 대한 지침

 

 

표시:
© 2014 Microsoft. All rights reserved.