빠른 시작: 터치식 입력(XAML)

Applies to Windows and Windows Phone

장치에는 여러 손가락을 사용해서 탭하기, 끌기 또는 손가락 모으기와 같은 여러 입력 조작을 동시에 생성할 수 있는 멀티 터치 화면이 있는 경우가 있습니다. Windows 런타임은 터치식 입력을 처리하는 여러 다양한 메커니즘을 제공하여 사용자가 안심하고 이용할 수 있는 몰입형 작업 환경을 만들 수 있도록 합니다. 이 빠른 시작에서는 C++, C# 또는 Visual Basic으로 작성한 Windows 런타임 앱에서 터치식 입력을 사용하는 기본 방법을 소개합니다. 자세한 코드 예제를 보려면 입력 샘플을 참조하세요.

C++, C# 또는 Visual Basic을 사용하여 Windows 런타임 앱을 처음 개발하는 경우:  다음 항목을 검토하여 여기서 설명하는 기술에 대해 알아보세요.

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

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

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

C++로 작성한 Windows 런타임 앱용 로드맵

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

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

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

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

사용자 환경 지침:  

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

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

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

입력: XAML 사용자 입력 이벤트 샘플

입력: 장치 접근 권한 값 샘플

입력: 조작 및 제스처(C++) 샘플

입력: 터치 적중 횟수 테스트 샘플

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

사전 요구 사항

사용자가 C++, C# 또는 Visual Basic를 사용하여 기본 Windows 런타임 앱을 만들 수 있다고 가정합니다.

이 자습서를 완료하려면 다음을 수행해야 합니다.

사용자 설치 환경 지침(모범 사례)

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

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

터치식 입력 소개

많은 장치에서는 대부분의 사용자 입력을 위해 터치를 사용합니다. 멀티 터치 화면에서 사용자가 자연스러운 방식으로 장치를 조작할 수 있습니다. 앱에 터치 및 조작 지원을 추가하면 사용자 환경이 크게 향상될 수 있습니다. 그러나 사용자가 안심하고 앱을 사용할 수 있도록 터치 지원을 디자인할 때는 주의해야 합니다. 또한 앱이 터치 방식으로 최적화되더라도 전형적인 마우스 및 키보드 입력을 처리할 수 있도록 해야 합니다.

C++, C# 또는 Visual Basic을 사용하여 Windows 런타임 앱에서 터치식 입력을 처리하는 방식에는 여러 가지가 있습니다. 기본 제공 컨트롤 라이브러리는 표준 조작, 애니메이션 물리적 효과 및 시각적 피드백을 사용하여 기본 터치, 마우스 및 키보드 지원을 제공합니다.

사용자 지정된 터치 지원이 필요한 경우 프레임워크가 제공하는 기능을 사용하고 이 빠른 시작 뒷부분에서 설명하는 터치 최적화를 위한 몇 가지 간단한 지침을 따를 수 있습니다.

터치 및 조작 지원을 직접 구현할 수 있지만 사용자들은 앱의 요소와의 직접적 조작이 이루어지는 직관적인 환경을 기대한다는 점에 유의하세요. 간편성 및 검색 가능성을 위해 기본 제공 지원을 기반으로 사용자 지정 터치 지원을 모델링해야 합니다. 또한 사용자의 불확실성을 피하고 활용도를 높이기 위해서는 모든 조작에 대한 시각적 피드백을 바로 제공해야 합니다.

세 가지 다른 추상화 단계로 나뉘는 UIElement 이벤트를 처리하여 사용자 지정된 터치를 지원할 수 있습니다. Tapped와 같은 수준 높은 이벤트를 사용하여 단순한 조작에 응답할 수 있습니다. 포인터 이벤트는 포인터 동작 및 눌렀다 떼는 제스처와 같은 낮은 수준의 세부 정보를 제공합니다. 조작 이벤트는 심지어 제스처 속도, 관성 및 멀티 터치 데이터와 같은 낮은 수준의 세부 정보도 제공합니다. 이러한 이벤트는 터치 및 마우스 입력을 둘 다 자동으로 지원하지만, 필요한 경우 실제 입력 장치를 구별할 수 있는 정보도 제공합니다.

제스처

제스처는 터치식 입력 데이터를 탭하기, 끌기 및 손가락 모으기와 같은 일련의 일반적인 동작으로 해석하는 수준 높은 방법을 제공합니다. Windows 8에서 일반적으로 사용되는 몇 가지 제스처는 다음과 같습니다.

조작설명
탭하기손가락 하나로 화면을 터치하고 뗍니다.
길게 누르기손가락 하나로 화면을 터치한 다음 누르고 있습니다.
밀기하나 이상의 손가락으로 화면을 터치하고 같은 방향으로 움직입니다.
살짝 밀기하나 이상의 손가락으로 화면을 터치하고 같은 방향으로 짧게 움직입니다.
손가락 모으기둘 이상의 손가락으로 화면을 터치하고 모으거나 벌립니다.
회전둘 이상의 손가락으로 화면을 터치하고 시계 방향으로 또는 시계 반대 방향으로 호를 그리며 움직입니다.
늘이기 둘 이상의 손가락으로 화면을 터치하고 늘리면서 움직입니다.

 

Tapped, DoubleTapped, RightTappedHolding와 같은 수준 높은 이벤트를 처리하여 단순한 터치 및 마우스 제스처에 응답할 수 있습니다. IsTapEnabled, IsDoubleTapEnabled, IsRightTapEnabledIsHoldingEnabledfalse로 설정하여 특정 요소에 대해 이러한 제스처를 사용할 수 없게 설정할 수도 있습니다.

PointerMoved와 같은 포인터 이벤트를 사용하여 밀기와 같은 간단한 한 손가락 조작을 지원할 수 있습니다.

손가락 모으기와 같은 멀티 터치 조작과 끌기처럼 관성과 속도 데이터를 사용하는 조작의 경우 조작 이벤트를 사용합니다. 조작 이벤트가 제공하는 정보는 수행된 조작 형식이 아니며 오히려 위치, 변형 델타 및 속도와 같은 터치 데이터에 해당합니다. 이 터치 데이터를 사용하여 수행된 조작 유형을 파악할 수 있습니다. 그러나 이 정보를 동등한 조작으로 변환하는 것은 사용자의 책임입니다.

포인터 이벤트 사용

포인터 이벤트는 터치 및 마우스 입력을 자동으로 지원하며 기존의 마우스 이벤트를 바꿉니다.

터치식 포인터는 탭하기 및 밀기와 같은 한 손가락 조작으로 제한되며 속도 기반 조작을 지원하지 않습니다. 한 손가락을 사용한 화면 터치는 화면에 손가락을 댈 때는 PointerPressed, 손가락을 뗄 때는 PointerReleased, 화면에서 손가락을 끌 때는 PointerMoved와 같은 동등한 Windows 런타임 포인터 이벤트로 변환됩니다. C++, C# 또는 Visual Basic으로 작성된 Windows 런타임 앱에서 사용되는 기타 포인터 이벤트로는 PointerExitedPointerEntered가 있습니다. 포인터 이벤트에 대한 이벤트 인수는 PointerRoutedEventArgs입니다.

다음 예제에서는 PointerPressed, PointerReleasedPointerExited 이벤트를 사용하여 Rectangle 개체에 대한 탭하기 조작을 처리하는 방법을 보여 줍니다.

먼저 이름이 TestRectangleRectangle이 XAML에 만들어지고 PointerPressed, PointerReleasedPointerExited 이벤트에 대한 이벤트 처리기가 추가됩니다.



<Rectangle Name="TestRectangle"
  Height="100" Width="200" Fill="Blue"
  PointerPressed="TestRectangle_PointerPressed"
  PointerReleased="TestRectangle_PointerReleased"
  PointerExited="TestRectangle_PointerExited" />

다음에는 포인터 이벤트에 대한 이벤트 처리기가 만들어집니다. PointerPressed 이벤트 처리기는 RectangleHeightWidth를 늘립니다. PointerReleased 이벤트 처리기는 HeightWidth를 시작 값으로 다시 설정합니다. 마지막으로 PointerExited 이벤트 처리기도 HeightWidth를 시작 값으로 다시 설정합니다.



private void TestRectangle_PointerPressed(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Change the size of the Rectangle
    if (null != rect)
    {
        rect.Width = 250;
        rect.Height = 150;
    }
}

private void TestRectangle_PointerReleased(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Reset the dimensions on the Rectangle
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

private void TestRectangle_PointerExited(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Finger moved out of Rectangle before the pointer exited event
    // Reset the dimensions on the Rectangle
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

조작 이벤트 사용

앱에서 여러 손가락 조작 또는 속도 데이터를 사용하는 조작을 지원해야 할 경우 조작 이벤트를 사용해야 합니다. 조작 이벤트를 사용하여 끌기, 손가락 모으기 및 길게 누르기와 같은 조작을 감지할 수 있습니다. 다음은 C++, C# 또는 Visual Basic으로 작성한 Windows 런타임 앱에 대한 조작 이벤트 및 관련 유형 목록입니다.

이벤트 또는 클래스설명
ManipulationStarting event 조작 프로세서가 처음 만들어질 때 발생합니다.
ManipulationStarted event 입력 장치가 UIElement에 대한 조작을 시작할 때 발생합니다.
ManipulationDelta event 입력 장치가 조작 중에 위치를 바꿀 때 발생합니다.
ManipulationInertiaStarting event 조작하는 동안 입력 장치와 UIElement 개체의 연결이 끊어지고 관성이 시작될 때 발생합니다.
ManipulationCompleted event UIElement에 대한 조작 및 관성이 완료될 때 발생합니다.
ManipulationStartingRoutedEventArgs ManipulationStarting 이벤트에 대한 데이터를 제공합니다.
ManipulationStartedRoutedEventArgs ManipulationStarted 이벤트에 대한 데이터를 제공합니다.
ManipulationDeltaRoutedEventArgs ManipulationDelta 이벤트에 대한 데이터를 제공합니다.
ManipulationInertiaStartingRoutedEventArgs ManipulationInertiaStarting 이벤트에 대한 데이터를 제공합니다.
ManipulationVelocities 조작이 발생하는 속도를 설명합니다.
ManipulationCompletedRoutedEventArgs ManipulationCompleted 이벤트에 대한 데이터를 제공합니다.

 

제스처는 일련의 조작 이벤트로 구성됩니다. 각 제스처는 사용자가 화면을 터치할 때와 같은 ManipulationStarted 이벤트로 시작됩니다. 다음에는 하나 이상의 ManipulationDelta 이벤트가 발생합니다. 예를 들어 화면을 터치한 다음 손가락을 화면에서 끌면 많은 ManipulationDelta 이벤트가 발생합니다. 마지막으로 조작이 완료되면 ManipulationCompleted 이벤트가 발생합니다.

참고  터치 스크린 모니터가 없는 경우 마우스 및 마우스 휠 인터페이스를 사용하여 시뮬레이터에서 조작 이벤트 코드를 테스트할 수 있습니다.

다음 예제에서는 ManipulationDelta 이벤트를 사용하여 끌기 조작을 처리하는 방법을 보여 줍니다. 이 샘플은 화면에서 끌 수 있는 Rectangle을 만듭니다.

먼저 이름이 TestRectangle이며 HeightWidth가 200인 Rectangle이 XAML에 만들어집니다.



<Rectangle Name="TestRectangle"
  Width="200" Height="200" Fill="Blue" 
  ManipulationMode="All"/>

다음에는 Rectangle을 변환하기 위해 이름dragTranslation이 인 전역 TranslateTransform이 만들어집니다. ManipulationDelta 이벤트를 처리하기 위해 이벤트 처리기가 Rectangle에 추가되고 dragTranslationRectangleRenderTransform에 추가됩니다. 마지막으로 ManipulationDelta 이벤트 처리기에서 Rectangle의 위치가 Delta 속성의 TranslateTransform을 사용하여 업데이트됩니다.



// Global Transform used to change the position of the Rectangle.
private TranslateTransform dragTranslation;

// Constructor
public MainPage()
{
    InitializeComponent();

    // Add handler for the ManipulationDelta event
    TestRectangle.ManipulationDelta += Drag_ManipulationDelta;
    dragTranslation = new TranslateTransform();
    TestRectangle.RenderTransform = this.dragTranslation;
}

void Drag_ManipulationDelta(object sender, 
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

UI 디자인 및 터치식 입력

고유한 조작 지원을 구현하는 경우 사용자들은 앱의 UI 요소를 직접 조작하는 직관적인 환경을 기대한다는 것에 유의하세요. 플랫폼 컨트롤 라이브러리(HTMLXAML)에서 항목이 일관되고 검색 가능하도록 사용자 지정 조작을 모델링하는 것이 좋습니다. 이러한 라이브러리의 컨트롤은 표준 조작, 애니메이션 효과를 준 물리적 효과, 시각적 피드백 및 접근성을 비롯하여 사용자 조작 환경 전체를 제공합니다. 요구 사항이 명확하게 잘 정의되어 있으며 기본 제스처가 시나리오를 지원하지 않는 경우에만 사용자 지정 조작을 만드세요.

사용자 인터페이스의 디자인 방식에 따라 앱에서 터치 방식으로 입력하기가 쉬워질 수도 있고 그렇지 않을 수도 있습니다. 앱을 터치 방식으로 최적화하려면 다음 지침을 따르세요.

  • 마우스 포인터와 손가락 끝은 크기가 서로 달라야 합니다. 터치 정확도를 보장하고 손가락으로 중요한 정보를 가리지 않도록 하려면 UI 요소가 더 커야 합니다.
  • 항상 터치 조작을 위한 즉각적이고 직접적인 시각적 피드백을 제공합니다. 예를 들어 강조 표시 또는 도구 설명을 사용하여 현재의 터치 대상을 나타내 다른 대상이 실수로 활성화되지 않도록 할 수 있습니다.
  • 이동과 같은 조작 시 자연스러운 느낌을 주기 위해서는 가속 및 관성과 같은 물리적 효과를 사용하세요.
  • 사용자가 보다 유용한 상태에서 작업하도록 하려면 끌기 지점 및 기타 제약 조건을 사용하세요.

터치와 관련된 추가 사용자 환경 디자인 지침에 대해서는 사용자 조작 지침을 참조하세요.

라우트된 이벤트

여기서 언급한 모든 포인터 이벤트, 제스처 이벤트 및 조작 이벤트는 라우트된 이벤트로 구현됩니다. 즉, 원래 이벤트를 발생시킨 개체가 아닌 개체에서 이벤트를 처리할 수 있습니다. UI 요소의 부모 컨테이너 또는 루트 Page와 같은 개체 트리의 연속된 부모는 원래 요소가 처리하지 않는 경우에도 이러한 이벤트를 처리하도록 선택할 수 있습니다. 반대로, 이벤트를 처리하는 개체는 더 이상 부모 요소에 도달하지 않도록 이벤트를 처리된 것으로 표시할 수 있습니다. 라우트된 이벤트 개념 및 라우트된 이벤트의 처리기를 작성하는 방법에 미치는 영향에 대한 자세한 내용은 이벤트 및 라우트된 이벤트 개요를 참조하세요.

관련 항목

개발자
사용자 조작에 응답
Windows 런타임 앱 개발(XAML)
빠른 시작: 터치식 입력
디자이너
터치 조작 디자인

 

 

표시:
© 2014 Microsoft