Electron 시작하기

이 장에서는 Electron 개발 환경을 준비하고, 빈 폴더에서 첫 데스크톱 앱을 만들어 실행합니다. 공식 도구인 Electron Forge로 프로젝트를 만드는 방법과, 편집기에서 메인 프로세스를 디버깅하는 방법도 함께 살펴봅니다.

Node.js 준비하기

Electron 앱은 npm 패키지로 설치하고 Node.js 도구로 실행합니다. 먼저 Node.js의 LTS 버전을 설치합니다. 앱 안에서 쓰는 Node.js는 Electron에 내장된 버전이고, 컴퓨터에 설치한 Node.js는 패키지 설치와 빌드 도구 실행에 쓰입니다.

node -v
npm -v

두 명령 모두 버전을 출력하면 준비가 끝난 것입니다. Windows에서 네이티브 모듈을 빌드해야 하는 경우에는 Visual Studio의 C++ 빌드 도구가, macOS에서는 Xcode Command Line Tools가 추가로 필요할 수 있습니다.

빈 폴더에서 직접 만들기

Electron이 어떻게 동작하는지 이해하려면 처음 한 번은 도구 없이 직접 만들어 보는 것이 좋습니다. 새 폴더를 만들고 package.json을 만든 뒤 electron을 설치합니다.

mkdir my-electron-app
cd my-electron-app
npm init -y
npm install --save-dev electron

electron은 개발 의존성(devDependencies)으로 설치합니다. 완성된 앱을 패키징할 때 도구가 Electron 실행 파일을 따로 함께 묶기 때문에, 실행 시점의 의존성으로 넣을 필요가 없습니다.

다음으로 package.json에서 앱의 시작 파일을 가리키는 main 필드와 실행 스크립트를 정합니다. electron .은 현재 폴더의 package.json을 읽고 main에 적힌 파일을 메인 프로세스로 실행합니다.

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

이제 메인 프로세스 코드인 main.js를 작성합니다. 앱이 준비되면(app.whenReady()) 창을 하나 만들고 HTML 파일을 불러옵니다.

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

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
}

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

  // macOS: Dock 아이콘을 눌렀는데 창이 없으면 새로 만든다
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// macOS 외의 운영체제에서는 창을 모두 닫으면 앱을 끝낸다
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

창에 보여 줄 index.html은 평범한 웹 페이지입니다. 처음부터 콘텐츠 보안 정책(CSP)을 넣어 두면 외부 스크립트가 실행되는 것을 막을 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
    <title>Hello Electron</title>
  </head>
  <body>
    <h1>Hello from Electron</h1>
  </body>
</html>

npm start를 실행하면 데스크톱 창이 열리고 페이지가 표시됩니다.

Electron Forge로 만들기

실제 프로젝트는 공식 도구 Electron Forge로 시작하는 것을 권합니다. Forge는 프로젝트 생성, 개발 실행, 패키징, 설치 파일 생성, 배포를 하나의 명령 체계로 묶습니다.

npm init electron-app@latest my-app
cd my-app
npm start

# TypeScript와 Vite를 쓰는 템플릿
npm init electron-app@latest my-ts-app -- --template=vite-typescript

템플릿에는 webpack, webpack-typescript, vite, vite-typescript 등이 있습니다. 이미 만들어 둔 프로젝트에 Forge를 붙이려면 @electron-forge/cli를 설치한 뒤 npx electron-forge import를 실행합니다.

편집기와 디버깅

편집기는 TypeScript 지원이 좋은 Visual Studio Code가 무난합니다. 렌더러(웹 페이지)는 Chromium 개발자 도구로 디버깅합니다. 기본 메뉴의 보기 메뉴에서 열거나, 코드에서 win.webContents.openDevTools()를 호출합니다.

메인 프로세스는 Node.js 디버거로 살펴봅니다. VS Code에서는 .vscode/launch.json에 다음과 같은 구성을 두고 F5로 실행합니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args": ["."],
      "outputCapture": "std"
    }
  ]
}

명령줄에서는 npx electron --inspect=5858 .으로 실행한 뒤 Chrome의 chrome://inspect에서 연결할 수도 있습니다. 작은 API 실험은 공식 도구 Electron Fiddle에서 프로젝트 없이 바로 해 볼 수 있습니다.

정리

• Electron은 npm 패키지로, 개발 의존성에 설치합니다.
• package.json의 main이 메인 프로세스 시작 파일이고, electron .으로 실행합니다.
• 메인 프로세스는 BrowserWindow를 만들고 HTML을 불러오며, 운영체제별 종료 관례를 따릅니다.
• 실제 프로젝트는 npm init electron-app@latest로 Electron Forge 프로젝트를 만들어 시작합니다.
• 렌더러는 개발자 도구로, 메인 프로세스는 --inspect나 VS Code 디버거로 살펴봅니다.