자동 업데이트 — electron-updater와 autoUpdater

"자동 업데이트가 없으면 사용자가 직접 다시 다운로드해야 한다" — 데스크톱 앱의 배포 파이프라인에서 자동 업데이트는 필수입니다.

electron-updater vs autoUpdater

항목	electron-updater	autoUpdater (내장)
설치	electron-builder와 함께	Electron 내장
서버	GitHub/S3/Generic	Squirrel 서버
플랫폼	Windows, macOS, Linux	Windows, macOS
설정 난이도	쉬움	어려움
차등 업데이트	지원	미지원

electron-updater 설정

BASH

npm install electron-updater

JAVASCRIPT

// main.js
const { autoUpdater } = require('electron-updater');
const log = require('electron-log');

// 로깅 설정
autoUpdater.logger = log;
autoUpdater.logger.transports.file.level = 'info';

// 자동 다운로드 비활성화 (사용자 확인 후 다운로드)
autoUpdater.autoDownload = false;
autoUpdater.autoInstallOnAppQuit = true;

function initAutoUpdater() {
  // 업데이트 확인
  autoUpdater.checkForUpdates();

  // 이벤트 핸들러
  autoUpdater.on('checking-for-update', () => {
    log.info('업데이트 확인 중...');
  });

  autoUpdater.on('update-available', (info) => {
    log.info('업데이트 발견:', info.version);
    // 사용자에게 알림
    mainWindow.webContents.send('update:available', {
      version: info.version,
      releaseNotes: info.releaseNotes,
    });
  });

  autoUpdater.on('update-not-available', () => {
    log.info('최신 버전입니다.');
  });

  autoUpdater.on('download-progress', (progress) => {
    mainWindow.webContents.send('update:progress', {
      percent: Math.round(progress.percent),
      transferred: progress.transferred,
      total: progress.total,
      speed: progress.bytesPerSecond,
    });
    // 작업표시줄에 진행률 표시
    mainWindow.setProgressBar(progress.percent / 100);
  });

  autoUpdater.on('update-downloaded', (info) => {
    log.info('업데이트 다운로드 완료:', info.version);
    mainWindow.setProgressBar(-1);
    mainWindow.webContents.send('update:downloaded', {
      version: info.version,
    });
  });

  autoUpdater.on('error', (error) => {
    log.error('업데이트 에러:', error);
    mainWindow.webContents.send('update:error', error.message);
  });
}

// IPC 핸들러
ipcMain.on('update:download', () => {
  autoUpdater.downloadUpdate();
});

ipcMain.on('update:install', () => {
  autoUpdater.quitAndInstall(false, true);
});

electron-builder 업데이트 설정

YAML

# electron-builder.yml
publish:
  - provider: github
    owner: your-username
    repo: your-repo

  # 또는 S3
  # - provider: s3
  #   bucket: your-bucket
  #   region: ap-northeast-2

  # 또는 Generic 서버
  # - provider: generic
  #   url: https://updates.example.com

렌더러 UI

JAVASCRIPT

// renderer.js — 업데이트 UI
window.electronAPI.onUpdateAvailable(({ version, releaseNotes }) => {
  showUpdateBanner(`새 버전 ${version}이 있습니다.`, () => {
    window.electronAPI.downloadUpdate();
  });
});

window.electronAPI.onUpdateProgress(({ percent }) => {
  updateProgressBar(percent);
});

window.electronAPI.onUpdateDownloaded(({ version }) => {
  showRestartPrompt(`${version} 업데이트가 준비되었습니다. 지금 재시작하시겠습니까?`, () => {
    window.electronAPI.installUpdate();
  });
});

업데이트 주기 설정

JAVASCRIPT

// 주기적 업데이트 확인
function scheduleUpdateCheck() {
  // 앱 시작 시 1분 후 첫 확인
  setTimeout(() => {
    autoUpdater.checkForUpdates();
  }, 60 * 1000);

  // 이후 4시간마다 확인
  setInterval(() => {
    autoUpdater.checkForUpdates();
  }, 4 * 60 * 60 * 1000);
}

면접 포인트 정리

electron-updater는 electron-builder와 연동되는 표준 업데이트 도구
GitHub Releases, S3, Generic 서버 등 다양한 호스팅 지원
autoDownload: false로 사용자 확인 후 다운로드하는 UX가 권장
quitAndInstall()로 업데이트 적용 후 앱 재시작
업데이트 진행률을 작업표시줄에 표시하면 UX 향상

자동 업데이트 기본을 다뤘으면, 다음은 차등 업데이트를 알아봅시다.