이번에 출시된 리멤버 데스크톱 앱은 Electron을 이용하여 개발되었습니다. 이 글에서는 HTML, CSS, JavaScript만을 이용하여 Windows, Mac, Linux 등 크로스 플랫폼으로 데스크톱 앱을 만들 수 있게 해주는 Electron에 대하여 이야기해 보려고 합니다. 세 가지 플랫폼 중 가장 많이 사용하시게 될 것 같은 Windows를 기준으로 작성했습니다.
이 글이 독자분들에게 Electron에 대하여 접할 좋은 기회가 되고 프로젝트 도입 여부에 대한 결정에 도움이 되는 글이 되었으면 좋겠습니다.

Electron

Electron은 Chromium과 Node.js를 이용하여 데스크톱 앱을 HTML, CSS, JavaScript로 쉽게 만들 수 있게 해주는 프레임워크입니다. GitHub에서 Atom editor를 만들기 위해서 시작된 프로젝트로 원래 이름은 Atom Shell이었다가 Electon으로 이름이 바뀌었습니다. 앞서 말씀드린 것과 같이 Electon을 이용하면 쉽게 cross-platform 앱을 개발할 수 있습니다.  또한 웹 개발자분들도 익숙한 언어와 코드를 재사용하여 쉽게 데스크톱 앱을 개발할 수 있습니다.

혹시 Electron과 비슷한 방식으로 데스크톱 앱을 개발할 수 있는 NW.js(Node Webkit)를 알고 계신분들은 여기에서 Electron과 NW.js이 어떻게 다른지 찾아보실 수 있습니다.

Electron을 사용한 이유

리멤버의 데스크톱 앱을 만들기 위하여 여러 방식을 고민해본 결과 Electron을 고른 이유 중 가장 큰 이유는 다음 세 가지었습니다.

Electron으로 만들어진 앱들

여기를 확인해보시면 Electron을 이용하여 만들어진 앱들이 나와 있습니다. 아마 제일 앞의 세 개가 낯익으실 텐데, GitHub의 text editor인 Atom, Slack Technologies의 협업 메신저인 Slack, MS의 Visual Studio Code가 있습니다. 세 가지 앱 모두 제가 사용을 하는 앱이고(Atom과 Slack은 컴퓨터가 켜져 있는 시간의 99%) Mac과 Windows 모두 그 퀄리티에 만족을 하면서 사용하고 있었기 때문에 Electon으로도 충분히 좋은 앱을 만들 수 있다고 판단했습니다.

Squirrel 인스톨러

Slack이나 Atom을 Windows 환경에서 인스톨러를 실행할 경우 기존의 ‘다음’, ‘다음’ 그리고 ‘다음’의 과정 없이 로딩 이미지가 잠깐 뜨다가 바로 앱이 실행됩니다. 그리고 업데이트도 Chrome처럼 언제 일어났는지도 눈치챌 수 없을 정도로 자연스럽게 일어납니다. 이는 Squirrel 인스톨러가 자동으로 해주는 부분입니다.
꼭 Squirrel 인스톨러를 사용해야 하는 것은 아니지만, Slack이나 Atom 같은 경우 Squirrel 인스톨러를 사용하여 만들었고 이들이 주장하는 “인스톨과 업데이트는 간단해야 한다”가 제일 만족스러운 부분이었습니다. 정말 인스톨러나 업데이터를 만드는데 신경을 거의 쓰지 않아도 됩니다(한번 이해만 한다면..).

익숙함, 간단함 그리고 편리함

저는 주로 웹 개발을 해왔기 때문에 HTML, CSS, JavaScript에는 매우 익숙하고 Window나 Mac 등 데스크톱 앱 개발에는 거의 경험이 없었습니다. 저 같은 웹 개발자한테는 추가적인 학습 시간을 매우 조금 들이고 세 가지 플랫폼의 앱을 만들 수 있다는 것, 그리고 익숙하므로 빨리 좋은 질로 만들 수 있다는 게 가장 큰 이유였습니다.
또한, Main 프로세스는 Node.js 4.1 버전을 사용하고 있어서 ES6도 맘껏 사용해도 되며 Renderer 프로세스는 Chromium 기반이기 때문에 IE나 타 브라우저에 대한 호환성 걱정 없이 HTML5, CSS3 등 Chromium이 지원하는 모든기능들을 사용하실 수 있었습니다.

구조

공식 홈페이지에 나와 있는 튜토리얼이 잘 되어있다고 생각하기 때문에 이 글에서는 개발 방법에 대한 얘기는 별도로 다루지 않도록 하겠습니다.
그보다 큰 그림을 이해하기 위한 구조를 소개해드리겠습니다.

크게 두 가지 프로세스가 존재합니다. Renderer 프로세스는 Chromium 기반으로 HTML, CSS, JavaScript를 이용하여 웹 페이지를 만들듯 view를 구성합니다. Main 프로세스는 Node.js 기반으로 일반적인 Node application이라고 생각하시면 되겠습니다. 모든 node 모듈들을 가져다 쓸 수 있습니다. 그리고 각 프로세스마다 electron 앱에 접근해서 사용할 수 있게 만든 electon에서 제공되는 API들이 담긴 모듈들이 있습니다. 그리고 두 process 사이를 통신할 수 있게 해주는 ipc와 remote module이 존재합니다.
웹 개발자는 원래 front-end를 개발하던 것과 같이 Renderer 프로세스 쪽을 개발하고 back-end를 Node.js로 개발하듯 Main 프로세스 쪽을 개발하면 됩니다. 그때그때 필요한 Electron의 API만 찾아 쓰면 기존의 웹 개발하던 것과 차이가 거의 없습니다.

빌드

Squirrel.Windows를 이용하여 Windows 플랫폼을 겨냥한 Electron의 빌드는 크게 다음 과정들을 거치게 됩니다.

1. 프로젝트 경로 설정, 어플리케이션 파일 배치
2. 메인 js 파일에 squirrel listener 관련 코드 추가
3. electron-packager를 이용해서 패키징하여 겨냥한 architecture에
   대한 프로그램 폴더 생성
4. nuget spec 파일 생성
5. Package.nuget 파일 수정
6. spec 파일을 이용해서 nuget package 생성
7. Squirrel.Windows를 이용해서 인스톨러 생성
8. 인스톨러 아이콘, 이름 수정
9. 인스톨러 디지털 서명

1, 2번은 기본 설정이고 3번부터가 매 빌드마다 해줘야 하는 작업입니다.
저는 처음에 문서에 나와 있는 방법대로 위 과정들에 대하여 Grunt task들을 직접 다 만들었었는데, Squirrel 인스톨러의 문서화가 최신화도 안 되어있고 엉망이라 많은 좌절을 겪었습니다..

결국 Squirrel과 관련된 다 만들었던 부분들을 걷어내고 제가 사용하는 모듈과 grunt 플러그인은 다음 두 가지입니다(참고로 아래 두 가지까지도 합쳐서 하나로 만든 electron-accelerator도 있긴 합니다).

electron-packager

Node.js 모듈로 electron 프로젝트를 원하는 플랫폼 환경에 맞춰 빌드를 해줍니다. Windows는 exe, OS X는 app 그리고 ia32,  x64과 같이 아키텍쳐도 맞춰서 빌드할 수 있습니다.

grunt-electron-installer

Grunt 플러그인으로 빌드된 앱 폴더를 가지고 Squirrel.Windows를 이용하여 실제 installer까지 만들어주고 installer에 대한 수정, code signing 등까지 책임져 줍니다. 즉, 위 과정들에서 4~9를 해준다고 생각하시면 됩니다.

추가로

인스톨러를 만든 뒤 배포를 하기 위해서는 디지털 서명을 꼭 해야 합니다. 그렇지 않을 경우 IE, Windows의 SmartScreen Filter와 Chrome에게 매우 위험한 파일 취급을 받게 됩니다. Squirrel은 편하게도 실행 시 몇 가지 인자들로 이런 인증과정까지 자동으로 진행해줍니다. 디지털 서명과 배포에 대한 부분은 나중에 다음 글에서 다루도록 하겠습니다.

개발 후

이렇게 그리 길지 않은 시간 동안 리멤버 데스크톱 앱을 개발하였습니다. 개발하기 전에 약 1주간 스터디 기간을 가졌었는데, 개발 후에 1주 안에 찾아내지 못했던 부분들도 있었다고 생각합니다. 개발 후에 느낀 장단점을 얘기해보겠습니다.

장점

매우 낮은 진입장벽, 개발 속도

앞서 말씀드렸지만 Electon 개발은 HTML, CSS, JavaScript, Node.js로 이루어져 있다 보니 저같이 웹 개발자에게는 새로 배워야 할 부분이 거의 없었습니다. 실제로는 ES6, Chromium 덕분에 기존의 웹 개발보다도 어떤 면에서는 더 빠른 개발 속도를 낼 수 있었습니다. 사실 별도의 Windows나 Mac 개발자를 구하지 않아도 웹 개발자가 빠른 속도로 개발할 수 있다는 건 정말 큰 장점이라고 생각합니다.

손쉬운 cross-platform 지원

물론 리멤버는 이번에 Windows 용 앱만 개발했지만 타 플랫폼을 위한 앱을 개발한다 하여도 이번에 들인 노력보다 훨씬 더 적은 노력으로 완성할 수 있습니다(하지만 이 말을 ‘정말 쉬워서 하루면 된다’로 받아들이지는 말아주셨으면 합니다. 플랫폼별 제공해주는 API가 다르므로 분기 처리나 그 플랫폼별 인스톨러 개발 작업으로 생각보다는 많은 노력이 필요할 수 있습니다).

가벼운 설치와 업데이트

Squirrel이 강조했던 것처럼, 설치는 더블클릭만으로 앱이 순식간에 설치 과정을 거쳐 실행까지 됩니다. 그리고 업데이트는 자동으로 백그라운드에서 이루어지며 원하면 사용자도 모르게 자동업데이트를 진행할 수 있습니다.  그리고 이 부분들에 대해서 별도의 작업은 거의 필요 없고 대부분 Squirrel 인스톨러가 처리해줍니다.

단점

Project가 아직은 stable 하지 않다.

Project가 stable 하지 않다는 부분은 다음 세 가지 측면에서 얘기할 수 있습니다.

버그

기능들이 빨리 추가가 되고 버그들도 빨리 고쳐지고 있지만, 아직 부족한 부분들이 많이 있습니다. 실제로 Slack이나 Atom을 봐도 major 한 버그들을 공통으로 가지고 있는 경우도 있습니다.

기능

Electron이 기본적인 데스크톱 앱을 만드는 데는 문제가 없을지라도 정통적인 방법으로 만든 데스크톱 앱에 비하면 제약이 많습니다. 예를 들면 OS의 API 같은 경우는 electon에서 API를 제공해야 하나, 아직 제공되고 있는 것들은 매우 기본적인 것들뿐입니다.

문서화

Electron 자체는 문서화가 어느 정도 되어있을지 몰라도, Electron과 같이 사용하게 되는 Squirrel.Windows와 같은 installer 등 다른 부분들에 대해서는 문서화가 매우 부족합니다.

참고 자료

Stack Overflow에 현재(2015년 11월 16일) 기준 electron으로 태그 되어있는 질문은 292개밖에 되지 않습니다. 133,295개인 AngularJS에 비하면 초라하기 그지없습니다. 게다가 그중 사실 꽤 많은(절반 이상?) 질문들에 답변조차 없습니다. 구글링으로 검색하는 것보다 그냥 git project의 issue 내에서 검색을 하거나 소스 코드를 직접 찾아보시는 게 더 빠른 경우가 많습니다(그리고 어쩌면 내가 급하게 원하는 기능이 추가되길 기다리는 것보다 커미터가 되시는게 더 빠를수도있습니다).

마무리

Electon은 매우 활발하게 개발되고 있는 프로젝트입니다. 실제로 “이 기능이 있나..”, “이 버그가..”하면서 이슈를 찾다 보다 보면 comment들이 1 day ago와 같이 실시간으로 해결되고 있는 경우를 많이 보게 됩니다. 그러므로 저번주에 필요했지만 없던 기능이 오늘은 생겨있는 경우가 많습니다. 이렇게 아직 안정화되어있지 않지만 확실한 장점은 가지고 있는 프레임워크입니다. 사용하는 프로젝트의 목적이나 성격에 맞춰서 사용하시길 바랍니다.
깊게 들어가지 않고 처음 접하는 분들을 기준으로 적은 글이니 진행하시다 막히는 부분들이 있으면 댓글이나 연락주셔도 괜찮습니다. 아 물론 제가 잘못 알고 적은 부분들에 대한 피드백도 환영입니다 :).