티스토리 뷰

PDR Tech log

electron App build & packaging

PDR 비비로그 2017. 2. 1. 20:01

electron (http://electron.atom.io/) 은 Github 에서 관리하는 Open Source 로써 Cross Platform desktop app 을 Web (HTML, CSS 그리고 Javascript) 기술로 작성 가능 하도록 하는 Library 입니다.  여기(http://electron.atom.io/apps/)를 보시면 electron 으로 작성된 많은 상업용 app 들을 확인 할 수 있습니다. 눈에 띄는 것은 Vscode, Slack 그리고 한국의 Jandi 가 보이네요. 


제가 electron을 눈여겨 보는 이유는 저희 같은 소규모 팀에서 Web 기술만 가지고 전통적인 Web service, Hybrid App in mobile 그리고 Mac 과 Window  PC 에 서비스가 가능하기 때문입니다. 특히, Web 개발자들이 익숙한 Javascript Framework 과 결합하면 좋은 시너지가 나올 것이라고 믿고 있습니다. 그 예로 Angular 2 + Node 로 웹 서비스, Ionic2 (Angular 2) 로 모바일 서비스, 그리고 마지막으로 Angular 2 + electron 으로 PC web 제작입니다.  작성한 Component ( Class, Template 그리고 Style) 들을 여러 App들 에서 재사용 할 수 있으니 팀의 기술 Stack 의 통일성을 유지 할 수 도 있고 코드 재사용율도 증가할 거라고 믿습니다.


여기에서는 간단히 홈페이지를 여는 App을 제작 해 볼것입니다. (Mac 개발 환경만 설명 드리겠습니다.) 일단 Xcode 와 Node.js 가 install 되어 있다는 전제에서 설명을 시작하겠습니다. 


우선, NPM 을 사용해서 Terminal에서 electron 을 install 합니다.


   $npm install -g electron


그리고 아래와 같이 간단한 코드를 작성하고

아래 와 같이 package.json 에 electron을 추가 합니다.

 

   $npm install —save-dev electron


그러면 아래와 같은 package.json 형태가 될 것 입니다. 그리고 전체 폴더 구조는 아래와 같이 간단 합니다. 



이 상태에서 다음 command를 실행하면 balancebrain.co.kr 웹 페이를 실행하는 앱이 실행 됩니다. 


   $electron . 


위의 과정들은 electron 으로 개발 하고 수정 사항을 Local Mac 에서 확인 하는 방법 입니다. 이제 빌드된 App을 packaging 하고 .dmg 파일로 배포하는 방법을 알아 보겠습니다. 


우선 Mac 에서 배포용 아이콘을 제작하기 위해서 image2icon App을 사용 했습니다.  http://www.img2icnsapp.com

image2icon App으로 제작된 .icn 파일은 위에 있는 폴더 구조를 보셨듯이 icons 폴더에 위치 시킵니다. 


이 상태에서 packaging 을 위한 node package를 설치 합니다. 


    $npm install electron-packager -g


아래는 "Balance Brain" 이라는 이름으로 좀 전에 추가한 icon을 사용해서 App을 Packaging 합니다.


    $electron-packager . 'Balance Brain' --out ~/Desktop/BalanceBrain --overwrite --icon ./icons/icon    


~/Desktop/BalaceBrain 폴더에 생성된 Package를 확인 하실 수 있을 겁니다.


이제 마지막 단계로 Package 폴더를 Mac에서  .dmg 파일로 변환 해 보겠습니다. 


Open Disk Utility -> File -> New Image -> Image From Folder 를 선택합니다. 그리고 저장될 폴더를 선택하고 dmg 파일의 이름을 선택해 주면 배포를 위한 dmg image 가 생성 됩니다. 


위와 같이 과정을 통해서 electron 을 사용한 개발 그리고 배포가 가능 합니다.  


추가 적으로 electron 의 개발 API 스터디를 원하시면, Electron 의 API  학습을 위해 친절히 Electron API Demos 라는 App을 Github에서 제작했습니다. 각 API 로 만들어진 샘플을 보시고 연습하실 때 쓰시면 좋을 것입니다. 


https://github.com/electron/electron-api-demos


지금 까지 간단히 electron library에 대해 설명 드렸습니다. Web 기술로 Mac과 Window PC에 App을 배포할 수 있다는 것만으로도 많은  Web Developer들에게 매력적이라고 생각합니다. 그리고 Open Source라는 매력 또한 electron의 밝은 미래를 예측 할 수 있습니다. 


- by Jake - 





댓글
댓글쓰기 폼