요약

  • W3C가 2012년 12월 발표한 첫 공개 초안은 마우스, 손가락, 펜을 위한 기기 중립적 포인터 이벤트를 제안하고 기존 마우스 중심 페이지와의 호환성을 다뤘다.
  • 2015년 2월 권고안은 이벤트 종류와 pointerType, 브라우저의 기본 터치 동작을 위한 touch-action, 경계를 벗어난 드래그를 잇는 포인터 캡처를 정리했다.

마우스 클럽의 안내 책자에는 손님이 하나뿐이었다. 클릭하고 움직이고 버튼을 뗀다. 손가락이 들어오자 예전 페이지가 계속 작동하도록 브라우저는 가끔 그 손님에게 마우스 이벤트라는 가짜 명찰을 달아 줬다. 요긴한 배려였지만, 새 코드는 누가 실제로 화면을 만졌는지 헷갈렸다. 펜까지 도착하자 명찰 장난만으로는 접수대가 버티기 어려웠다.

2012년 12월 11일 W3C의 첫 공개 작업 초안은 입력별 문을 따로 만드는 비용을 지적했다. 많은 페이지가 Mouse Events에 맞춰져 있었다. 터치와 펜을 별도 이벤트 묶음으로 더하면 비슷한 처리 코드를 거듭 써야 한다. 호환 목적으로 나온 마우스 이벤트는 실제 입력 도구를 숨길 수도 있다. 초안은 화면의 위치를 가리키는 접촉을 하나의 포인터로 표현하자고 제안했다.

공통 이름이 모든 도구를 똑같이 만들지는 않는다. PointerEvent에는 pointerType, 압력, 접촉 면적, 펜의 기울기 등을 담을 수 있다. 기사 버튼에는 눌렸다는 사실이면 충분하다. 그림판에서는 펜을 얼마나 세게, 비스듬히 댔는지가 선을 바꾼다. 공통 동작을 먼저 만들고 필요한 곳에서 도구의 세부 성질을 쓴다.

2015년 2월 24일 W3C 권고안에는 pointerdown, pointermove, pointerup, pointercancel과 요소 경계의 출입 이벤트가 담겼다. 이름은 기존 마우스 이벤트에 익숙한 개발자에게 낯설지 않다. 포인터 식별자는 여러 손가락이 동시에 있을 때 각 움직임을 구분해 준다. 클럽의 문은 커졌지만 내부 동선은 여전히 알아볼 수 있었다.

오래된 페이지도 초대장을 잃지 않았다. 권고안은 다른 포인터 입력에서 호환 마우스 이벤트를 만드는 방식을 설명한다. 마우스만 듣는 버튼이 터치에도 반응하게 하는 다리다. 다만 Mouse Event라는 이름이 실제 마우스를 증명하지는 않는다. 새 인터페이스는 필요할 때 pointerType으로 입력 도구를 확인할 수 있다.

손가락이 움직이는 순간 사이트와 브라우저의 일이 겹친다. 손가락은 카드를 끌려는 걸까, 페이지를 스크롤하려는 걸까? 브라우저가 매번 스크립트의 취소 결정을 기다려야 한다면 스크롤이 둔해진다. touch-action은 한 영역에서 허용되는 기본 터치 동작을 미리 선언한다. 브라우저는 그 약속을 보고 스크롤을 처리할 수 있다.

드래그에는 또 다른 모서리가 있다. 작은 손잡이를 잡고 움직이다 손가락이 손잡이 밖으로 조금 나간다. 포인터 캡처를 쓰면 원래 요소가 그 포인터의 이벤트를 계속 받을 수 있다. 2015년 문서는 캡처 설정과 해제, gotpointercapture와 lostpointercapture 알림을 다룬다. 손가락이 완벽한 직선을 그리지 못했다고 작업이 사라지면 곤란하다.

도구의 차이는 여전히 유용하다. 손가락에는 접촉 면적이 있고, 펜에는 기울기와 압력이 있으며, 마우스에는 버튼이 있다. 공통 이벤트는 반복 코드를 줄이고, 고유 속성은 그림과 세밀한 조작을 살린다. 함께 입장한다고 모두 마우스 분장을 해야 하는 것은 아니다.

W3C의 Pointer Events 1 공개 이력은 2012년 첫 공개 초안과 2015년 권고안을 기록한다. 이 문서들이 다룬 문제는 추상적인 장난이 아니었다. 마우스를 기준으로 짠 웹이 사람들이 손과 펜으로 화면에 직접 닿는 시대를 맞았다.

독자는 이벤트 이름을 외울 필요가 없다. 버튼이 눌리고, 화면이 매끄럽게 움직이고, 드래그가 경계에서 끊기지 않으면 된다. 마우스의 지정석은 남았다. 다른 손님도 이제 자기 이름으로 들어온다.