화면 크기에 맞게 크기 조정에 대한 지침(Windows 스토어 앱)

  • 아티클

이 항목에서는 Windows 스토어 앱을 Windows 8에서 지원하는 다양한 크기의 화면에 맞추기 위해 레이아웃을 디자인 및 빌드하는 방법의 모범 사례를 설명합니다.

Windows 8은 태블릿 PC의 작은 화면부터 중간 랩톱 화면을 물론, 대형 데스크톱이나 일체형 PC 화면에 이르기까지 다양한 크기의 화면에서 실행됩니다. Windows 스토어 앱은 Windows 8에서 지원하는 화면 크기 중 하나에서 실행됩니다. 일반적으로 화면 크기가 크면 화면 해상도도 높습니다. 따라서 앱에서 활용할 볼 수 있는 영역도 커집니다.

다음은 이 문서에서 사용되는 용어입니다.

Term Description

화면 크기

화면의 실제 크기(인치). 일반적으로 대각선 크기로 측정됩니다.

화면 해상도

화면에서 지원하는 가로 및 세로 픽셀 수입니다. 예: 1366x768.

가로 세로 비율

너비 대 높이로 표현되는 화면의 모양입니다. 예: 16:9.

 

화면 크기

화면 크기가 Windows 스토어 앱에 미치는 가장 큰 영향은 사실상 화면 해상도입니다. 큰 화면의 경우 화면 해상도도 높으므로 그만큼 응용 프로그램에 사용할 수 있는 공간이나 화면 영역도 더 큽니다. 사용자는 더 큰 화면에서 더 많은 콘텐츠와 기능을 볼 수 있기를 기대합니다.

앱 개발자 및 디자이너는 개발 시 이 화면 영역에 대한 관리를 고려합니다. 앱이 큰 화면에서 표시되는 방식은 디자인 및 개발 시 레이아웃에 대해 정의된 매개 변수를 통해 정의됩니다.

플랫폼, 컨트롤 및 템플릿 모두 다양한 화면 크기를 지원하도록 디자인되었습니다. 많은 앱 레이아웃이 추가로 노력을 들이거나 코드를 빌드하지 않고도 맞춰지지만, 최상위 레이아웃, 콘텐츠 범위, 앱 탐색 및 명령을 고려하여 이러한 요소가 큰 화면에서 예상대로 그리고 직관적으로 배치되도록 해야 합니다.

다음 이미지는 큰 화면에 맞출 수 있는 레이아웃을 작성하지 않아서 커다란 빈 공간이 발생할 수 있음을 보여줍니다.

유연하지 않은 레이아웃으로 인해 발생한 커다란 빈 공간

최소 화면 해상도

앱에서 지원하는 기본 화면 해상도에는 두 가지가 있습니다.

  • Windows 스토어 앱이 실행될 최소 해상도는 1024x768입니다.
  • Windows 8의 모든 기능(끌기를 사용한 멀티태스킹 포함)을 지원하는 데 필요한 최소 해상도가 1366x768입니다. 사이드 뷰에 대한 자세한 내용은 사이드 뷰 및 채우기 뷰에 대한 지침을 참조하세요.

Windows 스토어 앱은 1024x600 또는 1280x720 해상도에서 실행할 수 없습니다.

다음 표에는 기본 화면 해상도에 권장되는 디자인 방식이 나와 있습니다.

방식 설명

최소 해상도 1024x768용으로 디자인합니다.

이 방식은 다음 이점을 제공합니다.

  • 모든 UI(예: 탐색, 컨트롤 및 콘텐츠)가 클리핑 없이 화면에 맞춰집니다.

최적 해상도 1366x768용으로 디자인합니다.

이 방식은 다음 이점을 제공합니다.

  • 모든 UI(예: 탐색, 컨트롤 및 콘텐츠)가 빈 공간 없이 화면에 맞춰집니다.

 

큰 화면용 디자인

큰 화면용 앱을 디자인할 때는 앱의 레이아웃, 외형, 비율 및 컨트롤이 큰 캔버스에 어떻게 적용될 수 있는지 고려해야 합니다. 또한 앱에는 다양한 복잡성을 나타내는 여러 레이아웃이 있을 수 있습니다. 큰 화면에 대해 각 레이아웃을 개별적으로 고려할 수 있습니다.

다음 표에는 큰 화면에 대한 권장 디자인 방식이 나와 있습니다.

방식 설명

화면에 맞추기

이 방식은 화면 크기와 상관 없이 최대한 몰입할 수 있는 사용자 환경을 제공한다는 이점이 있습니다.

앱은 최대한 화면을 채우고 다양한 화면 크기를 고려하여 디자인된 것처럼 보여야 합니다. 대형 모니터를 구입하는 사용자는 앱이 이러한 큰 화면에서도 여전히 멋지게 보이며 가능하면 화면을 더 많은 콘텐츠로 채울 것이라고 기대합니다.

레이아웃이 고정식인지 적응식인지 결정

다양한 화면 크기에 맞는 앱을 빌드하는 데 사용할 수 있는 기술에는 두 가지가 있습니다. 기술의 선택은 레이아웃의 복잡성과 사용 시나리오에 따라 달라집니다.

 

고정 레이아웃

고정 레이아웃은 기본적으로 비트맵 이미지로 구성된 게임이나 게임과 유사한 앱에 주로 사용됩니다. 대체로 이러한 레이아웃 유형에서는 콘텐츠의 양이 고정되어 있어(예: 게임 보드), 더 많은 콘텐츠를 표시하거나 다른 값을 추가할 수 없습니다. 이러한 레이아웃은 고정 픽셀 값을 사용하여 디자인되므로 다양한 화면 크기에 맞춰지거나 동적으로 변경할 수 없습니다. Windows 8에서는 플랫폼에 기본으로 제공되는 "영역 안에 맞추기" 방식으로 이러한 앱을 지원합니다.

다양한 화면 크기에 사용되는 고정 레이아웃

고정 레이아웃: 영역 안에 맞추기

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

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

다음 표에는 영역 안에 맞추기 기능을 사용하는 앱에 권장되는 디자인 방식이 나와 있습니다.

방식 설명

기본 해상도로 시작합니다.

고정 레이아웃을 디자인하는 경우 기본 해상도인 1024x768과 1366x768용으로 레이아웃을 디자인하는 것부터 시작합니다. 이 레이아웃은 대형 화면에 맞춰질 레이아웃입니다.

ViewBox 컨트롤 안에 고정된 콘텐츠를 배치합니다.

ViewBox 컨트롤은 화면에 맞게 고정 레이아웃의 크기를 조정합니다.

  • ViewBox 컨트롤의 크기가 100% 너비 및 높이로 조정되었는지 확인합니다.
  • ViewBox의 고정 크기 속성을 레이아웃의 고정 픽셀 크기(예: 1366x768)로 정의합니다.

적응 컨트롤(예: AppBar)을 ViewBox 안에 배치하지 마세요.

이러한 컨트롤은 다양한 크기에 맞게 자동으로 조정됩니다.

레터박스 스타일 및 색상을 정의합니다.

고정 앱 레이아웃은 가로 세로 비율이나 화면 크기 변화에 따라 동적으로 변경되지 않으므로 영역 안에 맞추기 기술이 앱의 콘텐츠를 자동으로 가운데 배치하고 레터박스(가로 또는 세로)로 변환합니다.

앱이나 하드웨어 색상을 보완하는 레터박스 스타일과 색상을 정의하여 멋진 환경을 만들 수 있습니다. 레터박스 색상은 최상위 앱 레이아웃의 배경색으로 정의됩니다. 하드웨어와 어울리는 검은색과 같은 어두운 색, 신중함을 표현하는 회색과 같은 중립색, 또는 앱 콘텐츠 색과 일치하는 색을 선택하는 것이 좋습니다.

벡터 또는 고해상도 자산을 제공합니다.

영역 안에 맞추기 기술은 대형 데스크톱 모니터에서 앱을 디자인 크기의 200%까지 다양한 크기에 맞춥니다.

SVG(스케일러블 벡터 그래픽), XAML Extensible Application Markup Language(XAML) 또는 디자인 기본 형식과 같은 벡터 자산은 크기 조정으로 인한 아티팩트나 흐림 없이 크기가 조정됩니다. 래스터 자산(예: 비트맵 이미지)이 필요한 경우에는 확대 대신에 축소할 수 있도록 디자인 크기의 두 배가 되는 이미지를 제공합니다.

다음 이미지는 벡터 이미지(왼쪽)와 스칼라 이미지(오른쪽)의 크기를 확대하여 비교했을 때 스칼라 이미지의 화질이 더 떨어짐을 보여줍니다.

벡터와 스칼라 이미지의 크기 조정

 

적응 레이아웃

적응 레이아웃은 흔히 콘텐츠 사용, 관리 및 창작 앱 분야에서 주로 사용됩니다. 이러한 레이아웃은 흔히 최상위 와이어프레임을 사용하여 정의된 비례 요소로 구성됩니다. 예를 들면 뉴스 리더 앱에는 머리글, 바닥글, 그리고 가운데에 내용 영역이 있습니다. 이러한 레이아웃은 다양한 화면 크기에 맞게 동적으로 변경되며 레이아웃 규칙에 따라 동적으로 공간을 채우고 더 많은 콘텐츠를 제공합니다. Windows 8은 아래에 자세히 설명된 적응 레이아웃 기술을 사용하여 이러한 앱을 지원합니다.

다양한 화면 크기에 사용되는 적응 레이아웃

적응 레이아웃: 공간 관리

앱 레이아웃이 다양한 화면 크기에 맞출 적응 레이아웃을 지원할 수 있다고 결정한 경우 다음 사항을 고려하여 앱이 사용 가능한 모든 공간을 어떻게 사용할 수 있는지 결정해야 합니다.

다음 표에는 적응 레이아웃을 사용하는 앱에 권장되는 디자인 방식이 나와 있습니다.

방식 설명

각 적응 영역에서 사용 가능한 공간을 사용할 방법을 결정합니다.

가로 또는 세로 방향으로 맞춰진다고 확인된 각 셀에 대해 앱 레이아웃이 대형 화면에서 해당 공간을 어떻게 사용할지 결정합니다.

최상위 레이아웃 와이어프레임을 결정합니다.

이 와이어프레임은 앱의 최상위 영역을 표현해야 합니다. 이 와이어프레임에는 머리글, 탐색 및 콘텐츠 영역의 위치가 포함되어야 합니다. 다음 이미지는 최상위 와이어프레임을 보여줍니다.

최상위 와이어프레임 디자인

레이아웃의 고정 부분과 적응 부분을 결정합니다.

최상위 와이어프레임에서 각 셀마다 앱이 다양한 크기로 표시될 때 가로 및 세로 두 크기에 대해 각 셀에서 크기를 자체적으로 조정할 방식을 결정합니다. 이 최상위 와이어프레임 설명과 크기 조정 동작을 사용하여 GridLayout에 대한 매개 변수를 정의할 수 있습니다.

와이어프레임 사양

각 적응 영역이 맞춰질 크기를 결정합니다.

가로 또는 세로 방향으로 맞춰진다고 확인된 각 셀에 대해 앱 레이아웃이 대형 화면에서 해당 공간을 어떻게 사용할지 결정합니다.

앱에서 적응 크기 내 공간을 어떻게 사용할지 결정합니다.

앱의 각 영역을 다양한 크기에 어떻게 맞출지 결정했으면 다음에는 앱에서 공간을 어떻게 사용할지를 고려해야 합니다. 앱은 다양한 기술을 사용 및 결합하여 공간을 활용할 수 있습니다. 이러한 모든 기술은 Windows 8 플랫폼 및 컨트롤을 통해 지원됩니다.

모든 컬렉션 뷰의 너비와 높이가 100%로 조정되는지 확인합니다.

ListView 컨트롤은 사용 가능한 공간을 더 많은 항목으로 자동으로 채웁니다.

작은 화면과 큰 화면에 모두 표시되는 컬렉션

해당되는 경우 텍스트에 다중 열 레이아웃을 사용합니다.

다중 열 레이아웃은 가독성을 위해 열을 자동으로 추가하고 콘텐츠를 유동화하여 사용 가능한 공간을 채웁니다.

작은 화면과 큰 화면에 모두 표시되는 컬렉션

해당되는 경우 이미지에 canvas를 사용합니다.

canvas가 자동으로 확장되어 사용 가능한 공간을 채웁니다.

작은 화면과 큰 화면에 모두 표시되는 캔버스

여백이 더 많이 표시됩니다.

불필요한 여백을 보정하여 표시되는 앱 콘텐츠 양을 유지 관리합니다.

여백을 포함하는 두 가지 바둑판식 레이아웃

앱이 더 많이 표시됩니다.

더 많은 앱 콘텐츠를 표시합니다. 콘텐츠가 재배치되는 방식에 따라 더 많은 여백을 표시할 수도 있고 —그렇지 않을 수도 있습니다.

두 가지 바둑판식 레이아웃

 

앱 레이아웃 테스트

앱을 테스트할 때는 다양한 화면 크기에서 테스트해야 합니다. 대부분의 사람들이 여러 장치를 소유하지 않으므로, Windows에서는 Visual Studio 11과 같은 도구를 사용하여 다양한 화면에서 표시되는 앱을 테스트할 수 있도록 지원합니다. 따라서 다음 이미지에서처럼 다양한 화면 크기 및 픽셀 밀도에서 앱을 실행할 수 있도록 해주는 Windows 시뮬레이터를 개발자에게 제공합니다.

Visual Studio 11의 Windows 시뮬레이터

다음 이미지에 표시된 Blend for Microsoft Visual Studio 2012 for Windows 8은 개발자가 다양한 화면 크기와 픽셀 밀도에서 앱을 즉시 디자인할 수 있도록 해주는 플랫폼 메뉴를 제공합니다. Blend 캔버스가 플랫폼 메뉴에서 선택한 화면 옵션에 따라 동적으로 업데이트됩니다.

다양한 화면 크기 옵션이 있는 Blend의 플랫폼 메뉴

레이아웃에 대한 지침

 

 

Build date: 7/2/2013