Ch.2 JavaScript 라이브러리 15선

Electron — 데스크탑 앱 만들기

article

핵심 내용

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 앱의 두 가지 핵심 프로세스는?

key

핵심 용어

생산성 도구

메모장, TODO 앱, 마크다운 에디터 등 유틸리티 앱

내부 업무 도구

회사 전용 데이터 뷰어, 관리 도구를 데스크탑 앱으로 배포

멀티 플랫폼 앱

하나의 코드로 Windows, Mac, Linux 모두에서 동작하는 앱

오프라인 앱

인터넷 없이도 동작하는 로컬 파일 편집기, 변환 도구

check_circle

핵심 정리

  • 1Electron은 HTML/CSS/JS로 데스크탑 앱을 만드는 프레임워크
  • 2BrowserWindow로 창 생성, loadFile()로 HTML 로드, ipcMain/ipcRenderer로 프로세스 간 통신
  • 3VSCode, Discord, Slack 등 유명 앱들이 Electron 기반
  • 4AI 프롬프트에 '메인 프로세스 기능 + UI 구성 + 단축키/메뉴'를 명시하면 정확한 코드 생성

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작