사용자 조작에 응답(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
사용자 조작 플랫폼, 입력 소스(터치, 터치 패드, 마우스, 펜/스타일러스 및 키보드 포함), 모드(터치 키보드, 마우스 휠, 펜 지우개 등) 및 Windows, Windows 스토어 앱, Windows Phone 스토어 앱에서 지원되는 사용자 조작에 대해 알아봅니다.
Windows 8.1용 업데이트: Windows 8.1에는 다양한 업데이트와 포인터 입력 API의 개선 사항이 포함되어 있습니다. 자세한 내용은 Windows 8.1의 API 변경 사항을 참조하세요.
언어 프레임워크(JavaScript로 작성한 앱, C++, C# 또는 Visual Basic으로 작성한 앱, DirectX 및 C++로 작성한 앱) 간에 기본 제공 컨트롤을 사용하여 기본 입력과 조작 기능이 무료로 제공되는 방법, 언어 프레임워크에서 조작 패턴이 공유되는 방법 및 사용자 조작 환경을 사용자 지정하는 방법에 대해 설명합니다.
여기서는 지침, 모범 사례 및 예제를 통해 Windows의 조작 접근 권한 값을 활용하여 직관적이고 매력적인 몰입형 사용자 환경을 갖춘 앱을 빌드하는 방법에 대해 설명합니다.
팁 이 항목의 내용은 JavaScript를 사용한 앱 개발과 관련이 있습니다.
C++, C# 또는 Visual Basic으로 작성한 앱에 대해서는 사용자 조작에 응답(XAML)을 참조하세요.
DirectX 및 C++로 작성한 앱에 대해서는 사용자 조작에 응답(DirectX 및 C++)을 참조하세요.
사전 요구 사항: JavaScript를 사용하여 앱을 처음 개발하는 경우 다음 항목을 검토하여 여기서 설명하는 기술에 대해 알아보세요.
JavaScript를 사용하여 첫 Windows 스토어 앱 만들기
JavaScript를 사용하는 Windows 스토어 앱용 로드맵
이벤트에 대한 자세한 내용은 빠른 시작: HTML 컨트롤 추가 및 이벤트 처리 및 DOM 이벤트를 사용한 이벤트 캡처 및 이벤트 버블링을 참조하세요.
앱 기능 전체 프로세스: 앱 기능 전체 프로세스 시리즈의 일부로 이 기능을 자세히 살펴보세요.
사용자 환경 지침:
플랫폼 컨트롤 라이브러리(HTML 및 XAML)는 표준 조작, 애니메이션 물리적 효과 및 시각적 피드백을 비롯하여 Windows 사용자 조작 환경 전체를 제공합니다. 사용자 지정 조작 지원이 필요 없는 경우에는 이러한 기본 제공 컨트롤을 사용하세요.
플랫폼 컨트롤이 충분하지 않으면 다음 사용자 조작 지침을 통해 입력 모드 전체에서 멋진 몰입형 조작 환경을 일관되게 제공합니다. 이러한 지침은 주로 터치식 입력을 중심으로 다루지만 터치 패드, 마우스, 키보드 및 스타일러스 입력에도 관련이 있습니다.
- 일반적인 사용자 조작에 대한 지침
- 교차 방향으로 밀기에 대한 지침
- 광학 줌 및 크기 조정에 대한 지침
- 이동에 대한 지침
- 회전에 대한 지침
- 시맨틱 줌에 대한 지침
- 텍스트 및 이미지 선택에 대한 지침
- 대상 지정에 대한 지침
- 시각적 피드백에 대한 지침
샘플: 이 기능의 작동 방식을 보려면 앱 샘플을 참조하세요.
입력: GestureRecognizer를 사용한 조작 및 제스처
Windows 8 사용자 조작 플랫폼 개요
터치 조작을 고려하여 앱을 디자인하세요. 터치식 입력이 점점 더 많은 장치에서 다양하게 지원되고 있으며 터치 조작은 Windows 환경의 기본 측면이 되었습니다.
터치는 Windows 및 Windows Phone 사용자를 위한 기본 조작 모드이므로 앱이 사용하기 쉽고, 정확하고, 응답이 빠르도록 플랫폼이 터치 입력에 최적화되었습니다. 검증된 실제 입력 모드(예: 마우스, 펜 및 키보드)도 완벽하게 지원되며 기능적으로 터치와 일관됩니다(제스처, 조작 및 조작 방식 참조). 전형적인 입력 모드가 제공하는 작업 속도, 정확도 및 촉각 피드백은 많은 사용자에게 친숙하며 매력적으로 다가옵니다. 이러한 고유하고 특별한 조작 환경은 손상되지 않았습니다.
사용자 조작 환경을 디자인할 때는 창의성을 발휘하세요. 최대한 많은 사용자에게 환영받는 포괄적인 접근 권한 값 및 기본 설정을 지원하여 더 많은 고객이 해당 앱에 관심을 갖게 합니다.
기본 제공 컨트롤부터 전체 사용자 지정에 이르기까지 사용자 조작 플랫폼은 유연성과 기능이 점점 증가하는 기능 계층을 기반으로 합니다.
기본 제공 컨트롤
기본 제공 컨트롤을 활용하여 대부분의 Windows 및 Windows Phone 앱에서 제대로 작동하는 일반적인 사용자 조작 환경을 제공합니다.
기본 제공 컨트롤은 모든 입력 모드에서 일관되고 매력적인 조작 환경을 제공하는 동시에 처음부터 터치에 최적화되도록 디자인되었습니다. 길게 누르기, 탭하기, 밀기, 살짝 밀기, 축소, 확대, 돌리기 등 포괄적인 제스처 집합을 지원합니다. 이동, 확대/축소, 회전, 끌기 및 사실적 관성 동작과 같은 직접 조작을 이러한 제스처와 결합할 경우 전체 Windows 플랫폼에서 모범 사례를 일관되게 따르는 매력적인 몰입형 조작 환경을 사용할 수 있습니다.
컨트롤 라이브러리에 대한 자세한 내용은 컨트롤 및 콘텐츠 추가를 참조하세요.
뷰
앱 뷰의 이동/스크롤 및 확대/축소 설정을 통해 사용자 조작 환경을 조정할 수 있습니다. 앱 뷰는 사용자가 앱과 해당 콘텐츠를 액세스하고 조작하는 방법을 제어합니다. 뷰는 관성, 콘텐츠 경계 바운스 및 끌기 지점과 같은 동작도 제공합니다.
이동 및 스크롤 설정은 보기의 콘텐츠가 뷰포트 내에 맞지 않을 때 사용자가 단일 보기 내에서 탐색하는 방법을 지정합니다. 예를 들어 단일 보기는 잡지 또는 책의 페이지, 컴퓨터의 폴더 구조, 문서 라이브러리 또는 사진 앨범일 수 있습니다.
확대/축소 설정은 광학 줌 및 SemanticZoom 컨트롤에 모두 적용됩니다. 시맨틱 줌은 단일 뷰 내에서 대규모의 관련 데이터 또는 콘텐츠 집합을 제공하고 탐색하기 위한 터치 최적화된 기법입니다. 두 가지 분류 모드 또는 확대/축소 수준을 사용하여 작동합니다. 단일 뷰 내에서 이동 및 스크롤하는 것과 비슷합니다. 이동 및 스크롤을 시맨틱 줌과 함께 사용할 수 있습니다.
앱 뷰와 다음 CSS 스타일시트 속성, DOM(문서 개체 모델) 특성 및 DOM 이벤트를 사용하여 이동/스크롤 및 확대/축소 동작을 수정합니다. 그러면 포인터 및 제스처 이벤트 처리를 통해 가능한 것보다 매끄러운 조작 환경을 제공할 수 있습니다.
| API 표면 | CSS 속성 | DOM 특성 | DOM 이벤트 |
|---|---|---|---|
| touch-action은 이동 또는 확대/축소를 통해 지정된 영역을 조작할 수 있는지 여부를 지정합니다. | |||
| 이동/스크롤 | |||
| 확대/축소 | msContentZoomFactor | onmscontentzoom | |
| 모두 | onmsmanipulationstatechanged | ||
앱 뷰에 대한 자세한 내용은 레이아웃 및 뷰 정의를 참조하세요.
확대/축소에 대한 자세한 내용은 광학 줌 및 크기 조정에 대한 지침 또는 시맨틱 줌에 대한 지침을 참조하세요.
이동/스크롤에 대한 자세한 내용은 이동에 대한 지침을 참조하세요.
DOM 포인터 및 제스처 이벤트
포인터는 통합 이벤트 메커니즘이 있는 일반 입력 유형입니다. 포인터는 터치, 터치 패드, 마우스 또는 펜 등의 활성 입력 원본에서 화면 위치와 같은 기본 정보를 표시합니다. 제스처는 탭하기와 같은 간단한 정적 조작부터 확대/축소, 이동 및 회전과 같은 복잡한 조작까지 다양합니다. 자세한 내용은 제스처, 조작 및 조작 방식을 참조하세요.
참고
정적 제스처 이벤트는 조작이 완료된 후 트리거됩니다. 조작 제스처 이벤트는 진행 중인 조작을 나타냅니다. 조작 제스처 이벤트는 사용자가 요소를 터치할 때 발생하기 시작하고, 손가락을 들거나 조작이 취소될 때까지 계속됩니다.
포인터 및 제스처 이벤트에 액세스하면 다음에 대해 Windows 8 터치 조작 디자인 언어를 사용할 수 있습니다.
- 게임
- 사용자 지정 컨트롤 및 피드백 화면 효과
- 사용자 지정 조작
다음과 같은 DOM 제스처 이벤트를 통해 제공된 기본 제공 제스처 인식을 이용합니다.
| 유형 | DOM 제스처 이벤트 |
|---|---|
| 일반 이벤트 | MSManipulationStateChanged |
| 포인터 이벤트 | |
| 정적 제스처 이벤트 | |
| 조작 동작 이벤트 |
포인터 및 제스처 이벤트 처리에 대한 자세한 내용은 빠른 시작: 포인터 처리 및 빠른 시작: 기본 DOM 제스처 처리를 참조하세요.
사용자 환경 사용자 지정
앱의 조작 환경을 완전하게 사용자 지정하고 제어하려면 Windows 런타임 API를 사용합니다. 이러한 API를 통해 사용자 지정 사용자 조작을 사용하도록 설정하고, 오른쪽 단추, 휠 단추, 이동(상하) 휠 또는 X 단추가 있는 마우스 장치와 펜 단추 및 지우개가 있는 펜 장치 같은 하드웨어 접근 권한 값과 추가 구성 옵션을 처리할 수 있습니다.
대부분의 조작 API는 Windows.UI.Core, Windows.UI.Input 및 Windows.UI.Input.Inking 유형에서 제공되며 Windows.Devices.Input을 통해 입력 장치 데이터가 표시됩니다.
GestureRecognizer, PointerPoint 및 PointerPointProperties 클래스는 제스처 및 조작을 처리하는 데 유용합니다.
새롭거나 수정된 제스처 및 조작을 통해 사용자 지정된 조작 환경을 제공하기 전에 다음 사항을 고려하세요.
- 기존 제스처가 앱에 필요한 환경을 제공할까요? 기존 제스처를 지원하거나 해석하도록 앱을 간단히 적응시킬 수 있는 경우 확대/축소 또는 이동에 사용자 지정 제스처를 제공하지 않습니다.
- 사용자 지정 제스처가 앱 간의 잠재적인 불일치를 보증할까요?
- 제스처에 접촉 수와 같은 특정 하드웨어 지원이 필요할까요?
- 필요한 조작 환경을 제공하는 컨트롤(예: SemanticZoom)이 있나요? 컨트롤이 본질적으로 사용자 입력을 처리할 수 있는 경우 사용자 지정 제스처 또는 조작도 필요할까요?
- 사용자 지정 제스처 또는 조작을 통해 원활하고 자연스러운 조작 환경이 생성되나요?
- 조작 환경이 적합할까요? 조작이 접촉 수, 속도, 시간(권장되지 않음) 및 관성과 같은 항목에 따라 달라지는 경우 이러한 제약 조건 및 종속성이 일관되고 검색 가능하도록 해야 합니다. 예를 들어 사용자가 빠르고 느리게 해석하는 방식은 앱의 기능 및 환경에 대한 사용자 만족도에 직접적인 영향을 줄 수 있습니다.
- 제스처 또는 조작이 사용자의 물리적 능력의 영향을 받나요? 액세스할 수 있나요?
- 앱 바 명령 또는 일부 다른 UI 명령이 충분할까요?
즉, 요구 사항이 명확하게 잘 정의되어 있으며 시나리오를 지원할 수 있는 기본 제스처가 없을 경우에만 사용자 지정 제스처 및 조작을 만드세요.
사용자 지정 조작에 대한 자세한 내용은 빠른 시작: 정적 제스처 및 빠른 시작: 조작 제스처를 참조하세요.
관련 항목
개념