Skip to main content

Electron을 선택하는 이유

Electron은 웹 기술(HTML, JavaScript, CSS)과 Node.js, 네이티브 코드를 결합해 macOS, Windows, Linux를 아우르는 크로스 플랫폼 데스크톱 애플리케이션을 개발할 수 있게 해주는 프레임워크다. 오픈소스이며 MIT 라이선스를 기반으로 상용 및 개인 프로젝트 모두 무료로 사용할 수 있다. 이 문서에서는 개발자와 기업이 Electron을 선택하는 이유를 설명한다.

Electron의 장점은 크게 두 가지 질문으로 나눌 수 있다. 첫째, 애플리케이션을 개발할 때 왜 웹 기술을 사용해야 하는가? 둘째, 그런 목적을 위해 왜 Electron을 프레임워크로 선택해야 하는가?

이미 웹 기술을 사용해 애플리케이션을 개발 중이라면, 아래의 왜 Electron인가? 섹션으로 바로 넘어가도 된다.

웹 기술을 선택하는 이유​

웹 기술은 HTML, CSS, JavaScript, WebAssembly를 포함한다. 이 기술들은 현대 인터넷의 얼굴이라고 할 수 있다. 웹 기술은 사용자 인터페이스를 구축하는 데 가장 적합한 선택으로 자리 잡았다. 이는 일반 소비자 애플리케이션뿐만 아니라 중요한 비즈니스 애플리케이션에서도 마찬가지다. 브라우저에서 실행해야 하는 애플리케이션은 물론, 브라우저에서 접근할 수 없는 데스크톱 애플리케이션에도 적용된다. 우리의 주장은 더 나아가 이는 단순히 여러 운영체제에서 실행해야 하는 크로스 플랫폼 애플리케이션뿐만 아니라 전반적으로 적용된다는 것이다.

예를 들어, NASA의 실제 미션 컨트롤은 웹 기술로 작성되었다. 모든 금융 기관에서 사용하는 Bloomberg Terminal은 웹 기술로 작성되었으며 Chromium 내에서 실행된다. 이 시스템은 사용자당 연간 $25,000의 비용이 든다. 세계 최대의 음식 유통업체인 맥도날드의 주문 키오스크는 Chromium으로 완전히 구축되었다. SpaceX의 Dragon 2 우주 캡슐은 인터페이스를 표시하기 위해 Chromium을 사용한다. 이 예시들은 웹 기술이 사용자 인터페이스를 구축하는 데 훌륭한 기술 스택임을 보여준다.

이제 Electron 유지보수팀이 웹 기술에 베팅하는 이유를 살펴보자.

다양성​

최신 버전의 HTML과 CSS를 사용하면 개발자와 디자이너가 자신의 아이디어를 자유롭게 표현할 수 있다. 구글 어스, 넷플릭스, 스포티파이, 지메일, 페이스북, 에어비앤비, 깃허브 등 다양한 웹 서비스가 이를 증명한다. 어떤 인터페이스가 필요하든 HTML, CSS, 자바스크립트를 활용하면 구현할 수 있다.

특정 UI 프레임워크에서 디자이너의 비전을 어떻게 실현할지 고민하지 않고도 훌륭한 제품을 만들고 싶다면, 웹 기술이 안전한 선택이다.

안정성​

웹 기술은 전 세계에서 가장 널리 사용되는 사용자 인터페이스의 기반이다. 이 기술은 그만큼 견고하게 다듬어져 왔다. 현대 컴퓨터는 CPU부터 운영체제까지 웹 기술을 효율적으로 실행할 수 있도록 최적화되어 있다. 사용자의 기기가 안드로이드 폰이든 최신 맥북이든, 제조사는 사용자가 웹사이트를 방문하거나 유튜브에서 동영상을 재생하거나 이메일을 확인할 수 있도록 보장한다. 동시에, 단 한 명의 사용자만 있더라도 앱이 안정적인 기반 위에서 작동하도록 한다.

만약 아무도 발견하지 못한 이상한 버그를 디버깅하는 대신 훌륭한 제품을 만드는 데 집중하고 싶다면, 웹은 안전한 선택이다.

상호운용성​

여러분이 상호작용해야 하는 프로바이더나 고객 데이터는 아마도 웹과의 통합 경로를 이미 고려했을 것이다. 기술 선택에 따라, YouTube 동영상을 삽입하는 데 30초가 걸릴 수도 있고, 스트리밍 및 하드웨어 가속 비디오 디코딩을 전담하는 팀을 고용해야 할 수도 있다. YouTube의 경우, 제공된 플레이어 이외의 것을 사용하는 것은 실제로 이용 약관에 위배되므로, 직접 비디오 스트리밍 디코더를 구현하기 전에 브라우저 프레임을 삽입할 가능성이 높다.

웹 기술로 앱을 구축하면 실행할 수 없는 플랫폼은 거의 없을 것이다. ATM, 자동차 인포테인먼트 시스템, 스마트 TV, 냉장고, Nintendo Switch 등 디스플레이가 있는 거의 모든 장치에는 웹 기술을 표시할 수 있는 수단이 있다. 크로스 플랫폼을 목표로 한다면 웹은 안전한 선택이다.

보편성​

웹 기술로 개발 경험이 있는 개발자를 찾는 것은 어렵지 않다. 개발자라면 Google, Stack Overflow, GitHub, 혹은 선호하는 코딩 AI를 통해 궁금증을 해결할 수 있다. 어떤 문제를 해결해야 하든, 누군가 이미 잘 해결해 놓았을 가능성이 높다. 그리고 그 해결책을 온라인에서 찾을 수 있다.

풍부한 리소스와 자료에 접근하면서 훌륭한 제품을 만드는 데 집중하고 싶다면, 웹 기술은 안전한 선택이다.

Electron을 선택하는 이유​

Electron은 크로미움(Chromium), Node.js, 그리고 커스텀 네이티브 코드 작성 기능을 하나의 프레임워크로 통합해 강력한 데스크톱 애플리케이션을 구축할 수 있게 한다. Electron을 사용하는 주된 이유는 크게 세 가지로 나눌 수 있다:

엔터프라이즈급 솔루션​

Electron은 신뢰할 수 있고 안전하며 안정적이며 성숙한 플랫폼이다. 기업이 주요 제품을 개발할 때 최적의 선택이다. 홈페이지에 일부 기업 목록을 제공하고 있지만, 채팅 앱만 보더라도 Slack, Discord, Skype가 Electron으로 개발되었다. AI 애플리케이션 분야에서는 OpenAI의 ChatGPT와 Anthropic의 Claude도 Electron을 사용한다. Visual Studio Code, Loom, Canva, Notion, Docker 등 수많은 선도적인 소프트웨어 개발사가 Electron을 선택했다.

Electron을 개발자에게 친숙하고 즐겁게 사용할 수 있는 도구로 만드는 것을 최우선 과제로 삼았다. 이것이 Electron이 오늘날처럼 인기를 끌게 된 주된 이유일 것이다. 하지만 Electron이 계속 살아남고 번성하는 이유는 유지보수 담당자들이 Electron을 최대한 안정적이고 안전하며, 고성능을 유지하고, 중요한 미션 크리티컬 사용 사례에 적합하도록 노력했기 때문이다. 수정할 수 없는 버그, 패치되지 않은 보안 취약점, 그리고 모든 종류의 장애가 최악의 시나리오인 환경에서도 사용할 수 있는 Electron을 구축하고 있다.

성숙한 기술​

현재 전 세계 대부분의 데스크톱 컴퓨터는 최소 하나 이상의 Electron 앱을 실행하고 있다. Electron은 유지보수 그룹 내에서 우수한 인재를 우선시하고, 지속 가능한 엔지니어링 관행을 유지하며, Electron에 투자하는 기업들이 프로젝트에 직접 기여할 수 있도록 적극적으로 초대함으로써 성장해 왔다. 우리는 OpenJS 재단의 프로젝트로, Linux 재단의 일부이기도 하다. Node.js, ESLint, Webpack과 같은 다른 재단 프로젝트나 Linux 커널, Kubernetes와도 리소스와 전문성을 공유한다.

이 모든 것이 개발자에게 실제로 어떤 의미를 가지는가?

  • 안정적인 릴리스 일정: Electron은 Chromium의 두 번째 주요 버전마다 새로운 주요 버전을 릴리스하며, 보통 Chromium과 같은 날에 출시한다. 이를 위해 빌드 프로세스와 도구를 구축하는 데 많은 노력이 투입되고, 매주 상당한 시간이 소요된다.
  • 독재자 없음: 때로는 특정 기술에 투자함과 동시에 한 사람이나 한 회사에 의존해야 할 수도 있다. 이는 그 사람이나 회사가 결코 문제를 일으키지 않을 것이라고 믿어야 함을 의미한다. Electron은 다양한 기업(Microsoft, Slack/Salesforce, Notion 등)이 유지보수를 맡고 있으며, 의사결정 테이블에 참여하고자 하는 더 많은 기업을 환영할 것이다.

안정성, 보안, 성능​

Electron은 애플리케이션 바이너리에 최신 버전의 Chromium, V8, Node.js를 직접 번들링하여 모든 타겟 플랫폼(macOS, Windows, Linux)에서 최상의 경험을 제공한다. 웹 콘텐츠를 최고 수준의 안정성, 보안, 성능으로 실행하고 렌더링하는 데 있어 현재 이 기술 스택이 '최고 수준'이라고 판단한다.

번들링을 하는 이유​

대부분의 현대 운영체제가 브라우저와 웹 뷰를 기본으로 제공하는데도, 왜 Chromium 웹 스택을 앱과 함께 번들링하는지 궁금할 수 있다. 번들링은 Electron 유지보수 담당자의 작업량을 크게 증가시킬 뿐만 아니라, Electron 앱의 전체 디스크 크기도 늘린다(대부분의 앱이 100MB 이상). 많은 Electron 유지보수 담당자들은 과거에 임베디드 웹 뷰를 사용하는 애플리케이션을 개발한 경험이 있으며, 이제는 디스크 크기와 유지보수 작업이 증가하는 것을 가치 있는 트레이드오프로 받아들였다.

운영체제의 내장 웹 뷰를 사용하면, 지원해야 하는 가장 오래된 운영체제 버전에 포함된 브라우저 버전에 제한된다. 이 접근 방식에는 다음과 같은 문제가 있다:

  • 안정성: 현대 웹 기술 스택은 복잡하기 때문에, 조만간 버그를 마주치게 된다. 운영체제의 웹 뷰를 사용하면, 고객에게 운영체제를 업그레이드하라고 요청하는 것 외에는 방법이 없다. 해당 기계에서 업그레이드가 불가능한 경우(예: 최신 macOS나 Windows 11로 업그레이드할 수 없는 경우), 고객에게 새 컴퓨터를 구매하라고 요청해야 한다. 운이 나쁘면, 한 팀이 당신의 스타트업 앱을 시도하려고 한다는 이유로 수천 대의 기기를 모두 업그레이드하지 않을 것이기 때문에 주요 고객을 잃게 된다. 이 상황에서는 어떤 대안도 없다. 이러한 위험은 Electron 유지보수 담당자를 고용한 회사들에게도 용납할 수 없다.

  • 보안: 앱 업데이트를 통해 안정성 버그를 수정할 수 있는 것과 마찬가지로, 고객에게 운영체제를 업그레이드하라고 요청하지 않고도 보안 수정 사항을 배포할 수 있다. 운영체제 제공자가 내장 브라우저의 업데이트를 우선시하더라도, 내장 웹 뷰를 동일한 긴급성으로 업데이트하는 것을 본 적이 없다. 웹 렌더러를 번들링하면 개발자가 직접 통제할 수 있다.

  • 성능: 간단한 HTML 문서의 경우, 내장 웹 뷰가 번들링된 프레임워크를 사용하는 앱보다 더 적은 리소스를 사용할 때가 있다. 그러나 더 큰 앱의 경우, 최신 버전의 Chromium을 사용하면 내장 웹 뷰보다 더 나은 성능을 제공할 수 있다. 내장 뷰가 다른 앱 및 운영체제와 많은 리소스를 공유할 수 있다고 생각할 수 있지만, 보안상의 이유로 앱은 서로 격리된 샌드박스에서 실행되어야 한다. 그 시점에서 문제는 OS의 웹 뷰가 Chromium보다 더 나은 성능을 발휘하는지 여부다. 많은 앱에서의 경험에 따르면, Chromium과 Node.js를 번들링하면 더 나은 성능과 경험을 제공할 수 있다.

Chromium과 Node.js를 번들링하는 이유​

Electron은 지원하는 앱이 최상의 사용자 경험을 제공할 수 있도록 하며, 그 다음으로 최고의 개발자 경험을 제공하는 것을 목표로 한다. Chromium은 현재 사용 가능한 최고의 크로스 플랫폼 렌더링 스택이다. Node.js는 Chromium의 자바스크립트 엔진인 V8을 사용하여 두 기술의 장점을 결합할 수 있다.

  • 필요할 때 네이티브 코드 사용 가능: Node.js의 성숙한 네이티브 애드온 시스템 덕분에 언제든지 네이티브 코드를 작성할 수 있다. 시스템 API에 접근할 수 없는 경우는 없다. macOS, Windows, Linux에서 통합하고 싶은 기능이 있다면, C, C++, Objective-C, Rust 또는 다른 네이티브 언어로 구현할 수 있다면 Electron에서도 가능하다. 이는 개발자에게 최대한의 제어권을 제공한다. Electron을 사용하면 웹 기술만을 선택하지 않고도 웹 기술을 활용할 수 있다.

개발자 경험​

요약하자면, 우리는 성숙하고 엔터프라이즈급이며 미션 크리티컬 애플리케이션에 적합한 Electron을 구축하는 것을 목표로 한다. 신뢰성, 안정성, 보안, 성능을 최우선으로 고려한다. 하지만 여러분이 Electron을 선택하는 이유 중 하나는 개발자 경험일 수도 있다:

  • 강력한 생태계: npm에서 찾을 수 있는 모든 것이 Electron 내에서 실행된다. Node.js 작업 방법에 관한 모든 리소스도 Electron에 적용된다. 또한 Electron 자체도 활발한 생태계를 가지고 있다. 설치 프로그램, 업데이터, 운영 체제와의 깊은 통합 등 다양한 선택지가 있다.

  • 풍부한 내장 기능: 지난 10년 동안 Electron의 핵심은 애플리케이션 구축에 필요한 다양한 네이티브 기능을 추가했다. C++과 Objective-C로 작성된 Electron은 운영 체제와의 깊은 통합을 위한 수십 가지의 쉬운 API를 제공한다. 투명하거나 특이한 형태의 위젯을 위한 고급 윈도우 커스터마이징, Apple Push Notification Network에서 푸시 알림 수신, 앱을 위한 커스텀 URL 프로토콜 처리 등이 포함된다.

  • 오픈 소스: 전체 스택이 오픈 소스이며 누구나 검토할 수 있다. 이는 앞으로 만날 수 있는 모든 기능 추가나 버그 수정의 자유를 보장한다.

  • 필요할 때 네이티브 코드 사용: Electron은 웹 기술과 C++, C, Objective-C, Rust 등의 네이티브 언어를 자유롭게 혼합하여 사용할 수 있다. SQLite, 전체 LLM, 또는 특정 네이티브 API 호출 기능이 필요하든, Electron은 이를 쉽게 만들어준다.

다른 선택을 고려해야 하는 이유​

앞서 설명한 대로 웹은 인터페이스를 구축하기에 훌륭한 플랫폼이다. 하지만 이는 모든 것을 HTML과 CSS로 만들어야 한다는 의미는 아니다. 여기 몇 가지 주목할 만한 예외 사례가 있다:

리소스가 제한된 환경과 IoT: 매우 제한된 메모리나 처리 능력을 가진 환경(예: 1MB 메모리와 100MHz 처리 속도의 저전력 ARM Cortex-M)에서는 기본 텍스트와 이미지를 출력하기 위해 저수준 언어를 사용해 디스플레이에 직접 접근해야 할 가능성이 높다. 조금 더 성능이 좋은 단일 칩 장치에서도 임베디드 UI 프레임워크를 고려할 수 있다. 대표적인 예로 스마트워치가 있다.

작은 디스크 공간: 압축된 Electron 앱은 보통 80~100MB 정도의 크기를 가진다. 디스크 공간이 매우 제한된 환경이라면 다른 방식을 선택해야 한다.

운영체제 UI 프레임워크와 라이브러리: Electron은 네이티브 코드를 작성할 수 있게 해주므로, WinUI, SwiftUI, AppKit 같은 운영체제의 UI 컴포넌트를 사용하는 것도 가능하다. 하지만 실제로 대부분의 Electron 앱은 이런 기능을 거의 사용하지 않는다. 앱의 대부분을 운영체제가 제공하는 인터페이스 컴포넌트로 구축하려면, 각 운영체제별로 완전히 네이티브 앱을 만드는 것이 더 나을 수 있다. Electron으로 불가능한 것은 아니지만, 전체적으로 더 쉬운 개발 과정이 될 것이다.

게임과 실시간 그래픽: 고성능 게임이나 복잡한 실시간 3D 그래픽이 필요한 애플리케이션을 개발한다면 Unity, Unreal Engine, DirectX/OpenGL 같은 네이티브 프레임워크가 더 나은 성능과 그래픽 하드웨어에 대한 직접적인 접근을 제공할 것이다. 웹 팬들은 Unreal Engine이 Chromium을 포함하고 있다는 점이나 WebGPU와 WebGL이 빠르게 발전하고 있으며, 여기에 언급된 게임 엔진들도 브라우저에서 실행 가능한 형식으로 게임을 출력할 수 있다는 점을 지적할 수 있다. 하지만 차세대 AAA 게임을 만들라고 한다면, 우리는 웹 기술만 사용하지 않을 것이다.

경량 웹사이트 임베딩: Electron 앱은 대부분 웹 앱 형태로 구성되며, 필요한 부분에 네이티브 코드를 추가한다. 처리 부하가 큰 Electron 애플리케이션은 UI를 HTML/CSS로 작성하고 백엔드를 Rust, C++ 같은 네이티브 언어로 구축하는 경우가 많다. 주로 네이티브 애플리케이션을 만들면서 특정 뷰에서 작은 웹사이트를 표시하려면, 운영체제가 제공하는 웹 뷰나 Ultralight 같은 것을 사용하는 것이 더 나을 수 있다.