[Electron]Electron 데스크탑 애플리케이션 만들기, 배포 및 GitHub 자동 업데이트 방법 까지

개발(DEV)/개발-기타 2026. 4. 1. 22:45

Electron을 통해 웹 개발만 할 줄 알아도 데스크톱 앱을 만들 수 있다는 사실을 알게되었다.

회사 혹은 집에서 개인적으로 업무나 공부등 할 때 쓸만한 나만의 커스텀 프로그램을 만들어 보았고,

일렉트론의 간단한 동작 과정과 세팅까지 정리해보고자 한다.

1. Electron이란?

Electron은 GitHub에서 개발한 오픈소스 프레임워크로, HTML, CSS, JavaScript 같은 웹 기술만으로 Windows, macOS, Linux용 데스크톱 애플리케이션을 만들 수 있게 해주는 도구이다. VS Code, Slack, Discord, Notion 등 우리가 흔히 사용하는 데스크톱 앱들이 모두 Electron으로 만들어졌다.

Electron은 내부적으로 Chromium(웹 브라우저 엔진)과 Node.js(서버 사이드 자바스크립트 런타임)를 결합한 구조이다. 쉽게 말해, 하나의 앱 안에 브라우저와 서버가 함께 내장되어 있는 셈이다.

Electron의 동작 원리

Electron 앱은 크게 Main Process와 Renderer Process 두 가지 프로세스로 구성된다.

Main Process (메인 프로세스)는 Node.js 환경에서 실행되며, 앱의 생명주기를 관리하고 BrowserWindow를 생성한다. 파일 시스템 접근, 시스템 트레이, 알림 등 OS 레벨의 네이티브 기능을 직접 사용할 수 있다.

Renderer Process (렌더러 프로세스)는 Chromium 환경에서 실행되며, 우리가 보는 화면(HTML/CSS/JS)을 담당한다. 일반 웹 페이지를 만드는 것과 동일한 방식으로 UI를 구성할 수 있다.

두 프로세스 간 통신은 IPC(Inter-Process Communication)를 통해 이루어진다. 보안을 위해 Renderer에서 직접 Node.js API에 접근하는 것은 권장되지 않으며, Preload Script를 통해 필요한 기능만 안전하게 노출하는 방식을 사용한다.

2. 개발 환경 세팅

Electron 개발을 시작하기 전에 아래 도구들이 설치되어 있어야 한다.

Node.js 설치

Electron은 Node.js 기반이므로 반드시 Node.js가 필요하다.

https://nodejs.org/ko에서 LTS 버전을 다운로드하여 설치한다. 설치가 완료되면 터미널에서 버전을 확인한다.

node -v
npm -v

코드 에디터

Visual Studio Code를 권장한다. 아이러니하게도 VS Code 자체가 Electron으로 만들어진 앱이다.

Git 설치

뒤에서 다룰 자동 업데이트 기능을 위해 Git도 미리 설치해두는 것을 권장한다. https://git-scm.com에서 다운로드할 수 있다.

3. 첫 번째 Electron 프로젝트 만들기

3-0. Electron-Vite로 빠르게 만들기

공식 문서따라하면 바로 만들 수 있습니다. 아니다. 그냥 할거다 하면 3-1부터 하면됩니다!

https://electron-vite.org/guide/

Getting Started | electron-vite

electron-vite.org

3-1. 프로젝트 초기화

원하는 경로에 프로젝트 폴더를 생성하고 npm 초기화를 진행한다.

mkdir my-electron-app
cd my-electron-app
npm init -y

3-2. Electron 설치

Electron을 개발 의존성으로 설치한다.

npm install --save-dev electron

3-3. package.json 수정

package.json의 main 필드와 scripts를 아래와 같이 수정한다.

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

3-4. main.js 작성 (메인 프로세스)

프로젝트 루트에 main.js 파일을 생성하고 아래 내용을 작성한다.

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

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  });

  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();
  }
});

contextIsolation: true와 nodeIntegration: false는 보안을 위한 필수 설정이다. Renderer 프로세스에서 Node.js API에 직접 접근하지 못하도록 격리하는 역할을 한다.

3-5. preload.js 작성

Main과 Renderer 사이의 안전한 다리 역할을 하는 preload.js를 생성한다.

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  getVersion: () => ipcRenderer.invoke('get-version')
});

3-6. index.html 작성

화면에 표시될 index.html을 작성한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Electron App</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: #1a1a2e;
      color: #eee;
    }
    h1 { font-size: 2.5rem; }
  </style>
</head>
<body>
  <h1>Hello, Electron!</h1>
</body>
</html>

3-7. 실행 확인

아래 명령어로 앱을 실행한다.

npm start

정상적으로 실행되면 데스크톱 창에 "Hello, Electron!" 화면이 나타난다.

단, 저는 3-0에 기재한 내용 처럼 Vite로 설치하였기 때문에 다음과 같은 화면이 나타납니다.

- 설치과정만 차이, 나머지 다 동일합니다.

※ 1번에서 말했듯이 일렉트론은 크롬 브라우저를 띄우는 식으로 구동되기 때문에 f12로 개발자도구 또한 띄울수있다.

4. 앱 빌드 및 설치 파일 생성

개발이 완료된 앱을 다른 사람이 설치할 수 있도록 설치 파일(.exe, .dmg 등)로 패키징해야 한다. 이를 위해 electron-builder를 사용한다.

4-1. electron-builder 설치

npm install --save-dev electron-builder

4-2. package.json에 빌드 설정 추가

package.json에 build 설정과 scripts를 추가한다.

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build:win": "electron-builder --win",
    "build:mac": "electron-builder --mac",
    "build:linux": "electron-builder --linux"
  },
  "build": {
    "appId": "com.example.myelectronapp",
    "productName": "My Electron App",
    "directories": {
      "output": "dist"
    },
    "win": {
      "target": "nsis",
      "icon": "assets/icon.ico"
    },
    "mac": {
      "target": "dmg",
      "icon": "assets/icon.icns"
    },
    "linux": {
      "target": "AppImage",
      "icon": "assets/icon.png"
    }
  },
  "devDependencies": {
    "electron": "^41.0.0",
    "electron-builder": "^25.0.0"
  }
}

4-3. 빌드 실행

Windows 기준으로 빌드 명령어를 실행한다.

npm run build:win

빌드가 완료되면 dist 폴더에 설치 파일(.exe)이 생성된다. 이 파일을 배포하면 다른 사용자가 설치하여 사용할 수 있다.

5. GitHub 연동 자동 업데이트 구현

앱을 배포한 후 새로운 버전이 나올 때마다 사용자가 직접 다시 다운로드할 필요 없이, 자동으로 업데이트되도록 구현할 수 있다. electron-updater와 GitHub Releases를 연동하면 된다.

5-1. electron-updater 설치

npm install electron-updater

5-2. package.json에 publish 설정 추가

build 설정 안에 publish 항목을 추가한다.

{
  "build": {
    "publish": [
      {
        "provider": "github",
        "owner": "your-github-username",
        "repo": "your-repo-name"
      }
    ]
  }
}

5-3. main.js에 자동 업데이트 코드 추가

main.js에 아래 업데이트 로직을 추가한다.

const { app, BrowserWindow, dialog } = require('electron');
const { autoUpdater } = require('electron-updater');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  });

  win.loadFile('index.html');
  return win;
}

app.whenReady().then(() => {
  const win = createWindow();

  // 자동 업데이트 체크
  autoUpdater.checkForUpdatesAndNotify();

  // 업데이트 다운로드 완료 시
  autoUpdater.on('update-downloaded', () => {
    dialog.showMessageBox(win, {
      type: 'info',
      title: '업데이트 알림',
      message: '새로운 버전이 준비되었습니다. 지금 재시작하시겠습니까?',
      buttons: ['재시작', '나중에']
    }).then((result) => {
      if (result.response === 0) {
        autoUpdater.quitAndInstall();
      }
    });
  });

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

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

5-4. GitHub Releases에 배포하기

GitHub에 리포지토리를 만들고 코드를 push한 뒤, GH_TOKEN 환경변수를 설정하고 빌드 및 배포를 실행한다.

# GitHub Personal Access Token 설정 (Windows PowerShell)
$env:GH_TOKEN="your_github_token_here"

# 빌드 및 GitHub Releases에 자동 업로드
npx electron-builder --win --publish always

빌드가 완료되면 GitHub 리포지토리의 Releases 탭에 설치 파일과 업데이트 메타데이터가 자동으로 업로드된다.

5-5. 업데이트 흐름

자동 업데이트의 동작 과정은 다음과 같다.

사용자가 앱을 실행하면 autoUpdater.checkForUpdatesAndNotify()가 GitHub Releases를 확인한다.
새 버전이 있으면 백그라운드에서 자동 다운로드한다.
다운로드가 완료되면 사용자에게 재시작 여부를 묻는 다이얼로그가 표시된다.
재시작을 선택하면 앱이 종료된 후 새 버전으로 자동 교체된다.

위 사진은 일렉트론으로 회사 내부에서 사용하기 위해 만들었던 프로그램의 업데이트 메뉴이다.

즉, package.json의 version을 올리고 다시 빌드 → publish하기만 하면 기존 사용자들에게 자동으로 업데이트가 전달되는 구조이다.

6. Electron의 장단점

장점

크로스 플랫폼 — 하나의 코드베이스로 Windows, macOS, Linux 앱을 모두 만들 수 있다.
웹 기술 활용 — HTML, CSS, JavaScript를 이미 알고 있다면 별도의 네이티브 언어를 배울 필요가 없다.
풍부한 생태계 — npm의 방대한 패키지를 그대로 사용할 수 있으며, React, Vue 등 프론트엔드 프레임워크와의 결합도 자유롭다.
빠른 프로토타이핑 — 웹 앱을 데스크톱으로 전환하거나, 빠르게 MVP를 만들기에 적합하다.
자동 업데이트 — electron-updater를 통해 자동 업데이트 기능을 비교적 쉽게 구현할 수 있다.

단점

큰 앱 용량 — Chromium과 Node.js를 내장하기 때문에 간단한 앱이라도 최소 150~200MB 수준의 설치 파일이 생성된다.
메모리 사용량 — Chromium 기반이다 보니 네이티브 앱 대비 메모리 소비가 높은 편이다.
느린 시작 속도 — Chromium 엔진을 로드해야 하므로 네이티브 앱보다 콜드 스타트가 느리다. (다만 최신 버전에서는 500ms 이하로 크게 개선되었다.)
보안 주의 — nodeIntegration 활성화, contextIsolation 비활성화 등 잘못된 설정을 하면 보안 취약점이 발생할 수 있으므로 주의가 필요하다.

결론적으로, Electron은 웹 개발자가 빠르게 크로스 플랫폼 데스크톱 앱을 만들고자 할 때 가장 현실적인 선택지이다. 앱 용량이나 메모리가 민감한 경량 도구에는 Tauri 같은 대안도 고려할 수 있지만, 생태계의 성숙도와 레퍼런스 측면에서 Electron은 여전히 강력한 프레임워크이다.

참고)

'개발(DEV) > 개발-기타' 카테고리의 다른 글

[패키지매니저]npm vs yarn vs pnpm: 나에게 맞는 패키지 매니저 선택 가이드 (동작 원리 포함) (0)	2026.04.04
[AI]내 프로젝트에서 AI 호출하기 - 구글 AI 스튜디오에서 API KEY 발급 과정 (0)	2026.04.04
실시간 동시 편집 에디터 만들기 OT방식으로 구현해보기 (0)	2026.04.01
템플릿 엔진 머스테치(Mustache) 란? (0)	2026.03.24
자주 사용하는 깃, 리눅스 명령어 모음 (0)	2026.03.21

ABOUT ME

내가 보려고 만든 창고 내가 보려고 만든 창고

1. Electron이란?

Electron의 동작 원리

2. 개발 환경 세팅

Node.js 설치

코드 에디터

Git 설치

3. 첫 번째 Electron 프로젝트 만들기

3-0. Electron-Vite로 빠르게 만들기

3-1. 프로젝트 초기화

3-2. Electron 설치

3-3. package.json 수정

3-4. main.js 작성 (메인 프로세스)

3-5. preload.js 작성

3-6. index.html 작성

3-7. 실행 확인

4. 앱 빌드 및 설치 파일 생성

4-1. electron-builder 설치

4-2. package.json에 빌드 설정 추가

4-3. 빌드 실행

5. GitHub 연동 자동 업데이트 구현

5-1. electron-updater 설치

5-2. package.json에 publish 설정 추가

5-3. main.js에 자동 업데이트 코드 추가

5-4. GitHub Releases에 배포하기

5-5. 업데이트 흐름

6. Electron의 장단점

장점

단점

'개발(DEV) > 개발-기타' 카테고리의 다른 글

티스토리툴바

ABOUT ME

1. Electron이란?

Electron의 동작 원리

2. 개발 환경 세팅

Node.js 설치

코드 에디터

Git 설치

3. 첫 번째 Electron 프로젝트 만들기

3-0. Electron-Vite로 빠르게 만들기

3-1. 프로젝트 초기화

3-2. Electron 설치

3-3. package.json 수정

3-4. main.js 작성 (메인 프로세스)

3-5. preload.js 작성

3-6. index.html 작성

3-7. 실행 확인

4. 앱 빌드 및 설치 파일 생성

4-1. electron-builder 설치

4-2. package.json에 빌드 설정 추가

4-3. 빌드 실행

5. GitHub 연동 자동 업데이트 구현

5-1. electron-updater 설치

5-2. package.json에 publish 설정 추가

5-3. main.js에 자동 업데이트 코드 추가

5-4. GitHub Releases에 배포하기

5-5. 업데이트 흐름

6. Electron의 장단점

장점

단점

'개발(DEV) > 개발-기타' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바