Electron 시작하기

Electron은 Node.js 기반으로 작성된 데스크탑 어플리케이션 제작 프레임워크이다. Electron으로 데스크탑 어플리케이션을 만들기 위해서는 Node.js에 대한 이해와 HTML, Javascript, CSS 에 대한 지식이 필요하다.

Electron 프로세스 구성

Electron의 프로세스는 메인 프로세스와 렌더러 프로세스로 구성된다.

structure

Electron이 실행될 때 Node.js로 동작하는 package.json에 기술된 main 스크립트를 호출하는데 이를 Electron에서는 메인 프로세스라고 부른다. 메인 프로세스에서는 새 창을 생성하거나 윈도우나 맥, 리눅스의 네이티브 GUI(메뉴, 프레임 등)를 조작 할 수 있다.

사용자에게 보여지는 화면(GUI)를 구성할 때 작동하는 웹 페이지를 렌더러 프로세스라고 한다. 일반적인 웹 브라우저의 웹 페이지는 샌드박스가 적용된 환경에서 작동하기 때문에 네이티브 리소스에는 접근할 수 없도록 되어있다. Electron은 크로미움 을 사용하여 사용자에게 보여지는 화면을 구성하지만, 메인 프로세스와 통신하거나 Electron을 통해 제공되는 렌더러 API를 사용하여, 웹 페이지 내에서 Node.js API를 사용하여 low-level 수준으로 운영체제를 제어 할 수 있다.

메인 프로세스는 모든 웹 페이지와 렌더러 프로세스를 관리하며 렌더러 프로세스는 각각의 프로세스어 독립적으로 작용하여 단일 페이지의 작동에만 영향을 준다. BrowserWindow 클래스를 통해 메인 프로세스에서 렌더러 프로세스를 생성하여 관리하는데, BrowserWindow 인스턴스가 소멸할 때(창을 종료할 때) 렌더러 프로세스는 같이 소멸된다.

메인 프로세스와 렌더러 프로세스 사이에 통신을 하기 위해서는 ipcRenderer와 ipcMain 모듈을 사용하거나 remote 모듈을 사용하여 RPC 스타일로 통신이 가능하다. 이를 통해 자바스크립트의 다양한 객체를 공유할 수 있다.

지원하는 플랫폼

Electron으로 만들수 있는 어플리케이션은 OS X, Windows, Linux 운영체제를 모두 지원한다. 지원되는 바이너리와 최소 버전은 아래와 같다.

운영체제	바이너리	최소 지원 버전
OS X	x64	10.9 이후 버전
Windows	x86, x64 (ARM 버전 윈도우는 지원하지 않음)	Windows 7 이후 버전
Linux	ia32(i686), x64(amd64), arm	Ubuntu 12.04 이후 버전 Fedora 21 Debian 8

Electron Quick Start

your-app/
├── package.json
├── main.js
├── index.html
└── renderer.js

Electron 의 기본 구조는 위와 같다. electron/electron-quick-start 저장소를 통해 기본적인 구조를 볼 수 있다. 아래의 명령어를 통해 electron-quick-start 프로젝트를 다운받아 실행해 볼 수 있다.

$ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm install && npm start

앱 실행: electron-prebuilt

electron-prebuilt는 미리 컴파일된 Electron 바이너리를 포함하는 npm 모듈이다.

$ npm install -g electron-prebuilt # 전역 모듈로 설치
$ npm install --save-dev electron-prebuilt # 프로젝트 내 모듈로 설치

electron-prebuilt를 전역으로 설치하여 프로그램을 실행 할 수도 있고, 프로젝트 내에 npm 의존성 라이브러리로 설치하여 프로젝트 단위로 설치 할 수도있다. 아래의 명령어를 통해 electron 프로젝트를 실행 할 수 있다.

$ electron /path/to/electron-project # 전역 모듈로 실행
$ electron main.js # 전역 모듈로 메인 프로세스를 지정하여 실행
$ ./node_modules/.bin/electron . # 로컬 모듈로 실행

메인 프로세스를 지정하지 않고 프로젝트 폴더를 지정하여 electron을 실행하면 package.json 파일에서 main 값을 읽어들여 메인 프로세스를 실행한다. package.json에 main이 지정되어있지 않으면 메인 프로세스를 찾을 수 없기 때문에 오류가 발생한다.

어플리케이션 패키징: electron-pacakger

Electron 프로그램을 .app 또는 .exe 와 같은 실행 파일로 만들기 위해서 electron-packager 모듈을 사용하면 편리하다. electron-packager 문서에서는 이 모듈을 사용하기 위해서는 Node.js 4.0 보다 높은 버전을 사용하는 것을 권장한다. Electron 또한 LTS 버전(4 버전 대)을 사용하여 제작되었기 때문에 LTS 버전을 사용하는 것이 좋다. Node.js 재단과 io.js가 통합되면서 기존 Node.js 버전은 LTS로 지원되고 io.js의 버전은 Stable 버전으로 제공되고있는데, 의존성 패키지 관리 방법 등이 차이가 있기 때문에 LTS 버전에 맞추어 하는 것이 안전하다.

$ npm install electron-packager --save-dev # npm 스크립트로 사용
$ npm install electron-packager -g # 전역 모듈로 설치

electron-pacakger 설치는 위와 같이 할 수 있다. 전역 모듈로 설치하여 cli 버전을 사용할 수도 있고 스크립트로 작성하여 실행 할 수도 있다. 사용하는 옵션에 대한 설명은 https://github.com/electron-userland/electron-packager/blob/master/usage.txt 에서 자세히 나와있다.

electron-packager ./ myApp --platform=win32 --arch x64 \
--out dist \
--prune

위의 명령어는 패키징을 위해 사용하는 명령어 예시이다. windows 64비트 운영체제용 실행 파일을 dist 폴더 안에 생성하는데, --prune 옵션을 사용하여 package.json의 devDependencies에 기술된 모듈은 제외하고 패키징을 해준다. –prune 옵션을 사용하지 않아도 기본적으로 패키징할 때 node_modules/electron-prebuilt 폴더는 예외처리 되어있다. –prune 옵션을 사용하지 않고 의존성 파일을 모두 패키징하면 개발시에만 사용하는 gulp와 같은 모듈도 모두 패키징하여 용량이 커지기 때문에 이 옵션을 사용하여 패키징하는것이 좋다. devDependencies 이외에도 패키징 예외파일을 지정하기 위해서는 –ignore 옵션을 사용하면된다.

어플리케이션 패키징: asar

electron으로 제작한 프로그램을 사용하기 위해서는, node_modules 을 포함한 모든 파일을 옮겨주어야 한다. 간혹 Windows에서 node_modules 등에서 긴 경로 이름으로 인해 복사가 안되는 오류가 발생하는데 이와 같은 문제를 완화하기 위해 electron 어플리케이션 패키징을 할 때는 asar 아카이브로 패키징한다.

asar를 사용하는 또 다른 이유는 소스코드 전체를 복사해서 배포하는 것과 별개로 asar 아카이브를 통해 어플리케이션 소스 코드가 사용자에게 노출되는 것을 방지 할 수 있기 때문이다. asar가 tar과 비슷한 포맷이기 때문에 내부 소스가 암호화되어 패키징 되는 것은 아니어서 코드를 보려면 어렵지않게 확인 할 수 있지만, 소스코드 전체를 폴더구조로 공유하는 것 보다는 좋다.

$ npm install -g asar
$ asar pack your-app app.asar

asar를 통해 소스코드를 패키징 하는 것은 위와 같다. asar 사용과 관련되어 더 자세한 것은 electron 문서에서 확인할 수 있다. electron에서는 app.asar 파일이 있을 경우 폴더 접근을 하지 않고 app.asar로 접근을 하여 프로그램을 실행하기 때문에, 배포용 프로그램으로 패키징 할 때는 단순히 resources/app 폴더를 resource/app.asar 파일로 대체하면 된다. electron-packager를 통해 패키징된 실행 파일에서는 생성된 경로에서 resources 폴더 안의 app 폴더를 app.asar 파일로 대체하여주면된다.

설치파일 만들기: Windows

https://github.com/electron/windows-installer

electron에서 제공하는 윈도우 인스톨러를 사용하여 electron-packager를 통해 생성된 실행 파일을 설치파일로 만들 수 있다.

$ npm install --save-dev electron-winstaller

먼저 위의 명령어로 npm으로부터 electron-winstaller 모듈을 설치한 후, 프로젝트 경로에 installer.js 파일을 아래와 같이 만들어준다.

var electronInstaller = require('electron-winstaller');

resultPromise = electronInstaller.createWindowsInstaller({
    appDirectory: './dist/myApp-win32-x64',
    outputDirectory: './dist/installer-win32-x64',
    exe: 'myApp.exe',
    setupExe: 'MyAppSetup.exe'
});

resultPromise.then(function () {
    console.log("It worked!");
}, function (e) {
    console.log('No dice: ' + e.message);
});

appDirectory에 electron-packager를 통해 생성된 폴더의 경로와, exe 파일의 이름을 작성한 후, node installer.js 명령어를 실행하여 설치파일을 생성해주면 된다. 설치시 표시될 gif, 아이콘 등을 옵션을 통해 지정할 수 있는데, 이와 관련된 내용은 문서를 보면 나와있다.

electron 으로 만들어진 아톰을 설치해보면, 설치 파일을 실행할때 로딩 이미지만 나오다가 설치가 완료되는 것을 볼 수있다. 또한 업데이트도 사용자가 모르는 사이에 자동으로 되는 것을 볼 수 있는데, 이는 electron에서 squirrel를 사용하여 설치 및 업데이트를 간결하게 해놓았기 때문이다. squirrel 이벤트 관리와 관련된 내용도 문서에 나와있다.

설치파일 만들기: Mac

https://www.npmjs.com/package/electron-installer-dmg

맥에서는 electron-packager를 통해 패키징을 하면 .app 과 같이 단일 파일로 실행 파일이 생성되기 때문에 굳이 설치 파일을 만들 필요가 없지만, 사람들에게 배포하기 위해 설치용 dmg 파일로 만들기 위해서는 위의 모듈을 사용하면 된다. 설치파일 배경, 아이콘, 아이콘 사이즈 등을 설정할 수 있는데 위의 문서에서 보면 된다. 간단한 사용 방법은 아래와 같다.

electron-installer-dmg ./dist/myApp-darwin-x64/myApp.app myApp --out=./dist

electron-packager를 통해 생성된 .app 파일의 경로와 myApp 대신에 자신의 프로그램 명을 쓰면된다.

패키징 관련 정리

installer.js 까지 작성을 해놓았다면, 프로젝트에 아래와같이 쉘스크립트를 작성해놓고 사용하면 편리하다.

# delete older files
rm -rf dist

# windows exe pacakaging
electron-packager ./ myApp --platform=win32 --arch x64 --out dist --prune
# asar packaging
asar pack ./dist/myApp-win32-x64/resources/app ./dist/myApp-win32-x64/resources/app.asar
# delete source dir
rm -rf ./dist/myApp-win32-x64/resources/app
# create installer
node installer.js

# create mac app and dmg
electron-packager ./ myApp --platform=darwin --arch x64 --out dist --prune
electron-installer-dmg ./dist/myApp-darwin-x64/myApp.app myApp --out=./dist