---
title: "개요 — zenit Zig UI 문서"
description: "Zig로 진정한 네이티브 macOS 데스크톱 UI를 만듭니다. zenit은 창, GPU 렌더링, 텍스트, 입력기, 접근성을 하나의 명확한 UI 모델로 묶습니…"
url: https://zenit.z.express/ko/docs
language: ko
alternate_en: https://zenit.z.express/docs.md
alternate_zh: https://zenit.z.express/zh/docs.md
alternate_es: https://zenit.z.express/es/docs.md
alternate_ja: https://zenit.z.express/ja/docs.md
alternate_fr: https://zenit.z.express/fr/docs.md
alternate_de: https://zenit.z.express/de/docs.md
project: zenit v0.1.0-alpha (Zig 0.15.2, macOS)
source: https://github.com/version-next/zenit
---

# zenit 개발 매뉴얼

Zig로 진정한 네이티브 macOS 데스크톱 UI를 만듭니다. zenit은 창, GPU 렌더링, 텍스트, 입력기, 접근성을 하나의 명확한 UI 모델로 묶습니다. 이 매뉴얼은 첫 창부터 유지보수 가능한 프로덕션 앱까지 안내합니다.

[5분 만에 시작하기](https://zenit.z.express/ko/docs/guide/getting-started)

$zig build run

**0.15.2**Zig 버전

**Metal**현재 GPU 백엔드

**2 tiers**공개 API: ui.X 및 ui.<group>.X

`src/main.zig`

```zig
const std = @import("std");
const ui = @import("ui");
const App = @import("zenit_app").App;

fn mountUi(cx: *ui.Cx, _: *ui.Scope) anyerror!*ui.Node {
    return ui.text(cx, "Hello, zenit!", .{
        .font_size = cx.tokens.font_size.xxxl,
        .color = cx.tokens.color.fg_primary,
    });
}

pub fn main() !void {
    var gpa = std.heap.GeneralPurposeAllocator(.{}){};
    defer _ = gpa.deinit();

    const app = try App.init(gpa.allocator(), .{
        .window = .{ .title = "Hello" },
    });
    defer app.deinit();
    try app.runWith(mountUi);
}
```

Claude Code나 다른 에이전트로 개발하나요? 먼저 zenit UI dev Skill을 설치하세요.

이 매뉴얼, 컴포넌트 선택표, 실제 프로젝트에서 겪은 함정을 에이전트가 필요할 때 불러오는 지침으로 묶었습니다. 그래서 작성되는 코드가 zenit 규칙을 따릅니다.

[Skill 다운로드.zip · 54 KB](https://zenit.z.express/downloads/zenit-ui-dev.zip)[설치 가이드](https://zenit.z.express/ko/docs/guide/ai-skill)

## 학습 경로

순서대로 한 번 따라가면 약 45분, zenit 앱을 혼자 개발하는 데 필요한 전체 멘탈 모델을 갖추게 됩니다.

[01첫 창 실행하기의존성을 연결하고 UI를 마운트한 뒤 빌드하고 실행합니다.10 min →](https://zenit.z.express/ko/docs/guide/getting-started)[02노드와 레이아웃box, stack, text로 화면을 구성합니다.12 min →](https://zenit.z.express/ko/docs/guide/ui-tree)[03데이터 기반 UISignal, Memo, Effect의 협업.12 min →](https://zenit.z.express/ko/docs/guide/reactivity)[04스타일 체계 만들기Token, 이름 있는 스타일, Recipe.11 min →](https://zenit.z.express/ko/docs/guide/styling)

## 사용하게 될 아키텍처

앱은 안정적인 공개 계층에만 의존하고, 플랫폼과 렌더링은 zenit이 맡습니다.

LAYERS

`zenit.attach(dep, exe)`는 실행 파일에 `ui`와 `zenit_app` 두 모듈 임포트만 추가한 뒤, 네이티브 브리지를 컴파일하고 시스템 프레임워크를 링크합니다. 내부 모듈은 빌드 그래프에 아예 없습니다. “쓰지 말자는 약속”이 아니라 “쓸 수 없는” 것입니다.

## API 모음 그 이상

이 세 가지는 런타임, 텍스트 스택, 도구 전반에 걸쳐 있으며, 각각 실행 가능한 데모와 실제 창 증거로 뒷받침됩니다.

[DATA FLOWSignal 정밀 업데이트가상 트리 재구성도, 트리 전체 diff도 없습니다. 의존성은 구독한 노드로 바로 전달됩니다.애니메이션 보기 →](https://zenit.z.express/ko/docs/guide/reactivity#signal-not-diffing)[TEXT ENGINEUnicode 17 + IMEUAX #9 양방향 텍스트, UAX #29 자소 경계, 그리고 preedit / commit 종단 간 입력 경로.적합성 데이터 보기 →](https://zenit.z.express/ko/docs/guide/text-engine)[TOOLING눈으로 확인하는 실제 창 E2E의미 기반 노드 탐색, 가상 커서, Retina PNG 캡처, drawable에서 바로 녹화한 MP4.녹화 보기 →](https://zenit.z.express/ko/docs/advanced/e2e)

## 세 가지 개발 원칙

이 원칙을 따르면 zenit이 빠르게 발전하는 동안에도 코드를 명확하게 유지할 수 있습니다.

**공개 계층에서만 임포트**

`ui.*`, `ui.<group>.*`, `zenit_app.App`를 사용하고, 내부 디렉터리에는 절대 손대지 마십시오.

**데이터가 UI를 결정하게 하기**

지속 상태는 Signal 또는 바인딩 상태에 두고, 파생 값은 Memo로, 부수 효과는 Effect로 처리합니다.

**Token 우선**

색상, 글자 크기, 간격, 모서리 반경은 테마에서 가져옵니다. 스케일을 벗어나야 할 때는 `ui.arb`로 명시합니다.