lottie
Seungjun's blog
blog
Electron

일렉트론이란?

  자바스크립트로 데스크톱 애플리케이션을 만드는 솔루션입니다.

 일렉트론은 Node.js를 기반으로 자바스크립트, HTML, CSS를 사용하여 데스크톱 애플리케이션을 만드는 오픈소스 프레임워크입니다. 윈도우(Windows), 맥OS(Mac OS), 리눅스(Linux)를 모두 지원합니다.


구성

 일렉트론은 아래의 세가지로 구성되어 있습니다.


1.오픈소스 웹브라우저 크로미움(Chromium)

2.브라우저 밖에서 자바스크립트 코드를 실행하는 런타임 환경인 노드JS 3.오픈소스 자바스크립트 엔진 V8


 프론트엔드로 크로미움을, 백엔드로 노드JS를 사용해 크로미움 렌더링 라이브러리를 노드와 결합합니다. 이 둘은 V8을 공유합니다. 시중의 자바스크립트 엔진 중 표준을 가장 잘 구현한 것으로 평가받는 V8은 ES6 기능을 내장하고 있어 컴파일러 없이 일렉트론 애플리케이션에서 사용할 수 있습니다.


일렉트론의 장점

(1) 낮은 진입 장벽

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


(2) 개발 속도 향상

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


(3) 크로스 플랫폼 지원

  윈도우, 맥OS, 리눅스별로 적합한 룩앤필을 맞추며 친숙한 자바스크립트, HTML, CSS를 활용해 애플리케이션을 구성할 수 있습니다. 또한 한번에 세 가지 OS에 대한 빌드를 지원하고 설치토록 할 수 있습니다. 기존의 웹 기술을 그대로 사용하면서도 브라우저 버전별로 기능을 제약하거나 타겟 플랫폼에 따라 별도의 버전을 유지할 필요가 없게 됩니다. OS 관련 어려운 부분은 일렉트론이 처리하므로 개발자는 응용 프로그램의 핵심에 집중할 수 있습니다. 


(4) 풍부한 OS 네이티브 API를 가진 런타임 제공

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


(5) 써드파티 지원

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


(6) 노드 접근 권한 관리

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


(7) 빌드 툴과 인스톨러 제공

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


일렉트론의 단점

(1) 큰 설치 파일 용량

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


(2) 느린 속도

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


(3) 보안은 개발자의 책임

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


(4) 크로스 플랫폼 빌드

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


마치며

  일렉트론과는 네이티브 데스크톱 애플리케이션의 완전성 측면에서 큰 차이를 보입니다. 일렉트론은 메모장, 오피스 등의 응용 애플리케이션과 같은 사용자 공간에 위치합니다. 

 Node.js Native AddOn 덕분에 C++ 및 오브젝티브-C(Objective-C)를 실행할 수 있습니다. 이로 인해 일렉트론은 OS에서 제공하는 모든 기본 API의 실행이 가능합니다. 

 반면에 PWA는 이를 구동하는 브라우저 범위 내에서만 존재합니다. 애플리케이션에서 OS가 제공하는 API를 사용하려면 브라우저 공급업체가 해당 기능을 PWA에 먼저 제공해야 합니다. 그렇지 않으면 특정 브라우저 설치를 요구합니다.