Rust로 작성된 즉시 모드 GUI, Egui
(egui.rs)- egui는 Rust로 작성된 즉시(Immediate Mode) 모드 GUI 라이브러리로, 웹 및 네이티브 환경에서 동작
- 웹에서는 WebAssembly로 컴파일되어 WebGL을 통해 렌더링되며, 네이티브 환경에서는 Mac, Linux, Windows 등 다양한 플랫폼을 지원
- DOM, HTML, JS, CSS 없이 순수 Rust만으로 구현됨
- 사용하기 쉽고, 이식성이 뛰어나며, 빠른 성능을 제공하도록 설계됨
주요 특징
1. 즉시 모드 (Immediate Mode)
-
GUI 생성이 단순화되고 코드 흐름이 간결해지는 방식
-
예제:
if ui.button("Save").clicked() { my_state.save(); }
-
버튼 상태를 저장하거나 콜백을 사용할 필요가 없음
-
즉시 모드는 사용성을 높이고 복잡성을 줄이는 대신 레이아웃과 성능에서 약간의 제한이 있음
2. 플랫폼 호환성
- 웹: WebAssembly와 WebGL을 통해 동작
- 네이티브: Mac, Linux, Windows, Android 등을 지원
- 게임 엔진과 통합 가능 (예: Bevy와의 통합)
3. Rust 생태계와의 통합
- 공식 프레임워크 eframe 제공:
- 동일한 코드로 웹 및 네이티브 애플리케이션 작성 가능
- 경량 의존성:
- egui는 Rust의 ab_glyph, ahash 등 최소한의 의존성만 사용
- 무거운 의존성은 별도의 crate로 분리 (egui_extras 등)
주요 기능
- 위젯: 버튼, 슬라이더, 체크박스, 라디오 버튼, 텍스트 편집, 색상 선택기 등
- 레이아웃: 수평, 수직, 열 기반, 자동 줄바꿈 지원
- 텍스트 편집: 멀티라인, 복사/붙여넣기, 이모지 지원
- 윈도우: 이동, 크기 조정, 최소화/닫기
- 렌더링: 안티앨리어싱 적용된 텍스트, 도형 렌더링
- 접근성: AccessKit 통합으로 스크린 리더 지원
장점과 단점
- 장점
- 단순성: 콜백 없이 간결한 코드로 GUI 작성 가능
- 이식성: 동일한 코드로 웹 및 네이티브 환경에서 실행 가능
- 사용성: 애플리케이션 상태와 GUI 상태 간의 동기화 문제가 없음
- 단점
- 레이아웃 복잡성: 즉시 모드의 특성상 복잡한 레이아웃에는 추가 작업 필요
- CPU 사용량: 매 프레임 전체 레이아웃 계산이 필요하므로 대규모 UI에서는 성능 저하 가능
대상 사용자
- 간단한 GUI를 빠르게 작성하려는 개발자
- Rust 기반 게임 엔진이나 프로젝트에 GUI를 추가하려는 사용자
- 웹 및 네이티브 환경 모두를 지원하는 애플리케이션 작성자
즉시 모드에 대한 추가 설명
- 즉시 모드는 콜백 기반의 **보유 모드(retained mode)**와 달리, 프레임마다 상태를 즉각적으로 처리
- 예제: if ui.button("Save").clicked() { save(); }
- 장점: 코드 흐름이 단순해지고 상태 동기화 문제가 없음
- 단점: 레이아웃 계산이 복잡하며, 대규모 UI에서는 성능에 영향을 줄 수 있음
Hacker News 의견
-
Rust 프레임워크를 사용하여 수학 문제를 이해하려 했으나, edit-compile-run 사이클이 너무 길어 어려움을 겪음. 프로젝트를 모듈로 나누면 개선될 수 있을지 궁금함
-
브라우저가 서브 픽셀 렌더링을 지원하지 않으면, 캔버스 기반 UI 렌더링 라이브러리는 고해상도 기기를 제외하고는 DOM 기반에 비해 불리함. egui 라이브러리도 이 문제를 인식하고 있음
-
브라우저 환경에서 컴파일된 데모 페이지는 기술적으로 인상적이지만, egui를 사용한 앱의 가능성을 상상하기 어려움. egui를 활용한 재미있는 예시가 있는지 궁금함
-
크리스마스에 naughty한 행동으로 Option을 패턴 매칭 대신 강제로 언랩하여 에러 발생. Brave 모바일 버전에서 발생함
-
국제화 지원이 제한적임. 예를 들어, 아랍어 "hello"를 붙여넣으면 네모 상자로 표시됨
-
"즉시 모드"가 무엇인지 궁금함. 위젯을 UI에 추가하는 방법이 .add()를 사용함. 이러한 위젯에 대한 유창한 빌더 API가 "즉시 모드"로 만드는 것인지 궁금함
-
웹 브라우저에서 이러한 인터페이스를 디버깅하는 방법이 궁금함. JavaScript나 C++ 웹 어셈블리처럼 디버깅할 수 있는지 궁금함
-
창 크기 조정에 문제가 있음. "Highlighting" 예시에서 하단 오른쪽 모서리의 잡기 영역을 클릭하면 대각선 화살표가 수직 화살표로 바뀌어 수직으로만 크기 조정이 가능함. 다른 기본 예시에서도 수직 및 수평으로 동시에 크기 조정이 가능할 것 같지만, 수직으로 조정할 수 없음
-
입력 반응이 매우 느림. 빠르게 타이핑하면 입력이 따라오지 못함. 텍스트 선택 및 복사가 불가능하여 사용자 정의 GUI 구현에 큰 문제임. 모두에게 행복한 연말을 기원함