알림 — Notification API로 시스템 알림 보내기

"시스템 알림은 앱이 백그라운드에 있어도 사용자에게 정보를 전달하는 유일한 방법" — 적절한 알림은 UX를 높이고, 과도한 알림은 UX를 망칩니다.

기본 알림 생성

메인 프로세스에서

JAVASCRIPT

const { Notification } = require('electron');

function showNotification(title, body) {
  // 알림이 지원되는지 확인
  if (!Notification.isSupported()) return;

  const notification = new Notification({
    title: title,
    body: body,
    icon: path.join(__dirname, 'assets', 'icon.png'),
    silent: false,      // 알림 소리 재생
  });

  notification.on('click', () => {
    // 알림 클릭 시 앱 창 표시
    mainWindow.show();
    mainWindow.focus();
  });

  notification.on('close', () => {
    console.log('알림이 닫혔습니다');
  });

  notification.show();
}

IPC를 통한 렌더러 연동

JAVASCRIPT

// main.js
ipcMain.handle('notification:show', (_event, options) => {
  const notification = new Notification({
    title: options.title,
    body: options.body,
    icon: options.icon || path.join(__dirname, 'assets', 'icon.png'),
  });

  notification.on('click', () => {
    mainWindow.show();
    if (options.route) {
      mainWindow.webContents.send('navigate', options.route);
    }
  });

  notification.show();
});

// preload.js
contextBridge.exposeInMainWorld('electronAPI', {
  notify: (options) => ipcRenderer.invoke('notification:show', options),
});

// renderer.js
window.electronAPI.notify({
  title: '다운로드 완료',
  body: 'document.pdf 다운로드가 완료되었습니다.',
  route: '/downloads',
});

알림 옵션 상세

JAVASCRIPT

const notification = new Notification({
  title: '새 메시지',
  subtitle: '홍길동',              // macOS 전용
  body: '안녕하세요! 미팅 시간이 변경되었습니다.',
  icon: 'assets/icon.png',
  silent: false,
  hasReply: true,                   // macOS: 답장 입력 가능
  replyPlaceholder: '답장 입력...',
  urgency: 'normal',               // Linux: low, normal, critical
  timeoutType: 'default',          // default 또는 never
  closeButtonText: '닫기',         // macOS: 닫기 버튼 텍스트
  actions: [                        // macOS: 액션 버튼
    { type: 'button', text: '확인' },
    { type: 'button', text: '나중에' },
  ],
});

// macOS 답장 이벤트
notification.on('reply', (_event, reply) => {
  console.log('사용자 답장:', reply);
  sendMessage(reply);
});

// macOS 액션 이벤트
notification.on('action', (_event, index) => {
  if (index === 0) handleConfirm();
  if (index === 1) handleLater();
});

Windows에서의 알림 설정

Windows에서 Electron 알림이 제대로 동작하려면 앱이 시작 메뉴에 등록되어야 합니다.

JAVASCRIPT

// electron-builder 설정에서 shortcutName 지정
// 또는 개발 중에는 app.setAppUserModelId 사용
app.setAppUserModelId('com.myapp.desktop');

알림 빈도 제어

JAVASCRIPT

// 너무 자주 알림을 보내지 않도록 제어
class NotificationThrottler {
  constructor(minInterval = 5000) {
    this.lastNotification = 0;
    this.minInterval = minInterval;
    this.queue = [];
  }

  show(options) {
    const now = Date.now();
    if (now - this.lastNotification < this.minInterval) {
      // 큐에 저장하고 나중에 보내기
      this.queue.push(options);
      return;
    }

    this.lastNotification = now;
    const notification = new Notification(options);
    notification.show();

    // 큐에 쌓인 알림이 있으면 일정 시간 후 처리
    if (this.queue.length > 0) {
      setTimeout(() => {
        const next = this.queue.shift();
        if (next) this.show(next);
      }, this.minInterval);
    }
  }
}

면접 포인트 정리

Notification은 메인 프로세스에서 생성 (렌더러에서도 Web Notification API 사용 가능)
Notification.isSupported()로 지원 여부 확인 필수
Windows는 setAppUserModelId 설정이 필요
알림 클릭 이벤트로 앱 창 활성화 구현
과도한 알림은 사용자 경험을 해치므로 빈도 제어 필요

알림을 구현했으면, 다음은 React와 Electron을 통합하는 방법을 알아봅시다.