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의 영상을 확인해 보세요.