<p align="center">
<img src="https://raw.githubusercontent.com/longbridge/gpui-kit/main/website/public/logo.svg" width="112" alt="GPUI Kit logo" />
<br>
<strong>GPUI Kit</strong>
</p>
English | 简体中文
Build Status Docs Crates.io
Rust와 GPUI를 사용하여 환상적이고 고성능인 데스크톱 앱을 구축하세요.
GPUI Kit은 포괄적인 Rust 데스크톱 애플리케이션 프레임워크입니다. 이 프레임워크는 프로덕션 레디(production-ready) UI 시스템과 애플리케이션급 데이터, 레이아웃 및 편집 기능을 결합하며, 모두 재사용 가능한 동작(behavior), 상태(state), 인프라(infrastructure) 기반 위에 구축되었습니다. GPUI Kit은 75개 이상의 문서화된 컴포넌트와 기본 요소(primitives), WebAssembly 지원, AccessKit 접근성(accessibility), UI 통합 테스트(integration testing), 그리고 선택적 JavaScript 확장 런타임(extension runtime)을 제공합니다.
문서화: https://gpui-kit.com
gpui-kit 애플리케이션이 의존하는 유일한 크레이트(crate)
├── gpui-base 스타일링되지 않은 동작, 상태 및 인프라
└── gpui-component GPUI 컴포넌트: 완전한 스타일링 UI 시스템
gpui-kit은 일치하는 GPUI 릴리스를 고정(pins)하고 GPUI, base, component 및 assets를 재수출(re-exports)하여 Rust 애플리케이션이 단일 의존성만 나열하도록 합니다. JavaScript 확장 호스트는 gpui-shell을 별도로 추가하며, 이의 기본 components 기능은 스타일링된 카탈로그를 제공합니다.
테스트된 시작점 및 검증 명령어를 확인하려면 실행 가능한 애플리케이션 레시피 및 AI 지원 개발 승인 체크(AI-assisted development acceptance checks)를 참조하세요.
기능
- 75개 이상의 컴포넌트 및 기본 요소(Primitives): 폼, 네비게이션, 오버레이, 데이터 표시, 편집, 피드백, 레이아웃 등 세련된 상호작용과 생산적인 기본값(productive defaults)을 갖춘 75가지가 넘는 요소를 제공합니다.
- 프로덕션 레디(Production Ready): 개발 초기부터 Longbridge Pro를 구축하는 데 사용되었으며, 공개적으로 배포되는 상업용 데스크톱 애플리케이션에서 지속적으로 개선되었습니다.
- WebAssembly:
wasm32-unknown-unknown을 사용하여 웹에서도 애플리케이션과 동일한 컴포넌트 쇼케이스 실행이 가능합니다.
- 접근성(Accessibility): 접근성 계층에 역할(roles), 이름(names), 상태(states), 관계(relationships), 동작(actions)이 내장되어 있으며 테스트로 커버됩니다.
- UI 통합 테스트(UI Integration Testing): 헤드리스 창(headless windows)에서 실제 컴포넌트를 렌더링하고, 포인터 및 키보드 입력을 구동하며, 상태(state), 포커스(focus), 레이아웃(layout), 접근성을 검증할 수 있습니다.
- 네이티브 느낌(Native Feel): macOS와 Windows에서 영감을 받은 현대적인 컨트롤을 의미론적 테마(semantic themes)와 여러 크기(multiple sizes)를 기반으로 제공합니다.
- 120 FPS: 부하 상태에서도 부드러움을 유지하는 GPU 가속 인터페이스입니다.
- 데이터 테이블(Data Tables): 수십만 행에 걸친 가상 스크롤링(Virtual scrolling), 고정 및 크기 조절 가능한 열, 정렬, 셀 선택 기능을 제공합니다.
- 가상 목록(Virtual Lists): 항목의 크기가 다른 목록을 포함하여 보이는 범위(visible range)만 렌더링합니다.
- 코드 에디터(Code Editor): Tree-sitter 하이라이팅과 LSP 진단(diagnostics), 자동 완성(completion), 호버 기능을 갖추고도 200K 라인에서 안정적인 성능을 유지합니다.
- 도크 레이아웃(Dock Layout): 크기 조절 가능한 패널, 드래그 가능한 탭, 중첩된 분할(nested splits), 모서리 도크 등 모든 요소가 직렬화 가능(serializable)합니다.
- 풍부한 콘텐츠(Rich Content): 네이티브 Markdown 및 HTML 렌더링, 구문 강조(syntax highlighting), 내장 차트 기능을 제공합니다.
- 디자인 자유도(Design Freedom): 전체 시각 시스템을 사용하거나
gpui-base의 동작 및 인프라를 기반으로 자체적으로 구축할 수 있습니다.
- JavaScript 확장(JavaScript Extensions):
gpui-shell은 배포된 Rust 호스트가 스크립트로 패널과 비즈니스 로직을 로드할 수 있게 하며, 모든 기능은 명시적으로 부여됩니다.
- 크로스 플랫폼(Cross Platform): 하나의 Rust 코드베이스로 macOS, Windows, Linux에 배포 가능합니다.
프레임워크 아키텍처
세 개의 레이어. 하나의 생태계.
애플리케이션이 하나의 완전한 시각 및 상호작용 시스템과 일관성을 유지하려면 gpui-component를 사용하세요. 제품 자체가 해당 시스템을 생성하고 소유해야 하는 경우 gpui-base를 사용하세요. 배포된 후에도 JavaScript로 확장 가능해야 하는 애플리케이션의 경우 gpui-shell을 사용하세요.
gpui-component | gpui-base | gpui-shell |
|---|
| 완전하고 스타일링된 컴포넌트 | 비스타일링된 동작 및 인프라 | Rust가 호스팅하는 JavaScript 런타임 |
| ... | | |
APPLICATION
│
┌───────────────────┼───────────────────┐
...
동작(Behavior)은 기반에 속합니다. 표현(Presentation)은 애플리케이션에 속합니다.
배포 준비가 된 세련된 컨트롤이 필요할 때는 **gpui-component**를 사용하세요. 복잡한 상호작용 동작을 재사용하면서 애플리케이션이 자체 컴포넌트 소스, 레이아웃, 스타일링 및 모션을 소유해야 하는 경우 **gpui-base**를 기반으로 구축하세요. 기여자들이 포크(fork)나 릴리스 없이 제품을 확장해야 할 때는 **gpui-shell**을 추가하세요.
이 계층 구조는 shadcn 생태계를 유연하게 만드는 것과 동일한 분리 원칙을 따릅니다:
데모(Showcase)
GPUI Kit은 처음부터 Longbridge Pro에 동력을 공급해 왔습니다. 이 프레임워크는 고립되어 설계된 것이 아니라, 공개적으로 배포되는 상용 데스크톱 애플리케이션의 요구 사항에서 추출되었습니다.
GPUI는 렌더링 기반을 제공합니다. Longbridge는 프로덕션(production) 기반을 제공합니다.
<img width="1763" alt="Image" src="https://github.com/user-attachments/assets/e1ecb9c3-2dd3-431e-bd97-5a819c30e551" />
사용법 (Usage)
[dependencies]
gpui-kit = "0.7"
gpui-kit은 항상 GPUI와 gpui-base를 가져오며, gpui-component 및 기본 아이콘 세트는 기본적으로 활성화됩니다. 사용하려는 레이어만 유지하려면 기본 기능을 비활성화하세요. gpui-component 기능(inspector, decimal, tree-sitter, 그리고 각 tree-sitter-<언어>)은 동일한 이름으로 사용할 수 있습니다.
GPUI Fast
핵심(core), 네이티브 플랫폼, WebAssembly 및 활성화된 모든 Kit 레이어에 대해 선택할 수 있는 선택적 기능인 GPUI Fast를 사용하려면 gpui-fast 기능을 활성화하세요:
[dependencies]
gpui-kit = { version = "0.7", features = ["gpui-fast"] }
동일한 import, 초기화 및 테스트 매크로를 유지합니다. 애플리케이션의 [patch]나 크레이트 별칭은 필요하지 않습니다. 기본 백엔드는 고정된 상위(upstream) GPUI 스냅샷 상태를 유지합니다. Cargo 기능은 누적형이므로, Fast가 선택되어도 상위 패키지는 여전히 컴파일됩니다. 기능 조합 및 비교 명령어는 [Getting Started]를 참조하세요.
기본 예제 (Basic Example)
use gpui_kit::component::button::*;
use gpui_kit::component::*;
use gpui_kit::*;
...
gpui_kit::open_window는 애플리케이션 창의 진입점이며 항상 기본(Base) Root를 마운트합니다. 컴포넌트 초기화는 스타일이 적용된 창 기능을 등록하며, Cargo 기능은 다른 루트 타입을 선택하지 않습니다.
아이콘 (Icons)
기본 assets 기능은 Lucide 아이콘 세트를 gpui-kit-assets로 번들링합니다. 이를 애플리케이션에 전달하려면 gpui_kit::application().with_assets(gpui_kit::assets::Assets)를 사용하세요. 대신 자체 아이콘을 배포하려면 해당 기능을 제외하고 [IconName]에 정의된 대로 SVG 파일 이름을 지정하세요.
AI 코딩 에이전트를 위한 스킬 (Skills for AI Coding Agents)
사용자의 AI 코딩 에이전트(Cursor, Claude Code, Gemini CLI, Codex 등)를 위해 GPUI Kit 스킬을 설치하세요:
npx skills add longbridge/gpui-kit
| Skill | Description |
|---|
gpui-kit | 설정, 컴포넌트 카탈로그, 사용 패턴, GPUI 메커니즘(요소(elements), 엔티티(entities), 비동기(async), 포커스(focus), 액션(actions), 테스트(tests)), 그리고 코딩 가이드(Coding Guides). |
gpui-kit-design-guides | 디자인 가이드(Design Guides): 레이아웃, 간격(spacing), 계층 구조(hierarchy), 상호 작용 상태(interaction states), 오버레이(overlays), 인터페이스 카피(interface copy). |
개발 (Development)
데스크톱 갤러리 (Desktop Gallery) (Story)
story 크레이트는 사용 가능한 모든 컴포넌트를 보여주는 갤러리 애플리케이션입니다. 다음 명령어로 실행합니다:
예제 (Examples)
일부 대형 예제는 story 갤러리 컴포넌트를 재사용하며 독립적인 패키지로 실행됩니다:
cargo run -p example-dock
...
examples 디렉토리에는 또한 단일 기능에 초점을 맞춘 독립형 예제들이 포함되어 있습니다. 각 예제는 별도의 크레이트(crate)이며, 다음 명령어로 실행합니다:
cargo run -p example-editor
...
자세한 내용은 CONTRIBUTING.md를 확인하세요.
다른 것들과 비교 (Compare to others)
사이트에서 Iced, egui 및 Qt 6과의 [비교]를 확인하세요.
Native Shell (출처)은 AI가 UI를 생성하고 이를 iOS, Android, Linux(GTK), macOS(AppKit)에 네이티브로 렌더링할 수 있게 해주는 형제 프로젝트입니다. 이의 GPUI 데스크톱 백엔드는 개발 중이며 GPUI Kit을 기반으로 구축될 것입니다.
라이선스 (License)
소프트웨어 소스 및 문서 코드 예제: Apache-2.0.
GPUI Kit이 라이선스 권한을 보유하고 있는 Docs, Base, Component 및 Shell 섹션의 문서 산문과 원본 일러스트레이션(중국어 번역 포함)은 CC BY 4.0 하에서도 제공됩니다. 해당 자료를 복사하거나 각색할 때는 GPUI Kit을 출처로 명시하고, 소스 페이지 및 CC BY 4.0 라이선스 링크를 포함하며 변경 사항을 표시해야 합니다. 기존의 Apache-2.0 권한은 유지되며, 이전 개정판은 이전 약관을 유지하고, 제3자 기여는 별도로 승인되지 않는 한 자체 라이선스를 유지합니다. 보호되는 표현을 복사하지 않고 사실이나 아이디어를 사용하는 것은 CC BY 4.0 하에서 출처 표기를 요구하지 않습니다.
- Zed Industries의 UI 프레임워크인 GPUI를 기반으로 하며, 이 역시 Apache-2.0입니다.
gpui-pre-* 크레이트는 이것의 스냅샷이며, Zed의 라이선스와 고지 사항이 온전히 유지된 채 게시되었습니다.
- UI 디자인은 shadcn/ui를 기반으로 하며, 일부는 Reui에서 가져왔습니다.
- 아이콘은 Lucide에서 가져왔습니다.
