이 항목은 아직 평가되지 않았습니다.- 이 항목 평가

사용자 조작에 응답(JavaScript 및 HTML을 사용하는 Windows 스토어 앱)

기사 내용

대상 개발자 그룹
Windows 8 사용자 조작 플랫폼 개요
사용자 환경 사용자 지정
관련 항목

여기서는 Windows 8의 새로운 Windows UI 및 Windows 스토어 앱이 지원하는 사용자 조작 플랫폼, 입력 모드(터치, 마우스, 펜/스타일러스, 키보드 등) 및 사용자 조작에 대해 설명합니다. 기본 입력과 조작 기능을 무료로 제공하는 방법, 사용자 조작 환경을 사용자 지정하는 방법 및 언어 프레임워크에서 플랫폼 조작 패턴이 공유되는 방법에 대해 설명합니다(JavaScript를 사용하는 Windows 스토어 앱과 C++, C# 또는 Visual Basic을 사용하여 Windows용으로 작성된 Windows 스토어 앱).

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

로드맵: 이 항목은 다음 항목과 연관되어 있습니다. JavaScript를 사용하는 Windows 스토어 앱용 로드맵

이 섹션의 내용

대상 개발자 그룹

개발자가 HTML, JavaScript 및 CSS 스타일시트에 대해 잘 알고 있다고 가정합니다.

JavaScript를 잘 모르는 경우

다른 언어 프레임워크에 대한 다음 사용자 조작 설명서를 참조하세요.

Windows 8 사용자 조작 플랫폼 개요

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

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

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

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

기본 제공 컨트롤

언어 프레임워크를 통해 노출되는 JavaScript 프로젝트 템플릿 및 기본 제공 컨트롤을 활용하여 전체 플랫폼 사용자 조작 환경을 제공합니다.

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

기본 제공 컨트롤의 조작 기능은 대부분의 Windows 스토어 앱에서 제대로 작동합니다.

컨트롤 라이브러리에 대한 자세한 내용은 컨트롤 및 콘텐츠 추가(JavaScript 및 HTML을 사용하는 Windows 스토어 앱)를 참조하세요.

뷰

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

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

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

앱 보기와 다음과 같은 CSS 속성, DOM 특성 및 DOM 이벤트를 사용하여 이동/스크롤 및 확대/축소 동작을 수정하면 나중에 설명하는 포인터 및 제스처 이벤트 처리를 통해 제공할 수 있는 환경보다 더 원활한 조작 환경을 제공할 수 있습니다.

API 표면	CSS 속성	DOM 특성	DOM 이벤트
-ms-touch-action은 이동 또는 확대/축소를 통해 지정된 영역을 조작할 수 있는지 여부를 지정합니다.
이동/스크롤	-ms-overflow-style -ms-scroll-chaining -ms-scroll-limit -ms-scroll-limit-x-max -ms-scroll-limit-x-min -ms-scroll-limit-y-max -ms-scroll-limit-y-min -ms-scroll-rails -ms-scroll-snap-points-x -ms-scroll-snap-points-y -ms-scroll-snap-type -ms-scroll-snap-x -ms-scroll-snap-y -ms-scroll-translation	scroll scrollHeight scrollLeft scrollTop scrollWidth	onscroll
확대/축소	-ms-content-zoom-chaining -ms-content-zooming -ms-content-zoom-limit -ms-content-zoom-limit-max -ms-content-zoom-limit-min -ms-content-zoom-snap -ms-content-zoom-snap-points -ms-content-zoom-snap-type	msContentZoomFactor	onmscontentzoom
모두			onmsmanipulationstatechanged

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

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

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

DOM 포인터 및 제스처 이벤트

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

참고

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

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

다음과 같은 DOM 제스처 이벤트를 통해 제공된 기본 제공 제스처 인식을 이용합니다.

유형	DOM 제스처 이벤트
일반 이벤트	onmsmanipulationstatechanged
포인터 이벤트	onmsgotpointercapture onmslostpointercapture onmspointercancel onmspointerdown onmspointerhover onmspointermove onmspointerout onmspointerover onmspointerup
정적 제스처 이벤트	onmsgesturehold onmsgesturetap
조작 동작 이벤트	onmsgesturechange onmsgestureend onmsgesturestart onmsinertiastart

포인터 및 제스처 이벤트 처리에 대한 자세한 내용은 빠른 시작: 포인터 처리 및 빠른 시작: 기본 DOM 제스처 처리를 참조하세요.

사용자 환경 사용자 지정

앱의 조작 환경을 완전하게 사용자 지정하고 제어하려면 Windows 스토어 앱 API를 사용합니다. 사용자 조작을 사용자 지정할 수 있도록 설정하는 것 외에도 오른쪽 단추, 휠 단추, 이동(상하) 휠 또는 X 단추가 있는 마우스 장치와 펜 단추 및 지우개가 있는 펜 장치 같은 하드웨어 기능과 추가 구성 옵션을 처리할 수 있습니다.

대부분의 조작 API는 Windows.UI.Core, Windows.UI.Input 및 Windows.UI.Input.Inking 유형에서 제공되며 Windows.Devices.Input을 통해 입력 장치 데이터가 표시됩니다.

GestureRecognizer, PointerPoint 및 PointerPointProperties 클래스는 제스처 및 조작을 수행하는 데 가장 유용합니다.

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

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

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

사용자 지정 조작에 대한 자세한 내용은 빠른 시작: 정적 제스처 및 빠른 시작: 조작 제스처를 참조하세요.