일반적인 사용자 조작에 대한 지침(Windows 스토어 앱)
이러한 지침은 어떤 장치 또는 입력 방법을 사용하든 모든 사용자에게 Windows 스토어 앱에 대해 일관된 기능을 제공하는 편리한 몰입형 사용자 환경을 만드는 데 도움을 줄 것입니다.
Windows 8은 터치 방식으로 최적화된 독특하고 구분되는 사용자 조작을 제공하지만 보다 익숙하고 자리 잡은 입력 장치 및 방법(예: 마우스, 키보드 및 펜/스타일러스)은 계속해서 완전히 지원되고 있습니다.
따라서 Windows 8용 Windows 스토어 앱을 만들 때 이러한 새롭고 매력적인 조작 기능을 활용해 보세요.
터치 우선식 환경에 맞는 디자인
먼저 터치가 사용자의 기본적인 입력 방법이 될 것이라는 가정 하에 앱을 디자인하세요. Windows 8에서 마우스 및 펜/스타일러스를 무료로 지원하므로 지원을 위해 추가 작업이 필요하지 않습니다.
터치용으로 최적화된 UI가 전형적인 UI보다 나을 필요는 없습니다. 두 가지 UI 모두 기술 및 응용 방식에 있어서 장단점이 있습니다. 터치 우선식 UI로 전환할 경우 터치, 마우스 및 펜/스타일러스 입력 간의 주요 차이점을 이해하는 것이 중요합니다. Windows 8의 터치 기능은 단순히 마우스 기능을 에뮬레이트하는 데 그치지 않으므로 친숙한 마우스 및 펜/스타일러스 속성과 동작을 그대로 가져오는 방식은 바람직하지 않습니다.
이러한 지침을 살펴보면 터치 입력에 맞는 UI를 디자인할 때는 다른 방식의 접근이 필요하다는 사실을 알 수 있게 될 것입니다.
터치 조작 요구 사항 비교
간접 포인팅 장치가 아닌 터치 조작을 사용할 경우 컨트롤 및 개체의 직접적인 조작이 가능합니다. 단일 장치인 디스플레이에 터치 입력과 시각적 피드백이 모두 제공됩니다.
다음 표에는 터치 최적화 Windows 스토어 앱을 디자인할 때 고려해야 할 일부 차별화 요인이 나와 있습니다.
| 요인 | 터치 조작 | 마우스, 키보드, 펜/스타일러스 조작 |
|---|---|---|
| 정밀도 | 손가락 끝의 접촉 영역이 단일 x-y 좌표보다 크므로 의도하지 않은 명령을 활성화할 가능성이 높아집니다. | 마우스 및 펜/스타일러스는 정확한 x-y 좌표를 제공합니다. |
| 접촉 영역의 모양이 움직이면서 달라집니다. | 마우스 움직임 및 펜/스타일러스 스트로크는 정확한 x-y 좌표를 제공합니다. 키보드 포커스가 명확합니다. | |
| 대상 지정을 지원하는 마우스 커서가 없습니다. | 마우스 커서, 펜/스타일러스 커서, 키보드 포커스가 모두 대상 지정을 지원합니다. | |
| 인체 구조 | 손 관절의 곡률과 동작에 관여하는 관절의 수 때문에 하나 이상의 손가락을 사용하여 직선으로 동작하는 것은 어렵습니다. 따라서 손가락 끝으로 이동하는 자체가 정확하지 않다고 볼 수 있습니다. | 손으로 마우스나 펜/스타일러스를 조정할 경우에는 화면의 커서보다 실제로 더 짧은 거리를 이동하게 되므로 이러한 도구로 직선 동작을 수행하는 것이 더 쉽습니다. |
| 디스플레이 장치에서 터치 화면의 일부 영역은 손가락 포스처 때문에, 그리고 사용자가 장치를 잡아야 하기 때문에 닿기 어려울 수 있습니다. | 마우스 및 펜/스타일러스는 탭 순서를 통해 키보드로 컨트롤에 액세스하면서 화면의 어디에든 닿을 수 있습니다. | |
| 하나 이상의 손가락이나 사용자의 손으로 물체를 가릴 수 있습니다. 이것을 폐색이라고 합니다. | 간접 입력 장치는 폐색을 야기하지 않습니다. | |
| 개체 상태 | 터치는 두 개의 상태로 존재하는 모델을 사용합니다. 디스플레이 장치의 터치 표면은 터치됨(켜짐) 또는 터치되지 않음(꺼짐)으로 존재합니다. 추가적인 시각적 피드백을 발생할 수 있는 가리키기 상태는 없습니다. |
마우스, 펜/스타일러스 및 키보드는 모두 위쪽(꺼짐), 아래쪽(켜짐), 및 가리키기(포커스)의 세 가지 상태로 존재합니다. 가리키기를 사용하면 UI 요소와 관련된 도구 설명을 보고 정보를 얻을 수 있습니다. 가리키기 및 포커스 효과는 조작하는 개체에 연결되며 대상지정에도 도움이 될 수 있습니다. |
| 풍부한 조작 방식 | 멀티 터치, 즉 터치 화면의 다중 입력 지점(손가락 끝)이 지원됩니다. | 단일 입력 지점이 지원됩니다. |
| 탭하기, 끌기, 밀기, 손가락 모으기 및 회전과 같은 동작을 통해 개체를 직접적으로 조작할 수 있습니다. | 마우스, 펜/스타일러스 및 키보드는 간접 입력 장치이므로 직접 조작은 지원되지 않습니다. |
참고
마우스 입력은 25년 넘게 미세 조정된 여러 이점을 제공합니다. 가리키기로 트리거되는 도구 설명과 같은 기능은 마우스, 펜/스타일러스 및 키보드 입력을 비롯한 UI 탐색 문제를 해결하기 위해 고안되었습니다. Windows Touch을 사용할 경우 이와 같은 UI 기능은 다른 장치에 대한 사용자 경험을 그대로 유지하면서 터치식 입력이 제공하는 이점을 제공하는 방식으로 디자인됩니다.
터치 피드백 사용
앱과의 조작 중에 적절한 시각적 피드백이 제공되면 사용자들이 앱 및 Windows 8에서 조작이 해석되는 방식을 인식하고, 익히고, 적응하는 데 도움이 됩니다. 시각적 피드백은 성공적인 조작을 알리고, 시스템 상태를 전달하고, 제어 기능을 향상시키고, 오류를 줄이고, 사용자가 시스템 및 입력 장치를 이해하는 데 도움을 주고, 조작을 권장할 수 있습니다.
위치에 따라 정확도와 정밀도를 요구하는 활동을 위해 터치식 입력에 의존할 때는 시각적 피드백이 중요합니다. 터치식 입력이 감지될 때마다 피드백을 표시하면 사용자가 앱 및 컨트롤이 정의하는 사용자 지정 대상 지정 추론을 이해하는 데 도움이 됩니다.
몰입형 조작 환경 만들기
다음 기술은 Windows 스토어 앱의 몰입형 환경을 향상시키는 데 사용됩니다.
대상 지정
다음을 통해 대상을 최적으로 지정할 수 있습니다.
- 터치 대상 크기
크기 지우기 지침을 통해 응용 프로그램에서 대상에 쉽고 안전한 개체 및 컨트롤이 포함된 익숙한 UI를 제공할 수 있습니다.
- 접촉 기하
손가락의 전체 접촉 영역을 사용하여 가장 비슷한 대상 개체를 결정합니다.
- 스크러빙
항목(예: 라디오 단추) 간을 손가락으로 끌어서 그룹 내의 항목 대상을 쉽게 다시 지정합니다. 손가락을 떼면 현재 항목이 활성화됩니다.
- 로킹
손가락을 아래로 누르고 밀지 않고 앞뒤로 흔들어 고밀도로 압축된 항목(예: 하이퍼링크) 대상을 쉽게 다시 지정합니다. 폐색으로 인해 현재 항목이 도구 설명 또는 상태바를 통해 식별되며 손가락을 떼면 활성화됩니다.
정확도
정확하지 않은 조작에 대해 다음을 사용하여 디자인합니다.
- 콘텐츠를 조작할 때 원하는 위치에서 쉽게 멈출 수 있는 끌기 지점
- 손이 약간 호를 그리며 움직일 경우에도 가로 또는 세로로 이동하도록 도와주는 방향 "길" 자세한 내용은 이동에 대한 지침을 참조하세요.
폐색
다음을 통해 손가락 및 손의 폐색을 피합니다.
- UI 크기 및 위치 지정
손가락 끝 접촉 영역으로는 완전히 커버할 수 없도록 UI 요소를 크게 만듭니다.
가능할 때마다 메뉴와 팝업을 접촉 영역에 놓습니다.
- 도구 설명
손가락이 개체에 접촉하고 있을 때 도구 설명을 표시합니다. 이는 개체 기능을 설명하는 데 유용합니다(손가락 끝을 개체에 끌어놓고 떼야 개체가 실행되지 않습니다.).
작은 개체의 경우 도구 설명을 상쇄시켜 손가락 끝 접촉 영역으로 커버되지 않게 합니다. 이는 대상을 지정하는 데 도움이 됩니다.
- 정확도용 핸들
텍스트 선택과 같이 정확해야 하는 경우 정확도를 향상시키도록 선택 핸들을 제공합니다. 자세한 내용은 텍스트 및 이미지 선택에 대한 지침을 참조하세요.
타이밍
개체의 직접적인 실시간 물리적 처리를 시뮬레이트하는 직접 조작의 경우 시간 제한 모드를 변경하지 않도록 합니다. 개체는 손가락이 이동할 때 반응합니다.
반면에 시간이 제한된 조작은 터치 조작 이후에 발생합니다. 시간이 제한된 조작은 일반적으로 시간, 거리 또는 속도와 같은 보이지 않는 임계값에 의존하여 수행할 명령을 결정합니다. 시간이 제한된 조작은 시스템이 동작을 수행할 때까지 시각적 피드백을 제공하지 않습니다.
직접적인 조작은 시간이 제한된 조작에 많은 이점을 제공합니다.
- 조작하는 동안의 즉각적인 시각적 피드백으로 인해 사용자는 제대로 작업 중이라고 좀 더 확신하게 됩니다.
- 직접적인 조작은 복구가 가능하기 때문에 시스템을 좀 더 안전하게 탐색할 수 있습니다. 사용자는 작업하는 동안 논리적 및 직관적인 방법으로 쉽게 이전 단계로 갈 수 있습니다.
- 개체에 직접적인 영향을 주는 조작 및 실제와 비슷하게 모방한 조작은 좀 더 직관적이고 검색하기 쉬우며 기억하기 쉽고, 애매하거나 난해한 조작에 의존하지 않습니다.
- 시간이 제한된 조작은 사용자가 보이지 않는 임의의 임계값에 도달해야 하므로 수행하기 어려울 수 있습니다.
그 외에도 다음과 같이 하는 것이 좋습니다.
- 사용한 손가락 수로 조작을 구별해서는 안 됩니다.
- 조작 방식은 복합적인 조작을 지원해야 합니다. 예를 들어, 손가락을 끌어서 이동하는 동안 손가락을 모아 확대/축소할 경우
- 조작은 시간으로 구분되어서는 안 됩니다. 같은 조작은 수행하는 데 걸린 시간과 상관 없이 결과가 같아야 합니다. 시간 기반 활성화는 사용자를 강제로 지연시키며 직접 조작의 몰입성과 시스템 응답 성능의 인식 능력을 모두 저하시킵니다.
참고 특정 시간으로 지정된 조작 방식이 학습 및 탐색을 돕는 데 사용되는 경우에는 예외입니다. 예: 길게 누르기
- 적절한 설명 및 시각 신호는 앞으로의 조작에 큰 영향을 미칩니다.
마우스, 펜, 키보드 및 터치 우선 환경
앞서 설명한 것처럼 각 입력 방법은 각자 장단점을 갖습니다. 마우스 기반 UI는 터치 입력식으로 최적화되어 있지 않습니다. 마찬가지로 터치 최적화 UI 디자인은 마우스, 펜/스타일러스 및 키보드 사용자를 위해 디자인 효과를 인식하고 고려해야 합니다. 즉, Windows 8 터치 최적화 응용 프로그램은 동등한 기능을 제공하는 효율적이고 직관적인 조작을 지원해야 합니다.
한 가지 예로 이동 기능을 들 수 있습니다. 이동은 마우스, 펜/스타일러스 및 키보드 사용자를 위한 스크롤 기능과 비교할 때 터치 사용자 사용자를 위한 아주 색다른 환경입니다. 이동은 관성 물리학 및 애니메이션으로 콘텐츠를 끌고 미는 기능을 통해 터치 방식에 딱 맞게 디자인되어 있습니다. 이러한 유형의 동작은 마우스나 펜/스타일러스로는 수행하기가 훨씬 더 어려우며 키보드로는 불가능합니다. 이러한 방식은 모두 친숙하고 확실히 인증된 스크롤 방법을 제공하고 있습니다.
또한 키보드는 텍스트 입력과 편집, 명령 바로 가기에 맞게 최적화되어 있습니다.
이러한 이유로 앱의 요구에 따라 여러 다양한 조작 모델이 입력 유형의 고유한 특성에 보다 잘 맞을 수 있습니다. 다음 표에서는 일반적인 조작과 이러한 조작이 Windows 8에서 터치, 마우스 및 키보드 중 어떤 동작에 해당하는지 설명합니다.
| 조작 | 터치 | 마우스 | 키보드(하드웨어) | 펜/스타일러스 |
|---|---|---|---|---|
| 선택 | 스크롤 방향 반대쪽으로 살짝 밀기(크로스 밀기에 대한 지침 참조) | 마우스 오른쪽 단추 클릭 | 스페이스바 | 스크롤 방향 반대쪽으로 살짝 밀기(크로스 밀기에 대한 지침 참조) |
| 앱 바 표시 | 위쪽 또는 아래쪽 가장자리에서 살짝 밀기 | 마우스 오른쪽 단추 클릭 | Windows 로고 키+Z, 메뉴 키 | 위쪽 또는 아래쪽 가장자리에서 살짝 밀기 |
| 상황에 맞는 메뉴 | 선택한 텍스트를 탭하고 길게 누르기 | 마우스 오른쪽 단추 클릭 | 메뉴 | 선택한 텍스트를 탭하고 길게 누르기 |
| 시작/활성화 | 탭하기 | 마우스 왼쪽 단추 클릭 | Enter | 탭하기 |
| 짧은 거리 스크롤 | 밀기 | 스크롤 막대, 화살표 키, 마우스 왼쪽 단추를 클릭하고 밀기 | 화살표 키 | 스크롤 막대 |
| 먼 거리 스크롤 | 밀기(관성 포함) | 스크롤 막대, 마우스 휠, 마우스 왼쪽 단추를 클릭하고 밀기 | Page Up 또는 Page Down | 스크롤 막대 |
| 다시 정렬(끌기) | 스크롤 방향 반대쪽으로 거리 임계값을 지날 때까지 밀기(크로스 밀기에 대한 지침 참조) | 마우스 왼쪽 단추를 클릭하고 밀기 | Ctrl-C, Ctrl-V | 스크롤 방향 반대쪽으로 거리 임계값을 지날 때까지 밀기(크로스 밀기에 대한 지침 참조) |
| 확대/축소 | 손가락 모으기, 확대 | 마우스 휠, Ctrl+마우스 휠, UI 명령 | Ctrl+더하기(+)/빼기(-) | UI 명령 |
| 회전 | 회전 | Ctrl+Shift+마우스 휠, UI 명령 | Ctrl+더하기(+)/빼기(-) | UI 명령 |
| 커서 삽입/텍스트 선택 | 탭하기, 위치 조정 막대 탭하기 | 마우스 왼쪽 단추 클릭+밀기, 두 번 클릭 | 화살표 키, Shift+화살표 키, Ctrl+화살표 키 등 | 탭하기, 위치 조정 막대 탭하기 |
| 추가 정보 | 길게 누르기 | 가리키기(시간 임계값 포함) | 포커스 사각형 이동(시간 임계값 포함) | 길게 누르기 |
| 조작 방식 피드백 | 터치 시각화 | 커서 이동, 커서 변경 | 포커스 사각형 | 펜 시각화 |
| 포커스 이동 | 해당 없음 | 해당 없음 | 화살표 키, 탭하기 | 해당 없음 |
관련 항목
