웹처럼 개발하고,
GPU로 네이티브 렌더링

고성능 Zig GPU UI 프레임워크입니다. Signal, 스타일 레시피, Flex / Grid, DevTools는 웹처럼 쓰고, Metal 렌더링과 완전한 텍스트·IME 처리로 네이티브 앱으로 동작합니다. ReleaseSmall로 빌드한 Hello Button.app은 1.7 MB에 불과합니다.

5분 만에 시작
01 / SIGNALS가상 DOM이 아닌 Signal.0:00 / 1:53
HELLO, ZENIT

파일 하나,
네이티브 창 하나.

examples/hello_button/main.zig의 전체 소스와, 이를 컴파일한 .app입니다. 창 화면은 E2E harness가 실제 창에서 버튼을 세 번 클릭하며 녹화했습니다.

main.zigexamples/hello_button/
const std = @import("std");const ui = @import("ui");const App = @import("zenit_app").App; /// 样式表:具名纯函数 + 应用层自定义 recipe,与业务逻辑分离。const S = @import("styles.zig"); const Counter = struct {    n: u32 = 0,    label: ?*ui.Node = null,    buf: [32]u8 = undefined,     pub fn increment(self: *Counter) void {        self.n += 1;        const node = self.label orelse return;        const content = std.fmt.bufPrint(&self.buf, "Clicked {d} times", .{self.n}) catch return;        if (node.getText()) |old| {            var t = old;            t.content = content;            node.setText(t);        }        node.markRenderDirty();    }}; fn mountUI(cx: *ui.Cx, scope: *ui.Scope) anyerror!*ui.Node {    const allocator = cx.allocator;     const counter = try cx.bindState(Counter, .{});    const click = cx.on(Counter, counter, Counter.increment);     const root = try ui.boxStyled(cx, S.root, .{});     try root.appendChild(allocator, try ui.textStyled(cx, S.title, "Hello, zenit!"));     try root.appendChild(allocator, try ui.widgets.Button(.{        .label = "Click me",        .variant = .primary,        .size = .md,        .on_click = click,    }).mount(scope, cx));     // 应用层自定义 recipe(styles.zig 的 PanelRecipe)包住计数文本    const panel = try ui.boxStyled(cx, S.panel(.highlight), .{});    const label = try ui.textStyled(cx, S.counterLabel, "Clicked 0 times");    try panel.appendChild(allocator, label);    try root.appendChild(allocator, panel);    counter.label = label;     return root;} pub fn main() !void {    var gpa = std.heap.GeneralPurposeAllocator(.{}){};    defer _ = gpa.deinit();     const app = try App.init(gpa.allocator(), .{        .window = .{ .width = 640, .height = 480, .title = "Hello Button" },    });    defer app.deinit();     try app.runWith(mountUI);}
Hello Button
창
640 × 480 · Metal
.app
1.7 MB · ReleaseSmall
녹화
E2E harness
/01
1.7MB
Hello Button .app 크기 (ReleaseSmall)
/02
51
녹화된 컴포넌트 story
/03
2,026
내장 Lucide 아이콘
/04
60fps
Debug 빌드 인터랙션 목표
AI SKILL · Claude Code / 모든 에이전트용

에이전트가 제대로 된
zenit UI를 쓰도록.

zenit-ui-dev는 zenit 프레임워크 자체와, zenit으로 만든 프로덕션 macOS 에디터의 개발 이력에서 추려 낸 Agent Skill입니다. 컴포넌트 선택, 스타일 3계층, Signal 사용법, 네이티브 통합, 스크린샷 자가 검증, 그리고 수십 개의 ‘함정 → 원인 → 해결’ 항목을 담았습니다. ~/.claude/skills에 넣으면 에이전트가 zenit 코드를 쓸 때마다 자동으로 불러옵니다.

zenit-ui-dev/
SKILL.md9.6 KB
references/
app-architecture.md7.2 KB
components.md8.3 KB
macos-native.md8.2 KB
pencil-design.md7.9 KB
performance.md4.1 KB
pitfalls.md8.5 KB
project-setup.md8.1 KB
state-reactivity.md7.8 KB
styling.md5.8 KB
ui-tree-layout.md6.1 KB
verification.md5.7 KB
tools/
design_diff.ts20.6 KB
png.ts3.6 KB
shot.ts3.7 KB
압축 해제 위치
~/.claude/skills/zenit-ui-dev/
Pencilpen.dev
추천 워크플로 · PENCIL + SKILL
Pencil과 함께: 디자인하고 AI로 구현

Pencil로 화면을 그리고, 이 Skill로 에이전트가 구현하게 하는 방식을 추천합니다. .pen 파일의 Flex 레이아웃, 간격, 모서리 반경, 글자 크기, lucide 아이콘은 zenit의 모델과 매우 가깝습니다. Skill에는 필드 매핑표와 design_diff 비교 도구가 들어 있어 에이전트가 감이 아닌 수치로 옮깁니다.

  1. 01.penPencil 디자인
  2. 02MCP에이전트가 정확한 수치를 읽음
  3. 03zigwidgets + token으로 zenit 코드
  4. 04diff디자인과 수치 비교
01 / 핵심 기능

창에서 픽셀까지,
전부 네이티브.

WebView도 가상 DOM도 없습니다. UI 트리는 평평한 DisplayItem 목록을 내보내고, Metal 렌더러가 이를 직접 소비합니다.

Metal GPU 렌더링

render · gpu

트리플 버퍼링된 SDF·텍스트·이미지 렌더러. GPU 완료와 CPU 레이아웃이 겹쳐서 진행됩니다.

LabelCount ← dirtyButtonBox

세밀한 Signal

Signal · Memo · createEffect

트리 재구성도, diff도 없습니다. 의존성은 그것을 읽는 노드에만 정확히 전달됩니다.

baselinex-height
Aa字ع

텍스트와 IME

text · text_core

Unicode 17, UAX #9 양방향 텍스트, UAX #29 자소 경계, 그리고 엔드투엔드 preedit / commit.

Click megetByRole("button")

실제 창 E2E

ui.devtools · harness

시맨틱 로케이터, 가상 커서, Retina 스크린샷, drawable 수준 MP4 녹화. DevTools 포함.

02 / 컴포넌트

51개의 컴포넌트,
모든 픽셀을 GPU로.

전체 컴포넌트 보기
zenit components: buttons, inputs, select, switches, checkboxes, radios, slider, progress, tabs, calendar, steps, table, alerts, tags, badges, chips, timeline, tree, accordion, rate
목업이 아닙니다. Storybook의 Component Wall story를 E2E harness가 실제 창에서 캡처한 것입니다. 모든 타일을 클릭하고, 입력하고, 스크롤할 수 있습니다.
03 / 아키텍처

앱은 공개 모듈
두 개만 가져옵니다.

플랫폼, 렌더링, 텍스트는 아래 계층이 맡습니다. 경계는 빌드 시점에 강제되어, 금지된 import는 컴파일에 실패합니다.

error:import of 'render' is forbidden from L0
your appL0
ui + zenit_apppublic · L1
system_sdkrendergputext
text_coreicon_ir
NSWindow · CAMetalLayer · CoreTextmacOS
04 / 성능
60fps
0 ms16.6 ms / frame1 s

Debug 빌드에서 기본 인터랙션의 목표치입니다. 수만 행 가상 목록에서의 스크롤, 커서 이동, 입력을 포함합니다. M 시리즈 Apple silicon.

01트리플 버퍼 인스턴스와 frame sync로 GPU와 CPU 레이아웃을 병렬 처리
02서브트리 캐시가 있는 디스플레이 리스트 — 정적 서브트리는 레이아웃과 렌더링을 건너뜀
03layout_isolation 경계가 dirty 연쇄를 차단
04지연 스케줄러가 무거운 작업을 여러 프레임에 나눔
영상 08장에서: 호버와 스피너는 자기 서브트리만 dirty로 표시하고 나머지는 캐시에서 재생합니다. 아무것도 바뀌지 않으면 run loop는 잠들어 0프레임, GPU 작업 0. M4 Max · 5K · 60 Hz에서 측정.
05 / QUICK START

세 단계로
첫 번째 창까지.

템플릿 받기01
git clone https://github.com/version-next/zenit.git
cp -R zenit/templates/minimal-app ./myapp

build.zig, build.zig.zon, src/main.zig가 포함되어 있습니다.

의존성 연결02
zenit.attach(zenit_dep, exe);

한 번의 호출로 ui, zenit_app, 네이티브 브리지와 프레임워크를 연결합니다.

빌드 후 실행03
zig build run
zig build app

바로 실행하거나 더블클릭으로 여는 macOS .app을 만듭니다.

06 / 현황

솔직히 말해,
아직 준비되지 않았습니다.

0.1.0은 첫 공개 릴리스이지만, 1.0 이전에는 API가 여전히 바뀔 수 있습니다. 정확한 버전으로 고정하세요. 호환성을 깨는 변경은 모두 MIGRATION에 기록됩니다.

macOS · Apple Silicon
NSWindow + Metal — 지속적으로 검증하는 유일한 플랫폼
지원
Linux · Windows
백엔드는 자리만 잡혀 있고 아직 쓸 수 없습니다
계획 중
접근성
a11y 트리와 NSAccessibility 브리지는 구현되어 있지만, 61개 컴포넌트 중 VoiceOver 검수를 통과한 것은 0개입니다. 접근성이 필요한 제품에는 사용하지 마세요.
미지원
공개 API
1.0 이전에는 호환성을 깨는 변경 허용, 모두 MIGRATION에 기록; v1.0.0에서 동결
pre-1.0
07 / 사례

실제 앱에서
확인하세요.

커뮤니티의 기존 프로젝트를 실제 창에서 그대로 녹화했습니다.

전체 사례 보기
08 / ZENIT으로 만드는 중

열린 프레임워크,
다음은 당신의 아이디어.

이미 파트너들이 zenit으로 무한 캔버스 디자인 툴, 코드 에디터 IDE, 동영상 다운로더 등을 만들고 있습니다. 같은 노드, 스타일, 네이티브 기능이 전혀 다른 제품들을 떠받칩니다.

파트너가 개발 중
무한 캔버스 디자인 툴

확대, 드래그, 다중 선택이 모두 GPU에서 동작하고, 리퀴드 글래스 패널이 캔버스 위에 떠 있습니다.

GPU canvasGlassBoxmagnify
파트너가 개발 중
코드 에디터 IDE

대용량 파일 가상 스크롤, 완전한 IME 처리, 멀티 윈도우 명령 팔레트와 네이티브 메뉴.

VirtualListIMEmulti-window
파트너가 개발 중
동영상 다운로더

실시간 진행률을 보여 주는 백그라운드 작업, 완료된 파일은 Finder로 바로 드래그.

workersProgressdrag-out
다음
당신의 아이디어

프레임워크의 가능성은 열려 있습니다. 창 하나로 시작해 생각한 Mac 앱을 만드세요.

만들기 시작
오픈 소스 · 모집 중

UI 성능과 모션에
집착하나요? 함께해요.

디자이너든 개발자든, 한 프레임의 누락, 한 틱 늦은 캐럿, 어딘가 어색한 이징 곡선을 그냥 넘기지 못한다면 바로 우리가 찾는 사람입니다. zenit을 최고의 개발 경험(DX)과 성능을 갖춘, 가장 사랑받는 GPU 네이티브 UI 프레임워크로 함께 다듬어 주세요.

디자이너컴포넌트 비주얼, 모션 곡선, 인터랙션 디테일
개발자렌더링, 레이아웃, 텍스트 엔진과 성능