반응형 디자인 및 폼 팩터

스토어 앱은 데스크톱, 노트북, 태블릿 및 휴대폰에 있습니다. 이러한 양식 요소를 모두 적절하게 처리하도록 앱을 디자인합니다. 사용자는 여러 다른 장치 간을 이동하거나, 입력 방법을 전환하거나, 화면 방향을 바꾸거나, 모든 장치를 끄고 켤 수 있으며 앱은 이러한 사용자 동작에 따라 이동하고 변경되고 반응해야 합니다.

 

다양한 폼 팩터의 알람 앱

 

앱의 가변 뷰

Windows에서는 사용자가 중심이 됩니다. 사용자가 해당 앱을 사용하기로 결정한 어떤 장치에서든, 어떤 입력 모드를 사용하든, 어떤 방향으로든, 어떤 환경에서든 앱 UI가 두드러지게 하고 싶을 것입니다.

유연한 뷰를 제공하도록 앱을 디자인하면 사용자의 모니터 방향, 모바일 장치 또는 입력 방법의 변경 사항에 응답하여 앱 UI가 자연스럽게 재배치됩니다. Windows에서는 이러한 동작을 자동으로 관리합니다.

방향

알람 앱(가로) 가로   앱이 모든 폼 팩터에서 멋지게 표시되도록 가로 뷰로 디자인하세요. 다양한 폼 팩터가 가로 뷰에 미치는 영향을 고려합니다. 새로운 유형의 장치는 화면 공간에 대한 변경을 의미할 수 있습니다.
알람 앱(세로) 세로    일부 장치는 일반적으로 세로 방향으로 사용되지만, 대부분의 장치는 회전합니다. 세로 뷰에서 콘텐츠 레이아웃을 최적화하고 가능한 경우 기능이 유지되도록 합니다. 가로에서 세로로 전환하면 앱 너비가 거의 1/3로 변경되므로 세로 형식에서 디자인의 모양을 고려하는 것이 중요합니다.

 

여러 앱을 사용한 가변 레이아웃:

Windows: 크기를 조정할 수 있는 창의 유연성을 수용하도록 앱을 디자인하세요. 사용자의 앱 크기 조정에 관계없이 적절한 모양을 유지하려면 고유한 특정 뷰에 대한 레이아웃을 정의하고 자동으로 콘텐츠를 정렬 및 분배하는 가변 컨트롤을 사용해야 합니다.

크기 조정되어 화면에 나란히 배치된 계산기 앱, Bing 날씨 앱 및 Great British Chefs 앱

 

기본 제공 그래픽 크기 조정

사용자가 여러 양식 요소에서 앱에 액세스할 수 있다는 사실이 Windows가 실행될 수 있는 모든 화면 크기에 대해 UI를 다르게 디자인해야 함을 의미할까요? 화면 크기는 무척 다양합니다. 그렇다고 다른 UI 디자인이 필요한 것은 아닙니다. 기본 제공 크기 조정 기능은 소형 7인치 장치나 대형 30인치 모니터에서도 앱과 콘텐츠가 항상 알맞게 보이도록 해줍니다. 유연한 레이아웃을 사용하고 크기 조정 시 앱의 그래픽이 제대로 잘 보이도록 하기만 하면 됩니다.

자세한 내용은 픽셀 밀도에 맞추기에 대한 지침을 참조하세요.

2420픽셀과 920픽셀의 사진

 

입력 패턴:

Windows: 터치 조작을 위해 앱을 디자인할 경우 무료로 펜, 마우스 및 키보드 조작 지원을 받게 됩니다. 사용자는 한 가지 입력 방법에서 다른 입력 방법으로 전환할 수 있으며 어떤 앱 환경에서도 편리하게 작업할 수 있습니다. 태블릿에 키보드를 연결하려고 하세요? 전혀 문제가 없습니다. 앱은 사용자의 선택에 일관되게 예상대로 응답합니다.

자세한 내용은 터치 조작 디자인사용자 조작에 응답을 참조하세요.

장치 접근 권한 값

뛰어난 앱은 실행되는 장치를 최대한 활용합니다. Windows 8.1에서는 다음과 같은 장치 접근 권한 값을 기본적으로 지원합니다.

센서 아이콘 가속도계 및 기타 센서  장치에는 수많은 센서가 달려 있습니다. 앱은 주변 광원에 따라 디스플레이를 흐리게 하거나 밝게 할 수 있고 사용자가 디스플레이를 돌리면 UI를 다시 배치하고, 물리적 움직임에 반응할 수 있습니다. 센서에 대해 자세히 알아보세요.
지리적 위치 아이콘 지리적 위치  표준 웹 데이터나 지리적 위치 센서의 지리적 위치 정보를 사용하여 사용자가 이동하거나, 지도상 위치를 찾거나, 근처에 있는 사람, 활동, 목적지 등과 관련한 알림을 받도록 도와줍니다. 지리적 위치에 대해 자세히 알아보세요.
카메라 아이콘 카메라  기본 제공되거나 연결된 카메라에 사용자를 연결하여 채팅 및 회의에 참여하거나, vlog를 녹화하거나, 프로필 사진을 찍거나, 주변 소식을 기록하거나, 앱에서 제공하는 여러 기능을 이용할 수 있게 합니다.
근접 연결 아이콘 근접 연결  사용자가 장치를 물리적으로 연결하여 여러 사용자가 실제로 가까이에 있어야 가능한 환경(멀티플레이어 게임)을 구현할 수 있도록 합니다. 근접 연결 제스처에 대해 자세히 알아보세요.

 

앱 기능을 계획할 때 앱이 실행될 장치를 고려하세요. 원활한 앱 작동을 위해 필요한 장치 접근 권한 값이 있습니까? 혹은 일부 장치 기능이 없어도 문제가 없습니까? 앱 매니페스트에서 앱이 지원하는 접근 권한 값을 선언해야 하지만 앱 자체에 선택적 접근 권한 값을 위한 대안을 마련해놓을 수 있습니다. 예를 들어 여행 지도 앱에 사용자들이 지도에서 여행지를 추적하고, 위치에 태그를 지정하고, 여행 설명을 삽입하고, 소셜 미디어로 전송하고, 여행지에서 촬영한 사진이나 동영상을 추가할 수 있도록 지정할 수 있습니다. 지리적 위치는 필수 접근 권한 값일 수 있지만 카메라 지원은 선택적으로 지정할 수 있습니다. 장치에 카메라가 없으면 사용자는 다른 장치에서 촬영한 동영상이나 사진을 업로드할 수 있습니다. 뛰어난 앱은 모든 옵션을 포괄합니다.

데이터 로밍

사용자가 회사 데스크톱에서 집에 있는 태블릿으로 이동하면 어떻게 될까요? 해당 파일, 앱 상태 및 앱 기본 설정도 함께 집으로 이동됩니다. 컴퓨터 및 사용자 세션에 관계없이 중단했던 부분을 바로 선택할 수 있습니다.

로밍 및 앱 데이터 관리에 대해 자세히 알아보세요.

관련 항목

창 크기 및 화면에 맞게 크기 조정에 대한 지침

길고 좁은 레이아웃에 맞게 크기 조정에 대한 지침

레이아웃 선택