Ch.2 JavaScript 라이브러리 15선
Electron — 데스크탑 앱 만들기
핵심 내용
Electron은 웹 기술로 데스크탑 앱을 만드는 프레임워크입니다
한 줄 요약: HTML, CSS, JavaScript로 Windows/Mac/Linux용 데스크탑 앱을 만드는 프레임워크. 실생활 비유: 웹 페이지를 '앱 껍데기'에 넣어서 설치 파일(.exe)로 만드는 것입니다. 웹 브라우저 하나를 통째로 앱 안에 내장시키는 방식이에요.
놀라운 사실: 지금 쓰고 있는 VSCode, Discord, Slack, Notion — 이 앱들이 전부 Electron으로 만들어졌습니다. 웹 개발만 할 줄 알아도 이런 수준의 데스크탑 앱을 만들 수 있다는 뜻이에요.
웹 개발 실력 하나로 데스크탑 앱을 만듭니다
네이티브 앱 개발: C++, Swift, C# 등 플랫폼마다 다른 언어 학습 필요. Windows/Mac 따로 개발해야 하고, 학습 곡선이 가파름.
Electron: HTML/CSS/JS만 알면 됨. 코드 한 벌로 Windows/Mac/Linux 모두 지원. 웹 개발자가 바로 시작 가능.
npm으로 설치하고 바로 데스크탑 창을 띄워봅니다
mkdir my-app && cd my-app
npm init -y
npm install electron --save-dev// main.js — Electron 메인 프로세스
const { app, BrowserWindow } = require('electron');
app.whenReady().then(() => {
const win = new BrowserWindow({
width: 800,
height: 600,
});
// HTML 파일을 창에 로드
win.loadFile('index.html');
});실행 결과: package.json의 `"main"`을 `"main.js"`로 설정한 뒤 `npx electron .` 실행하면 800x600 크기의 데스크탑 창이 열리고, index.html 내용이 표시됩니다. 일반 웹 페이지가 앱 창 안에서 동작합니다!
핵심 구조: Electron은 두 가지 프로세스로 나뉩니다. • 메인 프로세스 (main.js): 창을 만들고, 파일 시스템에 접근하는 '뒤편' • 렌더러 프로세스 (index.html): 사용자가 보는 화면, 일반 웹 페이지와 동일
AI에게 이렇게 요청하세요
좋은 프롬프트 예시 "Electron으로 메모장 데스크탑 앱 만들어줘. main.js(메인 프로세스) + index.html(UI) 구성으로 하고, Ctrl+S로 파일 저장, Ctrl+O로 파일 열기 기능 넣어줘."
프롬프트 변형 • "메뉴바에 '파일 > 열기/저장/새 파일' 메뉴 추가해줘" • "다크모드/라이트모드 전환 기능 넣어줘" • "트레이 아이콘에 최소화하는 기능도 만들어줘" • "exe 설치 파일로 빌드하는 방법도 알려줘"
// 키보드 단축키 + 파일 대화상자 연동
const { app, BrowserWindow, globalShortcut, dialog } = require('electron');
const fs = require('fs');
let win;
app.whenReady().then(() => {
win = new BrowserWindow({
width: 800, height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
win.loadFile('index.html');
// Ctrl+S → 파일 저장 대화상자
globalShortcut.register('CommandOrControl+S', async () => {
const { filePath } = await dialog.showSaveDialog(win);
if (filePath) {
win.webContents.send('save-file', filePath);
}
});
});간단한 메모장 데스크탑 앱 프로젝트
// main.js — 메모장 메인 프로세스
const { app, BrowserWindow, ipcMain, dialog, Menu } = require('electron');
const fs = require('fs');
let win;
app.whenReady().then(() => {
win = new BrowserWindow({
width: 700, height: 500,
title: '미니 메모장',
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
win.loadFile('index.html');
// Ctrl+S: 저장
ipcMain.handle('save', async (e, text) => {
const { filePath } = await dialog.showSaveDialog(win, {
filters: [{ name: 'Text', extensions: ['txt'] }],
});
if (filePath) {
fs.writeFileSync(filePath, text, 'utf-8');
return filePath;
}
});
// Ctrl+O: 열기
ipcMain.handle('open', async () => {
const { filePaths } = await dialog.showOpenDialog(win, {
filters: [{ name: 'Text', extensions: ['txt'] }],
});
if (filePaths[0]) {
return fs.readFileSync(filePaths[0], 'utf-8');
}
});
});실행 방법: package.json에 `"main": "main.js"`와 `"scripts": { "start": "electron ." }`를 추가한 뒤 `npm start` 실행. 메모장 창이 열리고, 텍스트를 입력한 뒤 Ctrl+S로 .txt 파일 저장, Ctrl+O로 파일 열기가 가능합니다.
배포하기: `npm install electron-builder --save-dev` 후 `npx electron-builder` 실행하면 .exe(Windows) 또는 .dmg(Mac) 설치 파일이 생성됩니다. 다른 사람에게 보내서 설치하게 할 수 있어요!
Electron 앱의 두 가지 핵심 프로세스는?
핵심 용어
생산성 도구
메모장, TODO 앱, 마크다운 에디터 등 유틸리티 앱
내부 업무 도구
회사 전용 데이터 뷰어, 관리 도구를 데스크탑 앱으로 배포
멀티 플랫폼 앱
하나의 코드로 Windows, Mac, Linux 모두에서 동작하는 앱
오프라인 앱
인터넷 없이도 동작하는 로컬 파일 편집기, 변환 도구
핵심 정리
- 1Electron은 HTML/CSS/JS로 데스크탑 앱을 만드는 프레임워크
- 2BrowserWindow로 창 생성, loadFile()로 HTML 로드, ipcMain/ipcRenderer로 프로세스 간 통신
- 3VSCode, Discord, Slack 등 유명 앱들이 Electron 기반
- 4AI 프롬프트에 '메인 프로세스 기능 + UI 구성 + 단축키/메뉴'를 명시하면 정확한 코드 생성
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작