최근 수정 시각 : 2024-11-02 23:45:30

Electron(프레임워크)

NW.js에서 넘어옴

<colbgcolor=#fff,#1c1d1f><colcolor=#47848F> 일렉트론 Electron

종류	GUI 프레임워크
라이선스	MIT 라이선스
개발	GitHub OpenJS Foundation Cheng Zhao 및 Electron 기여자들
버전	32.1.2 (2024-09-20)
\| \|

1. 개요2. 개발 비화3. Electron을 사용하는 소프트웨어4. 유사 프로젝트 및 소프트웨어

4.1. NW.js4.2. ~~brackets-shell~~4.3. 기타

5. 여담

[clearfix]

1. 개요

OpenJS Foundation에서 개발, GitHub에서 유지보수하고 있는 앱 프레임워크이다. 이름의 유래는 바로 그 전자이다.[1] 후술하듯이, Electron은 원래 Atom을 위한 platform이었던 Atom shell이 발전한 것으로#, atom shell, 즉 원자 껍질이 무엇으로 이루어져 있는지 생각해 보면 적절한 이름이 붙은 셈이다.

크로뮴과 Node.js에 기초하여, HTML, CSS, JavaScript를 이용하여 웹 앱을 제작하듯 데스크톱용 앱을 제작할 수 있다. 덕분에 반대로 웹 버전을 데스크톱 버전과 거의 동일하게 만드는 것도 용이하다. Discord 웹 버전이 대표적인 예시.

개발자와 사용자로부터 찬사와 증오를 동시에 받는 프레임워크이다. 옹호하는 측에서는 데스크톱 어플리케이션 개발을 프론트엔드 개발과 거의 똑같아 쉽고 빠르게 할 수 있다는 점과 크로스플랫폼 지원을 거의 공짜에 가깝게 할 수 있다는 점을 내세우며 비판하는 쪽에서는 높은 자원 사용량을 거론한다. 높은 자원 사용량은 일렉트론이 기반하고 있는 크로뮴의 단점과 상통하는 부분인데, 일반적으로 일렉트론으로 만들어진 앱들은 각자 다른 버전의 일렉트론을 사용하기 때문에 각각의 앱들이 크로뮴 엔진을 따로 구동하는 형태로 구성되는 경우가 많고 이는 더더욱 높은 메모리 사용량으로 이어진다. 그 외에 백엔드 구동에 사용되는 Node.js 런타임의 메모리 사용량도 무시할 수 없는 수준이다.

하지만 데스크탑용으로의 개발 편의성 하나만큼은 최고 수준이다보니 결국 주류가 되었다. 이 때문에 개발자용 노트북의 RAM 요구사양이 천정부지로 올라가게 되는 제일 큰 이유중 하나가 되었다. 본인이 개발 하는 것 뿐만 아니라, 개발을 위해 필요한 프로그램들의 상당수가 Electron 기반이라서 어쩔 수 없다. [2]

Windows의 경우 7 이상에서만 사용 가능하다. 한때 Node.js 6.1.0, 크로뮴 50.0 기반으로 XP용으로 포팅된 버전이 있었으나 언제부터인가 깃허브에서 내려갔다.

현재는 윈도우 7과 8, 8.1에 대한 지원이 중단되어 22버전까지만 사용할 수 있다.

Vue.js를 이용해서 기존에 만든 웹 프로젝트를 일렉트론으로 전환하려면 이 블로그 글을 따라 일렉트론 빌더를 사용하거나 퀘이사 프레임워크를 사용하면 된다.

또, electron-vite라고 하는 Vite에 기반한 빌드 툴로 일렉트론 앱을 만들 수 있다.

2. 개발 비화

원문(삭제됨) 아카이브 번역본 아카이브

원 개발자인 Cheng Zhao는 당시 인텔 주도 하에 개발된 Node.js 기반의 크로뮴 프레임워크인 node-webkit(현 nw.js) 개발에 참여하게 된다.[3] 인턴 시절의 개발자에게는 많은 관심이 있던 프로젝트였기에 많은 개선과 기여, 그리고 홍보까지 열심히 하였으나, 조직에서 인정받지 못하였다.

때마침 GitHub에서 유사한 프로젝트 개발자를 채용해서 여기에 지원하였고, 이 node-webkit를 포크 및 재구성하여 완전히 독립된 하나의 프레임워크로 탄생시켰다. 이게 바로 Atom Shell의 시작이다.

이후 2016년 5월 11일 에디터 Atom과 함께 Atom Shell도 오픈소스화되면서 Electron으로 이름이 변경되었으며 2019년 12월 이후로는 관리 주체가 GitHub에서 OpenJS Foundation으로 변경되었다.#

3. Electron을 사용하는 소프트웨어

4. 유사 프로젝트 및 소프트웨어

4.1. NW.js

nw.js
당시 전신이었던 프로젝트. Electron 메인 개발자도 참여한 이력이 있었고, ~~한국을 제외하고~~Electron 이전에 웹 기술을 데스크탑 앱으로 이식 가능하기에 주목받았던 프로젝트였으며, 초기 시절 프로젝트명은 node-webkit 였다. 인텔 주도로 시작되었으나 현재는 독립되었다. Electron과는 차별화된 특징으로, Javascript 및 node.js 위주의 개발자가 아닌 주로 웹 게임 등의 다른 분야 개발자 기준으로 접근성이 좋은 편이어서[8] 주로 node.js 가 터치하지 않는 프론트엔드 위주의 앱으로 쓰이고 있다. 가장 대표적인 사용 케이스로 RPG Maker MV 의 웹 게임 프론트엔드가 이걸 기반으로 되어 있으며, 그밖에 환경에서도 웹 게임을 앱으로 이식할 때 두루두루 쓰이고 있다. 한때 몇몇 랜섬웨어에서 프론트엔드 앱을 이걸로 사용하는 바람에 몇몇 백신에서 걸러지기도 하여 랜섬웨어 프레임워크로 오명을 받기도 하였다. 최근 인텔 사의 독립 이후, Electron 개발자인 Chang Zhao가 과거 인텔 인턴 시절에 기여하고 현재에도 기여하고 있어서 기여자 목록에 메인 개발자 다음으로 포함되었다.

Electron을 사용하는 국내 개발자 커뮤니티 중 일각에서는 종료된 라이브러리, 사장된 라이브러리라고 주장하는데, 지금도 Electron 다음으로 업데이트와 커뮤니티가 많이 활성화되고 있는 프로젝트이며, Node.js 위주가 아닌 단순 프론트엔드 및 웹 게임 등의 개발자 층에서 Electron 대비 쉬운 접근성을 이유로 많이 사용하고 있는 프로젝트이다. ~~한국에서만 사장된 프로젝트.~~

4.2. brackets-shell

brackets-shell

Adobe 주도의 Brackets 프로그램 백엔드 프레임워크였으나 2021년 9월 앱과 같이 종료되었다.

파일:상세 내용 아이콘.svg

자세한 내용은 Brackets 문서 참고하십시오.

4.3. 기타

~~AppJS~~: node-webkit 초기 시절 같이 태어난 프로젝트였으나 개인 프로젝트란 특성의 한계로 node-webkit 사용을 권장하면서 프로젝트가 중단되었다.
Ultralight(구 Awesomium): 크로뮴 웹 브라우저를 앱 내에 쉽게 탑재하도록 해주는 상용 개발 도구이며 다양한 프로그램 API를 사용하는 앱 프레임워크. NC소프트 등의 게임사에서 게임 내 브라우저 용도로 활용 중이며, 구 Awesomium 시절 유료로만 운영했으나 현재 인디 개발사 및 개인에게 무료 제공.
Sciter: 위 nw.js와 같이 역사가 꽤 된 네이티브 방식의 독점 형식 상용 개발 도구. 삼성 등의 하드웨어 업체의 관리 프로그램 및 어베스트사 등의 백신 프로그램에서 사용하고 있다. 아래 프로젝트를 제외하고 네이티브 바인딩이 직접 지원되는 제품인 데다가 브라우저 엔진까지 자체적으로 개발하여 제공하는 유일한 상용 제품이다.
Tauri
Wails

5. 여담

상기 모 프로젝트였던 nw.js가 악성 코드로 오해받은 역사가 Electron 에서도 반복되었다. 마이크로소프트 디펜더가 Electron 기반 앱을 악성 코드로 오진하는 사태(영문 기사)이 있었으며 마이크로소프트의 발빠른 업데이트로 소동은 금방 일단락되었다. 한국어 요약 글

[1] 참고로 전자의 영문 이름 electron은 고전 그리스어로 호박을 뜻하는 'ἤλεκτρον'로부터 파생되었다. 해당 문서에서 그 기원을 살필 수 있다.[2] 이 외에도 메모리 요구사양을 천정부지로 올리는 또다른 요소들은 가상머신,WSL,Docker 등이 있다.[3] nw.js 와 Electron 모두 중국인 손에 태어난 프로젝트이다.[4] 처음에 node-webkit 로 제작하였으나 얼마 안 돼 Electron 으로 전환.[5] PC 클라이언트 한정. 게임 엔진 자체는 PixiJS로 만들었다.[6] 2017년 후반부 이후 버전만 해당한다. 그 이전에는 MFC로 제작되었다.[7] 한국인 개발자가 만든 마크다운 편집기. 처음에 node-webkit 로 제작하였으나 얼마 안 돼 Electron 으로 전환.[8] 기술적으로 설명하자면, Electron 은 백엔드와 프론트엔드 레이어가 분리되어 있으나, nw.js 는 분리하지 않았다.

분류