일렉트론 이란?

개요

자바스크립트(JavaScript)는 현재 전세계에서 가장 많은 개발자가 사용하는 프로그래밍 언어로 그 인기만큼이나 활용 영역도 확대되고 있습니다. 본 아티클에서는 자바스크립트로 데스크톱 애플리케이션을 만드는 솔루션인 일렉트론(Electron)에 대해 알아보겠습니다.

일렉트론은 노드JS(Node.js)를 기반으로 자바스크립트, HTML, CSS를 사용하여 데스크톱 애플리케이션을 만드는 오픈소스 프레임워크입니다. 2013년 아톰 쉘(Atom Shell)이라 불리는 크로스 플랫폼 애플리케이션 쉘로 시작하였으며 오픈소스화, 명칭 변경 등을 거쳐 현재 깃허브(GitHub)에 의해 개발되고 있습니다. 윈도우(Windows), 맥OS(Mac OS), 리눅스(Linux)를 모두 지원합니다.

일렉트론은 △오픈소스 웹브라우저 크로미움(Chromium), △브라우저 밖에서 자바스크립트 코드를 실행하는 런타임 환경인 노드JS, △오픈소스 자바스크립트 엔진 V8, 이 세 가지 핵심요소로 구성되어 있습니다. 프론트엔드로 크로미움을, 백엔드로 노드JS를 사용해 크로미움 렌더링 라이브러리를 노드JS와 결합합니다. 이 둘은 V8을 공유합니다. 시중의 자바스크립트 엔진 중 표준을 가장 잘 구현한 것으로 평가받는 V8은 ES6(ECMAScript 표준의 여섯 번째 버전) 기능을 내장하고 있어 컴파일러 없이 일렉트론 애플리케이션에서 사용할 수 있습니다.

활용사례

일렉트론으로 개발한 데스크톱 애플리케이션은 시중에 다양하게 출시되어 있습니다. 대표적으로 아톰 에디터(Atom Editor), VS코드(VisualStudio Code), 슬랙(Slack), 워드프레스(WordPress) 등이 있으며 완성도가 뛰어나 성능과 개발 편의성은 검증되었다고 보면 됩니다. 자세한 사항은 일렉트론 웹사이트(www.electronjs.org/apps)에서 확인할 수 있습니다.

​

에스코어가 수행한 IoT 프로젝트에서 SDK(Software Development Kit)에 포함되는 시뮬레이터를 일렉트론으로 개발했었습니다. 테스트 서버와의 통신은 메인 프로세스로 제어하고 클라이언트 사이드(Client Side)는 렌더러 프로세스(Renderer Process)를 통해 웹뷰(WebView) 위에 리액트(React)를 사용해 대시보드 카드를 그리도록 설계 및 구현했습니다. SDK에 포함하여 배포해도 함께 제공되는 편집기 애플리케이션과 이질감 없는 룩앤필과 동작을 보이고 타겟 OS 네이티브 기능을 사용할 수 있다는 장점이 인상적이었습니다. 이같은 필자의 경험으로 보건대 자바스크립트의 이벤트 주도 프로그래밍(Event-driven Programming)에 익숙하다면 일렉트론도 큰 어려움 없이 다룰 수 있을 것입니다.​

장점과 단점

일렉트론의 장점

① 낮은 진입 장벽
일렉트론의 중요한 장점은 개발자의 진입 장벽이 낮다는 것입니다. 한 마디로 자바스크립트 웹 개발자가 데스크톱 애플리케이션을 만들기 위해 새로운 기술이나 언어를 배울 필요가 없습니다. 자바스크립트, HTML, CSS 및 기타 웹 기술을 사용하므로 큰 노력 없이 시작할 수 있습니다.

② 개발 속도 향상
자바스크립트는 한 줄씩 해석하는 인터프리터 방식을 사용하기 때문에 개발자가 손쉽게 디버깅하고 최적화할 수 있어 애플리케이션을 빠르게 구현할 수 있습니다. 여기에 더해 일렉트론으로 개발된 애플리케이션은 일반적으로 웹 애플리케이션의 비즈니스 로직, 디자인 및 구조를 재사용하기 때문에 개발에 소요되는 시간과 비용이 줄어드는 효과를 제공합니다.

③ 크로스 플랫폼 지원
각기 다른 OS 플랫폼에 대해 데스크톱 애플리케이션을 지원하려면 각 OS마다 최적화 작업을 해야 하는데 OS별로 API 선언 및 제공이 달라질 수 있고 유지보수와 상호작용이 어려워질 수도 있습니다. 하지만 일렉트론을 사용하면 이러한 고민들이 사라집니다. 윈도우, 맥OS, 리눅스별로 적합한 룩앤필을 맞추며 친숙한 자바스크립트, HTML, CSS를 활용해 애플리케이션을 구성할 수 있습니다. 아울러 한번에 이들 세 가지 OS에 대한 빌드를 지원하고 설치토록 할 수 있습니다. 기존의 웹 기술을 그대로 사용하면서도 브라우저 버전별로 기능을 제약하거나 타겟 플랫폼에 따라 별도의 버전을 유지할 필요가 없게 됩니다. OS 관련 어려운 부분은 일렉트론이 처리하므로 개발자는 응용 프로그램의 핵심에 집중할 수 있습니다.

④ 풍부한 OS 네이티브 API를 가진 런타임 제공
네이티브 애플리케이션 개발자는 C나 C++과 같은 저수준 프로그래밍 언어를 사용하여 모든 로직을 작성해야 했기 때문에 개발에 오랜 시간이 소요되었습니다. 하지만 일렉트론은 윈도우, 맥OS, 리눅스에 대해 풍부한 네이티브 API를 가진 런타임을 제공해 자바스크립트로 OS의 시스템 피처들을 손쉽게 사용할 수 있습니다. 대표적인 예로 알림(Notification) 서비스를 들 수 있습니다. 상기 세 가지 OS 모두 애플리케이션이 사용자에게 알림을 보내는 것을 지원합니다. 일렉트론을 사용하면 간단하게 HTML5 Notification API를 이용하여 알림을 보내고 해당 OS의 네이티브 Notification API를 사용해 화면에 표시하도록 하면 됩니다. 그 외 최근 문서 목록에 대한 접근, 작업표시줄 버튼을 사용한 진행률 표시 등도 가능합니다.

⑤ 써드파티 지원
일렉트론은 노드JS의 모든 빌트인 모듈과 써드파티 모듈을 사용할 수 있습니다. NPM 레지스트리에 등록된 대부분의 모듈도 이용 가능하며 노드JS를 통해 파일시스템에 접근하고 네트워크 리소스를 제약 없이 사용할 수도 있습니다.

⑥ 노드 접근 권한 관리
웹뷰에서 노드JS에 대한 접근 권한을 관리할 수 있습니다. 웹뷰 페이지 내에서 Require나 Process와 같은 노드JS API를 직접 사용할 수 있으며 이를 통해 웹뷰 페이지 내부에서 로우레벨 리소스로 접근이 가능해 고급스러운 네이티브 데스크톱 애플리케이션을 만들 수 있습니다. 다만 노드JS 모듈 자체가 안전하지 않을 수도 있기 때문에 보안에 유의해야 합니다.

⑦ 빌드 툴과 인스톨러 제공
일렉트론은 빌드 툴을 제공하여 일렉트론 데스크톱 애플리케이션을 손쉽게 패키징할 수 있을 뿐 아니라 인스톨러도 순식간에 만들 수 있습니다. 또한 autoUpdater라는 구성 요소를 이용하면 애플리케이션 자동 업데이트 기능도 사용할 수 있습니다.​

일렉트론의 단점

① 큰 설치 파일 용량
일렉트론은 데스크톱 애플리케이션 UI를 렌더링 하기 위해 번들로 제공되는 크로미움을 사용합니다. 또한 구동에 필요한 여러 NPM 모듈들도 함께 패키징 되어 있습니다. 크로미움과 노드JS가 포함되기 때문에 일렉트론으로 개발한 데스크톱 애플리케이션은 기본 용량이 100MB 이상입니다. 이로 인해 초기 설치에 필요한 파일 용량이 커집니다.

② 상대적으로 느린 속도
일렉트론 데스크톱 애플리케이션은 시스템 리소스, RAM을 많이 차지합니다. 오래된 컴퓨터에서는 UI가 약간 느려질 수 있습니다. 하나의 플랫폼을 위해 특별히 개발되어 최적화된 네이티브 애플리케이션에 비해 다양한 플랫폼을 위한 일렉트론은 효율성이 다소 떨어집니다.

③ 보안은 개발자의 책임
일렉트론은 단순한 웹 브라우저가 아닙니다. 노드JS 통합으로 익숙한 웹 기술로 풍부한 데스크톱 애플리케이션을 만들 수 있는 것뿐만 아니라 더 큰 권한을 갖게 됩니다. 이를 염두에 두지 않으면 보안 위험을 초래할 수 있습니다. 일렉트론에서는 자바스크립트를 통해 파일시스템, 사용자 쉘 등에 접근이 가능하기 때문에 신뢰할 수 없는 임의의 콘텐츠를 표시하면 노드JS 모듈 자체가 안전하지 않을 수 있습니다. 예를 들어 로컬 콘텐츠가 아닌, 온라인 소스코드를 실행하고 파일 경로와 관련된 API를 사용하여 악의적으로 파일 시스템에 접근해 제어하는 상황이 발생할 수도 있습니다.

④ 크로스 플랫폼 빌드
일렉트론은 크로스 플랫폼을 지원합니다. 하지만 하나의 플랫폼에서 모든 플랫폼용 데스크톱 애플리케이션을 빌드할 수는 없습니다. 데스크톱 애플리케이션이 기본 OS에 대한 종속성을 가질 경우, 해당 플랫폼에서만 컴파일할 수 있습니다. 예를 들어 맥OS 코드 서명(Code Singing)은 맥OS에서만 가능합니다.

마치며

이제 자바스크립트는 웹브라우저를 넘어 데스크톱 애플리케이션 영역까지 적용 범위가 확대되었습니다. 자바스크립트와 노드JS를 통합하고 런타임을 개선함으로써 일렉트론은 크로스 플랫폼을 유지하면서 데스크톱 애플리케이션을 보다 쉽게 설계할 수 있도록 돕습니다.

같은 맥락에서 최근 구글의 전폭적인 지원을 받으며 급성장 중인 PWA(Progressive Web App)와 견주어 보겠습니다. PWA는 초기 모바일 플랫폼을 타겟으로 하다가 데스크톱 영역으로 확장하고 있습니다. 일렉트론과는 네이티브 데스크톱 애플리케이션의 완전성 측면에서 큰 차이를 보입니다. 일렉트론은 메모장, 오피스 등의 응용 애플리케이션과 같은 사용자 공간에 위치합니다. 노드JS 네이티브 애드온(Node.js Native AddOn) 덕분에 C++ 및 오브젝티브-C(Objective-C)를 실행할 수 있습니다. 이로 인해 일렉트론은 OS에서 제공하는 모든 기본 API의 실행이 가능합니다. 반면에 PWA는 이를 구동하는 브라우저 범위 내에서만 존재합니다. 애플리케이션에서 OS가 제공하는 API를 사용하려면 브라우저 공급업체가 해당 기능을 PWA에 먼저 제공해야 합니다. 그렇지 않으면 특정 브라우저 설치를 요구합니다. 결론적으로 일렉트론 데스크톱 어플리케이션은 PWA보다 훨씬 더 강력합니다.

일렉트론을 잘 활용하면 다양한 사용자 시나리오를 제공할 수 있고 멀티 플랫폼에서 애플리케이션을 빠르게 제작할 수 있습니다. 지금이라도 일렉트론을 시작해보시기 바랍니다. 자바스크립트의 한계를 끌어올린 새롭고 흥미로운 방식으로 애플리케이션을 개발해 나갈 수 있을 것입니다.

 

# References
[1] https://www.electronjs.org/
[2] http://cheng.guru/
[3] https://www.infoq.com/presentations/electron-app/
[4] https://felixrieseberg.com/progressive-web-apps-electron/

출처 : https://www.samsungsds.com/kr/insights/1239178_4627.html

알아두면 유익한 일렉트론 - 자바스크립트로 데스크톱 애플리케이션 개발하기