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

아티클
12/11/2015

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

Windows 스토어 앱에서 지원되는 입력 장치

직관적이고 매력적일 뿐만 아니라 모든 입력 장치에서 일관되고 효율적인 사용자 지정 사용자 조작을 만들 수 있습니다. Windows 스토어 앱에 대해 이러한 사용자 환경을 정의하려면 여기서 설명하는 지침, 모범 사례 및 예제를 따르세요.

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

Windows 스토어 앱은 터치, 터치 패드, 마우스, 펜/스타일러스, 키보드 등 다양한 소스의 입력을 처리할 수 있습니다. 터치 키보드, 마우스 휠, 펜 지우개 등 다양한 입력 장치 모드의 입력을 처리할 수도 있습니다. 다른 플랫폼은 주로 터치식 입력에 중점을 두는 반면, PC, 랩톱, 태블릿 및 현재 출시되었거나 출시되지 않은 모든 종류의 폼 팩터에서 제약 조건 없이 소비성 앱, 혁신적인 하이브리드 앱 등 원하는 종류의 Windows 스토어 앱을 빌드할 수 있습니다.

플랫폼 컨트롤 및 해당 조작 동작에 대해 자세히 알아보려는 경우 사용자 조작 전체 프로세스(HTML)를 참조하세요.

사전 요구 사항

여기에 포함된 지침, 작업 및 샘플 코드는 JavaScript로 작성한 Windows 스토어 앱 개발과 관련이 있습니다. C++, C# 또는 Visual Basic으로 작성한 Windows 스토어 앱 버전의 경우 사용자 조작 사용자 지정(XAML)을 참조하세요.

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

JavaScript로 작성한 Windows 스토어 앱 개발

JavaScript로 작성한 Windows 스토어 앱의 시작 화면부터 UI 레이아웃과 컨트롤에 이르기까지 모든 사항에 대해 알아보세요.
JavaScript를 사용하여 첫 Windows 스토어 앱 만들기

HTML5 및 CSS 스타일시트와 JavaScript를 사용하여 기본 Windows 스토어 앱을 빌드합니다.

사용자 조작 샘플

Microsoft는 아래에서 참조하는 항목에 포함된 샘플과 코드 조각 외에도 사용자 지정 사용자 조작 샘플을 사용합니다. 이 샘플에서는 Windows 스토어 앱에서 다양한 조작 기능과 개념을 사용하거나 조정하는 방법을 보여 줍니다. 샘플에는 사용자 지정 컨트롤, UI 접근성 및 사용자 지정 조작에 대한 원칙, 권장 사항 및 구현 세부 정보가 포함되어 있습니다. 지침을 실제로 적용하는 방법을 확인하세요.

다음은 샘플에 대한 간단한 설명입니다.

샘플에서는 컬러 믹서를 만듭니다. 터치 스크린, 터치 패드, 마우스, 펜/스타일러스 또는 키보드에서 직접 입력을 받는 정사각형 개체 형태입니다. 이 데이터를 사용하여 해당 빨강, 녹색 또는 파랑 수준으로 변환되는 RGB 색과 회전 각도를 지정합니다.

샘플에는 다음 기능이 포함되어 있습니다.

사용자 지정 컨트롤
사용자 조작 동작의 기본 사용자 지정 지원(HTML 및 XAML)
사용자 지정 제스처 감지, 인식 및 처리

다음은 이 샘플의 작동 방식과 샘플에서 구현하는 사용자 조작 기능을 보여 주는 와이어프레임 다이어그램입니다.

샘플에는 홈페이지, DOM 기반 회전을 지원하는 사용자 지정 컨트롤이 있는 두 번째 페이지, Windows.UI.Input GestureRecognizer API를 통해 추가 기능을 구현하는 사용자 지정 컨트롤이 있는 세 번째 페이지 등 세 개의 페이지가 왼쪽에서 오른쪽으로 포함되어 있습니다.

다음은 Windows 스토어 앱의 사용자 조작에 대한 모범 사례를 따르는 앱 빌드에 도움이 되는 작업의 개요입니다. 각 작업은 Windows 스토어 앱 개발자 센터의 해당 정보에 연결됩니다.

Windows 스토어 앱을 처음 개발하거나 사용자 조작, 유용성 및 접근성에 대해 잘 모르는 경우 각 단계를 검토하는 것이 좋습니다. 사용자 조작 개발의 관련 측면이 함께 표시됩니다.

앱 계획

앱 디자인 및 개발을 시작하기 전에 앱을 계획합니다. 대상 사용자와 앱에서 지원하는 기능 및 활동에 대해 고려해 보세요.

주로 터치 조작용으로 Windows 스토어 앱의 UI를 디자인합니다. 터치식 입력은 일반적으로 픽셀 단위인 다른 입력 형식에 비해 본질적으로 부정확합니다(입력 영역 필요). 터치에 최적화된 컨트롤과 포인터 기반 이벤트 처리용 플랫폼 조작 API 집합이 함께 결합되어 많은 추가 코드 없이 전체 장치에서 동등한 기능을 제공합니다.

	앱과 앱 콘텐츠에 가장 적합한 탐색 패턴을 선택합니다. 자세한 내용은 탐색 패턴을 참조하세요. 이 자습서를 지원하는 사용자 조작 샘플에서는 플랫 탐색 템플릿으로 시작합니다. 템플릿을 다운로드하고 이 항목의 단계를 따라 여러 기능을 시도해 보거나 바로 템플릿을 사용하여 고유한 앱의 디자인과 개발을 시작합니다.
	Windows 스토어 앱 UI 전체 프로세스(HTML). 앱 창, 플라이아웃, 대화 상자, 앱 바 등의 UI 요소와 콘텐츠를 디자인 및 레이아웃합니다. Microsoft는 지침, 모범 사례 및 예제를 사용하여 Windows 8.1의 UI 접근 권한 값을 완전히 활용하고 직관적이며 다른 Windows 스토어 앱과 일관된 UI를 만들 수 있도록 도와줍니다.
	사용자 조작에 응답. 사용자 조작 플랫폼, 입력 소스(터치, 터치 패드, 마우스, 펜/스타일러스 및 키보드 포함), 모드(터치 키보드, 마우스 휠, 펜 지우개 등) 및 Windows 스토어 앱에서 지원되는 조작에 대해 알아봅니다.
	사용자가 입력 장치를 조작하는 방법. 터치, 터치 패드, 마우스 및 키보드 간에 일반적인 조작과 조작이 제스처에 매핑되는 방법을 비교합니다.

입력 장치

터치식 입력에 최적화되었지만 플랫폼에서 여기에 나열된 다른 입력 장치도 완벽하게 지원합니다.

	마우스 조작에 응답. 정밀한 가리키기 및 클릭이 필요한 앱에는 마우스 조작을 사용합니다.
	키보드 조작에 응답. 키보드가 앱을 조작하는 보다 효율적인 방법이라고 생각하는 사용자나 일정한 장애가 있는 사람들에게는 키보드가 필수 도구입니다.
	펜 및 스타일러스 조작에 응답. 펜 또는 스타일러스는 포인팅 장치와 드로잉 장치 둘 다로 사용될 수 있습니다. 일반적으로 디지털 잉크 기능과 연결됩니다.
	터치 패드 조작에 응답. 터치 패드는 멀티 터치 입력을 마우스와 같은 포인팅 장치의 정밀도 입력과 결합합니다. 이러한 결합을 통해 터치 패드는 Windows 8.1 터치 최적화된 UI와 생산성 앱 및 데스크톱 환경의 작은 대상에 모두 적합합니다.

조작 디자인

사용자 조작에 대한 Windows UX 지침을 따를 때 독창성을 발휘하세요. 앱이 지원하는 입력 장치와 앱이 응답하는 방식을 선택합니다. 장치에서 사용자 환경을 향상시키고, 가장 광범위한 기능과 기본 설정을 지원하고, Windows 스토어에서 가장 많은 잠재적 사용자의 관심을 끌어보세요. 이렇게 하면 앱의 유용성, 휴대성 및 접근성이 최대화됩니다.

이러한 사용자 조작 지침은 전체 입력 모드에서 일관된 매력적인 몰입형 조작 환경을 제공하는 데 도움이 됩니다.

일반적인 사용자 조작에 대한 지침

모든 장치에 일관된 기능을 제공하는 사용자 조작 환경을 만듭니다.
교차 방향으로 밀기에 대한 지침

살짝 밀기 제스처를 사용한 항목 선택과 밀기 제스처를 이용한 끌기(이동) 조작을 지원합니다.
광학 줌 및 크기 조정에 대한 지침

광학 줌을 사용하면 콘텐츠 영역 내에서 콘텐츠 보기를 확대할 수 있지만(콘텐츠 영역 자체에 사용) 크기 조정을 사용하면 콘텐츠 영역에 대한 보기는 바뀌지 않으면서 콘텐츠 영역 내에서 하나 이상 개체의 상대 크기를 변경할 수 있습니다(콘텐츠 영역 내 개체에 사용).
이동에 대한 지침

사용자가 컴퓨터의 폴더 구조, 문서 라이브러리, 사진 앨범 등의 단일 보기 내에서 탐색하는 데 이동 및 스크롤을 활용하는 방법을 고려합니다. 또한 사용자가 뷰포트 내에서 가로 또는 세로로 들어가지 않는 콘텐츠를 탐색하는 방법을 확인합니다.
회전에 대한 지침

터치를 사용하거나 마우스, 펜/스타일러스 또는 키보드에 대한 다른 UI 컨트롤을 통해 개체를 원형 방향(시계 방향 또는 시계 반대 방향)으로 돌려서 회전합니다.
시맨틱 줌에 대한 지침

사진 앨범, 앱 목록 또는 주소록과 같은 단일 보기 내에서 큰 관련 데이터 또는 콘텐츠 집합을 표시하고 탐색합니다.
텍스트 및 이미지 선택에 대한 지침

콘텐츠 선택 UI와 기능을 제공합니다.
대상 지정에 대한 지침

터치 정확도 및 신뢰도를 향상시켜 앱에 대한 사용자 만족도를 높입니다.
시각적 피드백에 대한 지침

사용자가 앱, 시스템 및 입력 장치를 이해하고 배우고 적응할 수 있도록 도와줍니다. 이렇게 하려면 조작의 성공 여부를 표시하고, 사용자 제어를 향상시키고, 조작을 권장하고, 시스템 상태를 릴레이하고, 오류를 줄입니다. 시각적 피드백(접촉 시각화 또는 피드백 UI라고도 함)은 조작이 의도한 대로 감지, 해석 및 처리되었는지 여부를 보여 줍니다.

사용자 조작 처리

여기에서는 사용자의 앱 조작을 처리하고 응답하는 데 사용할 수 있는 옵션을 살펴보겠습니다. 또한 사용자 조작 샘플에 포함된 UI 및 기능의 일부 세부 정보를 설명합니다.

	빠른 시작: 포인터 포인터 이벤트를 통해 사용자 조작을 사용자 지정합니다.
	빠른 시작: DOM 제스처 및 조작 DOM(문서 개체 모델) 이벤트를 통해 사용자 조작을 사용자 지정합니다.
	빠른 시작: 정적 제스처 빠른 시작: 조작 제스처 GestureRecognizer를 통해 사용자 조작을 사용자 지정합니다.
	UI에 애니메이션 효과 주기 포인터 이벤트 또는 살짝 밀기 제스처에 대해 플랫폼 애니메이션 라이브러리의 애니메이션 제품군을 사용하여 Windows 8의 모양과 느낌을 Windows 스토어 앱에 통합하거나, CSS3(CSS 스타일시트, 수준 3) 전환, 애니메이션 및 변형을 사용하여 애니메이션을 사용자 지정합니다.
	키보드 접근성 구현. 시각 장애가 있거나 움직임이 자유롭지 않은 사용자는 대부분 앱 UI를 탐색하고 기능에 액세스하는 유일한 수단으로 키보드를 사용합니다. 따라서 앱의 키보드 접근성이 좋지 않을 경우 사용자가 앱을 사용하는 데 어려움을 겪거나 아예 사용하지 못할 수 있습니다.
	터치 이벤트에 접근성 구현. 포인터 이벤트를 마우스 클릭 이벤트에 연결하여 터치식 입력에 접근성을 구현합니다.
	앱의 접근성 테스트. Windows 8용 Windows SDK(소프트웨어 개발 키트)에 포함되어 있는 접근성 테스트 도구인 검사 및 UI 접근성 검사기(AccChecker)를 사용하여 앱의 접근성 검증을 도와줍니다. Windows 스토어에서 접근성 있는 앱으로 등록하려면, ARIA(Accessible Rich Internet Applications) 웹 검증을 사용하도록 설정된 상태로 AccChecker에서 보고한 우선 순위 1인 오류를 모두 해결합니다. 참고: 내레이터는 앱 콘텐츠 탐색 및 읽기를 위해 이 항목에 설명된 사용자 지정 터치 제스처 집합을 지원합니다.