10P by GN⁺ 3달전 | ★ favorite | 댓글 1개
  • 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 구현에 큰 문제임. 모두에게 행복한 연말을 기원함