"데스크톱 앱은 OS와 깊이 통합될수록 자연스럽다" — 기본 브라우저로 링크 열기, 전원 상태 감지, 시스템 테마 연동이 그 예입니다.


shell 모듈

JAVASCRIPT
const { shell } = require('electron');

// 기본 브라우저에서 URL 열기
shell.openExternal('https://example.com');

// 파일을 기본 앱으로 열기
shell.openPath('/Users/user/document.pdf');

// 파일 탐색기에서 파일 위치 열기
shell.showItemInFolder('/Users/user/downloads/file.zip');

// 파일을 휴지통으로 이동
await shell.trashItem('/path/to/file.txt');

// 시스템 비프음
shell.beep();

powerMonitor (전원 상태)

JAVASCRIPT
const { powerMonitor } = require('electron');

// 절전 모드 진입/복귀
powerMonitor.on('suspend', () => {
  console.log('시스템 절전 모드 진입');
  pauseBackgroundTasks();
});

powerMonitor.on('resume', () => {
  console.log('시스템 절전 모드 복귀');
  resumeBackgroundTasks();
  checkForUpdates(); // 복귀 후 업데이트 확인
});

// 화면 잠금/해제
powerMonitor.on('lock-screen', () => {
  console.log('화면 잠김');
});

powerMonitor.on('unlock-screen', () => {
  console.log('화면 해제');
});

// AC/배터리 전환
powerMonitor.on('on-ac', () => {
  console.log('AC 전원 연결');
  enableHighPerformance();
});

powerMonitor.on('on-battery', () => {
  console.log('배터리 모드');
  enablePowerSaving();
});

// 시스템 유휴 상태 확인
const idleTime = powerMonitor.getSystemIdleTime();
console.log(`유휴 시간: ${idleTime}초`);

// 시스템 유휴 상태 감지
const idleState = powerMonitor.getSystemIdleState(300); // 5분
// 'active', 'idle', 'locked', 'unknown'

nativeTheme (시스템 테마)

JAVASCRIPT
const { nativeTheme } = require('electron');

// 현재 시스템 테마 확인
console.log('다크 모드:', nativeTheme.shouldUseDarkColors);
console.log('고대비:', nativeTheme.shouldUseHighContrastColors);

// 테마 변경 감지
nativeTheme.on('updated', () => {
  const isDark = nativeTheme.shouldUseDarkColors;
  // 모든 윈도우에 테마 변경 알림
  BrowserWindow.getAllWindows().forEach(win => {
    win.webContents.send('theme:changed', isDark ? 'dark' : 'light');
  });
});

// 앱의 테마 소스 설정
nativeTheme.themeSource = 'system'; // 'system' | 'light' | 'dark'
JAVASCRIPT
// preload.js
contextBridge.exposeInMainWorld('electronAPI', {
  getTheme: () => ipcRenderer.invoke('theme:get'),
  setTheme: (theme) => ipcRenderer.invoke('theme:set', theme),
  onThemeChanged: (callback) => {
    ipcRenderer.on('theme:changed', (_e, theme) => callback(theme));
  },
});
CSS
/* CSS에서 시스템 테마에 맞추기 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1e1e;
    --fg: #cccccc;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --fg: #333333;
  }
}

systemPreferences

JAVASCRIPT
const { systemPreferences } = require('electron');

// macOS: 접근성 권한 확인
const isTrusted = systemPreferences.isTrustedAccessibilityClient(true);

// macOS: 시스템 색상 가져오기
const accentColor = systemPreferences.getAccentColor();

// macOS: 미디어 접근 권한 요청
const status = await systemPreferences.askForMediaAccess('camera');
// 'granted' | 'denied' | 'restricted' | 'not-determined'

면접 포인트 정리

  • shell.openExternal로 외부 링크를 기본 브라우저에서 열기
  • powerMonitor로 절전/배터리/유휴 상태 감지 가능
  • nativeTheme으로 시스템 다크 모드에 앱을 자동 연동
  • systemPreferences로 macOS 접근성, 미디어 권한 관리
  • OS 통합이 잘 되어 있을수록 네이티브 앱에 가까운 UX 제공

OS 통합을 다뤘으면, 다음은 접근성(Accessibility)을 알아봅시다.

댓글 로딩 중...