Electron 으로 데스크톱 앱 만들기 - 01

들어가며

앞으로 진행할 사이드 프로젝트에 필요한 기능을 지원하는 플랫폼, 프레임워크 를 조사했다. 개인적인 기준이 몇 가지 있다.

나는 웹 애플리케이션 개발자다.
OS를 컨트롤 할 수 있어야 한다. 즉, 데스크톱 앱이어야 한다.
발전하여 크로스 플랫폼이 되길 원한다.
커리어에 도움이 되어야 한다.

Spring, JavaScript, JSP 등을 사용하는 웹 개발자다. JavaScript, HTML, CSS 에 익숙하다.

사이드 프로젝트는 업무 향상을 위한 프로그램이다. 자세한 내용은 프로젝트를 진행하면서 글을 작성할 계획이다. 당연히 업무환경은 데스크톱이기에 OS 를 컨트롤해야 한다.

욕심은 많다. 웹에서도 접근하고 싶고 데스크톱에서도 접근하고 싶다. 즉, 크로스 플랫폼 구현이 가능해야 한다.

공부가 되어야 하고, 기술 향상에 도움이 되어야 한다. 그래서 내린 결정은 Electron 프레임워크 이다.

Electron 이란

https://electronjs.org/

Electron 홈페이지에 나와 있는 메인 소개 글로 Electron 프레임워크가 무엇인지 바로 알 수 있다.

Electron은 여러분이 생각한 것보다 쉽습니다. 만약 당신이 웹 사이트를 구축할 수 있다면, 데스크톱 앱도 만드실 수 있습니다. Electron은 네이티브 애플리케이션이며 자바스크립트, HTML, CSS로 이루어진 프레임워크입니다. Electron은 어려운 부분을 처리하므로 당신은 애플리케이션의 핵심 부분에 집중할 수 있습니다.

신기하게도 내가 딱 원하는 프레임워크를 찾은 것이다. 웹 개발 지식이 있다면 누구나 데스크톱 앱을 만들 수 있다는 것!

그럼 Electron 으로 데스크톱 앱 만들기를 시작해보자.

첫 번째 Electron 앱 만들기

https://electronjs.org/docs/tutorial/first-app

먼저 Electron 홈페이지에 있는 첫 번째 Electron 앱 만들기를 따라해보자.

Node.js 가 설치되어 있어야 합니다. Node.js 설치는 검색해보시면 많이 나오니 설치 방법은 생략하겠습니다.

프로젝트 폴더 세팅

프로젝트 빈 폴더를 만들겠습니다. 저는 폴더명을 electron-tutorial-first-project 로 하겠습니다.

mkdir electron-tutorial-first-project
cd electron-tutorial-first-project
npm init
This utility will walk you through creating a package.json file.
...
package name: (electron-tutorial-first-project)
version: (1.0.0)
description:
entry point: (index.js) main.js
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to F:\Study\git\electron-tutorial-first-project\package.json:
{
  "name": "electron-tutorial-first-project",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

그리고 커맨드 라인을 실행하고, 새로 만든 폴더 경로에서 npm init 명령어를 실행합니다.
명령어 실행 중에 package name, version, description 등 설정을 하게 되는데, entry point 가 index.js 로 기본 설정 되어있습니다. Electron 홈페이지를 보고 똑같이 따라 하는 것이기 때문에 main.js 로 설정하면 됩니다.

완료되면 package.json 파일을 생성하고 해당 정보를 보여줍니다.

package.json

{
  "name": "electron-tutorial-first-project",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

우리는 Electron 프로젝트를 만드는 것이기 때문에, 런타임 설정을 electron 으로 설정합시다. package.json 파일에서 scripts 안에 "start": "electron ." 을 추가 또는 수정하면 됩니다.

Electron 설치하기

홈페이지에서 가장 추천하는 방법은 개발 의존성으로 Electron 을 설치하는 것이라고 합니다.

npm install --save-dev electron

위 명령어를 프로젝트 루트 폴더에서 실행하면 됩니다.

npm install --save-dev electron

> electron@2.0.7 postinstall F:\Study\git\electron-tutorial-first-project\node_modules\electron
> node install.js

Downloading SHASUMS256.txt
[============================================>] 100.0% of 5.33 kB (5.33 kB/s)
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN electron-tutorial-first-project@1.0.0 No description
npm WARN electron-tutorial-first-project@1.0.0 No repository field.

+ electron@2.0.7
added 149 packages in 297.137s

Electron 설치가 완료되었습니다. 그 다음은 main.js 와 index.html 파일을 만들어봅시다. 홈페이지에 나와 있는 예제를 따라 해보는 것이기 때문에 똑같이 만들어 줍시다.

main.js

const electron = require('electron')
// 애플리케이션 생명주기를 조작 하는 모듈.
const {app} = electron
// 네이티브 브라우저 창을 만드는 모듈.
const {BrowserWindow} = electron

// 윈도우 객체를 전역에 유지합니다. 만약 이렇게 하지 않으면
// 자바스크립트 GC가 일어날 때 창이 멋대로 닫혀버립니다.
let win

function createWindow () {
  // 새로운 브라우저 창을 생성합니다.
  win = new BrowserWindow({width: 800, height: 600})

  // 그리고 현재 디렉터리의 index.html을 로드합니다.
  win.loadURL(`file://${__dirname}/index.html`)

  // 개발자 도구를 엽니다.
  win.webContents.openDevTools()

  // 창이 닫히면 호출됩니다.
  win.on('closed', () => {
    // 윈도우 객체의 참조를 삭제합니다. 보통 멀티 윈도우 지원을 위해
    // 윈도우 객체를 배열에 저장하는 경우가 있는데 이 경우
    // 해당하는 모든 윈도우 객체의 참조를 삭제해 주어야 합니다.
    win = null
  })
}

// 이 메서드는 Electron의 초기화가 끝나면 실행되며 브라우저
// 윈도우를 생성할 수 있습니다. 몇몇 API는 이 이벤트 이후에만
// 사용할 수 있습니다.
app.on('ready', createWindow)

// 모든 창이 닫히면 애플리케이션 종료.
app.on('window-all-closed', () => {
  // macOS의 대부분의 애플리케이션은 유저가 Cmd + Q 커맨드로 확실하게
  // 종료하기 전까지 메뉴바에 남아 계속 실행됩니다.
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // macOS에선 보통 독 아이콘이 클릭되고 나서도
  // 열린 윈도우가 없으면, 새로운 윈도우를 다시 만듭니다.
  if (win === null) {
    createWindow()
  }
})

// 이 파일엔 제작할 애플리케이션에 특화된 메인 프로세스 코드를
// 포함할 수 있습니다. 또한 파일을 분리하여 require하는 방법으로
// 코드를 작성할 수도 있습니다.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>

자 프로그램 실행하기 위한 준비가 완료되었습니다. npm start 명령어로 프로그램을 실행해봅시다.

npm start

electron-app

마치며

해당 글은 Electron 앱 만들기보다는, 프로젝트 생성 방법에 대한 설명에 가까운 것 같습니다.
다음 글에서 본격적으로 시작해보도록 합시다.

참고

Twitter Facebook Google+ LinkedIn