Zero Native: 아무도 예상치 못한 Vercel의 일렉트론 킬러

한국어العربية Deutsch English Español Français हिन्दी Bahasa Indonesia 日本語 Português Русский 中文

컴퓨터/소프트웨어창업/스타트업AI/미래기술

Transcript

00:00:00이것은 Zero Native입니다. 시스템의 웹뷰를 사용하거나

00:00:05데스크톱이나 모바일용 Electron처럼 Chromium 전체를 번들링하여 매우 작은 바이너리를 제공하고

00:00:12개발 시 즉각적인 리빌드를 지원합니다.

00:00:14하지만 이를 제대로 사용하려면 Zig를 조금 알아야 한다는 점이 자바스크립트 개발자들을 주저하게 만들까요?

00:00:18구독 버튼을 누르고 함께 알아봅시다.

00:00:20Bun 팀이 Zig에서 Rust로 넘어가고는 있지만, Zig는 여전히 매우 멋진 언어입니다.

00:00:28소유권 조사기나 수명이 없고 C를 직접 호출할 수 있어, 어떤 C 라이브러리든 glue 코드 없이

00:00:35단 한 번의 임포트로 바로 사용할 수 있죠.

00:00:37또한 자바스크립트 개발자가 배우기에 충분히 읽기 쉽습니다.

00:00:39사실 제가 Zig 프로그래밍을 기초부터 배우는 모습을 보고 싶으시다면 댓글로 알려주세요.

00:00:44꽤 재미있는 일이 될 것 같거든요.

00:00:46기본적으로 Zero Native는 프론트엔드를 렌더링하는 웹뷰를 호스팅하는 얇은 Zig 셸입니다.

00:00:51JSON 브리지를 사용하여 웹뷰의 자바스크립트가 네이티브 Zig 레이어와 통신할 수 있게 하며,

00:00:58이를 통해 OS 수준의 API에 접근할 수 있습니다.

00:01:01이게 Electrobun처럼 들린다면, 사실 어느 정도 맞습니다.

00:01:04하지만 아주 큰 차이점이 하나 있는데, 그건 영상 뒷부분에서 다루겠습니다.

00:01:07우선은 아주 간단한 데모를 살펴보죠.

00:01:10시작하려면 먼저 Zig가 설치되어 있어야 하는데, 저는 Miez를 사용했습니다.

00:01:13하지만 Brew를 써도 되고, 그 다음 Zero Native를 설치하세요.

00:01:16두 가지를 모두 마친 후 'zero-native init' 명령어를 실행해 새 프로젝트를 생성합니다.

00:01:22이것은 제 프로젝트 이름이지만, 원하는 대로 정할 수 있습니다.

00:01:25저는 React 프론트엔드 플래그를 사용할 건데, 그러면 Vite React 프로젝트가 설치됩니다.

00:01:30Svelte, Vue, Next 또는 순수 Vite도 가능합니다.

00:01:34엔터를 치면 Zero Native가 몇 가지 디렉토리를 추가합니다.

00:01:37데모 프로젝트로 들어가면 'app.zon' 파일을 볼 수 있는데, 이건 나중에 설명하겠습니다.

00:01:43아이콘 같은 정적 자산을 위한 assets 폴더와 'build.zig' 파일이 있습니다.

00:01:48이는 Zig 빌드 그래프, JS 브리지, 웹 엔진, 그리고 프론트엔드 코드가 담긴 디렉토리를 위한 것입니다.

00:01:54그 안으로 들어가 보면 자바스크립트 개발자에게 익숙한 파일들이 보입니다.

00:01:58이제 'zig build run'을 실행하면 모든 의존성을 설치하고 새 창에서 앱을 엽니다.

00:02:04참고로 기존 자바스크립트 프로젝트에 Zero Native를 설치하고 싶다면

00:02:08최소 버전인 Vite를 사용하고 프론트엔드 디렉토리의 모든 내용을 본인의 앱 코드로 바꾸는 것을 추천합니다.

00:02:15Zero Native는 프론트엔드 생명주기 전체를 관리하는 정말 멋진 개발 서버도 갖추고 있습니다.

00:02:19'zig build dev'를 실행하면 바이너리를 컴파일하고 Zero Native 개발 서버를 가동합니다.

00:02:24코드를 수정하면 네이티브 앱이 실시간으로 업데이트되는 것을 볼 수 있습니다.

00:02:28'zig build package'를 실행하여 배포용 네이티브 앱을 빌드할 수도 있습니다.

00:02:33'zig-out/package' 디렉토리를 보면 크기가 단 2.9MB로 매우 작습니다.

00:02:39어떤 사람들은 1MB 미만으로 줄이는 데 성공하기도 했죠.

00:02:43그런데 앱 아이콘, 이름 또는 웹 엔진을 바꾸고 싶다면 어떻게 할까요?

00:02:46여기서 'app.zon' 파일이 쓰입니다. 아이콘 이름, 프로젝트 이름, 실행 엔진, 창 크기 등을 변경할 수 있습니다.

00:02:55지금까지 Zero Native에 대한 아주 빠른 개요였습니다.

00:02:58시스템 트레이 아이콘, 코드 서명, iOS 및 안드로이드용 임베디드 앱 등 아직 다루지 못한 내용이 많습니다.

00:03:05사실 더 깊이 연구해봐야 할 것 같아서 다음 영상으로 이어질 수도 있겠네요.

00:03:09하지만 Zero Native가 훌륭하더라도, 시스템 네이티브 웹뷰를 사용하는 Electrobun과는 어떻게 다를까요?

00:03:17Electrobun은 메인 프로세스용 TypeScript를 작성해야 하므로 Bun 자체가 실행 환경이 됩니다.

00:03:24Zig 바이너리가 앱을 시작하긴 하지만, 코드는 Bun 웹 워커 내부에서 실행되며 C++와 Objective-C 레이어를 거치는 Bun의 FFI를 통해 네이티브 API와 통신합니다.

00:03:37반면 Zero Native는 자바스크립트나 Bun 없이 오직 Zig 바이너리만 있으면 됩니다. 단순한 C 임포트를 통해 OS 수준 API 및 C 라이브러리와 통신하죠.

00:03:50이 덕분에 Electrobun과 비교했을 때 가능한 가장 얇은 네이티브 쉘을 가질 수 있게 됩니다.

00:03:54하지만 현재로서는 Xero Native에서 원하는 결과를 모두 얻으려면 약간의 Zig 코드를 작성하거나 ZON 파일의 설정을 변경해야 할 수도 있습니다.

00:04:03또한 Xero Native는 타이틀 바 스타일을 변경하거나 커스텀 메뉴 항목을 추가할 수 있었던 Electrobun만큼 기능이 풍부하지는 않습니다.

00:04:11안타깝게도 현재 app.zon 파일에서는 그런 기능들이 아직 지원되지 않습니다.

00:04:15macOS에서 패키지를 빌드할 때 처음에 잘 안 돼서 이슈를 등록하기도 했는데, 제 실력이 부족해서였을 수도 있습니다.

00:04:22그럼에도 팀에서 기능 추가와 이슈 해결, 그리고 멋진 모바일 지원을 위해 열심히 노력하고 있을 거라 확신합니다.

00:04:29그런 기능들을 도저히 기다릴 수 없다면, 뭐, 오픈 소스니까요.

00:04:32그냥 코드를 Claude에게 주고 원하는 걸 말하면 알아서 기능을 추가해 주지 않을까요?

Key Takeaway

Zero Native는 시스템 웹뷰와 Zig 언어를 결합하여 3MB 미만의 초경량 크기와 고성능 네이티브 API 접근성을 동시에 제공하는 일렉트론의 대안입니다.

Highlights

Zero Native는 Chromium 전체를 번들링하는 대신 시스템 웹뷰를 사용하여 2.9MB 이하의 초소형 바이너리를 생성합니다.
Zig 언어로 작성된 얇은 셸이 프론트엔드를 호스팅하며 JSON 브리지를 통해 OS 수준 API와 통신합니다.
React, Svelte, Vue, Next.js 등 다양한 프론트엔드 프레임워크와 Vite를 기본적으로 지원합니다.
zig build dev 명령어를 통해 네이티브 앱의 변경 사항을 실시간으로 반영하는 라이브 리빌드 기능을 제공합니다.
Electrobun과 달리 별도의 런타임 없이 Zig 바이너리만으로 작동하여 가장 얇은 네이티브 레이어를 유지합니다.

Timeline

Zero Native의 구조와 Zig 언어의 특성

Zero Native는 웹뷰를 호스팅하는 얇은 Zig 셸 구조를 가집니다.
Zig는 소유권 조사기나 수명이 없으며 C 라이브러리를 별도의 코드 없이 직접 임포트합니다.
JSON 브리지를 구축하여 웹뷰의 자바스크립트가 네이티브 레이어와 통신하도록 설계되었습니다.

시스템에 내장된 웹뷰를 활용하므로 일렉트론처럼 Chromium 전체를 포함할 필요가 없습니다. Zig는 C 언어와의 호환성이 매우 뛰어나며 자바스크립트 개발자도 읽기 쉬운 문법을 제공합니다. 이 구조는 네이티브 OS API에 접근하면서도 바이너리 크기를 혁신적으로 줄이는 기반이 됩니다.

프로젝트 초기화 및 개발 워크플로우

zero-native init 명령어로 React, Vue, Svelte 등 Vite 기반 프로젝트를 즉시 생성합니다.
zig build dev 명령은 프론트엔드 생명주기를 관리하며 코드 수정 시 실시간으로 앱을 업데이트합니다.
패키징 완료 시 결과물 크기는 약 2.9MB이며 최적화에 따라 1MB 미만까지 축소 가능합니다.

Miez나 Brew를 통해 Zig를 설치한 후 전용 CLI로 프로젝트를 시작할 수 있습니다. build.zig 파일은 빌드 그래프와 JS 브리지, 웹 엔진 설정을 관리합니다. 기존 자바스크립트 앱을 통합할 때는 Vite를 최소 버전으로 사용하는 방식이 가장 효율적입니다.

app.zon을 통한 앱 설정 및 커스터마이징

app.zon 파일에서 앱 아이콘, 프로젝트 이름, 실행 엔진을 정의합니다.
창의 초기 크기와 같은 기본적인 UI 설정도 이 설정 파일에서 제어합니다.

설정 파일인 app.zon은 프로젝트의 정체성을 정의하는 핵심 요소입니다. 향후 시스템 트레이 아이콘이나 코드 서명, 모바일 플랫폼 임베딩 기능 등 더 확장된 네이티브 기능을 지원할 영역이기도 합니다.

Electrobun과의 차이점 및 현재의 한계

Electrobun은 Bun 런타임 위에서 작동하지만 Zero Native는 순수 Zig 바이너리만 필요합니다.
Zero Native는 현재 타이틀 바 스타일 수정이나 커스텀 메뉴 추가 기능이 부족합니다.
OS 수준 API 통신 시 Bun의 FFI 레이어를 거치지 않고 직접 C 임포트를 사용하여 오버헤드를 최소화합니다.

Electrobun은 TypeScript로 메인 프로세스를 작성할 수 있는 편의성이 있지만 Bun이라는 실행 환경에 의존합니다. Zero Native는 가장 얇은 네이티브 셸을 목표로 하므로 더 가볍지만 사용자가 직접 Zig 코드를 다뤄야 할 상황이 발생할 수 있습니다. 현재는 초기 단계로 오픈 소스 커뮤니티의 기여를 통해 기능 확장이 진행 중입니다.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video