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

아티클
12/11/2015

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

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

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

플랫폼 컨트롤은 터치, 터치 패드, 마우스, 펜/스타일러스, 키보드 등 다양한 소스의 입력을 처리하고 응답할 수 있습니다. 터치 키보드, 마우스 휠, 펜 지우개 등 다양한 입력 장치 모드의 입력을 처리할 수도 있습니다.

다른 운영 체제는 주로 터치식 입력에 중점을 두는 반면, 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 색과 회전 각도를 지정하는 정사각형 개체 형태입니다.

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

폼 통과
포함된 이동/스크롤 동작
터치 키보드 동작
플랫폼 컨트롤 및 기본 제공 사용자 조작 지원

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

샘플에는 홈페이지와 다양한 플랫폼 컨트롤 및 컬러 믹서가 있는 형식이 포함된 두 번째 페이지 등 두 페이지가 위에서 아래로 포함되어 있습니다.

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

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

앱 계획

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

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

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

입력 장치

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

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

조작 디자인

여기에서는 사용자 조작 샘플에 포함된 UI 및 기능의 일부 세부 정보를 검토합니다.

이러한 정보 중 일부는 앱에 적용되지 않을 수도 있습니다. 필요에 따라 선택합니다.

	폼 레이아웃에 대한 지침. 뛰어난 조작 환경을 제공하고 스크롤을 최소화하는 폼을 디자인합니다. 사용자가 폼을 작성하는 방법, 스크롤이 필요할 수 있는 위치, 터치 키보드의 모양과 인라인 오류 알림을 처리하는 방법을 고려합니다.
	텍스트 입력에 대한 지침 한 줄 또는 여러 줄 텍스트 입력 컨트롤을 사용해야 하는 경우 등 올바른 컨트롤을 선택합니다(권장 사항 및 금지 사항 사용).
	터치 키보드 및 필기 패널에 대한 지침. 하드웨어 키보드나 기타 주변 키보드 장치가 없는 폼 팩터에 대한 텍스트 입력을 지원합니다. 터치 키보드는 사용자가 편집 가능한 입력 필드를 탭할 때 호출되고 입력 필드에서 포커스가 없어지면 사라집니다.
	이동에 대한 지침 사용자가 컴퓨터의 폴더 구조, 문서 라이브러리, 사진 앨범 등의 단일 보기 내에서 탐색하는 데 이동 및 스크롤을 활용하는 방법을 고려합니다. 또한 사용자가 뷰포트 내에서 가로 또는 세로로 들어가지 않는 콘텐츠를 탐색하는 방법을 확인합니다.
	앱의 접근성 테스트. Windows 8용 Windows SDK(소프트웨어 개발 키트)에 포함되어 있는 접근성 테스트 도구인 검사 및 UI 접근성 검사기(AccChecker)를 사용하여 앱의 접근성 검증을 도와줍니다. Windows 스토어에서 접근성 있는 앱으로 등록하려면, ARIA(Accessible Rich Internet Applications) 웹 검증을 사용하도록 설정된 상태로 AccChecker에서 보고한 우선 순위 1인 오류를 모두 해결해야 합니다. 참고: 내레이터는 앱 콘텐츠 탐색 및 읽기를 위해 이 항목에 설명된 사용자 지정 터치 제스처 집합을 지원합니다.

사용자 조작 처리

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

	빠른 시작: HTML 컨트롤 추가 및 이벤트 처리 대부분의 앱은 단추, 확인란, 드롭다운 목록 등의 컨트롤이 필요합니다. 이 샘플에는 정적 컬러 믹서의 속성을 설정하는 다양한 컨트롤이 있는 폼이 포함되어 있습니다.
	텍스트 표시 및 편집 Windows 스토어 앱에 텍스트 입력 컨트롤을 추가합니다.
	터치 키보드 터치 키보드를 호출 및 해제합니다.
	키보드 접근성 구현. 시각 장애가 있거나 움직임이 자유롭지 않은 사용자는 대부분 앱 UI를 탐색하고 기능에 액세스하는 유일한 수단으로 키보드를 사용합니다. 따라서 앱의 키보드 접근성이 좋지 않을 경우 사용자가 앱을 사용하는 데 어려움을 겪거나 아예 사용하지 못할 수 있습니다.