Skip to Content
Dev Environment & Tools웹 환경 터미널 구현체 오픈소스 레퍼런스
🛠️ Dev Environment & Tools2019년 3월 21일

웹 환경 터미널 구현체 오픈소스 레퍼런스

#web-terminal#dev-environment-tools#open-source#frontend#kubernetes#xtermjs

1. 웹 터미널 도입 배경

과거 에서 대규모 빅데이터 및 AI 클러스터를 통합 관리하는 대시보드(Web Console)를 기획하던 당시였습니다. 클러스터 운영자나 데이터 사이언티스트들이 장애나 이슈를 디버깅할 때, 매번 로컬 터미널을 열고 사내 VPN을 켠 뒤 Bastion 호스트를 거쳐 SSH로 노드에 접속하거나 일일이 kubectl exec 커맨드를 타이핑하는 과정이 굉장한 병목이었습니다.

“웹 대시보드에서 장애가 난 파드(Pod)나 노드를 클릭하면, 화면 하단이나 모달 창에서 바로 해당 노드의 쉘(Shell)이 열리면 어떨까?”

이러한 강력한 요구사항을 해결하기 위해, 브라우저 화면 안에서 직접 노드나 컨테이너의 쉘에 접속하여 양방향 스트리밍(TTY)을 주고받을 수 있는 웹 터미널(Web Terminal) 뷰어 기술의 리서치가 시작되었습니다.

2. 웹 터미널의 핵심 구성 요소

웹 터미널 기능은 우리가 매일 쓰는 iTerm이나 PuTTY의 역할을 브라우저(HTML/Canvas)와 서버(Node.js/Go/Java) 간의 통신으로 모사하는 고난도의 작업입니다. 크게 3가지 파트로 구성됩니다.

  1. Frontend Emulator: 키보드 입력을 캡처하고 서버에서 받아온 ANSI Escape Code(색상, 커서 이동)를 텍스트나 Canvas/WebGL 형태로 이쁘게 렌더링하는 역할.
  2. WebSocket 양방향 통신: 단순 HTTP Polling으로는 타이핑 반응성을 감당할 수 없으므로, 무조건 WebSocket으로 실시간 입출력 스트림 파이프라인을 구축.
  3. Backend PTY (Pseudo-Terminal): 브라우저에서 넘어온 입력을 실제 OS의 /bin/bash나 K8s API Server(exec 엔드포인트)에 파이프(pipe)로 던지고, 출력 결과를 다시 WebSocket으로 브라우저에 텍스트로 밀어주기.

3. 코어 렌더링 라이브러리 및 레퍼런스

이 중 구현의 핵심이 되는 프론트엔드 에뮬레이터(UI) 단을 직접 바닥부터 짜는 것은 미친 짓(?)에 가깝습니다. 다행히 시장에는 이미 검증된 강력한 오픈소스들이 존재했습니다.

① 자바스크립트 터미널 라이브러리 (JavaScript)

  • xterm.js  (절대적 추천 ⭐️⭐️⭐️⭐️⭐️): 현재 VS Code의 하단 내장 터미널을 비롯해 AWS CloudShell, Google Cloud Shell 등 전 세계 클라우드 콘솔의 99%를 장악하고 있는 사실상의 절대 표준입니다. WebSocket 피드백 성능, 텍스트 반전, 한글 처리 등에서 가장 압도적입니다. 저희도 최종적으로 이를 채택하여 통합 플랫폼에 내장했습니다.
  • terminal.js : 아키텍처가 무거운 xterm.js 대신 선택할 수 있는 가벼운 대안 라이브러리입니다.
  • jQuery Terminal Emulator : 백엔드와 연결된 진짜 TTY 쉘이 아닌, jQuery 기반 레거시 환경에서 빠르게 커스텀 가짜(Fake) 쉘 명령어 인터페이스(예: 타자 치면 정해진 문구가 나오는 이벤트 페이지 등)를 만들 때 훌륭합니다.

② 쿠버네티스(Kubernetes) 특화 활용 사례

의 플랫폼은 K8s 위에서 동작했기 때문에, Xterm.js를 브라우저에 띄운 뒤 백엔드를 거쳐 K8s API Server의 exec WebSocket 기능과 연결해야 했습니다. 아키텍처 설계 시 아래의 실제 오픈소스 구현체들로부터 가장 많은 영감을 받았습니다.

  • Kube.sh : K8s를 브라우저에서 조작하는 컨셉 증명.
  • Kubebox : CLI용 터미널 UI(TUI) 형태로 K8s 클러스터를 조작하는 Curses 스타일의 멋진 구현체.
  • Kubernetes 공식 Web UI (Dashboard) 소스 구조: 대시보드 소스코드 (GitHub)  특히 K8s 공식 대시보드에 내장된 터미널 코드는 Angular 환경에서 어떻게 WebSocket 스트림과 xterm.js 컴포넌트를 이질감 없이 바인딩하는지 완벽한 교보재가 되었습니다. 저희 제품의 웹 터미널 기능도 이 소스 구조를 뼈대로 삼아 커스터마이징 되었습니다.

4. 결론 및 회고

결과적으로 xterm.js 프론트엔드 위젯과, 백엔드 서버에서 K8s Native Java Client를 이용한 WebSocket 프록시 릴레이 파이프라인을 성공적으로 구축해 냈습니다.

웹 대시보드 리스트에서 에러가 난 콤포넌트의 우측에 있는 >_ Terminal 버튼을 누르면 즉시 해당 컨테이너의 Log와 Shell에 진입할 수 있는 기능은, 저희 제품을 시연할 때 고객사 담당자들의 가장 큰 호응(“와, 이거 브라우저에서 바로 되네요?”)을 이끌어내는 핵심 셀링 포인트(Selling Point) 중 하나가 되었습니다.

여러분도 클라우드 콘솔이나 사내 통합 도구를 만드실 계획이 있다면, 주저 없이 xterm.js를 아키텍처에 올려보시길 강력히 권장합니다.

Last updated on