Electron | Electron 시작하기 + 틱택토 만들기

윈도우 데스크톱 애플리케이션 개발을 하다 보니 Javascript 및 웹 관련 기술에는 전혀 접점이 없었습니다. 그런데 회사에 입사하고 나서 이런저런 일을 하다가 윈도우 태블릿 애플리케이션을 개발해야 할 일이 생겼습니다. Winform과 WPF 둘 중에 어떤 GUI 프레임워크를 사용할지 고민하다가 신규 프로젝트니까 그나마 신기술인 WPF를 사용하고자 했습니다. (UWP는 경험이 없어 고려 대상조차 아니었습니다...)

문제는 태블릿의 스펙으로는 WPF가 버벅인다는 점이었습니다. 산업용 태블릿 PC도 그랬고, 서피스 3도 그랬죠. 퍼포먼스가 나오지를 않아서 기껏 만들었던 애니메이션들을 삭제하고 어찌어찌 완성을 했지만, 아쉬움이 많이 남았습니다.

그렇게 가벼운 데스크탑 애플리케이션을 어떻게 만들 수 있을까 찾아보던 중, 크로미윰과 Node.js 기반인 "Electron"이라는 프레임워크를 알게되었습니다. 웹 기반이다 보니 가벼우면서도 크로스 플랫폼을 지원해 생산성까지 갖추고 있습니다.

어찌됐건 Electron으로 개발을 하기 위해 기본적으로 Javascript, HTML, CSS에 대한 이해가 있어야 합니다. 그래서 일단 Electron을 시작하기 전에 이 세 가지 기술에 대한 공부가 필요했습니다. 그래서 일단 웹으로 틱택토 게임을 만들어서 Electron으로 옮기기로 했습니다.

Pure and Simple - Tic Tac Toe with Javascript

Have you wanted to build something fun and simple to practice your Front End skills but the thought o...

dev.to

소스는 위 링크의 블로그를 참고했으며, 사용한 개발 도구는 Visual Studio Code입니다.

Electron을 기존 프로젝트에 추가하기

일단 프로젝트를 완성하면 다음과 같이 Javascript, HTML, CSS 세가지의 파일이 생성되어 있습니다. 이 상태에서 Electron 모듈을 설치하기 위해선 Ctrl + Shift + `로 터미널을 실행해 다음과 같은 명령어를 입력합니다.

‣ Electron 모듈 설치

$ npm init -y
$ npm install electron --save-dev --save-exact
$ npm install electron -g

다음은 메인 프로세스를 실행할 'main.js'를 생성하고, 애플리케이션 실행을 위해 'package.json'을 수정합니다.

‣ 'main.js' 작성

const { app, BrowserWindow } = require("electron");

function createWindow() {
    // Create the browser window.
    let win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });
    // and load the index.html of the app.
    win.loadFile("index.html");
}
app.on("ready", createWindow);

⚬ 'package.json' 수정

{
  "name": "01_tictactoe-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "10.1.5",
  }
}

‣ 터미널에서 'npm run start' 명령어 입력

웹에서 동작하는 그대로 애플리케이션 역시 잘 작동하는 것을 알 수 있습니다.

Electron 애플리케이션 빌드하기

제작한 Electron 애플리케이션을 빌드해 실행 파일을 만들어 보겠습니다. Electron 공식 홈페이지에서는 애플리케이션 배포를 위해 다음 세 개와 같은 패키징 도구를 소개하고 있습니다.

‣ electron-forge

‣ electron-builder

‣ electron-packager

세가지 모두 인기 있는 도구여서 무엇을 쓰던지 상관은 없지만, 이번에는 자동 업데이트, 다양한 포맷을 지원하는 등의 기능을 가지고 있는 electron-builder를 사용해서 Electron 애플리케이션을 빌드해보도록 하겠습니다.

‣ electron-builder 설치

$ npm install electron-builder --save-dev

‣ 'package.json' 'scripts' 작성

  ...
  
  "scripts": {
    "start": "electron .",
    "build:osx": "electron-builder --mac", 
    "build:linux": "npm run build:linux32 && npm run build:linux64", 
    "build:linux32": "electron-builder --linux --ia32", 
    "build:linux64": "electron-builder --linux --x64", 
    "build:win": "npm run build:win32 && npm run build:win64", 
    "build:win32": "electron-builder --win --ia32", 
    "build:win64": "electron-builder --win --x64"
  },
  
  ...

참고를 위해 macOS와 Linux를 위한 'scripts'를 작성했습니다. 만약 Windows용으로만 빌드를 원한다면

  "scripts": {
    "start": "electron .",
    "build:win": "npm run build:win32 && npm run build:win64", 
    "build:win32": "electron-builder --win --ia32", 
    "build:win64": "electron-builder --win --x64"
  },

이렇게만 작성하시면 됩니다.

‣ 'package.json' 'build' 작성

  ...
    
  "build": {
    "appId": "com.parrottkim.tictactoe", // 애플리케이션 고유 ID
    "productName": "Tic Tac Toe",        // 애플리케이션 이름
    "asar": true,                        // 소스 코드를 asar 포맷으로 압축 여부 (Default true)
    "mac": {                             // macOS 설정
      "target": [
        "default"
      ],
      "icon": "icon.ico"
    },
    "dmg": {                             // 애플 디스크 이미지 (macOS 인스톨) 설정
      "title": "Tic Tac Toe",
      "icon": "icon.ico"
    },
    "win": {                             // Windows 설정
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",                       // 64bit
            "ia32"                       // 32bit
          ]
        }
      ],
      "icon": "icon.ico"
    },
    "linux": {                           // Linux 설정
      "target": [
        "AppImage",
        "deb",
        "rpm",
        "zip",
        "tar.gz"
      ],
      "icon": "icon.ico"
    },
    "nsis": {                             // Windows용 설치 프로그램 설정
      "oneClick": false,                  // 원클릭 설치 여부 (Default true)
      "perMachine": false,                // 모든 사용자용 설치인지 여부 (Default false)
      "allowToChangeInstallationDirectory": true,
                                          // 설치 경로 변경 여부
      "installerIcon": "icon.ico",        // 설치 프로그램 아이콘
      "createDesktopShortcut": true       // 바탕화면에 바로가기 아이콘 생성 
    }
  }
}

<참고> json은 주석을 적을 수 없습니다. 작성할 때는 주석을 제거해 주세요.

‣ 애플리케이션 빌드

$ npm run build:win
$ npm run build:osx
$ npm run build:linux

npm run build:win 명령어를 입력 후, 빌드가 완료된 /dist 파일의 모습입니다. 'win-unpacked' 폴더는 portable 배포용이고, 'Tic Tac Toe Setup 1.0.0.exe'은 설치 파일입니다. 'Tic Tac Toe Setup 1.0.0.exe'를 실행하게 되면, 'package.json'의 'nsis' 객체 부분에 적었던 대로 설정이 바뀌어 있음을 확인할 수 있습니다.