키보드 컨트롤이 마우스 기반 슬라이딩 퍼즐을 방해하지 않도록 하는 방법

마우스 조작 중에 퍼즐이 화살표 키에 반응하는 경우, 그 원인은 지나치게 광범위하게 설정된 키보드 리스너인 경우가 많습니다. document나 window에 부착된 핸들러는 플레이어가 단서 입력란에 타이핑하거나, 메뉴를 사용하거나, 다른 컨트롤과 상호작용하는 중에도 화살표 키 입력을 받을 수 있습니다. 또한 퍼즐을 변경하는 동시에 스크롤과 같은 브라우저 동작을 트리거할 수도 있습니다.

간단한 체크리스트로 문제를 재현해 보세요. 타일을 클릭하고 드래그해 봅니다. 퍼즐 경계 밖으로 드래그해 봅니다. 퍼즐에 포커스가 있을 때 화살표 키를 눌러 봅니다. 그런 다음 단서 입력창, 버튼, 메뉴에 포커스가 있을 때 화살표 키를 눌러 봅니다. 보드가 변경되는지, 페이지가 스크롤되는지, 포커스가 이동하는지, 드래그가 멈추는지 기록하세요. 이러한 관찰을 통해 퍼즐 핸들러 문제와 포인터 추적 또는 브라우저 기본 동작 문제를 구분할 수 있습니다.

보드를 명확한 키보드 진입점이 있는 컨트롤로 취급하세요. 포커스를 받을 수 있는 보드 컨테이너를 사용하고, 해당 보드가 활성 상태이거나 보드에 속한 타일에 포커스가 있을 때만 퍼즐 키를 처리합니다. 힌트 버튼이나 텍스트 필드와 같은 관련 없는 컨트롤은 키 처리 경계 외부에 둡니다. 플레이어가 보드가 반응할 시점을 알 수 있도록 포커스 위치를 시각적으로 표시하세요.

키를 해석하기 전에 이벤트 타깃을 확인하세요. 포커스가 input, textarea, 편집 가능한 요소 또는 별도의 버튼에 있는 경우 키 입력을 무시합니다. 협력형 어드벤처 도구에서는 다른 사람이 퍼즐을 조작하는 동안 플레이어가 룬, 이름, 단서를 입력하는 경우가 있으므로 이는 매우 중요합니다. 타이핑이 실수로 타일을 움직이는 일로 이어져서는 안 됩니다.

키보드 조작 기능은 여전히 정상 작동해야 합니다. W3C 지침에 따르면 가능한 경우 기능을 키보드 인터페이스를 통해 사용할 수 있어야 하며, 개체를 특정 위치로 이동하는 동작은 키보드로 조작 가능한 액션으로 명시되어 있습니다. 키를 완전히 제거하지 말고 범위를 신중하게 지정하세요. W3C: Understanding Success Criterion 2.1.1: Keyboard

보드용으로 명확히 문서화된 소수의 키 세트를 선택하세요. 예를 들어 보드에 포커스가 있을 때 사용하는 화살표 키가 있습니다. 핸들러에서 먼저 해당 키가 퍼즐에서 사용하는 키인지, 보드가 활성 타깃인지 확인합니다. 그런 다음 이동을 적용하고, 필요한 경우 해당 키에 대한 브라우저 기본 동작을 취소합니다. 전역적으로 모든 키를 억제하는 것은 피해야 합니다. 플레이어는 일반적인 타이핑, 브라우저 탐색, 퍼즐 외부 컨트롤 조작이 필요할 수 있습니다.

preventDefault()는 이벤트가 취소 가능할 때 브라우저 기본 동작을 취소하지만, 이벤트가 다른 핸들러로 전파되는 것까지 막지는 못합니다. 즉, 페이지 스크롤은 방지할 수 있지만 타일을 이동시키는 또 다른 리스너까지 해결하지는 못합니다. 게임 상태를 변경하는 핸들러를 찾아 그 범위를 좁히세요. 명확한 이벤트 소유권을 설정하는 대신 광범위한 취소 처리에 의존해서는 안 됩니다. MDN: Event: preventDefault() method

드래그 인터랙션의 경우, 드래그를 시작하는 누름부터 손을 떼거나 취소할 때까지 단일 활성 포인터를 추적하세요. 포인터 이벤트는 pointerdown, pointermove, pointerup, pointercancel을 제공하며, 포인터 캡처(pointer capture)를 사용하면 포인터가 원래 히트 영역 밖으로 이동하더라도 후속 포인터 이벤트를 보드로 계속 유도할 수 있습니다. 제스처가 중단되어 퍼즐이 드래그 중인 상태로 멈추지 않도록, pointerup과 pointercancel 모두에서 활성 드래그 상태를 해제하세요. MDN: Pointer events

드래그 중인 타일을 재구축하거나 교체하여 포인터 추적을 잃어버리는 일이 없도록 하세요. 인터페이스가 드래그 중에 DOM의 요소를 이동하는 경우, MDN에서는 해당 이동 후에 포인터 캡처를 설정해야 한다고 명시합니다. 유효하지 않은 위치에서 포인터를 놓았을 때 어떤 일이 발생할지 결정하세요. 슬라이딩 퍼즐에서는 관련 없는 타일을 조용히 변경하는 것보다 타일을 이전 위치로 복원하거나 유효한 위치로 맞추는(스냅) 것이 사용자가 이해하기 훨씬 쉽습니다.

퍼즐은 마우스, 키보드, 단순 포인터 입력을 함께 지원할 수 있습니다. 예를 들어, 빈 공간에 인접한 타일을 클릭하거나 탭하여 이동할 수 있고, 해당 타일을 드래그하는 것은 선택적인 직접 조작 제스처로 남겨둘 수 있으며, 보드에 포커스된 상태에서의 화살표 키로 키보드 조작을 제공할 수 있습니다. 이러한 입력 방식은 모두 동일한 이동 유효성 검사 로직을 호출해야 하므로, 요청 방식에 관계없이 이동의 유효 여부가 일관되게 판정됩니다.

이는 유용한 디자인 점검 요소이기도 합니다. 플레이어가 드래그 없이 클릭이나 탭만으로 퍼즐을 완료할 수 있나요? W3C의 WCAG 2.2 지침에서는 키보드 접근성과 드래그에 대한 단일 포인터 대안을 별개의 고려 사항으로 다룹니다. 해당 지침의 예시에는 드래그를 방향 컨트롤 클릭으로 대체하는 방법이 포함되어 있습니다. 키보드 전용 대안이 있다고 해서 그 자체로 포인터 대안이 제공되는 것은 아닙니다. W3C: Understanding Success Criterion 2.5.7: Dragging Movements

슬라이딩 퍼즐에서는 한 번에 인접한 타일 하나를 클릭하는 것이 퍼즐의 인접 이동 규칙을 그대로 유지하므로 자연스러운 대안이 되는 경우가 많습니다. 이러한 인터랙션이 직관적이지 않을 수 있다면, 눈에 보이는 이동 버튼을 통해 이동 가능한 방향을 설명할 수 있습니다. W3C의 G219 기법은 드래그 없이 동일한 기본 작업을 수행하는 단일 포인터 컨트롤의 예시를 제공합니다. W3C: G219: Ensuring that an alternative is available for dragging movements that operate on content

테이블에서 퍼즐을 사용하기 전에, 동일한 보드 배치와 시작 상태에서 각 입력 경로를 점검해 보세요. 유효한 이동은 보드를 한 번 업데이트하고, 유효하지 않은 이동은 보드를 변경하지 않으며, 관련 없는 컨트롤은 정상 동작을 유지하는지 확인합니다.

• 마우스: 유효한 타일을 드래그하고, 보드 외부에서 손을 떼고, 유효하지 않은 이동을 시도해 봅니다. 보드가 드래그 추적을 잃지 않고 예기치 않게 변경되지도 않는지 확인합니다.

• 키보드: 보드에 포커스를 맞추고 지원되는 각 방향 키를 사용한 다음, 텍스트 필드로 포커스를 이동해 타이핑합니다. 보드에 포커스가 있을 때만 키가 타일을 이동시키는지, 타이핑 중에 스크롤이 발생하거나 보드가 변경되지 않는지 확인합니다.

• 드래그 없는 포인터: 유효한 인접 타일을 클릭하거나 탭합니다. 다른 입력 방식과 동일한 이동이 발생하는지 확인합니다.

• 중단: 드래그를 취소하거나 중단한 후 다른 드래그를 시작해 봅니다. 이전 선택 상태가 남아 있지 않은지 확인합니다.

테스트가 실패하면 가장 좁은 관련 계층부터 먼저 검사하세요. 키보드 동작의 경우 이벤트 타깃과 포커스 상태를, 중단된 드래그의 경우 포인터 캡처 및 정리 로직을, 규칙이 일관되지 않은 경우 공유 이동 유효성 검사기를 확인합니다. 이 순서를 따르면 제작자는 어드벤처 소품을 범용 컨트롤 튜토리얼로 전락시키지 않고도 문제를 구체적으로 찾아낼 수 있습니다.

• Pointer events — MDN

• Event: preventDefault() method — MDN

• Understanding Success Criterion 2.1.1: Keyboard — W3C WAI

• Understanding Success Criterion 2.5.7: Dragging Movements — W3C WAI

• G219: Ensuring that an alternative is available for dragging movements that operate on content — W3C WAI