React 터미널 UI를 조립하는 termcn, 99개 컴포넌트를 한 번에

React 터미널 UI를 조립하는 termcn, 99개 컴포넌트를 한 번에

AI 뉴스 썸네일

터미널 앱도 웹 화면처럼 검증된 부품을 조립해 만들 수 있게 됐어요. termcn은 React 개발자가 명령 하나로 설치하고, 필요한 터미널 UI 컴포넌트만 골라 쓸 수 있는 오픈소스예요. Ink와 OpenTUI를 바닥에 두고 shadcn/ui와 비슷한 사용 흐름을 제공해요. 1

핵심 요약

구분	핵심	왜 볼 만한가요
설치와 구성	별도 설정 없이 명령 하나로 시작할 수 있어요	TUI 프로젝트의 초기 설정 시간을 줄일 수 있어요
컴포넌트	11개 범주에 99개 컴포넌트를 제공해요	폼부터 차트, AI 도구 화면까지 같은 방식으로 조립할 수 있어요
개발 방식	React, Ink, OpenTUI와 shadcn/ui식 레지스트리를 써요	웹 프론트엔드 경험을 터미널 앱 개발에 옮기기 쉬워요
배포 조건	TypeScript 기반이며 MIT 라이선스로 공개됐어요	제품과 사내 도구에서 수정해 쓰기 편한 조건이에요

1. 터미널 앱에도 컴포넌트 카탈로그가 생겼어요

termcn은 바로 가져다 쓸 수 있는 React용 터미널 UI 컴포넌트 모음이에요. 공식 저장소는 별도 설정이 필요 없는 한 번의 명령 설치, 터미널 테마 자동 인식, shadcn/ui와 호환되는 레지스트리와 CLI를 주요 특징으로 내세워요. 렌더링은 Ink와 OpenTUI가 맡고, 개발자는 선언형 컴포넌트를 조합해 화면을 구성해요. 프로젝트는 TypeScript로 작성됐고 MIT 라이선스로 배포돼요. 2

버튼과 입력창을 넘어 개발 도구 화면까지 다뤄요

공개된 구성은 레이아웃, 글자, 입력, 선택, 데이터 표시, 피드백, 탐색, 오버레이, 폼, 유틸리티, AI 등 11개 범주에 걸쳐 있어요. GeekNews 소개 기준으로 전체 컴포넌트는 99개예요. 일반적인 버튼과 입력창뿐 아니라 막대·선 차트, 게이지, 히트맵 같은 데이터 표현도 포함돼요. 명령 팔레트, 탭, 메뉴, 사이드바, 페이지 이동처럼 키보드 조작이 중요한 패턴도 준비돼 있어요. 1

AI 기반 CLI를 만들 때 자주 필요한 화면도 따로 있어요. 대화 메시지, 스트리밍 텍스트, 사고 과정 블록, 도구 실행 승인, 토큰 사용량, 모델 선택기를 조합할 수 있어요. Git 상태, 코드 차이, 디렉터리 트리, 내장 터미널 같은 개발 도구용 컴포넌트도 제공돼요. 각 기능을 처음부터 직접 구현하는 대신 제품 흐름과 키보드 조작에 시간을 쓸 수 있는 구성이에요.

728x90

웹 프론트엔드의 작업 방식을 터미널로 가져와요

기존 TUI 개발은 레이아웃과 포커스 이동, 입력 처리, 색상 대응을 프로젝트마다 다시 만드는 경우가 많았어요. termcn은 필요한 컴포넌트 코드를 CLI로 가져오고 프로젝트 안에서 수정하는 shadcn/ui식 방식을 택했어요. 패키지 내부 구현에만 의존하는 대신, 가져온 코드를 제품에 맞게 바꿀 수 있어요. 공식 문서에서 설치 방법과 컴포넌트별 예제를 확인할 수 있어요. 3

React와 JSX에 익숙한 개발자라면 화면 구조를 읽기도 쉬워요. 터미널 색상에 맞춰 테마가 자동으로 바뀌므로 밝은 배경과 어두운 배경을 각각 처음부터 맞추는 부담도 줄어요. 다만 웹의 DOM과 CSS를 그대로 쓰는 도구는 아니에요. 키보드 포커스, 터미널 크기, 지원 색상처럼 TUI 고유의 제약은 실제 실행 환경에서 확인해야 해요.

AI 코딩 도구의 화면 품질을 빠르게 맞출 수 있어요

최근 AI 코딩 도구는 답변 텍스트만 출력하지 않아요. 도구 호출 전 승인을 받고, 실행 상태를 갱신하고, 코드 변경 내용을 보여주며, 사용자가 모델이나 작업을 선택하게 해요. termcn의 AI 및 개발 도구 컴포넌트는 이런 상호작용을 미리 나눈 부품으로 제공해요. 작은 실험용 CLI와 팀 내부 도구도 일관된 화면 구조를 빠르게 갖출 수 있어요.

프로젝트를 검토할 때는 원하는 컴포넌트가 Ink와 OpenTUI 중 어느 렌더링 경로를 쓰는지 먼저 보는 편이 좋아요. 기존 프로젝트의 런타임, 입력 처리 방식, 패키지 버전과 맞는지도 확인해야 해요. 아직 빠르게 변하는 저장소라면 업데이트 전에 변경 내역과 예제 동작을 함께 살펴보는 게 안전해요.

왜 중요한가요

터미널은 개발자 도구의 핵심 화면으로 다시 쓰이고 있어요. AI 에이전트와 코딩 CLI는 스트리밍 출력, 권한 승인, 작업 진행률, 코드 차이처럼 텍스트 한 줄로는 다루기 어려운 정보를 계속 보여줘야 해요. termcn은 이런 화면을 재사용 가능한 컴포넌트로 나눠, 기능 실험과 제품화 사이의 UI 작업량을 줄여줘요. 2

도입 가치는 컴포넌트 개수보다 조립 방식에서 나와요. 팀이 공통 버튼, 선택기, 대화 블록, 상태 표시를 같은 규칙으로 쓰면 새 기능을 붙일 때 화면 동작을 다시 설계하는 일이 줄어요. 반대로 터미널 렌더러와 키보드 입력의 제약은 남아 있으니, 실제 지원 환경과 접근성은 프로젝트별로 시험해야 해요.

참고 자료

1. termcn - Ink와 OpenTUI 기반의 아름다운 터미널 UI 컴포넌트 — GeekNews
2. shadcn-labs/termcn — GitHub
3. termcn Components — termcn 공식 문서