제스처, 조작 및 상호 작용(HTML)

아티클
12/11/2015

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

터치 조작을 통해 앱은 물리적 제스처를 변환하고 사용하여 UI 요소의 직접 조작을 에뮬레이트할 수 있습니다.

터치 조작은 사용자가 화면에서 요소를 조작할 때 실제와 같은 자연스러운 경험을 제공합니다. 반면에 속성 창이나 기타 대화 상자를 통해 개체를 조작하는 것은 간접 조작으로 간주됩니다. 또한 Windows는 터치, 마우스 및 펜을 포함한 입력 모드와 장치에서 터치 조작을 지원합니다.

Windows 런타임 플랫폼 API는 세 가지 유형의 조작 이벤트(포인터, 제스처 및 조작)를 통해 사용자 조작을 지원합니다.

포인터 이벤트는 위치 및 장치 유형 같은 기본 연락처 정보와 압력 및 접촉 기하 같은 확장 정보를 가져오고 더 복잡한 조작을 지원하는 데 사용됩니다.
제스처 이벤트는 탭하기와 길게 누르기 같은 정적 한 손가락 조작을 처리하는 데 사용됩니다(두 번 탭하기와 마우스 오른쪽 단추 탭하기는 이러한 기본 제스처에서 파생됨).
조작 이벤트는 손가락 모으기 및 확대 같은 동적 멀티 터치 조작과 이동/스크롤, 확대/축소 및 회전처럼 관성과 속도 데이터를 사용하는 조작에 사용됩니다. 참고 조작 이벤트에서 제공하는 정보는 조작을 식별하지 않고 위치, 변환 델타, 속도 등의 입력 데이터를 지정합니다. 이 데이터는 조작을 결정하고 조작하는 데 사용됩니다.

자세한 내용은 다음 빠른 시작을 참조하세요.

다음으로 제스처, 조작 및 조작 방식 간의 관계를 설명합니다.

제스처

제스처는 입력 장치에서 또는 입력 장치(한 손가락, 여러 손가락, 펜/스타일러스, 마우스 등)에 의해 수행되는 실제 동작 또는 움직임입니다. 예를 들어 명령을 시작, 활성화 또는 호출하려는 경우 터치 또는 터치 패드 장치에서는 손가락을 한 번 탭합니다. 이 제스처는 마우스 왼쪽 단추를 클릭하거나, 펜으로 탭하거나, 키보드의 Enter 키를 누르는 것과 같습니다.

다음은 UI를 조작하고 조작 방식을 수행하기 위한 기본 제스처 집합입니다.

이름	유형	설명
탭하기	정적 제스처	손가락 하나로 화면을 터치하고 뗍니다.
길게 누르기	정적 제스처	손가락 하나로 화면을 터치한 다음 누르고 있습니다.
밀기	조작 제스처	하나 이상의 손가락으로 화면을 터치하고 같은 방향으로 움직입니다.
살짝 밀기	조작 제스처	하나 이상의 손가락으로 화면을 터치하고 같은 방향으로 짧게 움직입니다.
회전	조작 제스처	둘 이상의 손가락으로 화면을 터치하고 시계 방향으로 또는 시계 반대 방향으로 호를 그리며 움직입니다.
손가락 모으기	조작 제스처	둘 이상의 손가락으로 화면을 터치하고 모으면서 움직입니다.
늘이기	조작 제스처	둘 이상의 손가락으로 화면을 터치하고 늘리면서 움직입니다.

조작

조작은 제스처에 대한 개체 또는 UI의 즉각적이고 진행 중인 반응이나 응답입니다. 예를 들어 밀기 및 살짝 밀기 제스처는 일반적으로 요소나 UI가 어떤 방식으로든 움직이게 합니다.

화면의 개체 및 UI를 통해 매니페스트되는 방식에 따라 조작의 최종 결과는 조작이 됩니다.

조작

조작 방식은 조작이 해석되는 방식과 조작으로 야기되는 명령이나 동작에 따라 달라집니다. 예를 들어 밀기와 살짝 밀기 제스처를 통해 개체를 이동할 수 있지만 거리 임계값에 도달했는지 여부에 따라 결과가 달라집니다. 밀기는 개체를 끌거나 보기를 이동할 때 사용할 수 있지만 살짝 밀기는 항목을 선택하거나 AppBar를 표시하는 데 사용할 수 있습니다.

이 섹션은 몇 가지 일반적인 조작에 대해 설명합니다.

학습

길게 누르기 제스처는 동작이나 명령으로 커밋하지 않고 자세한 정보나 교육적 시각 효과(예: 도구 설명 또는 상황에 맞는 메뉴)를 표시합니다. 시각 효과가 표시되는 동안 밀기 제스처를 시작할 경우 여전히 이동할 수 있습니다. 자세한 내용은 시각적 피드백에 대한 지침을 참조하세요.

조작 방식 학습

명령 호출

탭하기 제스처는 앱 시작이나 명령 실행과 같은 기본 동작을 호출합니다.

명령 조작

이동

밀기 제스처는 주로 이동 조작에 사용하지만 이동, 그리기 또는 쓰기에 사용할 수도 있습니다. 이동은 단일 보기(예: 컴퓨터의 폴더 구조, 문서 라이브러리 또는 사진 앨범) 내의 소량의 콘텐츠에서 짧은 거리를 탐색하기 위한 터치 최적화 기술입니다. 이동은 마우스나 키보드로 스크롤하는 것과 같지만 보기의 콘텐츠 양이 보기 가능 영역보다 많은 경우에만 필요합니다. 자세한 내용은 이동에 대한 지침을 참조하세요.

이동 조작 방식

확대/축소

축소 및 확대 제스처는 광학 줌, 크기 조정 및 시맨틱 줌의 세 가지 조작 방식 유형에 사용됩니다.

광학 줌 및 크기 조정

광학 줌은 전체 콘텐츠 영역의 확대 수준을 조정하여 콘텐츠의 보다 자세한 보기를 제공합니다. 반대로 크기 조정은 콘텐츠 영역 보기는 바꾸지 않으면서 콘텐츠 영역 내에 있는 하나 이상의 개체의 상대 크기를 조정하는 기술입니다. 위쪽의 두 이미지는 광학 줌을 보여 주고 아래쪽의 두 이미지는 다른 개체 크기는 바꾸지 않으면서 화면에 있는 직사각형의 크기를 조정하는 모습을 보여 줍니다. 자세한 내용은 광학 줌 및 크기 조정에 대한 지침을 참조하세요.

광학 줌 조작

크기 조정 조작

시맨틱 줌

시맨틱 줌은 이동, 스크롤 또는 트리 보기 컨트롤이 없이도 단일 보기(예: 컴퓨터의 폴더 구조, 문서 라이브러리 또는 사진 앨범) 내에서 구조화된 데이터 또는 콘텐츠를 표시하고 탐색하기 위한 터치 최적화 기술입니다. 시맨틱 줌은 확대할 때는 더 자세히 표시하고 축소할 때는 덜 자세히 표시하여 같은 콘텐츠를 두 개의 다른 보기로 제공합니다. 자세한 내용은 시맨틱 줌 에 대한 지침을 참조하세요.

시맨틱 줌 조작

회전

회전 제스처는 평면 위에서 종이 한 장을 돌리는 경험을 시뮬레이트합니다. 이 조작은 두 손가락을 개체에 놓고 한 손가락을 중심으로 다른 손가락을 돌리거나 중심점을 축으로 두 손가락을 돌려 또는 원하는 방향으로 손을 돌려 수행됩니다. 같은 손의 두 손가락이나 양쪽의 손가락 하나씩을 사용할 수 있습니다. 자세한 내용은 회전에 대한 지침을 참조하세요.

회전 조작

선택 및 이동

밀기 및 살짝 밀기 제스처는 운동 방향이 콘텐츠 영역의 이동 방향에 수직인 교차 방향으로 밀기 조작에 사용됩니다. 이러한 동작은 선택으로 해석하고, 거리 임계값을 초과하면 이동(끌기) 조작 방식으로 해석합니다. 다음 다이어그램에서 이러한 프로세스에 대해 설명합니다. 자세한 내용은 교차 방향으로 밀기에 대한 지침을 참조하세요.

선택한 후 끌어서 놓기 조작

명령 모음 표시

살짝 밀기 제스처는 다양한 명령 모음이나 로그인 화면을 표시합니다.

앱 명령은 화면의 아래쪽이나 위쪽 가장자리부터 살짝 밀면 표시됩니다. 앱 명령을 표시하려면 AppBar를 사용하세요.

앱 명령 표시

시스템 명령은 오른쪽 가장자리로부터 밀면 표시되고, 최근에 사용된 앱은 왼쪽 가장자리로부터 밀면 표시됩니다. 또한 위쪽 가장자리에서 아래쪽 가장자리로 밀면 고정 또는 닫기 명령이 표시됩니다.

시스템 명령 표시