MewUI 웹브라우저 WASM 지원

MewUI
1

현재 WebAssembly를 통해 MewUI를 브라우저에서 실행하기 위한 실험을 진행하고 있습니다.

image
image1580×1293 235 KB

주된 목적은 신규 사용자가 별도의 로컬 개발 환경을 구성하지 않고도 브라우저에서 MewUI를 빠르게 사용해볼 수 있도록 하는 것입니다. 현재 첫 번째 목표는 MewUI Gallery를 브라우저에서 실행하는 것입니다.

렌더링 측에서는 기존 MewVG.GL 프로젝트를 유지하면서 OpenGL 렌더링 경로를 WebGL 2와 호환되도록 확장했습니다.

브라우저 지원 구조는 현재 다음과 같습니다.

MewUI
├─ MewUI.Platform.Browser
└─ MewUI.Backend.MewVG.Browser
   └─MewVG.Core
      └─ MewVG.GL
         └─ WebGL 2
        ▲
        │
MewUI.Gallery.Browser
  • MewUI.Platform.Browser — 브라우저 환경에 필요한 플랫폼 구현을 제공합니다.
  • MewUI.Backend.MewVG.Browser — MewVG 기반 렌더링을 브라우저/WebGL 2 환경에 연결합니다.
  • MewUI.Gallery.Browser — 위 구성을 사용해 기존 Gallery를 WebAssembly에서 실행하는 호스트 프로젝트입니다.

현재 기본적인 렌더링과 입력 처리는 동작하고 있지만 아직 초기 실험 단계이며, 다중 창, 다이얼로그 및 일부 데스크톱 전용 기능은 아직 동작하지 않습니다.

MewUI를 웹 애플리케이션 프레임워크로 확장하는 것보다는, 데스크톱 브라우저와 모바일 웹 환경 모두에서 플랫폼별 제약에 크게 방해받지 않고 안정적이고 매끄럽게 실행될 수 있는지 검증하는 것을 우선적인 목표로 합니다.

9개의 좋아요
2

로딩도 엄청 빠르고, 동작성도 빠르네요!!! 정말 쓸만할 것 같습니다.

4개의 좋아요
3

와.. 속도 무엇…

4개의 좋아요
4

Tauri와의 매쉬업도 생각해볼 수 있지 않을까 합니다. :smiley:

예를 들어 아래와 같은 계보를 구현할 수 있고, 마침 Tauri 2가 모바일 앱용 셸도 지원한다던데, 그러면 MewUI를 프론트엔드로 사용하는 모바일 앱도 생각해볼 수 있지 않을까 합니다. ㅎㅎ

                     CSharp Application
                              │
                       MewUI UI Tree
                              │
             ┌────────────────┼────────────────┐
             │                │                │
             ▼                ▼                ▼
         NativeAOT          WASM             WASM
             │                │                │
       Native Window       Browser       Tauri WebView
             │                │                │
          Desktop            Web          Desktop/Mobile
3개의 좋아요
5

넵ㅎ CPU 부하가 조금 걸리지만 프레임이 생각보다 잘 나와서 저도 얻어걸린 느낌입니다ㅎ

일단 AOT 빌드 여부에 따라 성능과 용량의 트레이드 오프가 있는데 AOT 빌드 압축 기준 최종 3.8메가 정도 수준입니다.

항목 비AOT 압축 전 비AOT brotli AOT 압축 전 AOT brotli
Aprillz.* (6개) 2,159 KB 723 KB 2,159 KB 526 KB
.NET 관련 (13개) 3,664 KB 1,089 KB 15,266 KB 3,381 KB
합계 5.69 MB 1.77 MB 17.02 MB 3.82 MB

시험삼아 만든 것이지만 이정도 크기가 유지된다면 Uno나 Avalonia 대비 틈새시장에서 경쟁력이 있지 않을까 생각합니다:blush:

3개의 좋아요
6

모바일 좋네요! 한 갈래 길을 뚫었더니 자연스럽게 또 다른 길이 열리는것 같습니다. 시도해보겠습니다ㅎ

3개의 좋아요
7

한자 IME가 안먹히는 빼면 상당히 완성도 높네요