마우스 조작에 응답(HTML)

아티클
12/11/2015

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

터치 및 펜 입력에 사용하는 것과 동일한 기본 포인터 이벤트를 처리하여 C++, C# 또는 Visual Basic으로 작성한 Windows 스토어 앱에서 마우스 입력에 응답합니다.

이러한 일반적인 이벤트를 사용하면 각 입력 장치에 대한 코드를 작성하지 않고도 기본적인 입력 기능을 구현할 수 있습니다. 그러나 필요한 경우 각 장치의 특수 접근 권한 값(예: 마우스 휠 이벤트)을 활용할 수도 있습니다.

팁 이 항목의 내용은 JavaScript를 사용한 Windows 스토어 앱 개발과 관련이 있습니다.

C++, C# 또는 Visual Basic으로 작성한 Windows 스토어 앱에 대해서는 마우스 조작에 응답(XAML)을 참조하세요.

DirectX 및 C++로 작성한 Windows 스토어 앱에 대해서는 마우스 컨트롤 개발(DirectX 및 C++)을 참조하세요.

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

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

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

이벤트에 대한 자세한 내용은 빠른 시작: HTML 컨트롤 추가 및 이벤트 처리를 참조하세요.

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

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

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

사용자 환경 지침:

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

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

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

사용자 조작 사용자 지정 전체 프로세스 샘플

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

입력: 인스턴스화 가능한 제스처 샘플

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

개요

마우스 입력은 가리키고 클릭할 때 정밀도가 필요한 사용자 조작에 가장 적합합니다. 이러한 고유 정밀도는 터치의 부정확한 특성에 최적화된 Windows 8의 UI에서 자연스럽게 지원됩니다. Windows 스토어 앱 디자인을 터치식 입력에 최적화하고 기본적으로 기본 마우스 지원을 받으세요.

마우스 및 터치식 입력이 분리되는 위치는 해당 개체에 대해 수행된 실제 제스처(예: 살짝 밀기, 밀기, 끌기, 회전 등)를 통해 화면에서 UI 요소의 직접 조작을 에뮬레이트하는 터치의 기능입니다.

직접 조작을 강조하는 시나리오에서 마우스 조작을 지원하려면 마우스 관련 UI를 사용하여 사용자가 사용하는 장치에 관계없이 앱 사용자에 해당하는 기능을 제공합니다. 예를 들어 마우스가 검색될 경우 스크롤 막대를 사용하여 이동을 에뮬레이트하거나, 이전 및 다음 단추를 사용하여 콘텐츠 페이지를 넘깁니다.

마우스 조작을 지원하기 위한 권장 사항

마우스 조작 지원을 위한 몇 가지 지침은 다음과 같습니다.

Windows 8 마우스 언어

Windows 8에서는 전체 시스템에서 일관되게 사용되는 마우스 조작의 축약된 집합을 제공합니다. 이 마우스 언어를 일관되게 적용하면 사용자가 친숙하게 느끼는 스타일의 앱을 만들 수 있습니다. 이 경우 사용자가 앱을 더욱 신뢰하게 되고 쉽게 앱을 익히고 사용할 수 있습니다.

용어	설명
가리켜서 배우기	요소를 가리켜서 동작을 커밋하지 않고 자세한 정보나 학습용 시각 요소(예제: 도구 설명)를 표시합니다. 도구 설명에 대한 자세한 내용은 도구 설명 추가를 참조하세요.
마우스 왼쪽 단추를 클릭하여 기본 동작 수행	요소를 마우스 왼쪽 단추로 클릭하여 앱 시작이나 명령 실행과 같은 기본 동작을 호출합니다.
스크롤하여 보기 변경	스크롤 막대를 표시하여 콘텐츠 영역 내에서 위쪽, 아래쪽, 왼쪽 및 오른쪽으로 이동합니다. 사용자는 스크롤 막대를 클릭하거나 마우스 휠을 돌려 스크롤할 수 있습니다. 스크롤 막대는 콘텐츠 영역 내에서 현재 보기의 위치를 나타낼 수 있습니다. 터치를 사용하여 이동하면 유사한 UI가 표시됩니다.
마우스 오른쪽 단추를 클릭하여 명령 선택	마우스 오른쪽 단추를 클릭하여 전역 명령이 포함된 앱 바를 표시합니다. 요소를 마우스 오른쪽 단추로 클릭하여 선택하고 선택한 요소에 대한 상황에 맞는 명령이 포함된 앱 바를 표시합니다. 참고 선택 또는 앱 바 명령이 적합한 UI 동작이 아닌 경우 마우스 오른쪽 단추를 클릭하여 상황에 맞는 메뉴를 표시합니다. 그러나 모든 명령 동작에 앱 바를 사용하는 것이 좋습니다.
UI 확대/축소 명령	앱 바에 UI 명령(+ 및 -)을 표시하거나, Ctrl을 누르고 마우스 휠을 돌려 확대/축소를 위한 손가락 모으기 및 확대 제스처를 에뮬레이트합니다.
UI 회전 명령	앱 바에 UI 명령을 표시하거나, Ctrl+Shift를 누르고 마우스 휠을 돌려 회전을 위한 회전 제스처를 에뮬레이트합니다. 장치 자체를 돌리면 전체 화면이 회전합니다.
마우스 왼쪽 단추를 클릭하고 끌어서 다시 정렬	요소를 마우스 왼쪽 단추로 클릭하고 끌어서 이동합니다.
마우스 왼쪽 단추를 클릭하고 끌어서 텍스트 선택	선택 가능한 텍스트 내에서 마우스 왼쪽 단추를 클릭하고 끌어서 선택합니다. 단어를 선택하려면 두 번 클릭합니다.
시스템 명령에 대한 마우스 모서리 및 가장자리	왼쪽에서 오른쪽 레이아웃에서 마우스를 화면의 오른쪽 위 또는 오른쪽 아래(또는 오른쪽에서 왼쪽 레이아웃의 왼쪽 가장자리)로 이동하면 시스템 명령을 표시하는 참 메뉴가 나타납니다. 왼쪽에서 오른쪽 레이아웃에서는 마우스를 왼쪽 위로 이동하고 오른쪽에서 왼쪽 레이아웃에서 마우스를 오른쪽 위로 이동하여 최근에 사용한 앱의 미리 보기를 표시합니다. 마우스 왼쪽 단추를 클릭하고 끌어서 실행 중인 앱을 차례로 선택하고 전환하거나 끌어서 앱을 사이드 앱으로 만듭니다(화면 해상도에서 지원되는 경우). 왼쪽에서 오른쪽 레이아웃에서는 마우스를 왼쪽 아래로 이동하고 오른쪽에서 왼쪽 레이아웃에서는 마우스를 오른쪽 아래로 이동하여 시작 화면의 미리 보기를 표시합니다. 마우스 왼쪽 단추를 클릭하고 화면의 위쪽 가장자리부터 아래쪽 가장자리까지 끌어서 현재 앱을 닫습니다. 마우스 왼쪽 단추를 클릭하고 위쪽 가장자리부터 왼쪽 또는 오른쪽 가장자리까지 끌어서 현재 앱을 화면의 해당 측면으로 끕니다.

하드웨어

마우스 장치 기능(MouseCapabilities)을 쿼리하여 마우스 하드웨어에서 직접 액세스할 수 있는 앱 UI 측면을 식별합니다. 장치 기능 쿼리에 대한 자세한 내용은 빠른 시작: 포인터 장치 식별을 참조하세요.

일부 마우스 장치에는 5개 단추가 있습니다. 네 번째와 다섯 번째 단추는 X 단추라고 하며, 일반적으로 Windows Internet Explorer 등의 웹 브라우저에서 뒤로 및 앞으로 이동합니다. 이러한 단추를 앱의 적절한 UI(뒤로 및 앞으로 단추)에 연결합니다.

마우스에 휠 단추가 있는 경우 앞이나 뒤로 돌릴 때 콘텐츠 영역 내에서 세로(위쪽 및 아래쪽) 스크롤이 활성화되게 합니다. 콘텐츠 영역이 세로로 스크롤되지 않는 경우 가로(왼쪽 및 오른쪽) 스크롤을 활성화합니다. 휠 단추가 이동(상하) 휠인 경우 가로 스크롤만 활성화해야 합니다.

사용자가 Ctrl 보조 키를 누르면 스크롤 휠이 확대/축소(표시된 경우)를 활성화해야 합니다.

시각적 피드백

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

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

커서

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

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

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

클릭 가능한 요소에는 항상 화살표 커서()를 사용합니다. 링크 또는 다른 대화형 요소에 가리키는 손 모양 커서()를 사용하지 마세요. 대신 앞에서 설명한 가리키기 효과를 사용합니다.
선택 가능한 텍스트에는 텍스트 커서()를 사용합니다.
이동이 기본 동작인 경우(예제: 끌기 또는 자르기) 이동 커서()를 사용합니다. 기본 동작이 탐색인 요소(예제: 시작 타일)에는 이동 커서를 사용하지 마세요.
개체 크기를 조정할 수 있는 경우 가로, 세로 및 대각선 크기 조정 커서(, , , )를 사용합니다.
고정 캔버스 내에서 콘텐츠를 이동하는 경우(예: 지도) 잡는 손 모양 커서(, )를 사용합니다.