인사이트리포트

개요

자바스크립트(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)에 익숙하다면 일렉트론도 큰 어려움 없이 다룰 수 있을 것이다.

장점과 단점

일렉트론의 장점

1) 낮은 진입 장벽

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

2) 개발 속도 향상

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

3) 크로스 플랫폼 지원

각기 다른 OS 플랫폼에 대해 데스크톱 애플리케이션을 지원하려면 각 OS마다 최적화 작업을 해야 하는데 OS별로 API 선언 및 제공이 달라질 수 있고 유지보수와 상호작용이 어려워질 수도 있다. 하지만 일렉트론을 사용하면 이러한 고민들이 사라진다. 윈도우·맥OS·리눅스 별로 적합한 룩앤필을 맞추며 친숙한 자바스크립트·HTML·CSS를 활용해 애플리케이션을 구성할 수 있다.

아울러 한 번에 이들 세 가지 OS에 대한 빌드를 지원하고 설치토록 할 수 있다. 기존의 웹 기술을 그대로 사용하면서도 브라우저 버전 별로 기능을 제약하거나 타깃 플랫폼에 따라 별도의 버전을 유지할 필요가 없게 된다. OS 관련 어려운 부분은 일렉트론이 처리하므로 개발자는 응용 프로그램의 핵심에 집중할 수 있다.

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

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

5) 써드파티 지원

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

6) 노드 접근 권한 관리

웹뷰에서 노드JS에 대한 접근 권한을 관리할 수 있다. 웹뷰 페이지 내에서 Require나 Process와 같은 노드JS API를 직접 사용할 수 있으며 이를 통해 웹뷰 페이지 내부에서 로우레벨 리소스로 접근이 가능해 고급스러운 네이티브 데스크톱 애플리케이션을 만들 수 있다.

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

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

일렉트론의 단점

1) 큰 설치 파일 용량

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

2) 상대적으로 느린 속도

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

3) 보안은 개발자의 책임

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

4) 크로스 플랫폼 빌드

일렉트론은 크로스 플랫폼을 지원한다. 하지만 하나의 플랫폼에서 모든 플랫폼용 데스크톱 애플리케이션 빌드할 수 없다. 데스크톱 애플리케이션이 기본 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보다 훨씬 더 강력하다.

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