TUI 스타일 웹 인터페이스는 시각적 장식보다 상호작용 흐름과 상태 관리의 명확성을 통해 전문가 사용자의 효율성을 높인다.
TUI(Terminal User Interface) 스타일을 웹에 적용할 때는 단순히 녹색 글씨나 CRT 효과를 모방하는 것이 아니라, 터미널 도구(telescope, yazi 등)의 핵심 상호작용 원리를 추출해 웹의 제약 안에서 재현하는 것이 목표다. 이는 정보 탐색과 명령 실행에 있어 마우스 의존성을 줄이고, 키보드만으로 빠르게 목표에 도달할 수 있는 흐름을 설계하는 것을 의미한다.
효과적인 TUI 스타일 웹 인터페이스는 세 가지 계층으로 구성된다: 정보 구조(Information Architecture), 표현 계층(Presentation Layer), 상태 관리(State Management). 정보 구조는 사용자가 접근할 수 있는 데이터와 그 분류 체계(예: workspace, tags, 문서 목록)를 정의한다. 표현 계층은 이 구조를 시각적으로 배치하며, TUI 감성은 주로 레이아웃(예: 다중 패널)과 시각적 톤(낮은 border-radius, 무채색 palette, flat surface)에서 구현된다. 상태 관리는 사용자의 현재 선택(selected item), 활성 패널(active pane), 필터 조건 등을 URL 쿼리 파라미터와 동기화하여 북마크 가능하고 뒤로 가기/앞으로 가기가 예측 가능한 경험을 제공한다.
키보드 네비게이션 설계의 핵심은 모드 간 전환을 명확히 하고 충돌을 방지하는 키 매핑을 정하는 것이다. 일반적인 접근법은 hjkl 키를 기본 방향 키로 사용하되, 웹의 문맥에 맞게 재해석한다. j/k는 현재 활성 패널 내에서 항목을 위아래로 이동하는 선택(selection) 이동에, h/l은 패널 간 전환에 할당하는 것이 자연스럽다. 이는 패널 모델(예: explorer-results-preview)이 명확할 때 효과적이다. Enter 키는 기본 동작(문서 열기)을, Esc 키는 선택 해제나 모드 종료를 담당하게 한다. / (검색)과 : (명령)은 별도의 입력 모드를 트리거하도록 예약할 수 있다. 모든 핫키는 입력 필드 등 다른 포커스 가능 요소가 활성화되었을 때 비활성화되어야 한다.
이 설계 방식은 문서 중심 웹사이트의 홈페이지를 '카드 그리드 쇼케이스'에서 '인덱스-퍼스트 네비게이터'로 전환하는 작업에 적용되었다. 그리드 레이아웃은 시각적 다양성을 제공하지만 선택 흐름과 키보드 네비게이션을 명확히 정의하기 어렵다. 반면, 탐색기-결과목록-미리보기의 3-패널 구조는 현재 포커스 위치를 시각적으로 명시하고, hjkl 키맵을 통해 패널 이동과 항목 선택을 직관적으로 매핑할 수 있는 토대를 제공한다. 상태는 scope, tag, focus 등의 쿼리 파라미터로 관리되어 UI 상태가 URL에 저장되고 공유 가능해진다.
핵심 원칙: 웹에서 TUI 감성을 구현할 때는 시각적 스타일링보다 상호작용 모델과 상태의 예측 가능성이 더 중요하다. 사용자는 터미널의 '느낌'보다 빠르고 정확하게 원하는 항목에 도달할 수 있는 '흐름'을 원한다.
관련 항목
- URL 상태 관리 (State-in-URL)
- 키보드 이벤트 처리 및 접근성
- 반응형 레이아웃과 패널 디자인
Open questions
- 모바일 환경에서 다중 패널과 키보드 네비게이션을 어떻게 우아하게 축소할 것인가?
- screen reader 사용자를 위한 키보드 네비게이션 대체 수단은 무엇인가?