터치 지원 사이트 구현

Windows 8부터 Internet Explorer 10은 웹에서 빠르고 유연한 멀티 터치 환경을 사용할 수 있고 스크롤 가능 영역에 대한 이동, 두 번 탭하기 및 손가락 모으기로 확대/축소, 터치 선택 및 컨텍스트 메뉴 길게 누르기 같은 기본 터치 조작에 대한 공통 기본 처리를 제공합니다. 이 가이드에서는 터치를 사용하는 사용자가 사이트를 가장 효과적으로 사용할 수 있도록 하는 터치 지원 디자인 지침과 문제 해결을 위한 제안 사항을 제공합니다.

터치 지원 사이트를 위한 디자인 지침

가리키기를 사용하여 콘텐츠 숨기지 않기

터치 기반 검색에서는 커서로 웹 페이지 요소를 가리키는 것에 해당하는 동작이 없습니다. 따라서 터치 기반 사용자는 가리키기에 의해 활성화되는 동작이나 콘텐츠는 잠재적으로 사용할 수 없습니다. 이 문제가 발생할 수 있는 일반적인 시나리오는 가리키기로 활성화되는 하위 메뉴입니다. 이러한 문제를 방지하려면 가리키기를 사용하여 사용자가 조작할 수 있는 콘텐츠를 숨기지 마세요. 대신 onclick 이벤트를 사용하여 표시 유형을 전환합니다.


<style type="text/css">
    #subMenu {
        display: none;
    }
    #subMenu.showSubMenu {
        display: block;
    }
</style>
...
<script>
    function toggleMenu() {
        var subMenu = document.getElementById("subMenu");
        subMenu.classList.toggle("showSubMenu");
    }
</script>
...
<div id="menu" onclick="toggleMenu()">
    <a>JavaScript Hover Menu</a>
    <div id="subMenu">
        <div class="subMenuItem"> 
            <a>Sub menu item 1</a>
        </div>
        <div class="subMenuItem">
            <a>Sub menu item 2</a>
        </div>
    </div>
</div>


Internet Explorer 10은 기존 aria-haspopup 속성에 새 동작을 추가하여 숨겨진 대화형 콘텐츠가 있는 페이지 요소에서 가리키기를 시뮬레이션합니다.


<style type="text/css">
    #menu .cssSubMenu {
        display: none;
    }
    #menu:hover .cssSubMenu {
        display: block;
    }
</style>
...
<div id="menu">
    <a aria-haspopup="true">CSS Hover Menu</a>
    <div class="cssSubMenu">
        <a>Sub menu item 1</a>
    </div>
    <div class="cssSubMenu">
        <a>Sub menu item 2</a>
    </div>
    <div class="cssSubMenu">
        <a class="cssSubLink">Sub menu item 3</a>
    </div>
</div>


기본 터치 동작이 사이트에서 잘 작동하기 위한 브라우저 구성

사용자는 터치를 사용하여 사이트를 이동 및 확대/축소할 수 있기를 원합니다. 따라서 브라우저는 기본적으로 터치 이동, 손가락 모으기, 두 번 탭하기를 사용하며 이러한 조작에 대해 이벤트를 전송하지 않습니다. 사이트에서 이러한 조작에 대한 특수 기능을 제공해야 하고 구성 요소 포인터 이벤트를 수신 대기해야 하는 경우 개발자는 IE에서 자신이 원하는 기본 동작만 제공하도록 구성할 수 있습니다. IE에서 텍스트 선택 및 컨텍스트 메뉴 호출 같은 다른 기본 터치 처리를 사용하지 않도록 설정할 수도 있습니다. 자세한 내용은 최대한의 기능 활용을 참조하세요.

스크롤 가능 영역을 사용하여 이동 환경 구현

개발자는 때때로 이동을 모방하는 스크립트와 이벤트를 사용하여 이동 가능 환경을 구현합니다. 그러나 이 경우 성능이 저하되는 불안정한 환경이 구현될 수 있습니다. 대신 overflow를 사용하여 스크롤 가능 영역을 만들면 Internet Explorer 10에서는 이동 및 확대/축소를 하드웨어 가속하여 원활하고 손가락만으로 조작이 가능한 터치 중심 환경을 구현합니다. 또한 Internet Explorer 10에서는 개발자가 이동 및 확대/축소 환경을 사용자 지정할 수 있습니다. 예를 들면, 사용자가 살짝 밀 수 있는 페이지가 매겨진 콘텐츠를 만들 수 있습니다. 그런 다음 CSS에서 끌기 지점을 설정하여 페이지의 경계를 확인할 수 있으며, Internet Explorer 10은 사용자 이동을


    <style>
        #imagePanner {
            -ms-scroll-snap-type: mandatory;
            -ms-scroll-snap-points-x: snapInterval(0%, 100%);
            overflow-x: auto;
            overflow-y: hidden;
            width: 480px;
            height: 270px;
        }
        .imageRow {
            width: 2400px;
            height: 270px;
        }
        img {
            width: 480px;
            height: 270px;
        }
    </style><div id="imagePanner">
        <div class="imageRow">
            <img alt="Cliff" src="images/Cliff.jpg" />
            <img alt="Grapes" src="images/Grapes.jpg" />
            <img alt="Rainier" src="images/Rainier.jpg" />
            <img alt="Sunset" src="images/Sunset.jpg" />
            <img alt="Valley" src="images/Valley.jpg" />
        </div>
    </div>


로 스냅합니다.

끌기 지점 사용에 대한 자세한 내용은 터치 입력을 사용하여 스크롤, 이동 및 확대/축소 샘플을 참조하세요.

HTML5 양식을 사용하여 입력 유형 식별

Internet Explorer 10에서는 터치에 최적화된 HTML5 입력 컨트롤을 지원합니다. 텍스트 입력에 대해서는 특정 입력 유형을 식별하여 사용자의 터치 환경을 향상할 수 있습니다(해당되는 경우). Internet Explorer는 Windows 8에서 해당 입력 유형을 위한 맞춤식 터치 키보드 레이아웃을 표시합니다.

터치 키보드에 메일 주소에 사용되는 @.com 단추가 표시됩니다.


<input type="email">

메일 주소 입력을 위한 Windows 8 화상 키보드

터치 키보드에 전화 번호를 위한 숫자 패드가 표시됩니다.


<input type="tel">

전화 번호 입력을 위한 Windows 8 화상 키보드

터치 키보드에 URL을 위한 슬래시 및 .com이 표시됩니다.


<input type="url">

URL 입력을 위한 Windows 8 화상 키보드

사용자가 편하게 손가락을 움직일 수 있는 충분한 공간 제공

터치 중심의 Windows 8 환경을 빌드하기 위해 Microsoft에서는 유용한 터치 조작 디자인 지침을 만들기 위해 다양한 연구를 수행해 왔습니다. 손가락의 평균 너비는 11mm입니다. 누를 대상이 커지면 실수에 의해 누르기를 놓칠 확률이 훨씬 낮아집니다.

이상적인 대상의 크기는 최소한 가로 세로 7mm(약 40픽셀), 주위 여백 2mm(약 10픽셀)입니다.

터치식 하드웨어를 사용하는 사용자에 대해서만 공간을 조정하려면 기능 검색을 사용합니다. 사용자가 터치식 하드웨어를 가지고 있는지 알아보려면 다음 명령을 사용하세요.


if (navigator.msMaxTouchPoints > 1) {
// Supports multi-touch
}


기본 터치 환경 제어

Windows 8 이상에서는 IE가 다음을 포함하여 일반 터치 조작에 대한 기본 처리를 제공합니다.

  • 스크롤 가능 영역에 대한 이동
  • 손가락을 모아 확대/축소
  • 길게 눌러 표시하는 상황에 맞는 메뉴
  • 텍스트 선택
  • 가리키기(IE11에 추가됨)
  • 끌어서 놓기(IE11에 추가됨)

이러한 기능은 자동으로 작동하므로 사이트와 앱에 기본적으로 우수한 터치 환경이 제공됩니다. 그러나 이 기능을 사용하지 않고 고유한 환경을 사용할 수도 있습니다.

이동 및 확대/축소

이동 또는 확대/축소하는 동안에는 포인터 이벤트가 발생하지 않습니다. touch-action CSS 속성을 사용하여 브라우저의 기본 동작을 제어하거나 사용하지 않도록 설정할 수 있습니다.

touch-action 값설명
auto초기값입니다. 브라우저에서 요소에 대한 동작을 확인합니다.
none요소가 기본 터치 동작을 허용하지 않습니다.
pan-x요소가 가로 축에서 터치로 구동되는 이동을 허용합니다.
pan-y요소가 세로 축에서 터치로 구동되는 이동을 허용합니다.
pinch-zoom요소가 손가락 모으기로 확대/축소를 허용합니다.
manipulation요소가 터치로 구동되는 이동 및 손가락 모으기로 확대/축소를 허용합니다. ("pan-x pan-y pinch-zoom"의 단축형 동작에 해당)
double-tap-zoom두 번 탭하여 확대/축소를 허용합니다.
cross-slide-x 요소가 가로 축을 따라 교차 방향으로 밀기를 허용합니다.
cross-slide-y요소가 세로 축을 따라 교차 방향으로 밀기를 허용합니다.

 

예를 들어 canvas 그림 그리기 응용 프로그램은 다음 명령을 사용할 수 있습니다.


canvas {
    touch-action: double-tap-zoom;
}


이 구성을 사용하면 사용자는 두 번 탭하여 canvas 요소를 확대할 수 있지만, canvas 요소를 손가락으로 밀면 페이지가 이동하지 않고 해당 요소로 이벤트가 전송됩니다.

터치 선택

Internet Explorer 10에서 텍스트나 그 주변을 탭하면 터치를 사용하여 단어를 선택할 수 있습니다. 텍스트 선택을 사용하지 않으려면 Windows Internet Explorer 9에서처럼 하면 됩니다.


element.addEventListener("selectstart", function(e) { e.preventDefault(); }, false);
 // Disables selection


상황에 맞는 메뉴

Windows Internet Explorer에서 특정 요소를 길게 누르면 상황에 맞는 메뉴가 표시됨을 나타내는 대기 비주얼이 표시됩니다. 손가락을 올리면 상황에 맞는 메뉴가 표시됩니다. 손가락을 멀리 끌면 비주얼이 해제되고 상황에 맞는 메뉴가 나타나지 않습니다.

고유한 상황에 맞는 메뉴를 사용하려는 경우 Internet Explorer 10에서도 여전히 사용할 수 있습니다. contextmenu 이벤트에서 event.preventDefault를 호출하고 상황에 맞는 메뉴를 표시하는 코드를 실행하면 됩니다. 그러면 Internet Explorer에서 터치 기능이 지원되는 상황에 맞는 메뉴를 자동으로 만들고 길게 누를 때 동일한 힌트 비주얼을 제공합니다. 이 예제에서는 contextmenu 이벤트를 사용하여 사용자가 요소를 길게 누르고 해제할 때를 감지합니다. 사용자가 손가락을 올리면 contextmenu 이벤트가 발생하고 메시지가 표시됩니다.


  <div id="touchspot">Press and hold here</div>

  <script>
    var elm = document.getElementById("touchspot");

    elm.addEventListener("contextmenu", function (e) {
      e.target.innerHTML = "Show a custom menu instead of the default context menu";
      e.preventDefault();    // Disables system menu
    }, false);

  </script>

잠시 손가락을 누르고 있어야 하는 게임 등의 시나리오에서 상황에 맞는 메뉴를 사용하지 않으려는 경우 기본 상황에 맞는 메뉴와 힌트 비주얼을 모두 비활성화할 수 있습니다. 이렇게 하려면 두 개 이벤트를 취소하면 됩니다.



 // Disables visual
element.addEventListener("MSHoldVisual", function(e) { e.preventDefault(); }, false);
// Disables menu
element.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);
 

최대한의 기능 활용

마우스 및 키보드를 계속 원활하게 지원하면서 터치 사용에 대해 사이트를 최적화할 준비가 되면 적응 입력 처리를 위한 다음과 같은 Internet Explorer 기능을 확인합니다.

포인터 이벤트

포인터 이벤트는 마우스, 터치, 펜을 포함하여 모든 사용자 입력 형식에 적용할 포인터 개념을 추상화한다는 점을 제외하고 기존 마우스 이벤트에 따라 모델링됩니다.

제스처 이벤트

제스처 이벤트는 포인터 이벤트와 함께 작동하여 코드에서 손가락 모으기, 회전, 살짝 밀기, 끌기 등의 복잡한 조작을 인식하고 응답할 수 있게 합니다.

조작 이벤트

사이트 또는 JavaScript로 작성한 Windows 스토어 앱에서 플랫 탐색 시스템을 사용하려는 경우(사용자가 단일 페이지에서 가로로 이동하거나 사이트의 동일한 계층 구조 수준에 있는 페이지를 탐색함), 조작 이벤트를 수신하여 메뉴 항목 요소를 선택, 활성화 및 끄는 교차 방향으로 밀기 사용자 조작 패턴을 구현할 수 있습니다.

터치를 사용한 스크롤 및 확대/축소를 위한 CSS 속성msZoomTo 메서드

미세 조정 입력 처리를 위한 CSS 속성을 사용하면 스크롤/이동 끌기 지점을 설정하고, 스크롤 및 확대/축소 제한을 설정하고, 하위 요소에서 상위 요소로의 확대/축소 연결을 제어하고, 임의 방향의 자유형 터치식 이동에 대해 스크롤 이동 경로를 사용하지 않도록 설정할 수 있습니다. msZoomTo 메서드는 애니메이션을 사용하여 요소를 지정된 좌표로 스크롤 및/또는 확대/축소합니다.

터치 관련 문제 해결

터치로 가리키기 메뉴를 작동하게 하려면 어떻게 하나요?

마우스는 콘텐츠를 활성화하지 않고(클릭하지 않고) 가리킬 수 있습니다. 그러나 터치는 가리키기와 활성화가 한 가지 동작으로 수행됩니다. 따라서 터치 사용자는 활성화하지 않고 가리키기만 해야 하는 기능은 사용할 수 없습니다. 대신 표시 유형을 전환하는 onclick 이벤트를 사용하여 모든 동작을 클릭(누르기) 기반으로 바꿔 보세요. 자세한 내용은 가리키기를 사용하여 콘텐츠 숨기지 않기 디자인 지침을 참조하세요.

두 번 탭하기에 대해 사용자 지정 환경을 제공하려면 어떻게 하나요?

IE는 스크롤 가능 영역에 대한 이동, 두 번 탭하기 및 손가락 모으기로 확대/축소 같은 기본 터치 조작에 대한 공통 기본 처리를 제공합니다. touch-action CSS 속성을 사용하여 이러한 기본 설정을 다시 정의하고 사이트에서 허용되는 터치 동작을 지정할 수 있습니다. 지정된 요소에서의 두 번 탭하기에 대한 고유 동작을 제공하려면 규칙에서 값을 생략하여 두 번 탭하기로 확대/축소(기본값)를 사용하지 않도록 설정할 수 있습니다. 예를 들어, 다음 스타일 선언은 이동 및 손가락 모으기로 확대/축소를 허용하지만 두 번 탭하기로 확대/축소를 사용하지 않도록 설정합니다.


touch-action: manipulation;

터치로 끌기를 감지하려면 어떻게 하나요?

Internet Explorer 11에서는 터치 기반 HTML5 끌어서 놓기를 기본적으로 지원합니다. Internet Explorer 10을 사용하여 사이트에서 끌기 작업을 감지하려면 길게 누르기(MSGestureHold) 및 살짝 밀기(MSGestureStart, MSGestureChange, MSGestureEnd)의 제스처 이벤트를 수신 대기하세요.

터치 시에 포인터 움직임을 볼 수 없는 이유는 무엇인가요?

IE에서는 기본 터치 조작에 대한 공통 기본 처리를 제공하므로 터치 이동, 손가락 모으기 및 두 번 탭하기를 기본적으로 사용하며 이러한 조작에 대한 이벤트를 보내지 않습니다. 사이트에서 이러한 조작에 대한 특수 기능을 제공해야 하고 구성 요소 포인터 이벤트를 수신 대기해야 하는 경우 개발자는 touch-action 속성을 사용하여 특정한 터치 동작의 기본 처리를 사용하지 않도록 설정할 수 있습니다. 자세한 내용은 기본 터치 동작이 사이트에서 잘 작동하기 위한 브라우저 구성을 참조하세요.

관련 항목

Windows 8 장치 전반의 적응 사이트 디자인

 

 

표시:
© 2015 Microsoft