Windows Phone의 탐색, 방향 및 제스처

2013-12-05

적용 대상: Windows Phone 8 | Windows Phone OS 7.1

 

Windows Phone 앱은 사용자가 링크를 사용하여 여러 콘텐츠 뷰를 앞으로 탐색하고 하드웨어 뒤로 버튼을 사용하여 뒤로 이동할 수 있는 모델을 기반으로 합니다. 이 모델의 목표는 Windows Phone 페이지 탐색 모델에 맞는 뷰 기반 앱을 보다 쉽게 만들 수 있도록 하는 것입니다.

이 항목에는 다음 단원이 포함되어 있습니다.

 

페이지 탐색 모델은 허브 및 스포크 시스템입니다. 즉, 앱 내의 다른 페이지에 대한 링크를 명시적으로 추가하지 않을 경우 사용자가 뒤로 버튼을 사용하여 열어 본 페이지로 돌아가야 합니다. 이것은 웹 브라우저가 웹 페이지 검색 기록을 표시하고 탐색하는 방식과 유사합니다.

시스템은 사용자가 열어 본 각 페이지를 추적하고 후방 스택이라는 곳에 배치하여 사용자가 뒤로 버튼을 푸시할 때 후방 스택에 마지막으로 저장된 페이지가 제공되도록 합니다. 후방 스택에 배치할 수 있는 페이지 수에는 제한이 없습니다.

예를 들어 1페이지(p1)에서 2페이지(p2), p1, p2, 3페이지(p3), p1 순으로 탐색하는 사용자는 p1, p2, p1, p2, p3, p1의 후방 스택을 만듭니다. 사용자가 후방 스택의 두 번째 p2 인스턴스에서 콘텐츠를 수정했지만 뒤로 버튼을 사용하여 후방 스택의 첫 번째 p2 인스턴스로 돌아가는 경우 페이지에서 데이터를 새로 고치지 않으면 이전 변경 사항이 해당 페이지에 표시되지 않습니다. 뷰는 탐색 시 해당 지점에서 해당 페이지가 사용자에게 표시된 방식의 스냅숏입니다.

중요중요:

사용자의 앱 탐색에 영향을 줄 수 있는 페이지 간 링크 또는 버튼을 구현할 때는 주의해야 하며 입력 시 페이지를 새로 고칠지 여부를 고려합니다.

다음은 Windows Phone용 앱 페이지 모델 컨텍스트에서의 정의입니다.

  • 페이지: 사용자가 인식할 수 있는 영구적인 상태의 컬렉션입니다. 정보, 기억할 만한 콘텐츠 또는 다른 페이지에 대한 링크를 포함하는 페이지로 볼 수 있습니다.

  • 화면: 기억할 만한 콘텐츠를 포함하지 않는 시작 화면, 대화 상자 또는 팝업 창 등의 일반 UI 화면입니다. 사용자가 인식할 수 있는 영구적인 상태의 컬렉션이 아닙니다.

다음 그림은 페이지와 화면이 혼합된 가상 앱 구조를 보여 줍니다.

AP_CoreCon_PageModel

단순한 앱 구조

페이지 정보

앱은 다음 페이지로 구성됩니다.

  • 홈 페이지

  • Widget 페이지

  • Widget 세부 정보 페이지(피벗 포함)

  • Gadget 세부 정보 페이지

  • 검색 페이지

  • 설정 페이지

정의에 따라 페이지에는 사용자가 인식할 수 있는 영구 상태 컬렉션이 있어야 하므로 시작 화면과 로그인 화면은 페이지가 아닙니다. 시작 화면은 단순히 앱이 시작되기 전의 자리 표시자로 사용됩니다. 시작 화면에 대한 자세한 내용은 Windows Phone의 필수 그래픽, 시각적 표시기 및 알림을 참조하세요.

로그인 화면도 자격 증명을 입력하라는 메시지만 표시하므로 상태 데이터를 포함하지 않습니다.

중요중요:

Windows Phone의 모든 뷰에 페이지가 필요한 것은 아닙니다.

UI가 페이지여야 하는지 여부를 결정할 때 다음 질문을 할 수 있습니다.

  • 사용자가 명시적으로 페이지를 방문하려 합니까?

  • 사용자가 이 페이지에 있었음을 기억하고 페이지로 돌아오려 합니까?

페이지는 앱의 개별 콘텐츠 섹션을 포함하며 개별 화면으로 사용자에게 표시됩니다. 앱 내에서 콘텐츠를 표시하는 데 필요한 만큼의 페이지를 만들고 UI를 구성한 다음 원하는 경우 프레임 또는 페이지에서 이러한 페이지로의 탐색을 제공할 수 있습니다. 한 페이지만 필요한 단순한 앱도 있지만 여러 페이지가 필요한 복잡한 앱도 있습니다.

전체 화면 모드

상태 표시줄 또는 앱 바가 선택적으로 표시될 수 있는 전체 화면 모드를 구현할 수도 있지만, 기본적으로 표시되지 않으므로 표시 유형 속성을 사용하여 명시적으로 정의해야 합니다. 최선의 전체 화면 모드 구현 방법은 사용자가 콘텐츠 환경에 집중할 수 있도록 이러한 항목을 표시하지 않는 것입니다. 상태 표시줄 또는 앱 바(또는 둘 다)이 숨겨진 경우에도 알림과 수신 전화는 전체 화면 모드에서 계속 표시됩니다. 상태 표시줄 및 앱 바에 대한 자세한 내용은 Windows Phone의 필수 그래픽, 시각적 표시기 및 알림을 참조하세요.

참고참고:

전체 화면 모드 설정을 사용하면 사용자가 시계에 액세스할 수 없게 됩니다. 콘텐츠에 필요한 경우가 아니면 전체 화면 모드를 사용하지 않는 것이 좋습니다.

Windows Phone의 탐색은 페이지 간 전환으로 정의될 수 있습니다.

하지만 모든 전환 단계가 실제 탐색으로 간주되지는 않습니다. 예를 들어 시작 화면에서 홈 페이지로 이동하는 경우가 있습니다. 비페이지에서의 이동을 전환이라고 할 수 있습니다.

다음 단원에서는 효율적인 페이지 모델을 사용하기 위한 모범 사례를 제공합니다.

화면 및 비탐색 전환

로그인 화면과 같은 일시적인 UI의 경우 Popup 컨트롤을 사용하여 전체 탐색이 필요한 별도의 화면을 구현하지 않고 화면의 일부를 차지하는 콘텐츠를 표시할 수 있습니다. 코드에 BackKeyPress 이벤트를 추가하고 팝업 창이 표시되는 동안 e.Canceltrue로 설정하면 사용자가 뒤로 버튼을 사용하여 대화 상자를 닫을 수 있습니다.

다중 콘텐츠 뷰

여러 콘텐츠 섹션을 표시하는 페이지의 경우 페이지의 컨트롤을 새 DataContext에 다시 바인딩하기만 하면 탐색을 사용하지 않고도 여러 콘텐츠 간에 전환할 수 있습니다. 또한 페이지 내에서 UserControl의 여러 인스턴스를 로드하거나 기타 메커니즘을 사용해 다시 바인딩함으로써 새 콘텐츠를 표시할 수도 있습니다. 사용자가 항목을 앞뒤로 전환하는 방법을 선택할 수 있습니다. 예를 들어 이전다음 앱 바 버튼을 사용할 수 있습니다. 그러나 로컬 전환에는 뒤로 버튼을 너무 많이 사용하지 않는 것이 좋습니다.

상태 저장 및 삭제 표식 지정

앱이 삭제 표식을 지정한 경우 사용자가 단계를 다시 추적할 수 있도록 지정된 페이지에서 발생하는 전환의 로컬 기록을 저장할 수 있습니다. 이전/다음 탐색 등의 간단한 시나리오에서는 페이지 상태를 현재 인덱스에 저장만 하면 됩니다. 이와 같이 상태를 저장하고 NavigationContext API를 함께 사용하면 삭제 표시된 상태에서 되돌아올 때 데이터 집합을 이동하는 데 필요한 모든 정보가 제공됩니다. 연결된 항목의 자유 형식 검색과 같이 보다 복잡한 로컬 전환 기록이 있는 앱의 경우 해당 기록의 일부를 페이지 상태에 저장할 수 있지만 저장하는 항목에 적절한 제한을 두어야 합니다. 요점은 사용자가 하드웨어 뒤로 버튼을 사용할 때 이전에 열어 본 항목 대신 이전 페이지로 돌아가게 하는 것입니다.

다음 표에서는 페이지로 간주되는 앱의 공용 부분에 대한 정보를 제공합니다.

화면 유형

페이지

설명

시작 화면

아니요

시작 환경의 임시 부분이며 사용자가 이 화면으로 이동할 수 없습니다.

파노라마 환경

Windows Phone 앱에 대한 공용 홈 화면 방법

세부 정보 페이지

이 페이지는 쿼리 문자열을 통한 매개 변수가 있는 데이터 중심 앱에 공통적으로 사용됩니다.

피벗 항목

아니요

피벗 항목은 콘텐츠와 관련된 Pivot 컨트롤의 더 작은 구성 요소입니다.

로그인 또는 오류 대화 상자

아니요

앱 상태에 따라 트리거되는 임시 UI이며 사용자가 이 대화 상자로 직접 이동하지 않습니다.

항목 열거

아니요

유사한 콘텐츠를 탐색 수단이 아니라 내부 작업으로 검색하는 데 사용됩니다.

다음 표에서는 다양한 유형의 UI 구현을 처리하는 데 사용할 수 있는 방법을 요약하여 보여 줍니다.

UI 유형

구현

뒤로 버튼 동작

삭제 표식 동작

페이지

PhoneApplicationPage 컨트롤

뒤로 버튼을 누르면 자동으로 돌아가거나 앱이 종료됩니다. 데이터가 손실되는 경우를 제외하고 재정의하면 안 됩니다.

자동으로 후방 스택에 유지됩니다.

화면 임시 UI

팝업 또는 자식 창

앱이 팝업 창을 취소하도록 재정의되어야 합니다. 뒤로 버튼을 누르면 화면 키보드 및 MessageBox 컨트롤이 자동으로 취소됩니다.

앱이 탐색 도중 팝업 창을 종료하거나 취소해야 합니다.

항목 열거

UserControl

해당 없음: 상위 페이지 내에서 호스팅됩니다.

앱이 활성 항목을 적절하게 저장해야 합니다.

방향 및 축과 관련된 고려 사항

Windows Phone 플랫폼의 사용자는 특히 동영상, 지도 또는 게임 요소를 갖춘 앱이 세로 방향과 가로 방향에서 모두 작동하기를 기대합니다.

또한 탐색이 X축과 Y축에서 모두 작동하기를 기대하며, 위쪽에서 아래쪽은 물론 왼쪽에서 오른쪽으로 밀어 새 콘텐츠를 찾을 수 있기를 바랍니다. 앱이 두 방향과 축을 모두 사용할 수 있는 방법을 계획합니다.

가로 방향으로 실행할 수 있는 앱을 디자인하는 경우:

  • 앱이 세로 방향 모드로도 실행되는지 및 앱에 하나의 정적 방향만 있는지 여부를 결정합니다.

  • 가로 방향은 사용자가 화면 공간을 최대화하려는 경우에 유용합니다. 사용자가 휴대폰을 회전할 때 컨트롤 또는 레이아웃을 다시 정렬하여 이제 화면에 더 많은 콘텐츠가 들어갈 수 있다는 느낌을 향상시킵니다.

  • 가로 방향은 동영상 콘텐츠를 제공하는 데 주로 사용됩니다. 콘텐츠 사용이 앱 가로 방향 모드의 주 목적인 경우 컨트롤과 탐색을 사라지게 하여 뷰 환경을 개선합니다.

화면 방향

Windows Phone은 세로 방향, 가로 방향 왼쪽 및 가로 방향 오른쪽의 세 가지 화면 방향 뷰를 지원합니다.

세로 방향 뷰: 페이지가 세로 방향이고 조정 버튼이 휴대폰의 맨 아래에 표시되며 페이지의 높이가 너비보다 더 큽니다. 세로 방향 뷰는 앱의 기본 뷰입니다. 시작은 항상 세로 방향 뷰로 제공됩니다.

UX_Interactions_UINavigation_02

화면 방향

가로 방향 뷰: 가로 방향 뷰에서는 상태 표시줄 및 앱 바가 화면의 측면에 유지됩니다. 화면이 세로 방향 뷰일 때 사용자가 가로 방향 하드웨어 키보드를 바깥쪽으로 밀면 화면 방향이 가로 방향으로 변경됩니다(앱에서 지원되는 경우).

세로 방향 뷰에서 32픽셀인 상태 표시줄이 두 가로 방향 뷰에서는 72픽셀로 증가합니다. 이 치수는 전원 버튼이 화면의 중심에 있는 휴대폰의 측면에서 측정한 값입니다.

참고참고:

앱은 방향 변경을 지원하는 경우 왼쪽 또는 오른쪽 가로 방향 뷰만 지정할 수 없습니다.

화면 방향은 다음 표에 설명된 작업을 기준으로 변경됩니다.

시작 화면 방향

회전

종료 화면 방향

세로

60도 왼쪽

가로 방향 왼쪽

세로

60도 오른쪽

가로 방향 오른쪽

가로 방향 왼쪽

60도 오른쪽

세로

가로 방향 오른쪽

60도 왼쪽

세로

가로 방향 왼쪽 또는 오른쪽, 테이블에서 평면

30도 위

세로

방향 속성이 읽기 전용으로 설정되어 있으므로 방향을 프로그래밍 방식으로 전환할 수는 없지만 고정된 방향을 설정할 수 있습니다. 화면을 회전하면 화면 전환 애니메이션 효과가 재생됩니다.

앱에서 SupportedOrientations 속성을 사용하여 정적 방향 뷰를 정의할 수 있습니다. 텍스트 입력을 지원하는 앱은 가로 하드웨어 키보드가 있고 가로 방향 뷰를 지원한다고 가정해야 합니다.

참고참고:

텍스트 입력이 많은 가로 환경을 만들지 않는 것이 좋습니다.

앱 내 가로 방향 뷰 인식 시스템 구성 요소는 상태 표시줄, 앱 바, 앱 바 메뉴, 볼륨/벨소리/진동 표시, 푸시 알림 및 대화 상자입니다.

터치 제스처는 사용자가 Windows Phone UI와 상호 작용하는 주요 방법입니다. Windows Phone OS에서 터치 제스처는 터치 화면을 한두 손가락으로 탭하거나 미는 동작입니다.

Windows Phone SDK 에 제공된 컨트롤이 터치 상호 작용 요소로 사용됩니다. 모든 터치 상호 작용 요소는 항상 터치 상호 작용에 맞는 크기여야 합니다. 터치 대상에 대한 자세한 내용은 Windows Phone과 상호 작용 및 유용성을 참조하세요.

Windows Phone에서 지원되는 단일 터치 및 멀티 터치 제스처는 다음과 같습니다.

단일 터치

  • 두 번 탭

  • 이동

  • 터치

  • 길게 누르기

멀티 터치

  • 손가락 모았다 펴기

은 화면의 제한된 영역 안을 가볍게 한 번 터치하고 다시 화면 바깥쪽으로 나가는 것입니다.

UX_Interactions_Tap

탭 제스처에는 두 가지 동작이 연결되어 있습니다.

  • 손가락을 내리면 터치 표시가 제공됩니다.

  • 손가락을 올리면 작업이 실행됩니다.

또한 탭은 화면에서 모든 콘텐츠 형식의 이동을 중지합니다.

두 번 탭

두 번 탭은 제한된 영역 안을 빠르게 두 번 탭하는 것입니다.

UX_Interactions_DoubleTap

두 번 탭

두 번 탭하면 컨트롤 또는 앱의 확대 상태와 축소 상태가 전환됩니다. 앱이 현재 확대/축소 상태를 확인하고 적절하게 확대하거나 축소합니다. 앱이 확대 상태와 축소 상태를 정의합니다.

이동

이동은 한 손가락을 내리고 화면에서 임의 방향으로 이동하는 것입니다. 화면에서 손가락을 들면 이동 제스처가 종료됩니다.

UX_Interactions_Pan

이동

이동 제스처에는 두 가지 동작이 연결되어 있습니다.

  • 직접 조작하여 콘텐츠를 이동할 수 있습니다. 콘텐츠는 손가락의 이동을 따릅니다. 컨트롤 또는 앱에서 지원할 이동 방향을 결정할 수 있습니다. 이 이동은 가로, 세로 또는 지정한 다른 임의 방향일 수 있습니다. 콘텐츠를 중간 상태로 이동하면 콘텐츠가 가장 가까운 상태로 스냅되어야 합니다.

  • 이동은 특정 항목을 이동하거나 다시 정렬할 수 있습니다. 항목은 손가락을 따르며, 화면에서 손가락을 들면 새 위치에 놓입니다.

터치

터치는 한 손가락을 내리고 임의 방향으로 빠르게 이동하는 것이며 화면 바깥쪽에서 손가락을 들면 종료됩니다. 터치는 이동 제스처를 따를 수 있습니다.

UX_Interactions_Flick

터치 제스처는 콘텐츠를 한 영역에서 다른 영역으로 이동합니다. 특정 터치 방향 동작을 지원하도록 컨트롤 또는 앱을 구성할 수 있습니다. 이 동작은 가로, 세로 또는 지정한 다른 방향일 수 있습니다. 가로 또는 세로 경로를 지정하면 다른 방향의 이동이 세로 또는 가로 이동으로 변환됩니다.

터치는 전체 캔버스를 이동하지만 개발자가 대신 이동할 개별 개체를 지정할 수 있습니다.

손가락 모았다 펴기

손가락 모았다 펴기는 별도의 제한된 영역 안에서 두 손가락을 내린 다음 가깝게 이동하거나(모으기) 멀리 이동(펴기)하는 것입니다.

UX_Interactions_PinchAndStretch

손가락 모았다 펴기

손가락 모았다 펴기는 확대/축소 중심을 두 손가락의 중심에 놓고 콘텐츠를 연속 확대/축소합니다.

길게 누르기

길게 누르기는 제한된 영역 안에서 한 손가락을 내리고 정의된 시간 동안 유지하는 것입니다. 길게 누르기 제스처는 일반적으로 항목의 컨텍스트 메뉴나 옵션 페이지를 표시하는 데 사용해야 합니다.

UX_Interactions_TouchAndHold

길게 누르기

4개의 터치 지점

Windows Phone은 고유한 앱 상호 작용을 위해 동시 사용자 터치 입력 지점 4개를 지원합니다. 간단한 예로 게임 또는 악기 앱이 있습니다.

터치 가장자리가 3.5mm 이상 분리되어 있는 경우 지름이 7mm 이상인 화면 터치는 고유한 터치로 처리되며 모든 제스처가 지원됩니다.

또한 각 터치 지점은 프로세서 로드를 추가하므로 동시 터치 입력 지점을 3개 이상 구현하려는 경우 잠재적 성능 문제에 주의해야 합니다. Windows Phone은 터치 지점을 최대 10개까지 지원하지만 모든 하드웨어 화면이 5개 이상의 터치 지점을 지원하지는 않습니다.

표시:
© 2014 Microsoft