키보드 네비게이션과 호버-분리 패턴은 키보드 선택 상태와 마우스 호버 상태를 분리하여 키보드 사용자 경험의 안정성과 마우스 사용자 경험의 즉각성을 동시에 확보하는 상호작용 패턴이다. 이 패턴을 이해하면 리스트-프리뷰 구조에서 두 입력 방식의 충돌을 해소하고, 탐색기 스타일 인터페이스를 설계할 때 명확한 상태 모델을 세울 수 있다.
키보드 네비게이션(예: hjkl, 방향키)과 마우스 호버는 웹 애플리케이션, 특히 문서 탐색기나 대시보드와 같은 정보 밀집 인터페이스에서 빈번히 충돌한다. 키보드로 선택한 항목을 안정적으로 유지하면서도 마우스로 빠르게 미리보기를 제공하려면 두 입력 소스를 위한 별도의 상태를 도입해야 한다.
핵심은 세 가지 상태 변수를 구분하는 것이다: selectedItem은 키보드나 명시적 클릭에 의해 결정되는 공식 선택 항목으로, URL 파라미터와 동기화되어 브라우저 히스토리와 북마크 가능성을 보존한다. hoveredItem은 마우스 포인터가 현재 올라간 임시 항목으로, 키보드 선택을 방해하지 않으며 마우스가 벗어나면 사라진다. previewItem은 실제로 미리보기 영역에 표시할 항목으로, 일반적으로 hoveredItem이 있으면 hoveredItem을, 그렇지 않으면 selectedItem을 보여주는 규칙으로 결정된다.
이 분리의 가장 큰 이점은 각 입력 방식의 장점을 보존하면서 단점을 상쇄한다는 점이다. 키보드 사용자는 j/k로 이동할 때 선택이 예측 가능하게 유지되며, 마우스 사용자는 리스트를 스캔할 때마다 미리보기가 즉각적으로 반응한다. 만약 호버를 즉시 선택 상태로 승격하면, 마우스를 살짝 움직이는 것만으로도 키보드 선택 문맥이 깨지고 URL이 빈번히 변경되는 노이즈가 발생한다.
이 패턴은 탐색기, 결과 리스트, 미리보기의 3-페인 레이아웃에 잘 적용된다. 각 페인은 자체적인 내비게이션 대상을 가지며, h/l 키는 페인 간 이동, j/k 키는 현재 활성 페인 내 항목 이동으로 매핑될 수 있다. 미리보기 페인은 대개 수동적으로 유지하여 복잡성을 줄인다.
구현 시 고려할 트레이드오프는 상태 관리의 복잡성 증가다. selectedItem은 URL과 동기화되어야 하며, hoveredItem은 컴포넌트의 로컬 상태로 관리될 수 있다. 또한, 입력 필드 등 다른 포커스 대상이 활성화되었을 때는 전역 키보드 핫키를 비활성화해야 한다. 스크롤 위치 관리도 중요하다. 키보드로 선택 항목을 변경할 때는 scrollIntoView를 호출하여 가시성을 보장해야 하지만, 마우스 호버 시에는 스크롤을 트리거하지 않아야 자연스럽다.
이 패턴의 메타 원칙은 "충돌하는 상호작용 모드가 있을 때, 상태를 분리하면 각 모드의 최적 경험을 독립적으로 제공할 수 있다"이다. 이는 키보드 대 마우스뿐만 아니라 터치, 음성, 게임패드 등 다양한 입력 채널이 공존하는 현대 인터페이스 설계에 일반화될 수 있는 통찰이다.
이 패턴은 URL 상태 동기화, 접근성 키보드 네비게이션, 명령 팔레트 패턴, 상태 머신을 이용한 UI 모델링 등과 관련이 있다.
열린 질문으로는, 터치 디바이스에서 '호버'에 상응하는 상호작용(예: 길게 누르기)을 이 패턴에 어떻게 통합할 것인가, 매우 긴 리스트에서 hoveredItem 상태를 즉시 계산하는 것이 성능에 미치는 영향은 어떠한가(debounce/throttle 적용 여부), 그리고 선택 상태를 URL에 저장하는 방식이 사용자에게 항상 직관적인가(뒤로 가기 동작의 기대) 등이 있다.