터미널 UI 구축이 이제 쉬워졌다

• Claude Code를 활용해 Hatchet 팀이 터미널 기반 UI(TUI) 를 빠르게 개발한 사례를 소개
• Charm 스택(Bubble Tea, Lip Gloss, Huh) 을 이용해 React 수준의 구성요소 기반 개발과 일관된 스타일링을 구현
• 기존 웹 UI와 동일한 API를 사용하면서도 텍스트 중심·정보 밀집형 인터페이스로 개발자 효율을 높임
• Claude Code가 tmux 세션을 구동하며 테스트를 자동화해, 반복 개발과 안정성 확보에 큰 역할을 함
• 단 2일 만에 완성된 Hatchet TUI는 LLM 기반 개발의 실질적 생산성 향상을 보여주는 사례라고 평가

TUI 개발의 동기

• Hatchet 팀은 k9s와 유사한 형태의 TUI를 원했으며, 사용자는 이를 웹 UI보다 빠르고 직관적이라 평가
  • 사용자 피드백 중 “CLI와 TUI가 훨씬 성능이 좋다”는 의견이 있었음
• TUI는 코드와 동일한 환경에서 워크플로를 시각화·실행할 수 있어 탭 전환이 불필요함
• Hatchet의 주요 사용자가 IDE 내에서 작업하는 개발자이므로, 터미널 내 워크플로 관리 경험을 제공하는 것이 목표였음

기술 스택

• 일반적인 프런트엔드 스택(React, Tailwind 등)에 대응하는 Charm 스택을 사용
  • 주요 라이브러리: Bubble Tea, Lip Gloss, Huh
  • Charm 팀이 유지보수하며, 문서화와 예제가 풍부함
• Lip Gloss와 Huh 테마를 이용해 TUI 전반에 일관된 스타일을 적용
  • Hatchet CLI 명령어에도 동일한 테마를 재사용해 통합된 사용자 경험을 제공
• Bubble Tea 외의 커스텀 구성은 다소 어렵지만, React 기반 렌더링 엔진을 직접 구현하는 것보다 훨씬 단순함

테스트 접근법

• Claude Code가 터미널 기반 도구를 직접 구동하며 테스트를 수행
  • tmux capture-pane을 이용해 렌더링된 뷰를 캡처하고 올바른 출력 여부를 검증
• 이 방식은 첫 번째 테스트 패스 자동화에 매우 효과적이었으며, 뷰가 많아져도 안정적으로 렌더링 확인 가능
• 이후 수동 테스트와 단위 테스트를 병행해 안정적인 반복 개발 루프를 형성
• Claude Code는 ASCII 환경에서 반복 작업에 최적화되어 있어, 테스트 피드백 루프가 빠르게 수렴함

효율적 개발 환경 구성

• Claude Code는 기존 Hatchet 프런트엔드 구현체를 참조해 개발 효율을 높임
  • React 기반의 단순한 컴포넌트 구조와 OpenAPI 스펙을 활용해 명확한 경계 설정
  • 자동 생성된 REST API 클라이언트를 통해 명세 기반 개발이 가능
• DAG 기반 렌더러 구현은 가장 어려운 부분이었으나,
  • mermaid-ascii를 참고해 ASCII 그래프 렌더러를 성공적으로 구현
  • 완벽하지는 않지만 작동 가능한 DAG 시각화 기능 확보

결과와 교훈

• 전체 개발 기간은 약 2일로, 이전 프런트엔드 리팩터링보다 훨씬 빠르고 안정적
• Claude Code를 통한 개발이 비임의적이고 실질적인 생산성 향상을 보여준 첫 사례로 평가
• Hatchet 팀은 앞으로도 비핵심 경로 기능에 LLM 기반 개발을 점진적으로 확대할 계획
• 핵심 교훈은 짧은 피드백 루프, 모듈화, 명세 기반 설계, 지속적 테스트의 중요성
• 완성된 Hatchet TUI는 https://tui.hatchet.run에서 공개되어 있으며, 사용자 피드백을 수집 중임