마우스 조작

  • 아티클

터치식 입력을 위해 Windows 앱 디자인을 최적화하고 기본적으로 기본 마우스 지원을 받으세요. 

mouse

마우스 입력은 가리키고 클릭할 때 정밀도가 필요한 사용자 조작에 가장 적합합니다. 이러한 내재된 정밀도는 터치의 부정확한 특성에 최적화된 Windows UI에서 자연스럽게 지원됩니다.

여기서 마우스 및 터치 입력은 터치가 해당 개체에서 직접 수행되는 물리적 제스처(예: 살짝 밀기, 슬라이딩, 끌기, 회전 등)를 통해 UI 요소의 직접 조작을 보다 밀접하게 에뮬레이트하는 기능입니다. 마우스를 조작하려면 일반적으로 핸들을 사용하여 개체의 크기를 조정하거나 회전하는 것과 같은 다른 UI 어푸던스가 필요합니다.

이 항목에서는 마우스 조작에 대한 디자인 고려 사항에 대해 설명합니다.

UWP 앱 마우스 언어

간결한 마우스 조작 집합은 시스템 전체에서 일관되게 사용됩니다.

용어 설명

마우스를 가져가서 알아보기

요소 위로 마우스를 가져가서 작업에 대한 약속 없이 더 자세한 정보 또는 시각적 개체(예: 도구 설명)를 표시합니다.

기본 작업을 마우스 왼쪽 단추로 클릭

요소를 마우스 왼쪽 단추로 클릭하여 기본 작업(예: 앱 시작 또는 명령 실행)을 호출합니다.

스크롤하여 보기 변경

스크롤 막대를 표시하여 콘텐츠 영역 내에서 위쪽, 아래쪽, 왼쪽 및 오른쪽으로 이동합니다. 스크롤 막대를 클릭하거나 마우스 휠을 회전하여 스크롤할 수 있습니다. 스크롤 막대는 콘텐츠 영역 내에서 현재 보기의 위치를 나타낼 수 있습니다(터치로 이동하면 비슷한 UI가 표시됨).

마우스 오른쪽 단추를 클릭하여 선택 및 명령

마우스 오른쪽 단추를 클릭하여 탐색 모음(사용 가능한 경우)과 전역 명령이 있는 앱 바를 표시합니다. 요소를 마우스 오른쪽 단추로 클릭하여 선택하고 선택한 요소에 대한 상황에 맞는 명령이 있는 앱 바를 표시합니다.

참고 선택 또는 앱 바 명령이 적합한 UI 동작이 아닌 경우 마우스 오른쪽 단추를 클릭하여 상황에 맞는 메뉴를 표시합니다. 그러나 모든 명령 동작에 앱 바를 사용하는 것이 좋습니다.
 

확대/축소할 UI 명령

앱 바에 UI 명령(예: + 및 -)을 표시하거나 Ctrl 키를 누르고 마우스 휠을 회전하여 확대/축소를 위해 손가락 모으기 및 스트레치 제스처를 에뮬레이트합니다.

회전할 UI 명령

앱 바에 UI 명령을 표시하거나 Ctrl+Shift를 누르고 마우스 휠을 회전하여 회전 제스처를 에뮬레이트합니다. 디바이스 자체를 회전하여 전체 화면을 회전합니다.

마우스 왼쪽 단추를 클릭하고 끌어서 재정렬

요소를 마우스 왼쪽 단추로 클릭하고 끌어서 이동합니다.

마우스 왼쪽 단추로 클릭하고 끌어서 텍스트 선택

선택 가능한 텍스트 내에서 마우스 왼쪽 단추를 클릭하고 끌어서 선택합니다. 단어를 두 번 클릭하여 선택합니다.

마우스 입력 이벤트

대부분의 마우스 입력은 모든 UIElement 개체에서 지원하는 공통 라우트된 입력 이벤트를 통해 처리할 수 있습니다. 여기에는 다음이 포함됩니다.

그러나 Windows.UI.Input의 포인터, 제스처 및 조작 이벤트를 사용하여 각 디바이스의 특수 기능(예: 마우스 휠 이벤트)을 활용할 수 있습니다.

샘플: 에 대한 BasicInput 샘플을 참조하세요.

시각적 피드백에 대한 지침

  • 이동 또는 가리키기 이벤트를 통해 마우스가 감지되면 마우스별 UI를 표시하여 요소에 의해 노출되는 기능을 나타냅니다. 마우스가 일정 시간 동안 이동하지 않거나 사용자가 터치 조작을 시작하는 경우 마우스 UI가 점차 사라지게 합니다. 이렇게 하면 UI가 클린 정리되지 않습니다.
  • 가리키기 피드백에 커서를 사용하지 말고 요소에서 제공하는 피드백으로 충분합니다(아래 커서 참조).
  • 요소가 상호 작용(예: 정적 텍스트)을 지원하지 않는 경우 시각적 피드백을 표시하지 마세요.
  • 마우스 상호 작용에는 포커스 사각형을 사용하지 마세요. 키보드 조작을 위해 예약합니다.
  • 동일한 입력 대상을 나타내는 모든 요소에 대해 시각적 피드백을 동시에 표시합니다.
  • 이동, 회전, 확대/축소 등과 같은 터치 기반 조작을 에뮬레이트하기 위한 단추(예: + 및 -)를 제공합니다.

시각적 피드백에 대한 일반적인 지침은 시각적 피드백에 대한 지침을 참조하세요.

커서

표준 커서 집합을 마우스 포인터에 사용할 수 있습니다. 요소의 기본 동작을 나타내는 데 사용됩니다.

각 표준 커서에는 커서와 연결된 해당 기본 이미지가 있습니다. 사용자 또는 앱은 언제든 표준 커서와 연결된 기본 이미지를 바꿀 수 있습니다. PointerCursor 함수를 통해 커서 이미지를 지정합니다.

마우스 커서를 사용자 지정해야 하는 경우:

  • 클릭 가능한 요소에는 항상 화살표 커서(arrow cursor)를 사용하십시오. 링크 또는 다른 대화형 요소에 가리키는 손 모양 커서(pointing hand cursor)를 사용하지 마세요. 대신 가리키기 효과(앞에서 설명)를 사용합니다.
  • 선택 가능한 텍스트에 대해 텍스트 커서(text cursor)를 사용합니다.
  • 이동이 기본 동작(예: 드래그 또는 자르기)인 경우 이동 커서(move cursor)를 사용합니다. 기본 작업이 탐색(예: 시작 타일)인 요소에는 이동 커서를 사용하지 마세요.
  • 개체의 크기를 조정할 수 있는 경우 가로, 세로 및 대각선 크기 조정 커서(vertical resize cursor,horizontal resize cursor ,diagonal resize cursor (lower left, upper right) ,diagonal resize cursor (upper left, lower right))를 사용합니다.
  • 잡는 손 모양 커서(grasping hand cursor (open), grasping hand cursor (closed))는 고정된 캔버스(예: 지도) 내에서 콘텐츠를 이동할 때 사용합니다.

샘플