반응형 앱 디자인 가이드 - ban-eunghyeong aeb dijain gaideu

주요 콘텐츠로 건너뛰기

이 브라우저는 더 이상 지원되지 않습니다.

최신 기능, 보안 업데이트, 기술 지원을 이용하려면 Microsoft Edge로 업그레이드하세요.

화면 크기 및 중단점

• 아티클
• 09/27/2022
• 읽는 데 6분 걸림

이 문서의 내용

Windows 앱은 태블릿, 데스크톱, TV 등을 포함하는 Windows 실행하는 모든 디바이스에서 실행할 수 있습니다. 각 디바이스에 대해 UI를 최적화하는 대신 Windows 에코시스템에서 많은 수의 디바이스 대상 및 화면 크기를 사용하여 몇 가지 주요 너비 범주("중단점"이라고도 함)를 디자인하는 것이 좋습니다.

• 소형(640픽셀 이하)
• 중간(641~1007픽셀)
• 대형(1008픽셀 이상)

팁

특정 중단점에 맞게 디자인할 때는 화면 크기가 아닌 앱에서 사용할 수 있는 화면 공간(앱의 창) 크기를 고려해서 디자인하세요. 앱이 전체 화면으로 실행되면 앱의 창과 화면 크기가 동일하지만, 앱이 전체 화면이 아닐 때는 창이 화면보다 작습니다.

중단점

다음 표에서는 다양한 크기 클래스와 중단점을 설명합니다.

TV가 왜 "소형"으로 간주됩니까?

대부분의 TV는 물리적으로 상당히 크며(일반적으로 40~65인치) 고해상도(HD 또는 4K)를 지원하므로, 3미터 거리에서 시청하는 1080P TV 설계는 책상 앞에서 30cm 정도 거리를 두고 사용하는 1080p 모니터 설계와는 다릅니다. 거리에 대해 말할 때, TV의 1080픽셀은 훨씬 가까운 540픽셀 모니터에 가깝습니다.

XAML의 유효 픽셀 시스템은 자동으로 보기 거리를 고려합니다. 컨트롤 또는 중단점 범위에 대한 크기를 지정하면 "유효" 픽셀을 실제로 사용하는 것입니다. 예를 들어 1080 이상 픽셀에 대한 응답 코드를 만드는 경우 1080 모니터는 해당 코드를 사용하지만 1080p TV는 그렇지 않습니다. 1080p TV에 1080개의 물리적 픽셀이 있더라도 유효 픽셀은 540개이기 때문입니다. 즉, 작은 화면에 대한 디자인과 유사한 TV에 대한 디자인을합니다.

유효 픽셀 및 배율

XAML은 모든 디바이스 및 화면 크기에서 쉽게 읽을 수 있고 상호 작용할 수 있도록 UI 요소를 자동으로 조정하는 데 도움이 됩니다.

디바이스에서 앱이 실행될 때 시스템은 화면에 UI 요소가 표시되는 방식을 정규화하는 알고리즘을 사용합니다. 이 크기 조정 알고리즘은 가시거리 및 화면 밀도(인치당 픽셀)를 고려하여 물리적 크기가 아닌 인식되는 크기를 최적화합니다. 크기 조정 알고리즘을 통해 3미터 떨어진 Surface Hub 10에 표시된 24픽셀 글꼴이 몇 센티미터 떨어진 5인치 휴대폰에 표시된 24픽셀 글꼴과 동일한 시인성을 보입니다.

크기 조정 시스템의 작동 방식 때문에 XAML 앱을 디자인할 때 실제 물리적 픽셀이 아닌 유효 픽셀로 디자인합니다. 유효 픽셀(epx)은 가상 측정 단위이며, 화면 밀도와 무관하게 레이아웃 크기와 간격을 표시하는 데 사용됩니다. 지침에서는 epx, ep, px를 번갈아 사용합니다.

디자인할 때는 픽셀 밀도 및 실제 화면 해상도를 무시해도 됩니다. 대신, 크기 클래스에 대한 유효 해상도(유효 픽셀로 나타낸 해상도)를 고려해서 디자인합니다(자세한 내용은 화면 크기 및 중단점 문서 참조).

팁

이미지 편집 프로그램에서 화면 모형을 만드는 경우 DPI를 72로 설정하고 이미지 크기를 목표로 하는 크기 클래스의 유효 해상도로 설정하세요.

4의 배수씩 확장

UWP 앱에서 UI 요소의 크기, 여백, 위치는 항상 4epx의 배수여야 합니다.

XAML은 크기가 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, 400%인 다양한 디바이스에서 확장됩니다. 기준 단위는 정수를 이 안정화까지 스케일링할 수 있는 4입니다(예: 4 x 125% = 5, 4 x 150% = 6). 4의 배수를 사용하면 모든 UI 요소가 전체 픽셀에 맞춰지고, UI 요소의 선명하고 날카로운 가장자리가 보장됩니다. (텍스트에는 이 요구 사항이 없으며, 해당 크기와 위치를 지정할 수 있습니다.)

주요 콘텐츠로 건너뛰기

이 브라우저는 더 이상 지원되지 않습니다.

최신 기능, 보안 업데이트, 기술 지원을 이용하려면 Microsoft Edge로 업그레이드하세요.

반응형 디자인 기술

• 아티클
• 09/27/2022
• 읽는 데 8분 걸림

이 문서의 내용

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

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

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

  화면에 더 많은 콘텐츠를 배치하여 사용자가 수행해야 하는 이동 작업을 줄입니다.

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

  특정 디바이스에 특정 디바이스 기능이 많을 확률이 높습니다. 예를 들어 노트북에는 위치 센서와 카메라가 있을 수 있지만 TV에는 이러한 기능이 없을 수 있습니다. 앱은 사용할 수 있는 기능을 감지하고 이러한 기능을 사용하게 하는 기능을 활성화합니다.

• 입력에 최적화하기 위해

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

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

팁

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

위치 변경

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

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

크기 조정

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

재배치

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

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

표시/숨기기

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

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

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

• 메일 앱에서 사용자의 아바타를 표시할 수 있습니다.
• 음악 앱에서 앨범 또는 아티스트에 대한 자세한 내용을 표시할 수 있습니다.
• 동영상 앱에서는 배우 및 스탭 세부 정보를 표시하는 것과 같이 영화나 프로그램에 대한 추가 정보를 표시할 수 있습니다.
• 앱에서는 열을 나누어 좀 더 자세한 내용을 표시할 수 있습니다.
• 앱에서는 세로로 접히고 가로로 펼쳐지는 항목을 사용할 수 있습니다. 휴대폰 또는 패블릿에서 더 큰 디바이스로 전환할 경우 누적된 목록 항목이 바뀌면서 목록 항목의 행과 메타데이터 열이 표시될 수 있습니다.

바꾸기

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

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

다시 설계

특정 디바이스에 보다 적합하도록 앱 아키텍처를 축소하거나 분기할 수 있습니다. 이 예제에서 창을 확장하면 전체 목록/세부 정보 패턴이 표시됩니다.

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