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

BBetter Stack
Computing/SoftwareInternet Technology

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