언어: HTML | XAML

사용자 조작에 응답(XAML)

Applies to Windows and Windows Phone

사용자 조작 플랫폼, 입력 소스(터치, 터치 패드, 마우스, 펜/스타일러스 및 키보드 포함), 모드(터치 키보드, 마우스 휠, 펜 지우개 등) 및 지원되는 사용자 조작에 대해 알아봅니다.

기본 입력과 조작 기능을 무료로 제공하는 방법, 사용자 조작 환경을 사용자 지정하는 방법 및 언어 프레임워크에서 플랫폼 조작 패턴이 공유되는 방법에 대해 설명합니다.

여기서는 지침, 모범 사례 및 예제를 통해 조작 기능을 활용하여 직관적이고 매력적인 몰입형 사용자 환경을 갖춘 앱을 빌드하는 방법을 설명합니다.

  이 항목의 내용은 C++, C# 또는 Visual Basic을 사용한 앱 개발과 관련이 있습니다.

JavaScript로 작성한 앱에 대해서는 사용자 조작에 응답(HTML)을 참조하세요.

DirectX 및 C++로 작성한 앱에 대해서는 사용자 조작에 응답(DirectX 및 C++)을 참조하세요.

사전 요구 사항:  앱을 처음 개발하는 경우 다음 항목을 검토하여 여기서 설명하는 기술에 대해 알아보세요.

C# 또는 Visual Basic을 사용하여 첫 Windows 스토어 앱 만들기

C++를 사용하여 첫 Windows 스토어 앱 만들기

C# 또는 Visual Basic으로 작성한 Windows 런타임 앱용 로드맵

C++로 작성한 Windows 스토어 앱용 로드맵

이벤트에 대한 자세한 내용은 이벤트 및 라우트된 이벤트 개요를 참조하세요.

앱 기능 전체 프로세스:  앱 기능 전체 프로세스 시리즈의 일부로 이 기능을 자세히 살펴보세요.

사용자 조작 전체 프로세스(XAML)

사용자 조작 사용자 지정 전체 프로세스(XAML)

사용자 환경 지침:  

플랫폼 컨트롤 라이브러리(HTMLXAML)는 표준 조작, 애니메이션 물리적 효과 및 시각적 피드백을 비롯하여 Windows 사용자 조작 환경 전체를 제공합니다. 사용자 지정 조작 지원이 필요 없는 경우에는 이러한 기본 제공 컨트롤을 사용하세요.

플랫폼 컨트롤이 충분하지 않으면 다음 사용자 조작 지침을 통해 입력 모드 전체에서 멋진 몰입형 조작 환경을 일관되게 제공합니다. 이러한 지침은 주로 터치식 입력을 중심으로 다루지만 터치 패드, 마우스, 키보드 및 스타일러스 입력에도 관련이 있습니다.

샘플:  이 기능의 작동 방식을 보려면 앱 샘플을 참조하세요.

입력: 장치 기능 샘플

입력 샘플

입력: GestureRecognizer를 사용한 조작 및 제스처

XAML 스크롤, 이동 및 확대/축소 샘플

입력: 잉크 샘플

사용자 조작 플랫폼 개요

터치 조작을 고려하여 앱 디자인: 터치식 입력이 점점 더 많은 장치에서 다양하게 지원되고 있으며 터치 조작은 사용자 환경의 기본 측면이 되었습니다.

터치가 사용자의 기본 조작 모드이므로 Windows 8 및 Windows Phone은 터치식 입력이 사용하기 쉽고, 정확하고, 응답이 빠르도록 최적화되었습니다. 믿을 수 있는 입력 모드(예: 마우스, 펜 및 키보드)는 완벽하게 지원되며 터치와 기능이 일치합니다(제스처, 조작 및 조작 방식 참조). 전형적인 입력 모드가 제공하는 작업 속도, 정확도 및 촉각 피드백은 많은 사용자에게 친숙하며 매력적으로 다가옵니다. 이러한 고유하고 특별한 조작 환경은 손상되지 않았습니다.

앱 디자인에 터치 조작을 추가하면 사용자 환경이 크게 향상될 수 있습니다. 이러한 환경을 창조적으로 디자인하려면 최대한 많은 사용자에게 환영받는 포괄적인 기능 및 기본 설정을 지원해야 합니다. 이렇게 해야만 자신의 앱으로 더 많은 고객을 이끌 수 있습니다.

사용자 조작 플랫폼은 유연성과 기능이 점점 증가하는 기능 계층을 기반으로 합니다.

기본 제공 컨트롤

언어 프레임워크를 통해 제공되는 기본 제공 컨트롤을 활용하여 전체 플랫폼 사용자 조작 환경을 제공합니다. 이 기능은 대부분의 앱에서 잘 작동합니다.

기본 제공 컨트롤은 모든 입력 모드에서 일관되고 매력적인 조작 환경을 제공하는 동시에 처음부터 터치 방식에 최적화되도록 디자인되었습니다. 직접 조작(이동, 확대/축소, 회전, 끌기) 및 사실적 관성 동작과 결합되어 Windows 플랫폼에서 일관되게 모범 사례를 따르는 강력한 몰입형 조작 환경을 가능하게 하는 포괄적인 제스처(길게 누르기, 탭하기, 밀기, 살짝 밀기, 손가락 모으기, 벌리기, 돌리기)를 지원합니다.

컨트롤 라이브러리에 대한 자세한 내용은 컨트롤 및 콘텐츠 추가(C#/VB/C++ 및 XAML로 작성한 Windows 스토어 앱)를 참조하세요.

앱 뷰의 이동/스크롤 및 확대/축소 설정을 통해 사용자 조작 환경을 조정할 수 있습니다. 앱 뷰는 사용자가 앱과 해당 콘텐츠를 액세스하고 조작하는 방법을 제어합니다. 뷰는 관성, 콘텐츠 경계 바운스 및 끌기 지점과 같은 동작도 제공합니다.

이동/스크롤 설정은 뷰 콘텐츠가 뷰포트에 맞지 않을 때 사용자가 단일 뷰(예: 잡지나 책의 페이지, 컴퓨터의 폴더 구조, 문서 라이브러리 또는 사진 앨범) 내에서 탐색하는 방법을 나타냅니다.

  • Applies to Windows

확대/축소 설정은 광학 줌 및 SemanticZoom 컨트롤에 모두 적용됩니다. 시맨틱 줌은 두 개의 고유한 분류 모드(또는 확대/축소 수준)를 사용하여 단일 뷰 내에서 대규모의 관련 데이터 또는 콘텐츠 집합을 제공하고 탐색하기 위한 터치 최적화 기법입니다. 이 기능은 단일 보기 내의 이동 및 스크롤과 비슷하며 이러한 기능을 시맨틱 줌과 함께 사용할 수 있습니다.

앱 보기를 사용하여 이동/스크롤 및 확대/축소 동작을 수정하면 나중에 설명하는 것처럼 포인터 및 제스처 이벤트 처리를 통해 가능한 것보다 매끄러운 조작 환경을 제공할 수 있습니다.

앱 뷰에 대한 자세한 내용은 레이아웃 및 뷰 정의를 참조하세요.

확대/축소에 대한 자세한 내용은 광학 줌 및 크기 조정에 대한 지침 또는 시맨틱 줌에 대한 지침을 참조하세요.

이동/스크롤에 대한 자세한 내용은 이동에 대한 지침을 참조하세요.

포인터, 제스처 및 조작 이벤트

포인터는 활성 입력 소스(터치, 터치 패드, 마우스 또는 펜)에서 화면 위치와 같은 기본 정보를 표시하는 통합된 이벤트 메커니즘이 적용된 일반 입력 유형입니다. 제스처는 탭하기와 같은 간단한 정적 조작부터 확대/축소, 이동 및 회전과 같은 복잡한 조작까지 다양합니다. 자세한 내용은 제스처, 조작 및 조작 방식을 참조하세요.

참고  

정적 제스처 이벤트는 조작이 완료된 후 트리거됩니다. 조작 제스처 이벤트는 진행 중인 조작을 나타냅니다. 조작 제스처 이벤트는 사용자가 요소를 터치할 때 발생하기 시작하고, 손가락을 들거나 조작이 취소될 때까지 계속됩니다.

포인터 및 제스처 이벤트에 액세스하면 게임, 사용자 지정 컨트롤 및 피드백 화면 효과, 제스처 확장, 원시 입력 데이터 처리 및 기타 사용자 지정 조작에 터치 조작 디자인 언어를 사용할 수 있습니다.

포인터 이벤트

다음 이벤트는 하위 수준 제스처에 해당합니다. 이 수준의 이벤트는 전형적인 마우스 입력 이벤트와 유사하지만 사용자 입력 제스처 및 장치에 대한 보다 자세한 정보를 제공합니다.

이벤트설명
PointerCaptureLost 요소와 포인터의 연결이 끊어질 때 발생합니다.
PointerEntered 포인터가 요소 경계 안으로 들어올 때 발생합니다.
PointerExited 포인터가 요소 경계를 벗어날 때 발생합니다.
PointerMoved 포인터가 요소 경계 내에서 이동할 때 발생합니다.
PointerPressed 요소 경계 내에서 누르기 제스처가 발생할 때 발생합니다.
PointerReleased 요소 경계 내에서 떼기 제스처가 발생할 때 발생합니다.
PointerWheelChanged 사용자가 마우스 휠 위치를 바꿀 때 발생합니다.

 

PointerRoutedEventArgs 사용

모든 포인터 이벤트는 이벤트 데이터에 대해 PointerRoutedEventArgs를 사용합니다. 이 클래스는 친숙한 HandledOriginalSource 속성 외에 다음 멤버를 제공합니다.

멤버설명
Pointer property 입력 장치 및 장치 유형을 식별하는 Pointer 개체를 가져옵니다.
GetCurrentPoint method 이벤트 발생 시 포인터 위치 및 장치 상태에 대한 포괄적인 정보를 제공하는 PointerPoint 개체를 가져옵니다.
GetIntermediatePoints method 현재 및 이전 입력 이벤트 사이의 포인터 위치 및 장치 상태를 나타내는 PointerPoint 개체 목록을 가져옵니다. 이 멤버는 일련의 포인터 작업이 보다 복잡한 제스처를 나타내는지 여부를 확인하는 데 유용합니다.
KeyModifiers property 포인터 이벤트와 동시에 Ctrl 또는 Shift와 같은 보조 키를 눌렀는지 여부를 나타냅니다.

 

포인터 캡처

일부 경우에 포인터가 더 이상 요소 위에 있지 않아도 요소가 PointerMoved 이벤트를 계속 수신하게 하려고 할 수 있습니다. 이것을 포인터 캡처하고 합니다. 예를 들어 이 기능은 단순히 사용자가 순간적으로 요소 경계 외부로 포인터를 이동했다는 이유로 중단되어서는 안 되는 끌기 작업을 수행할 때 유용합니다. 특정 요소에 포인터 캡처가 있는 경우 다른 요소 위로 포인터를 가져가도 PointerMoved 이벤트가 발생하지 않습니다.

CapturePointer, ReleasePointerCaptureReleasePointerCaptures 메서드를 사용하여 포인터 캡처를 사용하거나 사용하지 않도록 설정할 수 있습니다. 여러 개의 입력 장치나 터치 지점이 있어도 마찬가지입니다. 포인터 캡처가 유효한 동안 PointerCaptures 속성을 사용하여 캡처된 각 포인터를 나타내는 Pointer 개체를 검색할 수 있습니다.

포인터 캡처를 사용하려면 이동 중에 마우스 왼쪽 단추, 손가락 또는 스타일러스 단추를 누르고 있어야 합니다. 단추를 떼거나 손가락을 들자마자 포인터 캡처가 유실되고 PointerCaptureLost 이벤트가 발생합니다.

제스처 이벤트

다음 이벤트는 상위 수준 제스처에 해당합니다. 이러한 이벤트는 동일한 사용자 작업에 대해 발생하는 하위 수준 이벤트 외에 추가로 발생합니다. 예를 들어 Tapped 이벤트는 PointerPressedPointerReleased 이벤트가 발생한 후에 발생합니다. 일반적으로 특정 제스처 부분에 응답해야 하는 경우가 아니면 하위 수준 이벤트 중 하나를 사용해야 합니다. 예를 들어 누르기 및 떼기에 대해 다른 작업을 수행해야 할 수 있습니다.

이벤트설명
Tapped 요소의 IsTapEnabled 속성이 false로 설정되어 있지 않을 경우 요소를 클릭하거나 탭할 때 발생합니다.
RightTapped 요소의 Holding 속성이 IsRightTapEnabled로 설정되어 있지 않을 경우 요소를 마우스 오른쪽 단추로 클릭할 때 또는 false 이벤트 후에 발생합니다.
DoubleTapped 요소의 IsDoubleTapEnabled 속성이 false로 설정되어 있지 않을 경우 요소를 연속해서 두 번 클릭하거나 탭할 때 발생합니다.
Holding 요소의 IsHoldingEnabled 속성이 false로 설정되어 있지 않을 경우 포인터로 요소를 길게 누를 때 발생합니다. 이 이벤트는 마우스 입력에 대해서는 발생하지 않습니다. 동급의 마우스 입력에 대해서는 대신 RightTapped를 사용합니다.

 

이러한 각 이벤트는 고유한 이벤트 인수 형식을 갖지만 모두 공통된 일부 멤버를 공유합니다. 이러한 이벤트 중 하나의 처리기에서 이벤트 인수의 PointerDeviceType 속성을 확인하여 입력이 마우스, 터치 또는 펜 중에서 어떤 방식으로 진행된 것인지 확인할 수 있습니다. 또한 이벤트 인수의 GetPosition 메서드를 호출하여 화면 또는 지정된 요소를 기준으로 이벤트의 상대 좌표를 확인할 수 있습니다.

조작 이벤트

다음 이벤트는 훨씬 낮은 수준의 제스처에 해당합니다. 이 수준의 이벤트는 사용자 입력 제스처에 대한 대부분의 정보를 제공합니다.

이벤트설명
ManipulationStarting 조작 프로세서가 처음 만들어질 때 발생합니다.
ManipulationStarted 입력 장치가 UIElement에 대한 조작을 시작할 때 발생합니다.
ManipulationDelta 입력 장치가 조작 중에 위치를 바꿀 때 발생합니다.
ManipulationInertiaStarting 조작하는 동안 입력 장치와 UIElement 개체의 연결이 끊어지고 관성이 시작될 때 발생합니다.
ManipulationCompleted UIElement에 대한 조작 및 관성이 완료될 때 발생합니다.

 

이름에서 알 수 있는 것처럼 이러한 이벤트는 마우스, 터치 및 펜 입력으로 UI의 요소를 조작하는 데 적합합니다. 예를 들어 이러한 이벤트를 사용하여 사용자가 화면 둘레로 요소를 끌고 사실적 관성 효과를 제공하도록 할 수 있습니다. 다양한 이벤트 인수 클래스는 PointerDeviceType, HandledOriginalSource와 같은 일반적인 속성 외에도 포인터 위치, 변경 및 속도에 대한 자세한 정보도 제공합니다.

조작 이벤트를 사용하는 간단한 예제를 보려면 빠른 시작: 터치식 입력을 참조하세요.

적중 횟수 테스트

UIElement 위로 사용자 입력 제스처가 발생하면 해당 이벤트는 입력에 보이는 경우에만 해당 요소에 대해 발생합니다. 그렇지 않은 경우 제스처는 이 요소를 통과해서 시각적 트리의 기본 요소 또는 상위 요소로 이동합니다.

요소가 마우스, 터치 및 스타일러스 입력에 보이는지 여부를 확인하는 것을 적중 횟수 테스트라고 합니다. 적중 횟수 테스트에 영향을 미치는 요소에는 여러 가지가 있지만 IsHitTestVisible 속성을 확인하여 지정된 요소가 입력 이벤트를 발생시킬 수 있는지 여부를 확인할 수 있습니다. 이 속성은 요소가 다음 조건을 충족하는 경우에만 true를 반환합니다.

  • 해당 Visibility 속성 값이 Visible인 경우
  • 해당 Background 또는 Fill 속성 값이 null(Visual Basic에서는 Nothing)이 아닌 경우. 이 값인 null이면 투명해져서 적중 횟수 테스트가 보이지 않습니다. 요소를 투명하고 적중 횟수 테스트가 가능하게 만들려면 관련 속성을 Transparent 대신 null로 설정해야 합니다.
  • 요소가 컨트롤이면 해당 IsEnabled 속성 값은 true입니다.

일부 컨트롤에는 적중 횟수 테스트를 위한 특수한 규칙이 있습니다. 예를 들어 TextBlock 및 관련 컨트롤에는 Background 속성이 없지만 레이아웃 슬롯의 전체 영역 내에서 여전히 적중 횟수 테스트가 가능합니다. ImageMediaElement 컨트롤은 투명한 콘텐츠에 관계없이 정의된 직사각형 공간에 대해 적중 횟수 테스트가 가능합니다. 또한 대부분의 Panel 클래스는 적중 횟수 테스트가 가능하지 않지만 클래스에 포함된 요소에서 라우트된 사용자 입력 이벤트는 여전히 처리할 수 있습니다.

요소의 적중 횟수 테스트가 가능한지에 관계없이 사용자 입력 이벤트와 동일한 위치에 있는 요소를 알 수 있습니다. 이렇게 하려면 FindElementsInHostCoordinates 메서드를 호출합니다. 이름에서 알 수 있는 것처럼 이 메서드는 지정된 호스트 요소에 상대적인 위치에서 요소를 찾습니다. 그러나 적용된 변형 및 레이아웃 변경이 요소의 좌표계에 영향을 미칠 수 있으므로 지정된 위치에서 발견되는 요소에도 영향을 미칩니다.

앱 환경 사용자 지정

앱의 조작 환경을 더욱 사용자 지정하고 제어하려면 Windows 런타임 플랫폼 API를 사용합니다. 예를 들어 오른쪽 단추, 휠 단추, 이동(상하) 휠 또는 X 단추가 있는 마우스 장치와 펜 단추 및 지우개가 있는 펜 장치 같은 하드웨어 기능과 추가 구성 옵션을 처리할 수 있습니다.

대부분의 조작 API는 Windows.UI.XamlWindows.UI.Xaml.Input 네임스페이스에 있으며, 잉크 기능은 Windows.UI.Input.Inking을 통해 노출되고 입력 장치 데이터는 Windows.Devices.Input을 통해 노출됩니다.

새롭거나 수정된 제스처 및 조작을 통해 사용자 지정된 조작 환경을 제공하기 전에 다음 사항을 고려하세요.

  • 기존 제스처가 앱에 필요한 환경을 제공합니까? 기존 제스처를 지원하거나 해석하도록 앱을 간단히 적응시킬 수 있는 경우 확대/축소 또는 이동에 사용자 지정 제스처를 제공하지 않습니다.
  • 사용자 지정 제스처가 앱 간의 잠재적인 불일치를 보증합니까?
  • 제스처에 접촉 수와 같은 특정 하드웨어 지원이 필요합니까?
  • 필요한 조작 환경을 제공하는 컨트롤(예: ScrollViewer)이 있나요? 컨트롤이 본질적으로 사용자 입력을 처리할 수 있는 경우 사용자 지정 제스처 또는 조작도 필요할까요?
  • 사용자 지정 제스처 또는 조작을 통해 원활하고 자연스러운 조작 환경이 생성됩니까?
  • 조작 환경이 적합합니까? 조작이 접촉 수, 속도, 시간(권장되지 않음) 및 관성과 같은 항목에 따라 달라지는 경우 이러한 제약 조건 및 종속성이 일관되고 검색 가능하도록 해야 합니다. 예를 들어 사용자가 빠르고 느리게 해석하는 방식은 앱의 기능 및 환경에 대한 사용자 만족도에 직접적인 영향을 줄 수 있습니다.
  • 제스처 또는 조작이 사용자의 물리적 능력의 영향을 받습니까? 액세스할 수 있습니까?
  • 앱 바 명령 또는 일부 다른 UI 명령이 충분합니까?

즉, 요구 사항이 명확하게 잘 정의되어 있으며 시나리오를 지원할 수 있는 기본 제스처가 없을 경우에만 사용자 지정 제스처 및 조작을 만드세요.

관련 항목

개념
Windows 스토어 앱 개발(VB/C#/C++ 및 XAML)
터치 조작 디자인

 

 

표시:
© 2014 Microsoft