--- title: "zenit: Zig용 GPU 네이티브 데스크톱 UI 프레임워크" description: "zenit은 Zig로 작성된 GPU 네이티브 데스크톱 UI 프레임워크입니다. Metal 렌더링, 세밀한 Signal 반응성, 완전한 Unicode 텍스트와…" url: https://ui.surf/zenit/ko language: ko alternate_en: https://ui.surf/zenit/index.md alternate_zh: https://ui.surf/zenit/zh.md alternate_es: https://ui.surf/zenit/es.md alternate_ja: https://ui.surf/zenit/ja.md alternate_fr: https://ui.surf/zenit/fr.md alternate_de: https://ui.surf/zenit/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://ui.surf/zenit/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://ui.surf/zenit/ko/docs/guide/getting-started) [Video](https://ui.surf/zenit/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://ui.surf/zenit/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://ui.surf/zenit/downloads/zenit-ui-dev.zip)[설치 가이드](https://ui.surf/zenit/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.8 KB performance.md4.1 KB pitfalls.md8.5 KB project-setup.md8.0 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.5 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://ui.surf/zenit/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://ui.surf/zenit/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://ui.surf/zenit/media/component-wall.webp?v=7e700be72a)](https://ui.surf/zenit/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://ui.surf/zenit/media/film/efficient.mp4?v=d765f1d5e1) 영상 08장에서: 호버와 스피너는 자기 서브트리만 dirty로 표시하고 나머지는 캐시에서 재생합니다. 아무것도 바뀌지 않으면 프레임 레이트를 최대한 낮춥니다. 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) ### zenit은 어떻게 만들어지나 zenit의 코드, 문서, 테스트는 대부분 AI 코딩 에이전트가 작성합니다. 아키텍처, 리뷰, 수용 검사는 사람이 맡습니다. 그래서 ‘컴파일되고 겉보기에 맞다’는 것을 근거로 삼지 않습니다. CI는 약 2,700개의 결정적 테스트, 모든 할당을 차례로 실패시키는 할당 실패 테스트, 실제 Metal 장치 테스트, 실제 창에서 픽셀을 비교하는 E2E, 모듈 경계 검사를 실행합니다. 버그나 설계 문제를 발견하면 [issue를 열어 주세요](https://github.com/version-next/zenit/issues). 구체적인 보고가 가장 큰 도움이 됩니다. macOS · Apple Silicon NSWindow + Metal. 지속적으로 검증하는 유일한 플랫폼 지원 Linux · Windows 백엔드는 자리만 잡혀 있고 아직 쓸 수 없습니다 계획 중 접근성 a11y 트리와 NSAccessibility 브리지는 구현되어 있지만, 61개 컴포넌트 중 VoiceOver 검수를 통과한 것은 0개입니다. 접근성이 필요한 제품에는 사용하지 마세요. 미지원 공개 API 1.0 이전에는 호환성을 깨는 변경 허용, 모두 MIGRATION에 기록; v1.0.0에서 동결 pre-1.0 07 / 사례 ## 실제 앱에서 확인하세요. 커뮤니티의 기존 프로젝트를 실제 창에서 그대로 녹화했습니다. [전체 사례 보기](https://ui.surf/zenit/ko/showcase) [0:18커뮤니티코드 IDE(네이티브)실제 TypeScript 언어 서버에 연결: 입력 중 자동 완성, 시그니처 도움말, 호버 문서. 자동 완성 목록, 팝오버, 에디터, 미니맵 모두 zenit이 GPU에서 그립니다.](https://ui.surf/zenit/ko/showcase#code-intelligence)[1:09커뮤니티WYSIWYG Markdown 에디터완전한 네이티브 문서 에디터: 목록, 체크리스트, 인용, 다단계 번호가 입력과 동시에 모양을 갖추고, 표, 흐름도, 코드 블록, 스크린샷이 모두 같은 문서 안에 있습니다. Electron도 WebView도 없이 모든 픽셀을 zenit이 그립니다.](https://ui.surf/zenit/ko/showcase#ui-tour) [2:22커뮤니티신스 강좌와 피아노 롤(네이티브)음색을 만들면서 신시사이저를 배웁니다. 내장 강좌가 필터를 단계별로 설명하고, 모든 노브가 필터 곡선, 엔벨로프, 스펙트럼을 실시간으로 움직입니다. 이어서 7트랙 피아노 롤로 곡을 완성합니다. 모든 음은 앱 자체의 신스가 냅니다. 클릭하면 소리와 함께 재생됩니다.](https://ui.surf/zenit/ko/showcase#timbre) 08 / ZENIT으로 만드는 중 ## 열린 프레임워크, 다음은 당신의 아이디어. 이미 파트너들이 zenit으로 무한 캔버스 디자인 툴, 코드 에디터 IDE, 동영상 다운로더 등을 만들고 있습니다. 같은 노드, 스타일, 네이티브 기능이 전혀 다른 제품들을 떠받칩니다. 파트너가 개발 중 무한 캔버스 디자인 툴 확대, 드래그, 다중 선택이 모두 GPU에서 동작하고, 리퀴드 글래스 패널이 캔버스 위에 떠 있습니다. GPU canvasGlassBoxmagnify 파트너가 개발 중 코드 에디터 IDE 대용량 파일 가상 스크롤, 완전한 IME 처리, 멀티 윈도우 명령 팔레트와 네이티브 메뉴. VirtualListIMEmulti-window 파트너가 개발 중 동영상 다운로더 실시간 진행률을 보여 주는 백그라운드 작업, 완료된 파일은 Finder로 바로 드래그. workersProgressdrag-out [다음 당신의 아이디어 프레임워크의 가능성은 열려 있습니다. 창 하나로 시작해 생각한 Mac 앱을 만드세요. 만들기 시작](https://ui.surf/zenit/ko/docs/guide/getting-started) ## 첫 번째 창에서 시작하세요. [빠른 시작 읽기](https://ui.surf/zenit/ko/docs/guide/getting-started) [개발자 매뉴얼](https://ui.surf/zenit/ko/docs)[AI 개발 Skill](https://ui.surf/zenit/ko/docs/guide/ai-skill) [GitHub](https://github.com/version-next/zenit) 오픈 소스 · 모집 중 ### UI 성능과 모션에 집착하나요? 함께해요. 디자이너든 개발자든, 한 프레임의 누락, 한 틱 늦은 캐럿, 어딘가 어색한 이징 곡선을 그냥 넘기지 못한다면 바로 우리가 찾는 사람입니다. zenit을 더 빠르고 쓰기 편하게 만드는 일을 함께해 주세요. 디자이너컴포넌트 비주얼, 모션 곡선, 인터랙션 디테일 개발자렌더링, 레이아웃, 텍스트 엔진과 성능 [GitHub에서 참여](https://github.com/version-next/zenit)[기여 가이드](https://github.com/version-next/zenit/blob/HEAD/CONTRIBUTING.md)