CSS 스크롤 끌기 지점 규격을 통해 상호 운용 가능한 새로운 이동 경험 제공

오늘 우리는 신규 제안을 W3C에 제출했습니다. 이것은 바로 IE10에 도입되고 IE11에서 개선된 API를 기반으로 한, 터치 및 기타 입력 장치에서 빠르고 매끄러운 이동 경험을 구현하기 위해 설계된 CSS 스크롤 끌기 지점입니다. 이러한 API를 통해 개발자들은 마우스, 키보드, 트랙패드만큼이나 손쉬운 터치와 작업을 완벽하게 지원하는 페이지가 매겨진 콘텐츠 및 사진 갤러리 스크롤 등의 이동 경험을 더욱 쉽게 구현할 수 있습니다. 이러한 경험을 잘 보여주는 한 가지 예는 Windows 8에 최적화된 MSN 홈페이지입니다.

사용자들은 오른쪽이나 왼쪽으로 살짝 밀어 그 날의 헤드라인을 검색할 수 있습니다. CSS 끌기 지점을 통해, Internet Explorer는 IE에서 터치로 웹 페이지 이동을 가능케 하는 하드웨어 가속 이동 기술을 이용하여 이 경험을 더욱 편리하게 합니다. 관성 이동과 사용자가 기대하는 수준의 오버팬 바운스로 손가락 움직임처럼 자연스러운 성능을 제공합니다. 이뿐만 아니라 브라우저는 사용자가 이동하고 나면 해당 콘텐츠를 가장 가까운 헤드라인으로 옮깁니다.

이를 구현하기 위한 코드는 매우 간단합니다. CSS에 2줄만 새로 추가하면 됩니다.

 <style> .photoGallery { width: 500px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; /* Set up points to which scrolling will snap*/ -ms-scroll-snap-points-x: snapInterval(0px,100%); /* Require that scrolling always end at a snap point */ -ms-scroll-snap-type: mandatory; } </style> <div class="photoGallery"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> <img src="img4.jpg"> <img src="img5.jpg"> </div> 

이 코드는 IE10과 IE11에서 터치와 살짝 밀기로 구현됩니다. IE11에 새롭게 도입된 이 같은 마크업은 마우스 휠, 화살표 키, 트랙패드와 자동으로 연동되므로, 사용자가 현재 어떤 장치로 검색하고 있든 간에 이런 경험을 이용할 수 있습니다. JavaScript를 작성하여 비슷한 경험을 구현하려면 코드가 수백 줄이 필요하며, 그마저도 손가락 움직임처럼 자연스러운 조작을 할 수 없는 경우가 많고 보통 로우엔드급 하드웨어에서는 성능 문제로 속도가 떨어지는 것이 일반적입니다.

권고 후보안을 충족하는 포인터 이벤트의 계보를 잇고, 포인터 이벤트 초기 제안을 W3C에 제출한 지 1년 만에 개발된 CSS 끌기 지점은 다른 입력 방식과의 상호 운영성과 터치를 완벽하게 지원하는 풍부하고 몰입도가 뛰어난 경험으로 또 다른 웹 발전을 이루었습니다.

- Internet Explorer 프로그램 관리자, Jacob Rossi 및 Matt Rakow