topic★★★★★난이도
Electron — 데스크탑 앱
HTML/CSS/JS로 Windows·macOS·Linux 데스크탑 앱을 만드는 프레임워크. VS Code, Discord가 Electron 기반.
#Electron#데스크탑#크로스플랫폼#앱
왜 배우는가
웹 기술로 데스크탑 앱을 만들 수 있다. 새 언어를 배울 필요 없이 웹 개발 지식만으로 크로스 플랫폼 네이티브 앱을 빌드한다.
Electron은 웹 기술로 데스크탑 앱을 만드는 프레임워크다. Chromium(브라우저 엔진)과 Node.js를 합친 것으로, 웹 페이지를 독립 앱 창에서 실행하면서 파일 시스템, 클립보드 등 OS 기능에 접근할 수 있다. VS Code, Slack, Discord가 모두 Electron 앱이다.
| 용도 | 설명 |
|---|---|
| 생산성 도구 | 메모장, 할 일 관리, 마크다운 에디터 |
| 개발 도구 | VS Code, Postman |
| 채팅 앱 | Slack, Discord |
| 미디어 플레이어 | 음악, 영상 재생기 |
javascript
// npm install electron
// main.js (메인 프로세스)
import { app, BrowserWindow } from "electron";
app.whenReady().then(() => {
const win = new BrowserWindow({ width: 800, height: 600 });
win.loadFile("index.html"); // 웹 페이지를 앱 창에 로드
});
app.on("window-all-closed", () => app.quit());`BrowserWindow`가 앱 창을 만들고, `loadFile()`로 HTML을 표시한다. 메인 프로세스(Node.js)와 렌더러 프로세스(브라우저)로 나뉘며, IPC로 통신한다.
Claude Code 팁: "Electron으로 마크다운 에디터 만들어줘"라고 하면 메인/렌더러 프로세스 구조, 파일 저장, 미리보기까지 포함된 코드를 생성한다.