보통 Linux 환경에서 GUI 프로그래밍은 특정 툴(Tool) 을 쓰지 않으면 까다로운 편이다.


대표적으로 Qt 가 있지만, 비용이 세다. 영세 기업 입장에서는 감당하기 벅찬 금액이고. (1copy/1y 3950$)

Qt를 GPL 로 쓰자니 상업적 이용이 안되고,

LGPL 로 쓰자니 이놈의 Qt는 Dll 마다 라이선스가 달라 GPL 라이선스에 해당하는 Dll 이 껴 있을 수 있단다....

즉, 모두 검토하려면 차라리 법률 관련 변호사를 선임하는게 좋다.

근데 차라리 변호사 선임할바에 3950$ 내고말지.. (물론 회사에서 대량으로 운영할 경우는 예외)

 

그래서 솔직히 Qt의 경우에는 개인 프로젝트 용으로 사용하거나,

아예 속 편하게 Github 에 공개할 생각이 아니면 Qt 로 프로그램 자체를 만들지 않는다.

즉 LGPL 준수할바에 귀찮아서 그냥 GPL을 준수하고 만다.

 

그렇게 Qt를 안 쓰는 방향으로 지향하게 되고,

지속해서 크로스플랫폼이 가능한 GUI 개발툴을 찾던 도중 일렉트론이 눈에 띄었다.

이전부터 간간히 들었지만, 구체적으로 뭔지는 모르는 놈이였는데, 알아보니 신선하더라.

 

 

현재는 아직 다른 GUI 툴을 쓰고 있지만 배워두면 도움이 될 것 같다.

일렉트론은 무려 MIT 라이센스기 때문이다. (Node JS 까지)

 

 

Electron 의 Icon, 원 단어 뜻 그대로 '원자' 모양을 닮았다.

 

 

상업적으로 이용하는데 아무 지장이 없고,

커뮤니티도 활발하기에 모르는 부분이 있다면 찾아보는데 큰 어려움이 없다

거기다, 초보자 입장에서 비교적 삽질을 많이 하지 않아도 된다는 장점이 있다.

 

단점으로는 CMake 와 비슷하게 Build 과정에서 Link 를 위해 작성해야 하는 파일이 존재해서

Visual Studio 로 간편하게 코딩하는것 보다 '난이도는 높을 수 밖에 없다'

즉, '삽질을 많이 안해도 되는' 거지, '하긴 해야된다'

 

일렉트론 Quick Guide + Electron-Builder 문서를 참조해 .exe 파일까지 만드는 과정을 쉽게 포스팅 했다.

 

Quick Start Guide | Electron

Please install Node.js using pre-built installers for your platform. You may encounter incompatibility issues with different development tools otherwise.

www.electronjs.org

 

 

Electron 이란 무엇인가?

 

정말 간단히 소개하면.

Linux 던 Android 건 Windows 건 '브라우저' 내의 컨텐츠는 모두 동일하게 표시된다.

그 원리를 이용해 브라우저 페이지를 → 실행 프로그램 파일(.exe) 로 만들어 작동시키는 것이 바로 electron 이다.

 

 

브라우저는 어떤 운영체제에서도 같은 화면을 출력해주는것을 보장한다

 

 

더 쉽게 말하자면,

그냥 HTML, CSS, Javascript 를 이용해 .exe 를 만드는거다.

HTML 은 틀 잡아주고, CSS 는 이쁘게 꾸며주고, JavaScript 는 프로그래밍 해 주고...

 

Node JS 는 웹쪽을 다뤄보지 않은 사람이라면 생소할텐데,

원래 JavaScript 가 브라우저 위에서만 돌아가는걸 브라우저 밖 에서 돌아갈 수 있게 해 주는 놈이다.

 

들리는 바로는 electron 에다 C++ 모듈이나 C 언어 모듈을 붙여 사용할 수 있다고 하긴 하는데...

이건 안해봐서 모르겠지만, JavaScript 에 비슷한 예제들이 있으니 충분히 가능할 것 같다.

 

Electron 사이트에 접속하면 Electron 을 이용해 만든 프로그램들을 살펴볼 수 있다.

 

 

※ 만약 본인이 '난 Windows 프로그래밍만 할건데요?' 한다면 C# 써라, 훨신 싸고, 간편하고, 강력하다.

 

 

 

1. Electron 설치

※ Electron 을 실행시키기 위해서는 Node.js 및 npm 을 사전에 설치 하여야 한다.

Node.js 는 사이트 에서 LTS 버전으로 설치하면 된다.

 

 

 

설치 후 아래 명령어를 입력해서

node -v
npm -v

아래와 같이 출력되면 성공이다.

 

 

 

그 후 아래 명령어를 입력해 electron 을 global 옵션으로 설치한다 (global : 모든사용자 사용)

npm install electron -g

 

 

 

2. Electron 프로젝트 생성

아래  '&&' 명령어의 경우 Cmd 에서만 인식하므로,

그대로 복붙할거면 cmd 에서 사용하여야 한다.

아래 명령을 사용하면 '가장 기본적인' 프로젝트 생성이 완료 된다.

mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron

 

electron 의 가장 기본적인 화면 구성은 다음과 같이 이루워 져야 한다.

 

 

각각 대충 설명하면

index.html = 메인화면

preload.js = 사전에 로드되야하는 라이브러리

main.js = 메인화면 자바 스크립트

package.json = 링크 구성 (CMake 같은거)

 

정도로 이해하면 된다

그럼 이제 이미지 상에서 존재하지 않는

main.js, index.html, preload.js 를 만들어야 한다.

 

아래 파일은 직접 파일을 만들어 복붙하면 된다.

 

 

main.js

const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

 

 

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
</body>
</html>

 

 

preload.js

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

 

그리고 마지막으로 package.json 파일을 다음과 같이 수정 해 준다.

 

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "author": "your name",
    "description": "My Electron app",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

그럼 이제 폴더는 이렇게 구성되어 있을 것이다.

이렇게만 두면 성공이다

 

3. Electron 빌드

아래 명령어로 실행 시킨다

npm start

 

 

실행시키면 위와 같이 실행 프로그램이 나온다.

해당 start 커맨드는 package.json 내에 존재하는 "start" 와 반응하여 동작하는 원리이다.

 

 

4. Electron 을 통해 실행파일 만들기

Electron 을 통해 실행파일을 만드려면 (OS는 무관하다)

Electron-builder 라는 놈이 필요하다.

 

Electron-builder 는 아래 명령어로 설치한다.

 
npm install --save-dev electron-builder

 

설치 후 package.json 파일 내용을 아래와 같이 수정 해 준다.

{
  "name": "my-electron-app",
  "version": "0.1.0",
  "author": "your name",
  "description": "My Electron app",
  "main": "main.js",
  "scripts": {
      "start": "electron .",
      "deploy":"electron-builder --windows nsis:ia32"
  },
  
  "build": {
    "productName": "test",
    "appId": "com.electron.hello",
    "asar": true,
    "protocols": {
      "name": "test",
      "schemes": [
        "test"
      ]
    },
    "win": {
      "target": [
        "zip",
        "nsis"
      ],
      "icon": "./resources/installer/Icon.ico"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "directories": {
      "buildResources": "./resources/installer/",
      "output": "./exeResult/",
      "app": "."
    }
  }
}

 

 

하단에 보이는 "directories" 란에 "output" 란에 최종 설치파일이 생성 될 것이다.

상단에 입력한 "deploy" 옵션에서 --windows nsis:ia32 옵션을 부여 했으므로

'windows' 에서 실행 가능한 파일이 생성된다.

 

 

 

아래 명령어를 입력하여 빌드 시킨다

npm run deploy

 

성공적으로 빌드가 이루워진 모습

 

이제 아까 설정한 "output" 디렉토리로 이동 해 보면 '설치파일' 이 위치해 있을 것이다.

 

 

해당 설치파일을 통해 만든 프로그램을 '설치' 한다.

 

설치된 프로그램의 모습

 

execute

 

 

 

 

여담

난 솔직히 Visual Studio Code 의 코드가 일부 동적 라이브러리 형태로 포함되어 있는줄 알았으나,

각종 파일을 뒤져 본 결과 순수 electron 으로 개발이 된 듯 싶다.

때문에 electron 을 통해 어느정도 성능이 보장되는 프로그램 (Visual Studio Code) 을

만들 수 있는 가능성을 확인 하였지만,

 

단점도 발견 하였는데,

electron 의 가장 큰 단점은 '소스코드가 거의 공개' 된다는 점이다.

 

Application made in Electron Framework are insecure?

I am a beginner with Electron, I have good amount of experience with HTML/javascript and window desktop application development(win-forms and WPF). I loved js/HTML5 so much that I wish someone coul...

stackoverflow.com

때문에 보안이 중요시 되는 업계에서 사용하기엔 그다지 적절치 않다고 느꼇다.

이게 사실상 Qt를 쓰면서 GPL 로 소스를 공개하는것과 크게 다르지 않은 것 같다... (의문의 Qt 1승)

 (맘먹고 시간을 투자해, 리버스 엔지니어링 하면 관련 기능을 100%에 가깝게 복구할 수 있을것이다)

 

아직 한가지 시험해 볼 내용이, 동적 라이브러리를 각각 운영체제에 맞게 만들어

배포하여 electron 에 적용이 가능한지 따져 봐야겠지만.

과연 이짓거리가 생산성이 높을지는 의문이다...

(혹시라도 해 본 분이 계시다면 댓글 부탁드립니다.)

 

끝.

저작자표시 비영리 동일조건

'Tools > Etc' 카테고리의 다른 글

로컬 환경에서 Git Server 구축하기  (0) 2021.04.12
[MAK] VR-Forces 매뉴얼 [BEGINNER]  (0) 2021.04.10
WireShark 매뉴얼  (0) 2021.01.03
Visual Studio Code 확장기능을 오프라인에서 이용하기.  (2) 2020.11.08
Bittwist & Bittwiste 매뉴얼  (0) 2020.10.06

티스토리툴바