xterm.js 버퍼 분석을 통한 동적 TUI 텍스트 추적 및 UI 앵커링 구현

Context

AI 에이전트의 상태 표시줄(Kneading... 등) 위치가 스크롤이나 터미널 크기 조정에 따라 실시간으로 변동하는 구조. 고정 위치 UI 배치로는 동적인 TUI 텍스트와 애니메이션 간의 시각적 연결성 확보 불가능.

Technical Solution

• xterm.js의 Buffer API를 활용해 현재 뷰포트에 노출된 텍스트 행을 하단부터 역순으로 스캔하는 로직 설계
• Braille Spinner 기호, AI 전용 상태 동사(Kneading, Pondering 등), 괄호 형태의 타이머(3s)를 조합한 정규표현식 기반의 타겟 라인 식별 전략
• React Hook 내에서 250ms 주기의 폴링 방식을 적용해 터미널 버퍼의 변경 사항을 감지하고 앵커 좌표를 갱신하는 구조
• 번들 크기 증가를 방지하기 위해 Lottie-web 대신 SVG와 CSS Keyframes를 활용한 경량 애니메이션 렌더링 방식 채택
• TUI 렌더링 엔진의 특성에 맞춰 뷰포트 시작 지점(viewportY)과 전체 행 수를 계산하여 정확한 Y축 좌표를 산출하는 좌표 매핑 로직 구현

Impact

• 애니메이션 설정 및 좌표 갱신에 약 250ms의 처리 시간 소요

Key Takeaway

정형화되지 않은 TUI 환경에서 특정 상태를 추적하기 위해 버퍼 스캔과 다중 시그널 정규표현식을 결합한 휴리스틱 접근법의 유효성 확인.