Electrobun: Node도 Chromium도 없는, 오직 Bun만을 위한 강력한 성능

BBetter Stack
컴퓨터/소프트웨어AI/미래기술

Transcript

00:00:00이것은 일렉트로번(ElectroBun)입니다. 훨씬 더 작은 크기의 결과물을 만드는
00:00:05크로스 플랫폼 데스크톱 앱 프레임워크죠. 일렉트론보다 가볍고, 타우리(Tauri)처럼 러스트를 쓸 필요도 없으며
00:00:11번(Bun)의 강력한 성능과 자체 C++ 래퍼를 통해 네이티브 성능을 제공합니다. Node.js나 V8도 사용하지 않죠.
00:00:18하지만 모든 운영체제에서 크로미움(Chromium) 대신 시스템의 네이티브 웹뷰를 사용한다는 점이
00:00:22진정한 크로스 플랫폼 앱을 만드는 데 걸림돌이 되지는 않을까요?
00:00:27구독 버튼을 누르시고, 본격적으로 알아보겠습니다.
00:00:32작년에 번(Bun) 팀이 풀스택 실행 파일 제작 기능을 발표했을 때부터,
00:00:36제대로 된 일렉트론의 대안이 나오길 정말 기대해 왔습니다.
00:00:40하지만 영상 뒷부분에서 다루겠지만, 앤스로픽(Anthropic)에 인수된 이후로
00:00:44번 팀이 그 방향으로 계속 나아갈 가능성은 낮아 보입니다.
00:00:49그래서 Blackboard의 Yoav가 일렉트로번을 만들었습니다. 번 기반의 일렉트론에 가장 근접한 도구죠.
00:00:55그는 이미 하이브리드 브라우저, 터미널, 코드 에디터가 합쳐진
00:01:01Colab이나 텍스트 음성 변환 앱을 만들었고, WebGPU를 통해 일렉트로번에서 둠(Doom)을 구동하기도 했습니다.
00:01:07이제 간단한 프로젝트를 통해 사용법을 살펴보겠습니다.
00:01:12일렉트로번을 처음 초기화하면 앱의 작동 방식을 파악할 수 있는
00:01:17다양한 템플릿을 사용할 수 있습니다. 기본적인 메모 앱이나 멀티 윈도우 앱,
00:01:22브라우저에서 문서를 열어주는 트레이 앱 같은 것들이죠.
00:01:26일렉트로번은 웹 기술을 지원하므로 Svelte, Vue, Solid.js는 물론
00:01:31Angular까지 여러분이 원하는 어떤 JS 프레임워크든 사용할 수 있습니다.
00:01:35저는 여러분의 이해를 돕기 위해 아주 기초적인 프로젝트부터 진행해 보겠습니다.
00:01:40여기 기본적인 Bun React 앱이 있습니다. 일렉트로번을 이용해 네이티브 맥 앱으로 바꿔볼 겁니다.
00:01:45이미 일렉트로번을 설치해 두었고요,
00:01:49개발용 빌드를 시작하는 스크립트와
00:01:53앱을 빌드하는 스크립트도 미리 준비해 놓았습니다.
00:01:55사실 여기 있는 type module은 사용하지 않을 거라 필요 없겠네요.
00:01:59프로젝트 루트에 일렉트로번 설정 파일을 만들었는데요,
00:02:03현재 앱 이름과 식별자, 그리고 Bun 빌드 진입점이 포함되어 있습니다.
00:02:09아직 진입점을 만들지 않았으니 지금 바로 만들어 보겠습니다.
00:02:12source 디렉토리 안에 Bun 폴더를 만들고 index.ts 파일을 생성합니다.
00:02:17여기서 브라우저 창 클래스를 인스턴스화하고 타이틀 바에 표시될 텍스트와
00:02:22앱이 처음 로드될 때 이동할 URL을
00:02:25인자로 전달합니다.
00:02:28이제 Bun start를 실행하면 올바른 타이틀과 함께 앱이 로드되어야 하는데,
00:02:32아무것도 뜨지 않네요. 왜냐하면 Bun이 앱을 빌드할 때
00:02:36타입스크립트를 자바스크립트로 변환하고 트리 쉐이킹 등을 거치면서
00:02:41파일들을 다른 디렉토리에 저장하는데, 진입점에서 이를 제대로 참조하지 않았기 때문입니다.
00:02:46이 부분의 처리가 미흡했네요.
00:02:48이를 해결하려면 일렉트로번 설정 파일을 열고 먼저 새로운 views
00:02:53객체를 추가해야 합니다. 앱에서 접근할 새로운 뷰들을 정의하는 곳이죠.
00:02:57뷰의 이름을 main으로 지정하고 진입점을 index.html로 설정합니다.
00:03:02이 파일은 프런트엔드 JS를 참조하고 있으며,
00:03:06해당 JS는 앱 실행에 필요한 모든 자바스크립트와 CSS를 담고 있습니다.
00:03:09빌드 설정에 대한 자세한 내용은 일렉트로번 문서에서 확인할 수 있습니다.
00:03:13이제 소스 디렉토리에 main 뷰가 있으므로,
00:03:17index.ts 파일을 열어 views와 main 디렉토리를 사용하도록 URL을 업데이트합니다.
00:03:23그러면 이제 앱을 빌드했을 때 모든 것이 예상대로 작동하는 것을 볼 수 있습니다.
00:03:28타이틀 바를 제거하는 속성을 추가하면 훨씬 앱다운 느낌을 줄 수 있습니다.
00:03:34또한 application menu 객체를 사용해 앱만의 커스텀 메뉴를 만들 수도 있죠.
00:03:39준비가 되면 프로덕션용으로 빌드합니다. 17MB 크기의 DMG 파일과
00:03:4465MB 크기의 앱이 생성됩니다. 헬로 월드 일렉트론 앱과 비교해 보면,
00:03:50일렉트론은 271MB로 일렉트로번 앱보다 4배 이상 큽니다.
00:03:56일렉트로번은 OS 네이티브 웹뷰를 사용합니다. 맥은 WebKit,
00:04:01윈도우는 Edge WebView 2, 리눅스는 WebKit GTK를 사용하죠. 따라서
00:04:08크로스 플랫폼 앱 개발 시 특정 웹뷰에서 지원하지 않는 기능을 고려해야 합니다.
00:04:11일렉트로번은 플랫폼 간 일관성을 위해 크로미움 임베디드 프레임워크(CEF)도 지원하지만,
00:04:16이 경우 전체 크로미움 브라우저가 포함되므로 크기와 성능에 영향이 생깁니다.
00:04:22사실상 Bun을 사용한다는 점만 빼면 일렉트론과 거의 같아지는 셈이죠.
00:04:27그 외에도 아직 언급하지 않은 멋진 기능들이 많습니다.
00:04:32각 웹뷰를 독립된 프로세스에서 실행하는 구조나,
00:04:38원활한 통신을 위한 Typed RPC, ZSTD 압축, 빠른 다운로드를 위한
00:04:44자가 추출 래퍼, 코드 서명 등 수많은 기능이 있습니다.
00:04:48하지만 아쉽게도 데모 앱을 빌드하면서 몇 가지 문제점을 발견했습니다.
00:04:54특히 일렉트로번 진입 파일 관련 문서가 부족했고,
00:04:58페이지를 새로고침할 때 화면이 깜빡이거나 인스펙터 도구가 레이아웃을 깨뜨리기도 했습니다.
00:05:03물론 일렉트로번은 이제 막 시작된 프로젝트입니다. 첫 커밋이 올해 2월이니까요.
00:05:09이런 문제들은 앞으로 해결될 것이라고 믿습니다.
00:05:13꼭 해결되길 바라는 이유가 하나 더 있는데, 번 팀이
00:05:19앤스로픽에 인수된 이후로 일렉트론의 대안을 만드는 쪽보다는
00:05:25CLI와 실행 파일 개선에 더 집중하고 있기 때문입니다. 따라서
00:05:31일렉트로번이 번 기반의 크로스 플랫폼 데스크톱 도구를 가질 수 있는 최선의 방법으로 보입니다.
00:05:37번과 앤스로픽의 인수 소식이나 번 팀이 나아가는
00:05:42새로운 방향에 대해 더 알고 싶으시다면, 관련 내용을 다룬
00:05:48James의 영상을 확인해 보세요.

Key Takeaway

일렉트로번은 Bun의 강력한 성능과 시스템 네이티브 웹뷰를 결합하여 일렉트론보다 가볍고 효율적인 차세대 데스크톱 앱 개발 환경을 제시합니다.

Highlights

일렉트로번(ElectroBun)은 Bun 런타임 기반의 초경량 크로스 플랫폼 데스크톱 프레임워크입니다.

일렉트론 대비 약 4배 이상 작은 앱 용량과 시스템 네이티브 웹뷰를 통한 고성능을 제공합니다.

Svelte, Vue, React, Angular 등 모든 주요 자바스크립트 프레임워크를 제한 없이 지원합니다.

OS별 네이티브 웹뷰(WebKit, Edge 등)를 기본으로 하되, 필요시 Chromium(CEF) 선택이 가능합니다.

Bun 팀의 앤스로픽(Anthropic) 인수 이후, 일렉트론의 실질적인 대안으로 급부상하고 있습니다.

Typed RPC, ZSTD 압축, 독립 프로세스 실행 등 현대적인 데스크톱 앱 기능을 갖추고 있습니다.

Timeline

일렉트로번 소개 및 주요 특징

일렉트로번은 Node.js나 Chromium을 사용하지 않고 Bun 런타임과 자체 C++ 래퍼를 통해 네이티브 성능을 구현하는 프레임워크입니다. 일렉트론보다 가볍고 타우리와 달리 러스트 학습이 필요 없다는 점이 큰 장점으로 꼽힙니다. 개발자 Yoav는 이미 이 도구를 사용하여 WebGPU 기반의 둠(Doom) 구동이나 코드 에디터 등 고성능 앱을 제작하여 가능성을 증명했습니다. 시스템 네이티브 웹뷰 사용에 따른 크로스 플랫폼 호환성 논의와 함께 번 팀의 행보에 대한 기대감을 전달합니다. 이는 무거운 일렉트론 앱 생태계에 새로운 대안이 등장했음을 알리는 중요한 도입부입니다.

프로젝트 초기화 및 프레임워크 호환성

일렉트로번은 초기화 시 메모 앱, 멀티 윈도우, 트레이 앱 등 다양한 템플릿을 제공하여 개발자의 진입 장벽을 낮춥니다. 웹 표준 기술을 완벽히 지원하기 때문에 React, Vue, Svelte는 물론 Angular까지 기존에 사용하던 모든 JS 프레임워크를 그대로 활용할 수 있습니다. 영상에서는 실제 Bun React 앱을 네이티브 맥 앱으로 변환하는 과정을 시연하며 실무 적용 가능성을 보여줍니다. 개발용 빌드 스크립트와 설정 파일 구성을 통해 일렉트로번이 얼마나 직관적인 구조를 가졌는지 설명합니다. 개발자는 기존 웹 개발 역량을 바탕으로 손쉽게 데스크톱 앱 개발에 도전할 수 있습니다.

실전 앱 빌드 및 설정 과정

프로젝트 루트의 설정 파일에는 앱 이름, 식별자, Bun 빌드 진입점 등의 핵심 정보가 포함됩니다. 영상에서는 타입스크립트가 자바스크립트로 변환되는 과정에서 발생하는 진입점 참조 오류와 그 해결 방법을 상세히 다룹니다. 특히 views 객체를 정의하여 index.html과 프런트엔드 자산을 연결하는 구조적인 설정 방식을 명확히 설명합니다. URL 업데이트를 통해 빌드 후 앱이 정상 작동하는 모습을 보여주며 타이틀 바 제거와 같은 네이티브 UI 커스텀 방법도 소개합니다. 이러한 구체적인 트러블슈팅 과정은 초기 사용자가 겪을 수 있는 시행착오를 줄여주는 유익한 정보를 제공합니다.

일렉트론과의 성능 비교 및 OS별 웹뷰

일렉트로번으로 빌드된 결과물은 65MB 수준으로, 271MB에 달하는 일렉트론 헬로 월드 앱보다 4배 이상 가볍습니다. 성능 최적화를 위해 맥은 WebKit, 윈도우는 Edge WebView 2를 사용하는 등 각 운영체제의 네이티브 엔진을 활용하는 것이 특징입니다. 플랫폼 간 완벽한 일관성이 필요한 경우 Chromium Embedded Framework(CEF)를 선택할 수 있는 옵션도 제공합니다. 또한 Typed RPC를 통한 원활한 통신과 ZSTD 압축 기술 등 고도화된 기능들이 앱의 완성도를 높여줍니다. 이는 개발자가 앱의 크기와 호환성 사이에서 전략적인 선택을 할 수 있음을 시사합니다.

현재의 한계점과 향후 전망

올해 2월에 시작된 초기 프로젝트인 만큼 문서 부족이나 화면 깜빡임, 인스펙터 레이아웃 오류 등의 기술적 과제가 남아있음을 솔직하게 밝힙니다. 하지만 Bun 팀이 앤스로픽에 인수된 후 CLI 개선에 집중하고 있어, 일렉트로번이 번 기반 데스크톱 도구의 중심이 될 가능성이 매우 높습니다. 개발자 커뮤니티의 활발한 참여를 통해 현재 발견된 문제들이 빠르게 해결될 것으로 기대됩니다. 마지막으로 번 팀의 새로운 방향성과 관련된 추가 정보를 안내하며 분석을 마무리합니다. 일렉트로번은 단순한 도구를 넘어 Bun 생태계의 데스크톱 확장을 이끄는 핵심 프로젝트로 평가받고 있습니다.

Community Posts

View all posts