OS 통합 — shell, powerMonitor, 네이티브 테마
"데스크톱 앱은 OS와 깊이 통합될수록 자연스럽다" — 기본 브라우저로 링크 열기, 전원 상태 감지, 시스템 테마 연동이 그 예입니다.
shell 모듈
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 (전원 상태)
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 (시스템 테마)
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'
// 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에서 시스템 테마에 맞추기 */
@media (prefers-color-scheme: dark) {
:root {
--bg: #1e1e1e;
--fg: #cccccc;
}
}
@media (prefers-color-scheme: light) {
:root {
--bg: #ffffff;
--fg: #333333;
}
}
systemPreferences
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)을 알아봅시다.
댓글 로딩 중...