JSUI는 React Native 방식으로 만든 게임 UI를 Godot 4, Unity 6, Unreal Engine 5, 웹과 모바일 등에서 실행하는 오픈소스 임베디드 런타임이다. QuickJS로 JavaScript를 실행하고 Yoga로 화면을 배치하며 Skia로 그린다. 프로젝트 사이트도 DOM이나 CSS 없이 WebAssembly 빌드가 하나의 캔버스에 렌더링한다.
JSUI는 Godot 4용 JsuiView 확장, WebAssembly 웹 호스트, iOS용 UIKit 호스트, Android용 NDK 호스트를 제공한다. raylib·SDL3·sokol 예제와 Unity 6 패키지, Unreal Engine 5 플러그인도 포함한다. Rust와 Go에는 C API를 감싼 바인딩이 있으며, 자체 C·C++ 엔진에서도 C API를 통해 연결할 수 있다. 독립 실행형 창 호스트인 jsui-viewer도 제공한다.
렌더링은 WebGPU·Metal·Vulkan의 Skia Graphite, WebGL2·OpenGL의 Skia, 손상된 사각형만 다시 그리는 CPU 래스터 방식을 지원한다. C API를 통해 마우스·키보드·터치·게임패드 입력을 전달하고 런타임을 갱신한 뒤 픽셀을 가져오거나 GPU 렌더링 대상으로 그릴 수 있다. UI가 처리하지 않는 입력은 게임으로 전달된다.
게임패드 중심의 방향키·스틱 탐색, 포커스 범위와 Tab 순서, 누르고 있을 때 반복 입력을 지원한다. 애니메이션은 C++에서 실행할 수 있고, Skia의 Skottie로 Lottie 애니메이션을 재생한다. ShaderView로 Skia 런타임 효과를 적용할 수 있으며, HostTexture로 게임이 소유한 렌더 타깃·카메라·디코딩된 동영상 텍스처를 표시한다. UI와 게임은 키 기반 상태 공유, Host.call 호출, 프레임별 형식화 배열로 데이터를 주고받는다.
React Native API로 View, Text, Image, ScrollView, FlatList, SectionList, TextInput, Modal, Pressable, StyleSheet를 제공한다. 텍스트는 HarfBuzz와 ICU로 처리하며 양방향 텍스트도 지원한다. 프로젝트는 예제 화면을 Chrome의 react-native-web 결과와 픽셀 단위로 비교하는 참조 테스트를 제공한다고 설명한다.
개발 중에는 jsui dev가 번들을 제공하고 React Fast Refresh가 컴포넌트 상태를 유지한 채 UI를 갱신한다. 빌드와 런타임 오류를 표시하는 오버레이도 제공한다. jsui screenshot, jsui inspect, jsui run은 브라우저 없이 Node에서 WebAssembly 런타임을 실행하며, jsui dev --shared는 사람과 에이전트가 함께 사용하는 실시간 앱을 제공한다.
시작하려면 다음 명령을 사용할 수 있다.
npx @orktes/jsui-cli skill install # add the JSUI agent skill to your project
npm install --save-dev @orktes/jsui-cli # the CLI, @orktes/jsui-react and the headless runtime
npx jsui dev src/app.jsx # dev server with hot updates
npx jsui build src/app.jsx -o dist/bundle.js
npx jsui screenshot src/app.jsx -o shot.png
npm 패키지는 @orktes/jsui-react, @orktes/jsui-cli, @orktes/jsui-web다.
사이트에서 사용 사례, 예제 게임 화면, 기능 안내를 볼 수 있다. 기능 안내에는 상호작용, 입력과 게임패드 포커스, 애니메이션, SVG와 Skia Canvas, 네이티브 컴포넌트 설명이 포함된다. 실시간 코드 플레이그라운드에서 React Native 코드를 편집하고 렌더링 결과를 확인할 수 있으며, 임베딩 안내에서는 Godot, C API, 웹 호스트와 개발 모드를 다룬다.
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요