IE11: 현재와 미래의 웹을 위한 터치 브라우징

Windows 8.1 Preview에서 Internet Explorer 11은 Windows 8에 도입되었던 혁신적인 터치 지원을 이어 받아 새 기능을 추가하고 기존 터치 기능을 개선했으며, 새로운 개발자 API를 지원합니다. 심지어 일부 기능의 터치 지원 환경은 Windows 8.1의 IE11에서 더욱더 향상되었다는 점을 보여드리겠습니다.

안정적인 터치 가리키기 메뉴

지금까지 대부분의 앱은 마우스를 염두에 두고 디자인되었습니다. 특히 마우스로 가리켜야만 나타나는 메뉴를 사용하는 사이트가 많습니다. 웹은 터치를 지원해야 합니다. IE11은 터치로 가리키기 시뮬레이션을 지원합니다. 탭이 페이지에서 마우스의 가리키는 기능이 되어야 하는지 아니면 클릭으로 작동해야 하는지 애매한 경우가 자주 있습니다. 이 문제를 해결하기 위해 Internet Explorer 11에서는 서로 다른 제스처를 지원하여 클릭과 가리키기 기능을 모두 이용할 수 있습니다.

• 탭 - 클릭
• 길게 누르기 - 가리키기

여러 사이트에서 터치 가리키기 메뉴 사용법을 보여 주는 동영상

터치 가리키기 지원 외에도 이제는 링크를 길게 누르면 상황에 맞는 메뉴 명령 모음이 화면 아래에 표시됩니다. 따라서 사이트에 가리키기 메뉴가 있어도 이를 가리지 않고 명령 모음이 표시됩니다. 또한 명령 모음의 단추를 눌러 새 탭이나 새 창에서 페이지를 간편하고 빠르게 열 수 있습니다.

링크 강조 개선

Windows 8.1의 Internet Explorer 11 강조 표시 기능이 터치에 빠르고 시각적으로 반응하도록 새롭게 개선되었습니다. 여러분의 추가 의견에 따라 사용자가 페이지에서 터치한 요소를 확인하여 터치의 신뢰도를 높일 수 있게 했습니다.

이는Windows Phone 8의 환경과 비슷하며, CSS 변환이 포함된 링크 같은 시나리오를 처리할 수 있도록 더욱 개선되었습니다.이렇게 강조 표시 기능이 개선되었기 때문에 연결된 이미지를 포함한 더 많은 링크가 강조되고, 강조가 더 이상 페이지의 CSS 스타일에 영향을 주지 않습니다. 이제 개발자는 다음 마크업 하나로 데스크톱과 스마트폰 모두에서 옵트아웃할 수 있습니다.

<meta name="msapplication-tap-highlight" content="no">

다음 이미지는 CSS 변환이 적용되었을 때 IE11, iPad, Android 장치에서 페이지의 링크 강조가 각각 어떻게 표시되는지 보여줍니다. 오직 IE11만 링크 대상 주변의 링크 강조를 래핑합니다.

IE11	iPad	Android

CSS 변환이 적용된 링크 강조

<a href="#" style="transform: rotate(45deg)">CSS 변환이 포함된 링크</a>

살짝 밀기 제스처로 '뒤로/앞으로' 탐색

이전 페이지로 돌아가는 기능은 사용자가 자주 사용하는 기능 중 하나이며 전체 탐색 작업의 1/3을 차지합니다. Internet Explorer 10에서 손가락으로 페이지를 살짝 밀어 이전 페이지로 돌아가거나 다시 앞으로 돌아가 페이지를 탐색하는 기능이 도입되었습니다. Internet Explorer 11에서는 모든 장치에서 이 기능이 더욱 빠르고 원활하게 작동하며 메모리와 배터리도 효율적으로 사용됩니다.

이를 위해 Internet Explorer 11에서는 페이지 간에 탐색할 때 이전 페이지를 일시 중지하고 메모리에 캐시합니다. 화면을 살짝 밀어 이전 페이지로 이동하면 메모리에서 해당 페이지를 다시 시작합니다. 따라서 화면을 살짝 미는 것과 거의 동시에 이전 페이지가 로드됩니다. 새 페이지 캐싱이 어떻게 진행되는지, 그리고 HTML5 API를 사용하여 사이트를 어떻게 이 기능에 최적화할 수 있는지에 대한 자세한 설명은 다음 글에서 다루겠습니다.

일부 페이지는 일시적으로 중지될 수 없습니다. 이 경우 IE11은 사용자가 화면을 살짝 미는 즉시 이전 페이지를 렌더링할 수 있도록 사전 렌더링 기술을 사용합니다. 따라서 페이지가 신속하고 안정적으로 로드됩니다.

IE11에서 살짝 밀기로 '뒤로/앞으로' 페이지 이동

IE11은 뒤로/앞으로 단추를 사용하는 경험도 개선했습니다. 뒤로/앞으로 단추를 누르면 페이지가 로드될 때 이전에 방문했던 페이지의 스크린샷이 표시되므로 원하는 사이트를 금방 찾을 수 있습니다.

HTML5 터치로 끌어서 놓기

터치 입력은 웹에서 가장 뛰어난 경험이어야 합니다. Internet Explorer 11은 터치를 사용한 HTML 5 끌어서 놓기를 기본적인 기능으로 지원하기 시작한 최초의 브라우저입니다. 길게 누르는 동작만으로 터치를 사용하여 끌어서 놓기 기능을 사용할 수 있습니다. 마우스를 사용하여 HTML 5 끌어서 놓기를 사용하도록 설계된 사이트를 이용하더라도 IE11에서는 터치에 대한 코드가 없어도 터치가 작동합니다. IE10에서 마우스로 HTML5 끌어서 놓기를 보여 주도록 설계된 Magnetic Poetry 테스트 데모를 통해 확인해 보십시오. 변경 없이 IE11의 터치가 작동합니다.

터치로 끌어서 놓기 Magnetic Poetry 테스트 페이지

마우스, 키보드, 터치패드 및 터치의 직접 조작

Internet Explorer 10은 하드웨어 가속 직접 조작을 통해 최고의 이동 및 확대 기능을 제공합니다. 페이지에서 복잡한 스크립트를 실행 중이더라도 사용자가 화면을 끌거나 손가락으로 확대/축소하면 페이지가 손가락을 따라 움직이며, 조작과 애니메이션이 언제나 부드럽게 처리됩니다. 개발자는 다양한 API를 사용하여 이전에는 할 수 없었던 새로운 방법으로 이동 및 확대 환경을 구성할 수 있습니다. MSN 홈 페이지에는 끌기 지점이 있어 사용자가 헤드라인을 살짝 밀 수 있습니다.

msn.com에서 터치를 사용하여 헤드라인 살짝 밀기

Windows 8.1의 Internet Explorer 11은 터치 외에도 마우스, 키보드 및 터치패드에 동일한 하드웨어 가속 이동 및 확대 기술을 사용합니다. 따라서 어떤 입력 방식을 사용하더라도 부드럽게 사이트를 이동 및 확대할 수 있습니다. 또한 개발자는 새로운 msZoomTo() API를 통해 개발자의 의도대로 사이트가 이동되거나 확대되도록 설정할 수 있습니다.

포인터 이벤트를 사용하는 개선된 터치 API

우리는 W3C 및 다른 브라우저 공급업체와 협력하여 Internet Explorer 10에 도입된 벤더 접두사를 사용하는 API를 기반으로 포인터 이벤트 표준을 개발했습니다. 이를 통해 웹 사이트에서 마우스, 펜, 멀티 터치 등 다양한 포인팅 장치를 지원할 수 있습니다. Internet Explorer 11 Preview에는 최신 권고 후보안 사양이 반영된 업데이트된 MSPointer API가 포함되어 있습니다. Internet Explorer 11의 최종 버전에서는 접두사가 없는 포인터 이벤트를 지원할 것입니다.

현재와 미래의 웹에서 모두 작동하는 터치

Windows 8과 함께 우리는 세계 최고의 터치 환경을 구축했습니다. Internet Explorer 11은 터치에 최적화된 빠르고 원활한 최신 경험을 제공하며, 터치를 염두에 두지 않고 설계된 웹까지도 지원합니다. 하드웨어 가속 직접 조작을 사용하기 때문에 자연스럽고 유연하게 손가락이 움직이는 대로 페이지가 따라서 이동하고 확대됩니다. 사용자가 페이지 탐색을 시작하면 브라우저 UI는 사용자를 방해하지 않는 위치에 머물기 때문에 편하게 사이트를 이용할 수 있습니다. GlacierWorks, Atari, Contre Jour 같은 사이트와 IE 테스트에서 볼 수 있는 Touch Effects, Browser Surface를 통해 개발자들이 업계 최고 수준의 IE 표준 API를 어떻게 활용하여 매력적인 터치 환경을 구축하는지 살펴볼 수 있습니다.

Internet Explorer 11은 새로운 터치 기능을 도입하고 기존 기능을 개선하여 최고의 터치 경험을 계속 이어가고 있습니다. 지금 Windows 8.1 Preview를 다운로드하여 Internet Explorer 11이 터치를 얼마나 완벽하게 지원하는지 확인해 보십시오.

- Internet Explorer 수석 프로그램 관리자, Michael Patten