터치 조작에 대한 지침

Applies to Windows and Windows Phone

설명

터치에 최적화된 동시에 입력 장치 간에 기능적으로 일관된, 직관적이고 차별화된 사용자 조작 환경을 갖춘 Windows 스토어 앱을 만들 수 있습니다.

Windows의 매력적인 조작 접근 권한 값을 이용해 보세요. 이 지침이 도움이 될 것입니다.

앱 기능 전체 프로세스 시리즈의 일부로 이 기능의 작동 방법을 살펴보세요.:  사용자 조작: 터치식 입력... 등

권장 사항 및 금지 사항

  • 터치 조작이 있는 응용 프로그램을 기본 입력 방법으로 디자인합니다.
  • 모든 유형의 조작(터치, 펜, 스타일러스, 마우스 등)에 대한 시각적 피드백을 제공합니다.
  • 터치 대상 크기, 접촉 기하, 스크러빙 및 로킹을 조정하여 대상을 최적화합니다.
  • 끌기 지점 및 방향 "레일"을 사용하여 정확도를 최적화합니다.
  • 밀접하게 압축된 UI 항목의 터치 정확도를 향상시키기 위해 도구 설명 및 핸들을 제공합니다.
  • 가능하면 기간이 정해진 조작을 사용하지 마세요(적절한 사용의 예: 길게 누르기).
  • 가능하면 조작을 구분하기 위해 손가락 수를 사용하지 마세요.

추가 사용법 지침

먼저 터치가 사용자의 기본적인 입력 방법이 될 것이라는 가정 하에 앱을 디자인하세요. 플랫폼 컨트롤을 사용하는 경우 터치 패드, 마우스 및 펜/스타일러스 지원은 Windows 8에서 무료로 제공되기 때문에 추가 프로그래밍이 필요하지 않습니다.

그러나 터치에 최적화된 UI가 기존 UI보다 항상 나은 것은 아닙니다. 둘 다 기술 및 응용 방식에 고유한 장점과 단점이 있습니다. 터치 우선식 UI로 전환할 경우 터치(터치 패드 포함), 펜/스타일러스, 마우스 및 키보드 입력 간의 주요 차이점을 이해하는 것이 중요합니다. Windows 8의 터치 기능은 단순히 기능을 에뮬레이트하는 데 그치지 않으므로 친숙한 입력 장치 속성과 동작을 그대로 가져오는 방식은 바람직하지 않습니다.

이러한 지침을 살펴보면 터치 입력에 맞는 UI를 디자인할 때는 다른 방식의 접근이 필요하다는 사실을 알 수 있게 될 것입니다.

터치 조작 요구 사항 비교

다음 표에는 터치 최적화된 Windows 스토어 앱을 디자인할 때 고려해야 할 입력 장치 간의 몇 가지 차이점이 나와 있습니다.

요인터치 조작마우스, 키보드, 펜/스타일러스 조작터치 패드
정밀도손가락 끝의 접촉 영역이 단일 x-y 좌표보다 크므로 의도하지 않은 명령을 활성화할 가능성이 높아집니다.마우스 및 펜/스타일러스는 정확한 x-y 좌표를 제공합니다.마우스와 동일합니다.
접촉 영역의 모양이 움직이면서 달라집니다. 마우스 움직임 및 펜/스타일러스 스트로크는 정확한 x-y 좌표를 제공합니다. 키보드 포커스가 명확합니다.마우스와 동일합니다.
대상 지정을 지원하는 마우스 커서가 없습니다.마우스 커서, 펜/스타일러스 커서, 키보드 포커스가 모두 대상 지정을 지원합니다.마우스와 동일합니다.
인체 구조하나 이상의 손가락을 사용하여 직선으로 이동하는 것은 어렵기 때문에 손끝을 이용한 이동은 정확하지 않습니다. 이것은 손 마디의 곡률과 동작에 관련된 마디 수 때문입니다.손으로 마우스나 펜/스타일러스를 조정할 경우에는 화면의 커서보다 실제로 더 짧은 거리를 이동하게 되므로 이러한 도구로 직선 동작을 수행하는 것이 더 쉽습니다.마우스와 동일합니다.
디스플레이 장치에서 터치 화면의 일부 영역은 손가락 포스처 때문에, 그리고 사용자가 장치를 잡아야 하기 때문에 닿기 어려울 수 있습니다.마우스 및 펜/스타일러스는 탭 순서를 통해 키보드로 컨트롤에 액세스하면서 화면의 어디에든 닿을 수 있습니다. 손가락 위치와 잡는 방법이 문제가 될 수 있습니다.
하나 이상의 손가락이나 사용자의 손으로 물체를 가릴 수 있습니다. 이것을 폐색이라고 합니다.간접 입력 장치는 폐색을 야기하지 않습니다.마우스와 동일합니다.
개체 상태터치는 두 개의 상태로 존재하는 모델을 사용합니다. 디스플레이 장치의 터치 표면은 터치됨(켜짐) 또는 터치되지 않음(꺼짐)으로 존재합니다. 추가적인 시각적 피드백을 발생할 수 있는 가리키기 상태는 없습니다.

마우스, 펜/스타일러스 및 키보드는 모두 위쪽(꺼짐), 아래쪽(켜짐), 및 가리키기(포커스)의 세 가지 상태로 존재합니다.

가리키기를 사용하면 UI 요소와 관련된 도구 설명을 보고 정보를 얻을 수 있습니다. 가리키기 및 포커스 효과는 조작하는 개체에 연결되며 대상지정에도 도움이 될 수 있습니다.

마우스와 동일합니다.
풍부한 조작 방식멀티 터치, 즉 터치 화면의 다중 입력 지점(손가락 끝)이 지원됩니다.단일 입력 지점이 지원됩니다.터치와 동일합니다.
탭하기, 끌기, 밀기, 손가락 모으기 및 회전과 같은 동작을 통해 개체를 직접적으로 조작할 수 있습니다.마우스, 펜/스타일러스 및 키보드는 간접 입력 장치이므로 직접 조작은 지원되지 않습니다.마우스와 동일합니다.

 

참고  

간접 입력은 25년 이상 미세 조정된 이점을 제공합니다. 가리키기로 트리거되는 도구 설명과 같은 기능은 터치 패드, 마우스, 펜/스타일러스 및 키보드 입력을 비롯한 UI 탐색 문제를 해결하도록 디자인되었습니다. 이러한 UI 기능은 다른 장치의 사용자 환경을 손상시키지 않고 터치 입력에서 제공하는 풍부한 환경에 맞게 다시 디자인되었습니다.

터치 피드백 사용

앱과의 조작 중에 적절한 시각적 피드백이 제공되면 사용자들이 앱 및 Windows 8에서 조작이 해석되는 방식을 인식하고, 익히고, 적응하는 데 도움이 됩니다. 시각적 피드백은 성공적인 조작을 알리고, 시스템 상태를 전달하고, 제어 기능을 향상시키고, 오류를 줄이고, 사용자가 시스템 및 입력 장치를 이해하는 데 도움을 주고, 조작을 권장할 수 있습니다.

위치에 따라 정확도와 정밀도를 요구하는 활동에 터치식 입력을 사용할 경우 시각적 피드백이 중요합니다. 터치식 입력이 감지될 때마다 피드백을 표시하면 사용자가 앱 및 컨트롤이 정의하는 사용자 지정 대상 지정 규칙을 이해하는 데 도움이 됩니다.

몰입형 조작 환경 만들기

다음 기술은 Windows 스토어 앱의 몰입형 환경을 향상시킵니다.

대상 지정

다음을 통해 대상을 최적으로 지정할 수 있습니다.

  • 터치 대상 크기

    크기 지우기 지침을 통해 응용 프로그램에서 대상에 쉽고 안전한 개체 및 컨트롤이 포함된 익숙한 UI를 제공할 수 있습니다.

  • 접촉 기하

    손가락의 전체 접촉 영역은 가장 가능성이 큰 대상 개체를 결정합니다.

  • 스크러빙

    항목(예: 라디오 단추) 간을 손가락으로 끌어서 그룹 내의 항목 대상을 쉽게 다시 지정합니다. 손가락을 떼면 현재 항목이 활성화됩니다.

  • 로킹

    손가락을 아래로 누르고 밀지 않고 앞뒤로 흔들어 고밀도로 압축된 항목(예: 하이퍼링크) 대상을 쉽게 다시 지정합니다. 폐색으로 인해 현재 항목이 도구 설명 또는 상태바를 통해 식별되며 손가락을 떼면 활성화됩니다.

정확도

정확하지 않은 조작에 대해 다음을 사용하여 디자인합니다.

  • 사용자가 콘텐츠를 조작할 때 원하는 위치에서 쉽게 멈출 수 있는 끌기 지점
  • 손이 약간 호를 그리며 움직일 경우에도 가로 또는 세로로 이동하도록 도와주는 방향 "길" 자세한 내용은 이동에 대한 지침을 참조하세요.

폐색

다음을 통해 손가락 및 손의 폐색을 피합니다.

  • UI 크기 및 위치 지정

    손가락 끝 접촉 영역으로는 완전히 커버할 수 없도록 UI 요소를 크게 만듭니다.

    가능할 때마다 메뉴와 팝업을 접촉 영역에 놓습니다.

  • 도구 설명

    손가락을 개체에 접촉한 상태로 유지하면 도구 설명을 표시합니다. 도구 설명은 개체 기능을 설명하는 데 유용합니다. 사용자는 도구 설명이 호출되지 않도록 개체에서 손가락을 뗄 수 있습니다.

    작은 개체의 경우 도구 설명을 상쇄시켜 손가락 끝 접촉 영역으로 커버되지 않게 합니다. 이는 대상을 지정하는 데 도움이 됩니다.

  • 정확도용 핸들

    텍스트 선택과 같이 정확해야 하는 경우 정확도를 향상시키도록 선택 핸들을 제공합니다. 자세한 내용은 텍스트 및 이미지 선택에 대한 지침을 참조하세요.

타이밍

직접 조작을 위해 시간 제한 모드를 변경하지 마세요. 직접 조작은 개체의 직접적인 실시간 실제 처리를 시뮬레이트합니다. 개체는 손가락이 이동할 때 반응합니다.

반면에 시간이 제한된 조작은 터치 조작 이후에 발생합니다. 시간이 제한된 조작은 일반적으로 시간, 거리 또는 속도와 같은 보이지 않는 임계값에 의존하여 수행할 명령을 결정합니다. 시간이 제한된 조작은 시스템이 동작을 수행할 때까지 시각적 피드백을 제공하지 않습니다.

직접적인 조작은 시간이 제한된 조작에 많은 이점을 제공합니다.

  • 조작하는 동안의 즉각적인 시각적 피드백으로 인해 사용자는 제대로 작업 중이라고 좀 더 확신하게 됩니다.
  • 직접적인 조작은 복구가 가능하기 때문에 시스템을 좀 더 안전하게 탐색할 수 있습니다. 사용자는 작업하는 동안 논리적 및 직관적인 방법으로 쉽게 이전 단계로 갈 수 있습니다.
  • 개체에 직접적인 영향을 주는 조작 및 실제와 비슷하게 모방한 조작은 좀더 직관적이고 검색 및 기억하기 쉽습니다. 모호하거나 추상적인 조작을 사용하지 않습니다.
  • 시간이 제한된 조작은 사용자가 보이지 않는 임의의 임계값에 도달해야 하므로 수행하기 어려울 수 있습니다.

그 외에도 다음과 같이 하는 것이 좋습니다.

  • 사용한 손가락 수로 조작을 구별해서는 안 됩니다.
  • 조작 방식은 복합적인 조작을 지원해야 합니다. 예를 들어, 손가락을 끌어서 이동하는 동안 손가락을 모아 확대/축소할 경우
  • 조작은 시간으로 구분되어서는 안 됩니다. 같은 조작은 수행하는 데 걸린 시간과 상관 없이 결과가 같아야 합니다. 시간 기반 활성화는 사용자를 강제로 지연시키며 직접 조작의 몰입성과 시스템 응답 성능의 인식 능력을 모두 저하시킵니다.

    참고  학습 및 탐색에 도움이 되도록 특정 시간이 지정된 조작을 사용하는 경우는 예외입니다(예: 길게 누르기).

  • 적절한 설명 및 시각 신호는 앞으로의 조작에 큰 영향을 미칩니다.

관련 항목

디자이너용
사용자 조작에 응답
제스처, 조작 및 상호 작용
터치 조작 디자인
교차 방향으로 밀기에 대한 지침
광학 확대/축소 및 크기 조정에 대한 지침
이동에 대한 지침
회전에 대한 지침
시맨틱 줌에 대한 지침
텍스트 및 이미지 선택에 대한 지침
대상 지정에 대한 지침
시각적 피드백에 대한 지침

 

 

표시:
© 2014 Microsoft