제스처와 브라우저의 경계 정하기
마우스, 펜, 터치에 하나의 입력 경로를 쓰는 것이 조작 방식에 맞다면 Pointer Events를 사용하세요. pointerdown부터 이동과 손을 뗄 때까지 활성 포인터를 추적하고, 멀티터치가 의도된 기능이 아니라면 다른 포인터는 무시합니다. 플레이어에게 필요한 브라우저 스크롤이나 핀치 확대/축소를 유지하도록 게임 영역에 touch-action을 설정하세요. 영역 전체에 touch-action: none을 적용하면 브라우저 확대/축소를 막을 수 있습니다.
드래그 조작에서는 잡힌 상태를 즉시 보여 주고 포인터 위치에 따라 객체를 업데이트하세요. 탭 조작에서는 약간의 움직임이 활성화를 취소하는지 정하고 실제 터치 기기에서 그 임계값을 시험하세요. 제스처 정책은 페이지 전체가 아니라 게임 영역에만 적용하세요.
취소도 정상적인 결과로 다루기
브라우저가 제스처를 맡거나 기기 상태가 바뀌거나 다른 이유로 상호작용이 중단되면 포인터가 취소될 수 있습니다. pointercancel이 발생하면 정상적으로 손을 뗐을 때처럼 눌림 상태를 해제하세요. 그러지 않으면 캐릭터가 계속 움직이거나 버튼이 눌린 채로 보일 수 있습니다. 게임이 포인터를 캡처했다면 정리 과정에서 캡처를 해제하세요.
탭, 느린 드래그, 화면 가장자리에서 시작하는 제스처, 브라우저 스크롤 시도를 시험하세요. 각 동작에 분명한 피드백이 있는지, 게임 영역을 벗어나도 컨트롤이 눌린 채 남지 않는지 확인합니다. MDN의 Pointer Events 안내서에서 공통 포인터 모델과 touch-action 동작을 설명합니다.
웹 게임 터치 컨트롤 관련 질문
게임에서 브라우저의 터치 제스처를 모두 비활성화해야 하나요?
게임 영역이 해당 제스처를 직접 처리해야 하는 경우에만 비활성화하세요. 가능한 경우 브라우저 스크롤이나 확대/축소를 유지하고, touch-action 규칙은 필요한 영역에만 적용합니다.
pointercancel 뒤에는 어떻게 해야 하나요?
진행 중인 게임 동작을 끝내고 눌림 또는 드래그 상태를 해제하세요. 취소는 예상 가능한 입력 결과이므로 pointerup을 처리할 때처럼 확실하게 정리해야 합니다.
추가 읽을거리
오래된 정보를 발견하셨나요? 수정 사항 제보