--- title: "zenit — Zig용 GPU 네이티브 데스크톱 UI 프레임워크" description: "zenit은 Zig로 작성된 GPU 네이티브 데스크톱 UI 프레임워크입니다. Metal 렌더링, 세밀한 Signal 반응성, 완전한 Unicode 텍스트와…" url: https://zenit.z.express/ko language: ko alternate_en: https://zenit.z.express/index.md alternate_zh: https://zenit.z.express/zh.md alternate_es: https://zenit.z.express/es.md alternate_ja: https://zenit.z.express/ja.md alternate_fr: https://zenit.z.express/fr.md alternate_de: https://zenit.z.express/de.md project: zenit v0.1.0-alpha (Zig 0.15.2, macOS) source: https://github.com/version-next/zenit --- [v0.1.0-alpha정식 릴리스 전](https://zenit.z.express/ko#status)macOS ·[Zig 0.15.2](https://ziglang.org) AI Skill에이전트에게 zenit 가르치기 # 웹처럼 개발하고, GPU로 네이티브 렌더링 고성능 Zig GPU UI 프레임워크입니다. Signal, 스타일 레시피, Flex / Grid, DevTools는 웹처럼 쓰고, Metal 렌더링과 완전한 텍스트·IME 처리로 네이티브 앱으로 동작합니다. ReleaseSmall로 빌드한 Hello Button.app은 1.7 MB에 불과합니다. [5분 만에 시작](https://zenit.z.express/ko/docs/guide/getting-started) [Video](https://zenit.z.express/media/film/zenit-film-4k.mp4?v=74579aad19) 01 / SIGNALS가상 DOM이 아닌 Signal.0:00 / 1:53 HELLO, ZENIT ## 파일 하나, 네이티브 창 하나. examples/hello\_button/main.zig의 전체 소스와, 이를 컴파일한 .app입니다. 창 화면은 E2E harness가 실제 창에서 버튼을 세 번 클릭하며 녹화했습니다. main.zigexamples/hello\_button/ ```zig 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 [Video](https://zenit.z.express/media/hello-button.mp4?v=b4d2b8f8a0) 창 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 코드를 쓸 때마다 자동으로 불러옵니다. [Skill 다운로드.zip · 54 KB](https://zenit.z.express/downloads/zenit-ui-dev.zip)[설치 가이드](https://zenit.z.express/ko/docs/guide/ai-skill) 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 압축 해제 위치 ```zig ~/.claude/skills/zenit-ui-dev/ ``` [Pencilpen.dev](https://www.pen.dev/) 추천 워크플로 · PENCIL + SKILL Pencil과 함께: 디자인하고 AI로 구현 [Pencil](https://www.pen.dev/)로 화면을 그리고, 이 Skill로 에이전트가 구현하게 하는 방식을 추천합니다. .pen 파일의 Flex 레이아웃, 간격, 모서리 반경, 글자 크기, lucide 아이콘은 zenit의 모델과 매우 가깝습니다. Skill에는 필드 매핑표와 design\_diff 비교 도구가 들어 있어 에이전트가 감이 아닌 수치로 옮깁니다. [Pencil 알아보기](https://www.pen.dev/) [디자인→코드 루프](https://zenit.z.express/ko/docs/guide/ai-skill#pencil) 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로. [전체 컴포넌트 보기](https://zenit.z.express/ko/components) [![zenit components: buttons, inputs, select, switches, checkboxes, radios, slider, progress, tabs, calendar, steps, table, alerts, tags, badges, chips, timeline, tree, accordion, rate](https://zenit.z.express/media/component-wall.webp?v=7e700be72a)](https://zenit.z.express/ko/components) 목업이 아닙니다. 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. 트리플 버퍼 인스턴스와 frame sync로 GPU와 CPU 레이아웃을 병렬 처리 서브트리 캐시가 있는 디스플레이 리스트 — 정적 서브트리는 레이아웃과 렌더링을 건너뜀 `layout_isolation` 경계가 dirty 연쇄를 차단 지연 스케줄러가 무거운 작업을 여러 프레임에 나눔 [Video](https://zenit.z.express/media/film/efficient.mp4?v=d765f1d5e1) 영상 08장에서: 호버와 스피너는 자기 서브트리만 dirty로 표시하고 나머지는 캐시에서 재생합니다. 아무것도 바뀌지 않으면 run loop는 잠들어 0프레임, GPU 작업 0. M4 Max · 5K · 60 Hz에서 측정. 05 / QUICK START ## 세 단계로 첫 번째 창까지. 템플릿 받기01 ```zig 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 ```zig zenit.attach(zenit_dep, exe); ``` 한 번의 호출로 ui, zenit\_app, 네이티브 브리지와 프레임워크를 연결합니다. 빌드 후 실행03 ```zig zig build run zig build app ``` 바로 실행하거나 더블클릭으로 여는 macOS .app을 만듭니다. 06 / 현황 ## 솔직히 말해, 아직 준비되지 않았습니다. 0.1.0은 첫 공개 릴리스이지만, 1.0 이전에는 API가 여전히 바뀔 수 있습니다. 정확한 버전으로 고정하세요. 호환성을 깨는 변경은 모두 MIGRATION에 기록됩니다. [MIGRATION](https://github.com/version-next/zenit/blob/HEAD/docs/MIGRATION.md) [version-next/zenit](https://github.com/version-next/zenit) macOS · Apple Silicon NSWindow + Metal — 지속적으로 검증하는 유일한 플랫폼 지원 Linux · Windows 백엔드는 자리만 잡혀 있고 아직 쓸 수 없습니다 계획 중 접근성 a11y 트리와 NSAccessibility 브리지는 구현되어 있지만, 61개 컴포넌트 중 VoiceOver 검수를 통과한 것은 0개입니다. 접근성이 필요한 제품에는 사용하지 마세요. 미지원 공개 API 1.0 이전에는 호환성을 깨는 변경 허용, 모두 MIGRATION에 기록; v1.0.0에서 동결 pre-1.0 07 / 사례 ## 실제 앱에서 확인하세요. 커뮤니티의 기존 프로젝트를 실제 창에서 그대로 녹화했습니다. [전체 사례 보기](https://zenit.z.express/ko/showcase) [0:18커뮤니티코드 IDE(네이티브)실제 TypeScript 언어 서버에 연결: 입력 중 자동 완성, 시그니처 도움말, 호버 문서. 자동 완성 목록, 팝오버, 에디터, 미니맵 모두 zenit이 GPU에서 그립니다.](https://zenit.z.express/ko/showcase#code-intelligence)[1:09커뮤니티WYSIWYG Markdown 에디터완전한 네이티브 문서 에디터: 목록, 체크리스트, 인용, 다단계 번호가 입력과 동시에 모양을 갖추고, 표, 흐름도, 코드 블록, 스크린샷이 모두 같은 문서 안에 있습니다. Electron도 WebView도 없이 모든 픽셀을 zenit이 그립니다.](https://zenit.z.express/ko/showcase#ui-tour) [2:22커뮤니티신스 강좌와 피아노 롤(네이티브)음색을 만들면서 신시사이저를 배웁니다. 내장 강좌가 필터를 단계별로 설명하고, 모든 노브가 필터 곡선, 엔벨로프, 스펙트럼을 실시간으로 움직입니다. 이어서 7트랙 피아노 롤로 곡을 완성합니다. 모든 음은 앱 자체의 신스가 냅니다. 클릭하면 소리와 함께 재생됩니다.](https://zenit.z.express/ko/showcase#timbre) 08 / ZENIT으로 만드는 중 ## 열린 프레임워크, 다음은 당신의 아이디어. 이미 파트너들이 zenit으로 무한 캔버스 디자인 툴, 코드 에디터 IDE, 동영상 다운로더 등을 만들고 있습니다. 같은 노드, 스타일, 네이티브 기능이 전혀 다른 제품들을 떠받칩니다. 파트너가 개발 중 무한 캔버스 디자인 툴 확대, 드래그, 다중 선택이 모두 GPU에서 동작하고, 리퀴드 글래스 패널이 캔버스 위에 떠 있습니다. GPU canvasGlassBoxmagnify 파트너가 개발 중 코드 에디터 IDE 대용량 파일 가상 스크롤, 완전한 IME 처리, 멀티 윈도우 명령 팔레트와 네이티브 메뉴. VirtualListIMEmulti-window 파트너가 개발 중 동영상 다운로더 실시간 진행률을 보여 주는 백그라운드 작업, 완료된 파일은 Finder로 바로 드래그. workersProgressdrag-out [다음 당신의 아이디어 프레임워크의 가능성은 열려 있습니다. 창 하나로 시작해 생각한 Mac 앱을 만드세요. 만들기 시작](https://zenit.z.express/ko/docs/guide/getting-started) ## 첫 번째 창에서 시작하세요. [빠른 시작 읽기](https://zenit.z.express/ko/docs/guide/getting-started) [개발자 매뉴얼](https://zenit.z.express/ko/docs)[AI 개발 Skill](https://zenit.z.express/ko/docs/guide/ai-skill) [GitHub](https://github.com/version-next/zenit) 오픈 소스 · 모집 중 ### UI 성능과 모션에 집착하나요? 함께해요. 디자이너든 개발자든, 한 프레임의 누락, 한 틱 늦은 캐럿, 어딘가 어색한 이징 곡선을 그냥 넘기지 못한다면 바로 우리가 찾는 사람입니다. zenit을 최고의 개발 경험(DX)과 성능을 갖춘, 가장 사랑받는 GPU 네이티브 UI 프레임워크로 함께 다듬어 주세요. 디자이너컴포넌트 비주얼, 모션 곡선, 인터랙션 디테일 개발자렌더링, 레이아웃, 텍스트 엔진과 성능 [GitHub에서 참여](https://github.com/version-next/zenit)[기여 가이드](https://github.com/version-next/zenit/blob/HEAD/CONTRIBUTING.md)