반응형 디자인 기술

UWP 앱은 유효 픽셀을 사용하여 모든 Windows 기반 디바이스에서 UI를 읽고 사용할 수 있도록 합니다. 그렇다면 특정 디바이스 패밀리에 대한 앱의 UI를 사용자 지정하고자 하는 이유는 무엇일까요?

• 공간을 가장 효과적으로 사용하고 탐색 필요성을 줄이기 위해

  태블릿과 같이 화면이 작은 디바이스에서 보기 좋게 디자인한 앱은 더 큰 디스플레이가 있는 PC에서도 사용할 수 있지만 공간이 낭비될 수 있습니다. 화면이 특정 크기보다 큰 경우 더 많은 콘텐츠를 표시하도록 앱을 사용자 지정할 수 있습니다. 예를 들어 쇼핑 앱은 태블릿에서 한 번에 하나의 상품 범주를 표시하지만 PC나 노트북에서는 동시에 여러 범주와 제품을 표시할 수 있습니다.

  화면에 더 많은 콘텐츠를 배치하면 사용자가 수행해야 하는 탐색의 양을 줄일 수 있습니다.

• 디바이스의 기능을 활용하기 위해

  특정 디바이스에는 특정 디바이스 기능이 더 많이 탑재되어 있을 가능성이 높습니다. 예를 들어 노트북에는 위치 센서와 카메라가 있을 수 있지만 TV에는 이러한 기능이 없을 수 있습니다. 앱은 사용할 수 있는 기능을 검색하고 이를 이용하는 기능을 사용하도록 설정할 수 있습니다.

• 입력에 최적화하기 위해

  범용 컨트롤 라이브러리는 모든 입력 형식(터치, 펜, 키보드, 마우스)에서 작동하지만 UI 요소를 다시 정렬하여 특정 입력 형식에 최적화할 수 있습니다. 예를 들어 화면 아래쪽에 탐색 요소를 배치하면 휴대폰 사용자가 더 쉽게 액세스할 수 있지만 대부분의 PC 사용자는 화면 위쪽에 탐색 요소가 표시될 것으로 예상합니다.

특정 화면 너비에 맞게 앱의 UI를 최적화할 때 반응형 디자인을 만들고 있다고 가정합니다. 다음은 앱의 UI를 사용자 지정하는 데 사용할 수 있는 6가지 반응형 디자인 기술입니다.

팁

많은 UWP 컨트롤은 이러한 응답성이 뛰어난 동작을 자동으로 구현합니다. 응답성이 뛰어난 UI를 만들려면 UWP 컨트롤을 확인아웃하는 것이 좋습니다.

위치 변경

UI 요소의 위치와 배치를 변경하여 창 크기를 최대한 활용할 수 있습니다. 이 예제에서는 작은 창에 요소가 세로로 스택되어 있습니다. 앱을 큰 창으로 변환하면 요소가 더 넓은 창 너비를 활용할 수 있습니다.

사진 앱에 대한 이 예시 디자인에서 사진 앱은 더 큰 화면에서 콘텐츠의 위치를 변경합니다.

크기 조정

UI 요소의 여백과 크기를 조정하여 창 크기에 최적화할 수 있습니다. 예를 들어 단순히 콘텐츠 프레임을 늘려 더 넓은 화면에서 읽을 수 있습니다.

재배치

디바이스 및 방향에 따라 UI 요소의 흐름을 변경하면 앱에서 최적의 콘텐츠 표시를 제공할 수 있습니다. 예를 들어 큰 화면으로 전환할 때는 열을 추가하거나, 큰 컨테이너를 사용하거나, 목록 항목을 다른 방식으로 생성하는 것이 합리적일 수 있습니다.

이 예제에서는 작은 화면에서 세로로 스크롤되는 단일 열의 콘텐츠를 큰 화면에서 두 열의 텍스트로 표시되도록 재배치할 수 있는 방법을 보여 줍니다.

표시/숨기기

화면 공간에 따라 또는 디바이스가 추가 기능, 특정 상황, 기본 설정 화면 방향 등을 지원하는 경우 UI를 표시하거나 숨길 수 있습니다.

예를 들어 미디어 플레이어 컨트롤은 작은 화면에서는 설정된 단추를 축소하고, 큰 화면에서는 확장합니다. 큰 창의 미디어 플레이어는 작은 창에 있을 때보다 훨씬 더 많은 화면 기능을 처리할 수 있습니다.

표시 또는 숨기기 기술의 일부에는 더 많은 메타데이터를 표시할 시기를 선택하는 일이 포함됩니다. 작은 창에서는 최소한의 메타데이터를 표시하는 것이 가장 좋습니다. 큰 창에서는 많은 양의 메타데이터를 표시할 수 있습니다. 메타데이터를 표시하거나 숨기는 경우의 몇 가지 예는 다음과 같습니다.

• 이메일 앱에서 사용자의 아바타를 표시할 수 있습니다.
• 음악 앱에서 앨범 또는 아티스트에 대한 자세한 정보를 표시할 수 있습니다.
• 비디오 앱에서 영화 또는 쇼에 대한 자세한 정보(예: 출연진 및 멤버 세부 내용)를 표시할 수 있습니다.
• 모든 앱에서 열을 분리하고 자세한 내용을 표시할 수 있습니다.
• 모든 앱에서 세로로 쌓인 항목을 가져와서 가로로 배치할 수 있습니다. 휴대폰 또는 패블릿에서 더 큰 디바이스로 이동하면 쌓인 목록 항목이 변경되어 목록 항목의 행과 메타데이터 열이 표시될 수 있습니다.

바꾸기

이 기술을 사용하면 특정 중단점에 대해 사용자 인터페이스를 전환할 수 있습니다. 이 예제의 탐색 창과 소형 임시 UI는 작은 화면에서 유용하지만, 큰 화면에서는 탭이 더 효과적일 수 있습니다.

NavigationView 컨트롤은 사용자가 창 위치를 맨 위나 왼쪽으로 설정할 수 있게 하여 응답성이 뛰어난 이 기술을 지원합니다.

재설계자

앱의 아키텍처를 축소하거나 포크하여 특정 디바이스를 더 효과적으로 타겟팅할 수 있습니다. 이 예제에서 창을 확장하면 전체 목록/세부 정보 패턴이 표시됩니다.

관련 항목

• 화면 크기 및 중단점
• XAML을 사용한 반응형 레이아웃
• UWP 컨트롤 및 패턴