[Electron] Vibe하게 일렉트론 시작하기

항상 배워보고 싶었던 프론트엔드 스택 1순위는 electron이다. PWA를 사용하면 PC에서도 어플리케이션처럼 접속 가능하지만, 그보다도 더 근본적으로 "PC 앱"인 것을 만들어 보고 싶었기 때문이다. Cursor IDE를 사용하여 뽀모도로 앱을 개발하면서 일렉트론을 체험해보았다.

---

0️⃣Electron.js

웹 기술(HTML, CSS, Javascript)을 사용하여 크로스 플랫폼 데스크톱 애플리케이션을 개발할 수 있는 오픈 소스 프레임워크

 
일렉트론의 핵심은 Chromium(Google Chrome 오픈 소스)와 Node.js를 하나의 런타임으로 통합했다는 것이다. Chromium은 웹 콘텐츠를 렌더링하고, Node.js는 파일 시스템, 네트워크 등 시스템 리소스에 접근할 수 있는 API를 제공한다. 이 두 기술의 결합으로 웹 개발자는 익숙한 기술을 활용하면서도 데스크톱 애플리케이션의 기능을 구현할 수 있게 되었다.
 
현재 일렉트론은 Notion, Github Desktop, Discord, Figma 등 많은 유명 애플리케이션의 기반 기술로 사용되고 있다. 꾸준히 개발되고 있으며, 현재는 v35.x 버전까지 릴리즈 되었다.
 
https://github.com/electron/electron

GitHub - electron/electron: :electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS

 

데스크톱 앱 개발 기술들

일렉트론 말고도 데스크톱 애플리케이션을 개발할 수 있는 다양한 기술들이 있다.
 
1. 네이티브 개발(Qt, .NET, WPF, Cocoa 등)

• 장점: 뛰어난 성능, 네이티브, UI/UX, 최적화된 리소스 사용
• 단점: 플랫폼별 코드베이스 필요, 학습 곡선 가파름, 개발 속도 느림

2. 자바(Java Swing, JavaFX)

• 장점: Write once, Run anywhere", 풍부한 라이브러리 생태계
• 단점: 네이티브하지 않은 UI, JVM 필요, 큰 용량

3. React Native for Windows/MacOS

• 장점: React 개발자에게 친숙, 네이티브에 가까운 성능
• 단점: 상대적으로 새로운 기술, 생태계가 덜 성숙

4. NW.js(node-webkit)

• 장점: Node.js와 Chromium 통합(일렉트론과 유사)
• 단점: 일렉트론보다 작은 커뮤니티, 업데이트 주기가 느림

5. Tauri

• 장점: Rust 기반으로 가볍고 빠름, 보안 중심 설계
• 단점: 비교적 새로운 프레임워크, Rust 지식 필요

타우리는 앱 크기가 작고 리소스 사용이 적지만, 일렉트론이 더 풍부한 API 제공한다.
 
6. Flutter Desktop

• 장점: 단일 코드베이스로 모바일, 웹, 데스크톱 지원
• 단점: Dart 언어 학습 필요, 데스크톱 지원이 아직 발전 중

7. Electron

• 장점: 낮은 진입 장벽, 크로스 플랫폼 지원, 풍부한 커뮤니티
• 단점: 큰 용량, 상대적으로 느린 속도, 보안성

 
수많은 데스크톱 애플리케이션 개발 기술들이 있지만, 나는 웹 개발이 익숙하고, 또 위 기술들보다는 일렉트론을 더 자주 접했기에(자료가 많아보임) 일렉트론을 공부해보기로 결심했다.

---

1️⃣Electron의 핵심 개념 및 구조

일렉트론은 멀티 프로세스 아키텍처를 가지고 있다. 두 개 프로세스-메인 프로세스와 렌더러 프로세스로 구성된다.
 

메인 프로세스

메인 프로세스는 Node.js 환경에서 실행되는 앱의 핵심이다. package.json의 main 필드에 지정된 Javascript 파일(main.js)이 메인 프로세스의 시작점이 된다. 애플리케이션 당 하나의 메인 프로세스만 존재한다.
 
메인 프로세스의 주요 특징:

시스템 리소스 접근	Node.js API를 통해 파일 시스템, 네트워크, OS 기능 등에 직접 접근할 수 있다.
네이티브 UI 관리	메뉴, 트레이 아이콘, 대화상자 등 OS 네이티브 UI 요소를 생성하고 관리한다.
창 생성	BrowserWindow 인스턴스를 생성하여 앱 창을 만들고 관리한다.
애플리케이션 생명주기 관리	앱의 시작, 종료, 백그라운드 작업 등을 제어한다
렌더러 프로세스 생성 및 관리	각 창에 대한 렌더러 프로세스를 생성하고 통신한다.

 
메인 프로세스는 전체 애플리케이션의 조정자 역할을 하며, 특히 시스템 수준의 작업을 담당한다. 메인 프로세스가 종료되면, 전체 애플리케이션이 종료된다.
 

렌더러 프로세스

렌더러 프로세스는 Chromium 기반으로 실행되며, 각 브라우저 창마다 별도의 프로세스로 생성된다. 즉, 하나의 일렉트론 앱은 여러 개의 렌더러 프로세스를 가질 수 있다.
 
렌더러 프로세스의 주요 특징:

웹 콘텐츠 렌더링	HTML, CSS를 사용해 UI를 렌더링하고, Javascript로 동작을 구현한다.
웹 표준 준수	웹 브라우저와 거의 동일하게 웹 표준 기술을 사용할 수 있다.
격리된 환경	각 렌더러 프로세스는 서로 독립적으로 실행되며, 한 창의 충돌이 다른 창에 영향을 주지 않는다.
제한된 권한	기본적으로 시스템 리소스에 직접 접근할 수 없으며, 메인 프로세스를 통해 요청해야 한다.
웹 보안 모델	Same-Origin Policy 등 웹 보안 정책이 적용된다.

 
렌더러 프로세스는 기본적으로 웹 페이지처럼 동작하지만, 일렉트론 API를 통해 추가 기능을 사용할 수 있다.
 

프로세스 간 상호작용

1. IPC를 통한 통신

프로세스 간 통신(Inter-Process Communication, IPC)은 메인 프로세스와 렌더러 프로세스가 메시지를 주고받는 주요 방법이다. 일렉트론은 두 가지 IPC 모듈을 제공한다.

•  ipcMain: 메인 프로세스에서 사용하며, 렌더러 프로세스의 메시지를 수신하고 응답한다.
• ipcRenderer: 렌더러 프로세스에서 사용하며, 메인 프로세스로 메시지를 보내고 응답을 수신한다.

IPC 통신 패턴:

비동기 단방향 통신	ipcRenderer.send(), ipcMain.on() - 메시지 수신
요청-응답 패턴	ipcRenderer.invoke(), ipcMain.handle()
메인 프로세스에서 렌더러로 메시지 전송	webContents.send(), ipcRenderer.on()

 
 

2. 컨텍스트 브릿지

현대 일렉트론 앱에서는 contextBridge를 사용하여 메인 프로세스의 기능을 렌더러 프로세스에 안전하게 노출한다. 보안을 강화하면서도, 렌더러 프로세스에서 필요한 기능을 사용할 수 있다.
 
왜 contextBridge가 필요할까?
기본적으로 렌더러 프로세스는 보안상의 이유로 Node.js에 접근할 수 없다. 과거에는 nodeIntegration:true 옵션을 사용하여 렌더러 프로세스에서 node.js API를 직접 사용하게 했으나, 이는 보안상 취약점을 초래할 수 있다. 이에, 보안 강화를 위해 Node.js API 접근을 제한하면서도 필요한 기능을 노출하는 방법으로 contextBridge가 사용된다.

➡️ contextBridge는 렌더러 프로세스와 메인 프로세스 간의 안전한 인터페이스를 제공하여 보안성과 기능성을 모두 충족하는 중요한 역할을 한다.

 

주요 모듈: 메인 프로세스 모듈

 
일렉트론은 데스크톱 앱 개발에 필요한 다양한 모듈을 제공한다. 뽀모도로 앱 개발에는 아래 모듈들을 사용했다.
 
app 모듈: 애플리케이션 생명 주기 관리 

app.whenReady(); //앱 초기화가 완료디면 Proimse를 반환(.then을 사용하여 후속 작업 필요)
app.on('window-all-closed'); //모든 창이 닫힐 때 발생하는 이벤트
app.on('activate'); //macOS에서 앱 아이콘을 클릭할 때 발생하는 이벤트
app.quit(); //앱을 완전히 종료
app.getPath(); //OS별 특수 디렉토리 경로 반환(사용자 데이터 폴더 등)

 
BrowserWindow 모듈: 브라우저 창 생성, 관리

new BrowserWindow(options); //새 창 생성, options로 크기, 동작, 모양 등 설정
win.loadFile(); //로컬 HTML 파일 로드
win.loadURL(); //원격 URL 로드
win.webContets(); //창의 콘텐츠 제어(개발자 도구 열기, 새로고침 등)
win.setAlwaysOnTop(); //창을 항상 위에 표시하도록 고정

 
ipcMain 모듈: 렌더러 프로세스와의 통신 담당

ipcMain.on(channel, listner); //비동기 메시지 수신
ipcMain.handle(channel, handler); //Promise 기반 요청 처리 
ipcMain.removeAllListeners(); //특정 채널의 모든 리스너 제거

 
Notification 모듈: 시스템 알림 생성

new Notification(options); //알림 생성
notification.show(); //알림 표시
notification.on('click'); //알림 클릭 이벤트 처리

 

주요 모듈: 렌더러 프로세스 모듈

ipcRenderer 모듈: 메인 프로세스와 통신

ipcRenderer.send(channel, ...args); //비동기 메시지 전송
ipcRenderer.invoke(channel, ...args); //Promise 기반 요청 전송
ipcRenderer.on(channel, listener); //메인 프로세스로부터 특정 채널(channel)의 메시지를 수신하면 실행되는 이벤트 리스너
ipcRenderer.removeAllListeners(); //리스너 제거(파라미터가 없으면 모든 채널의 리스너 제거

 
contextBridge 모듈: 컨텍스트 격리 환경에서 안전하게 API를 노출

contextBridge.exposeInMainWorld(apiKey, api); //렌더러 프로세스에 API 노출

---

2️⃣뽀모도로 앱 개발하기

1단계: 메인 프로세스 

const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("path");
const Store = require("electron-store");

// 데이터 저장소 초기화
const store = new Store();

// 메인 윈도우 객체를 전역 참조로 유지
let mainWindow;

/**
 * 메인 애플리케이션 윈도우를 생성하는 함수
 */
function createWindow() {
  // 브라우저 창 생성
  mainWindow = new BrowserWindow({
    width: 300, // 뽀모도로 타이머를 위해 크기 조정
    height: 450,
    resizable: false, // 크기 고정
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      contextIsolation: true,
      nodeIntegration: false,
    },
  });

  // 인덱스 HTML 파일 로드
  mainWindow.loadFile(path.join(__dirname, "renderer/index.html"));

  // 개발 모드에서 개발자 도구 열기
  if (process.argv.includes("--dev")) {
    mainWindow.webContents.openDevTools();
  }

  // 창이 닫힐 때 발생하는 이벤트
  mainWindow.on("closed", () => {
    mainWindow = null;
  });
}

// Electron이 초기화를 마치고 준비되면 창 생성
app.whenReady().then(() => {
  createWindow();
});

// 모든 창이 닫히면 애플리케이션 종료 (macOS 제외)
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  // macOS에서는 dock 아이콘 클릭 시 창이 없으면 다시 창 생성
  if (mainWindow === null) {
    createWindow();
  }
});

• BrowserWindow 객체를 사용하여 너비 300, 높이 450의 고정 크기 창을 생성했다.
• webPreferences 객체에서 보안 설정을 구성했다.
  • preload: 렌더러 프로세스가 로드되기 전에 실행될 스크립트 경로 지정
  • contextIsolation: 렌더러 프로세스와 Node.js 환경 간의 보안 경계 설정
  • nodeIntegration: 렌더러 프로세스에서 Node.js API의 직접 접근 방지
• app.whenReady(), app.on('window-all-closed'), app.on('activate') 등의 이벤트 리스너를 사용해 애플리케이션 생명 주기 관리 
• electron-store을 사용해 애플리케이션 데이터 저장소 초기화

뽀모도로 타이머에 필요한 창을 생성하고, 플랫폼 무관 일관된 동작을 제공하기 위한 기초 틀을 만들었다.
 
2단계: IPC 통신으로 데이터 주고받기
다음으로, 타이머 설정을 저장하고 불러오는 기능 구현을 위해 IPC 통신을 추가했다.

// 타이머 설정 기본값
const DEFAULT_TIMER_SETTINGS = {
  pomodoro: 25,
  shortBreak: 5,
  longBreak: 15
};

// 타이머 설정 데이터
let timerSettings = store.get("timerSettings", DEFAULT_TIMER_SETTINGS);

// IPC 이벤트 리스너 설정
// 타이머 설정 가져오기
ipcMain.handle("get-timer-settings", () => {
  return timerSettings;
});

// 타이머 설정 업데이트
ipcMain.handle("update-timer-settings", (event, newSettings) => {
  timerSettings = { ...timerSettings, ...newSettings };
  store.set("timerSettings", timerSettings);
  return true;
});

• electron-store을 사용하여 타이머 설정을 영구 저장소에 저장하고 불러온다. 재시작 시 사용자 설정 유지
• ipcMain.hadle() 매서드를 사용하여 Promise 기반의 요청-응답 패턴을 사용한다. 
• 기본 타이머 설정값을  제공하고, 사용자가 변경한 설정을 반영하여 저장한느 패턴을 사용했다.

3단계: 프리로드 스크립트와 보안 모델
일렉트론 앱의 보안을 강화하기 위해 컨텍스트 격리(Context Isolation)와 프리로드 스크립트를 활용했다.

// preload.js
const { contextBridge, ipcRenderer } = require("electron");

// 렌더러 프로세스에 안전하게 API 노출
contextBridge.exposeInMainWorld("electronAPI", {
  // 타이머 설정 관련 API
  getTimerSettings: () => ipcRenderer.invoke("get-timer-settings"),
  updateTimerSettings: (settings) => ipcRenderer.invoke("update-timer-settings", settings),
  
  // 알림 관련 API
  sendNotification: (title, body) => ipcRenderer.invoke("send-notification", { title, body })
});

• contextBridge.exposeInMainWorld 매서드를 사용하여 렌더러 프로세스에 electronAPI  객체를 노출한다.
• 노출된 API는 렌더러 프로세스에서 window.electronAPI로 접근할 수 있다.
• 각 API 메서드는 ipcRenderer.invoke()를 사용하여 메인 프로세스와 통신한다.
• 렌더러 프로세스가 필요한 기능만 사용할 수 있도록 제한하여 보안을 강화한다.

4단계: 데스크톱 알림 구현
집중 시간이 종료되면, 알림이 뜨게 하였다.

// 알림 표시
function showNotification() {
  if (Notification.permission === "granted") {
    const title = timerMode === "pomodoro" ? "작업 시간 완료!" : "휴식 시간 완료!";
    const body = timerMode === "pomodoro"
      ? "잘 하셨습니다! 이제 휴식할 시간입니다."
      : "휴식이 끝났습니다. 다시 작업을 시작하세요.";

    new Notification(title, { body });
  } else if (Notification.permission !== "denied") {
    Notification.requestPermission();
  }
}

• Notification을 사용하여 타이머 완료 시 사용자에게 알림을 표시한다.
• 알림 권한 여부를 확인하고, 권한이 없다면 권한을 요청한다.

결과

 
작업시간, 휴식 시간을 설정할 수 있으며 작업 세션 누적을 표시하도록 UI를 구성했다. 작업, 휴식이 끝나면 윈도우 알림으로 메시지와 알림음을 띄운다.

---

인사이트 & 회고

이중 프로세스 아키텍처의 이해
일렉트론의 이중 프로세스 아키텍처를 직접 경험하며 메인 프로세스와 렌더러 프로세스의 역할과 동작을 이해할 수 있었다. 특히 Cursor을 사용해 기능을 개발하면서 두 프로세스 간의 차이와 상호작용 방식을 빠르게 체감할 수 있었다.
 
처음에는 메인 프로세스와 렌더러 프로세스의 구분, 그리고 IPC 통신 방식이 복잡하게 느껴졌지만, 코드를 디버깅하면서 구조를 익혔다. 메인 프로세스가 OS 자원과 직접 상호작용하고, 렌더러 프로세스가 UI를 담당하는 방식이 보안과 성능 측면에서 가지는 이점을 이해할 수 있었다.
 
IPC 통신 패턴
메인 프로세스와 렌더러 프로세스 간의 통신을 위한 다양한 패턴을 학습했다. ipcMain.handle, ipcRendere.invoke를 활용한 Promise 기반 통신 방식 등, 복잡한 데이터 흐름을 효과적으로 관리하는 방식을 익혔다.
 
아쉬운 점
이번 프로젝트에서는 일렉트론 자체 기능 경험에 집중하기 위해 순수 HTML, CSS, Javascript를 사용했다. 하지만 개발을 진행하면서 UI 컴포넌트 관리와 상태 관리 등 다양한 측면에서 어려움을 겪었다. 특히 타이머 UI, 통계 화면 등을 구현하면서 React와 같은 프레임워크의 부재가 많이 아쉬웠다. 또한 active-win 등, 사용하고자 했던 라이브러리를 온전히 활용하지 못해 더 아쉬움이 크다.
 
향후 계획
먼저, 일렉트론 공식 문서를 통해 기본 개념을 탄탄히 다질 예정이다. 앱을 개선할 때는 활성 창 감지와 같은 네이티브 기능 구현에 집중할 예정이다. active-win 등 다양한 라이브러리를 활용해보려고 한다.
또한 React를 사용하여 보다 체계적인 구조로 앱을 개발하고, 기능 확장과 유지보수가 용이한 방식으로 개선하려고 한다.