TL;DR: 키보드 선택 상태와 마우스 호버 상태를 분리하여, 의도적인 탐색과 임시 미리보기를 독립적으로 제공함으로써 안정적인 키보드 UX와 반응적인 마우스 UX를 동시에 달성하는 패턴입니다.
이 패턴은 목록형 인터페이스(문서 탐색기, 파일 관리자, 데이터 테이블)에서 사용자가 항목을 탐색하고 선택할 때, 키보드와 마우스 입력이 서로의 상태를 간섭하지 않도록 설계합니다. 핵심은 두 개의 독립적인 상태 변수를 유지하는 것입니다: selectedItem(키보드 선택)과 hoveredItem(마우스 호버). 미리보기나 강조 표시에 사용되는 previewItem은 hoveredItem ?? selectedItem 논리로 결정됩니다.
이번 3-pane 홈페이지 리디자인에서 이 패턴을 적용해, 결과 목록에서 j/k(또는 화살표 키)로 이동하는 항목은 selectedItem이 되고, 마우스를 올린 항목은 hoveredItem이 됩니다. 미리보기 창은 마우스가 올라간 항목을 즉시 보여주지만, 키보드 선택은 변하지 않습니다. 마우스가 벗어나면 미리보기는 다시 키보드 선택 항목으로 돌아갑니다. 실제 문서 열기는 행 클릭(마우스) 또는 Enter/l 키(키보드)로 트리거됩니다.
이 분리의 이점은 사용자 의도의 차이를 반영한다는 점입니다. 키보드 탐색은 의도적이고 순차적이므로 상태가 명확히 유지되어야 합니다. 반면 마우스 호버는 임시적이고 탐색적이므로 즉각적인 피드백(미리보기)만 제공하고 주요 상태를 변경하지 않아야 합니다. 두 입력 방식을 섞으면 마우스가 살짝 지나가는 것만으로 키보드 선택이 흔들리고, URL 파라미터가 자주 바뀌어 사용자 경험이 불안정해집니다.
구현 시 주의점은 상태 변경이 URL 쿼리 파라미터와 적절히 동기화되어야 한다는 것입니다. 키보드 선택은 focus 파라미터에 반영되어 북마크나 공유 가능한 상태를 유지하지만, 마우스 호버는 임시적이므로 URL에 반영되지 않습니다. 또한 이 패턴은 클라이언트 컴포넌트 내에서 상태를 관리하며, 입력 필드 등 다른 인터랙션 요소가 포커스되었을 때는 키보드 핫키를 비활성화해야 합니다.
이 패턴을 적용하면 생산성 도구에서 키보드 중심 사용자(빠른 탐색)와 마우스 중심 사용자(시각적 탐색) 모두에게 최적화된 경험을 제공할 수 있습니다. 단, 상태 변수가 하나 더 추가되어 관리 복잡도가 약간 증가하며, 두 상태 간의 전환 로직(예: 마우스 클릭 시 키보드 선택도 함께 이동할지 여부)을 명확히 정의해야 합니다.
관련 항목
- 상태 관리 패턴 (State Management Patterns)
- 접근성 키보드 네비게이션 (Accessible Keyboard Navigation)
- UI 피드백 계층화 (UI Feedback Layering)
Open questions
- 모바일 터치 환경에서는 호버 개념이 없으므로, 이 패턴을 어떻게 변형하여 적용할 수 있을까요? (예: 터치 홀드로 미리보기, 탭으로 선택)