tui.builders & SuperLightTUI

개요

tui.builders는 터미널 UI(TUI)를 브라우저에서 시각적으로 디자인하고 Rust 코드를 자동 생성하는 에디터 — “터미널 UI의 Figma”. SuperLightTUI는 이를 위해 설계된 Rust TUI 라이브러리로, CSS Flexbox + Tailwind 유틸리티 클래스 방식. 의존성 2개, unsafe 0, ~1ms 프레임, 50+ 위젯. 한국인 개발자(subinium) 프로젝트.

에디터: https://tui.builders
라이브러리: SuperLightTUI
언어: Rust
핵심: 비주얼 에디터 → 1:1 Rust 코드 매핑

2가지 도구

1. tui.builders (비주얼 에디터)

브라우저에서:
  위젯 드래그 → 인스펙터에서 속성 설정

자동 생성:
  인스펙터: width=30, padding=2, border=rounded
  코드:     .w(30).p(2).border(Border::Rounded)

→ 1:1 매핑 ⭐
→ "TUI의 Figma"

2. SuperLightTUI (Rust 라이브러리)

slt::run(|ui| {
    ui.bordered(Border::Rounded).p(2).gap(1).col(|ui| {
        ui.text("hello").bold().fg(Color::Cyan);
        if ui.button("click").clicked { count += 1; }
    });
});

3줄이면 렌더링:

App 구조체 ❌
이벤트 루프 ❌
trait 구현 ❌
클로저 하나가 앱 전체

SuperLightTUI 스펙

항목	값
의존성	2개만 (crossterm + unicode-width)
unsafe	0
렌더링	Immediate-mode, ~1ms 프레임
위젯	50+ (차트, 테이블, 이미지, AI 위젯 등)
레이아웃	CSS Flexbox 방식
스타일	Tailwind 유틸리티 클래스 방식

왜 만들었나?

문제:
  Rust TUI (ratatui 등):
    ✓ 좋은 생태계
    ✗ 레이아웃 잡는 시간이 오래 걸림

  Python (Textual) / JS (Ink):
    ✓ 문법 편함
    ✗ 런타임 의존성·성능 오버헤드

해법:
  SuperLightTUI:
    ✓ Rust 성능 유지
    ✓ Tailwind 방식으로 개발 속도 ↑
    ✓ 웹 개발 경험 있으면 별도 학습 ❌

  tui.builders:
    ✓ 비주얼로 디자인 → 코드 자동 생성
    ✓ 레이아웃 시간 대폭 단축

vs 다른 TUI 프레임워크

항목	SuperLightTUI	ratatui	Textual	Ink
언어	Rust	Rust	Python	JS
비주얼 에디터	✅ tui.builders ⭐	❌	❌	❌
레이아웃 방식	Flexbox + Tailwind	수동 제약	CSS 유사	JSX
의존성	2개	여러 개	Python 런타임	Node.js
unsafe	0	있음	N/A	N/A
프레임 속도	~1ms	빠름	보통	보통
학습 곡선	낮음 (웹 경험 시)	중간	낮음	낮음
위젯	50+	다수	다수	제한
배포	단일 바이너리	단일 바이너리	pip	npm

→ SuperLightTUI의 niche: Rust TUI의 성능 + 웹 개발자의 DX + 비주얼 에디터

코드 스타일 비교

SuperLightTUI (Tailwind 방식)

ui.bordered(Border::Rounded)
  .p(2)        // padding
  .gap(1)      // gap
  .w(30)       // width
  .fg(Color::Cyan)
  .bold()

ratatui (수동 레이아웃)

let block = Block::default()
    .borders(Borders::ALL)
    .border_type(BorderType::Rounded);
let area = Layout::default()
    .constraints([Constraint::Length(30)])
    .split(frame.area());
frame.render_widget(
    Paragraph::new("hello").style(Style::default().fg(Color::Cyan).add_modifier(Modifier::BOLD)),
    area[0]
);

→ SuperLightTUI가 훨씬 간결 (동일 결과)

활용 시나리오

시나리오	활용
CLI 도구 UI	대시보드, 프로그레스, 메뉴
서버 모니터링	실시간 차트, 로그 뷰어
개발 도구	git diff 뷰어, DB 브라우저
프로토타이핑	tui.builders로 빠르게 디자인
학습	Rust + TUI 입문

→ 관련: Rust, Rust CLI 도구, Terminal

”TUI의 Figma” 의미

웹 개발:
  Figma (디자인) → FigmaToCode (코드)
  → 비주얼 → 코드 파이프라인

TUI 개발:
  tui.builders (디자인) → SuperLightTUI (코드)
  → 비주얼 → Rust 코드 파이프라인

같은 패턴의 터미널 UI 버전

→ 관련: FigmaToCode, open-pencil

의의

1. Rust TUI 개발의 DX 혁신
   - ratatui의 레이아웃 고통 해소
   - Tailwind 방식으로 웹 개발자 진입장벽 ↓

2. 비주얼 에디터 → 코드 자동 생성
   - 1:1 매핑의 정확성
   - 프로토타이핑 속도 대폭 향상

3. 미니멀리즘
   - 의존성 2개, unsafe 0
   - 클로저 하나 = 앱 전체

4. 한국 개발자의 글로벌 오픈소스
   - subinium (한국인) 프로젝트
   - Show GN 14P

Bigstones

Explorer