터치 중심의 사이트 구축에 대한 지침
Windows 8 Consumer Preview의 IE10은 웹에서 빠르고 유연한 멀티 터치 경험을 지원합니다. IE10에서 구동되는 대부분의 사이트는 별도의 변경 없이도 우수한 터치 경험을 지원합니다. 이 글에서는 터치 기능을 사용하는 고객이 여러분의 사이트를 '가장 효과적으로' 사용할 수 있도록 하기 위한 간단한 지침을 제공합니다.
이전 글에서는 새로운 입력 장치 및 터치 스크린을 사용하여 웹을 더욱 흥미롭게 만들고 대화형 기능 및 몰입도를 향상시키는 방법에 대해 살펴보았습니다. 또한 실제 웹이 원활한 터치 제스처를 지원하기 위해서는 환경에 영향을 주지 않는 IE10의 브라우징 경험이 중요하다는 점을 강조했습니다.
아래 네 가지 지침 중 처음 두 개는 터치 사용자가 사이트의 모든 기능에 액세스할 수 있도록 합니다. 나머지 두 개는 사이트에서 터치를 보다 쉽게 사용할 수 있는 방법에 대한 유용한 정보를 제공합니다.
마우스로 콘텐츠를 가리키는 동작은 잊으십시오.
마우스는 콘텐츠를 활성화(클릭)하지 않고 가리킬 수 있습니다. 그러나 터치를 사용할 경우 탭은 한 번의 동작으로 가리키기와 활성화를 동시에 실행합니다. 따라서 활성화하지 않고 가리켜야 하는 기능은 터치 사용자에게 적용되지 않습니다. 대신 모든 동작을 클릭(탭) 기반으로 만드는 것이 좋습니다.
브라우저에서 사이트와 원활하게 작동하는 기본 터치 동작을 구성하십시오.
사용자는 터치를 사용하여 사이트를 이동하고 확대/축소할 수 있어야 합니다. 따라서 브라우저는 터치 이동, 손가락 모으기 및 두 번 탭을 기본적으로 사용하며 이러한 상호 작용에 대한 이벤트를 보내지 않습니다. 사이트에서 이러한 상호 작용에 대한 특정 기능을 제공해야 하는 경우 원하는 기본 동작(있을 경우)만 제공하도록 IE10을 구성해야 합니다.
사용자가 요소를 터치하면 -ms-touch-action CSS 속성에 따라 IE10에서 제공하는 기본 동작이 결정됩니다.
-ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;
아래 표에 다섯 가지 가능한 값이 나와 있습니다.
| 값 | 설명 |
|---|---|
auto |
브라우저가 요소의 동작을 결정합니다. 이는 -ms-touch-action의 기본값입니다. |
none |
허용되는 기본 동작이 없습니다. |
manipulation |
이동, 손가락을 모아서 축소/확대 및 살짝 밀어서 앞/뒤로 이동만 허용됩니다. |
double-tap-zoom |
두 번 탭하여 확대/축소만 허용됩니다. |
inherit |
요소가 해당 상위 요소에서 -ms-touch-action 값을 상속합니다. |
예를 들어 캔버스 그리기 응용 프로그램에서는 다음을 사용할 수 있습니다.
canvas {
-ms-touch-action: double-tap-zoom;
}
이 구성을 사용할 경우 사용자는 두 번 탭하여 캔버스 요소로 확대할 수 있지만 게임 요소를 손가락으로 살짝 밀면 페이지가 이동하는 대신 캔버스로 이벤트가 전송됩니다.
HTML5 형식으로 입력 유형을 정의하십시오.
IE10에서는 모두 터치에 최적화된 HTML5 입력 컨트롤을 지원합니다. 텍스트 입력의 경우 특정 입력 유형을 정의함으로써 사용자의 터치 경험을 더욱 향상시킬 수 있습니다. Internet Explorer에서 Windows 8의 정의된 입력 유형에 맞게 맞춤형 터치 키보드 자판 배열을 표시해 줄 것입니다.
<input type="email">
터치 키보드에 이메일 주소용 @ 및 ".com" 단추가 표시됩니다.
<input type="tel">
터치 키보드에 전화 번호용 숫자 패드가 표시됩니다.
<input type="url">
터치 키보드에 URL용 슬래시 및 ".com"이 표시됩니다.
사용자의 손가락을 위한 충분한 공간을 제공하십시오.
Windows 8의 터치 중심 환경을 구축하기 위해 우리는 수많은 연구 끝에 개발자를 위한 몇 가지 유용한 지침을 마련했습니다. 손가락의 평균 너비는 11mm입니다. 탭 대상이 넓을수록 실수로 탭을 누락할 가능성이 크게 감소합니다.
이상적인 대상은 2mm(약 10픽셀) 이상의 안쪽 여백이 있는 '최소' 11mm(약 40픽셀) 정사각형입니다.
| 40픽셀 이상의 대상 크기 | |||
| 10픽셀 이상의 대상 간격 | |||
터치 하드웨어 사용자에 대해서만 공백을 조정하려면 검색 기능을 사용하십시오.
사용자에게 터치 하드웨어가 있는지 검색하려면 다음과 같이 합니다.
if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) {
// Supports multi-touch
}
고급 지침
뛰어난 터치 중심 환경을 만들기 위해 훨씬 많은 것을 할 수 있습니다. 예를 들어 사용자 지정 멀티 터치 상호 작용 또는 제스처를 지원하여 터치에 최적화할 수 있습니다. 다음은 시작하는 데 도움이 되는 몇 가지 링크입니다.
이러한 방법에 대해서는 다음 기회에 자세히 알아보겠습니다. 지금 바로 이와 같은 지침을 여러분의 사이트에 반영시켜 본다면 IE10에서 좀 더 원활한 터치 기능을 지원하실 수 있게 될 것입니다.
- Internet Explorer 프로그램 관리자 Jacob Rossi