기본 정보

• 명칭: Electron
• 분류: 데스크톱 애플리케이션 프레임워크
• 개발사: Electron (초기 GitHub 개발)
• 최초 공개: 2013년
• 개발 언어: JavaScript, TypeScript
• 주요 용도: 웹 기술 기반 데스크톱 프로그램 개발
• 관련 주제: #Electron #DesktopApp #Nodejs #JavaScript #CrossPlatform

개요

Electron은 HTML, CSS, JavaScript를 사용하여 Windows, macOS, Linux용 데스크톱 프로그램을 개발할 수 있는 프레임워크이다.

웹사이트를 만드는 기술만으로도 PC 프로그램을 만들 수 있기 때문에 프론트엔드 개발자들이 데스크톱 애플리케이션 개발에 진입하기 쉽다.

대표적으로 다음 프로그램들이 Electron 기반으로 개발되었다.

• Visual Studio Code
• Discord
• Slack
• Postman
• GitHub Desktop

Electron 구조

사용자

↓

Electron

├─ Chromium
├─ Node.js

↓

Desktop Application

↓

Windows / macOS / Linux

핵심 구성 요소

Chromium

웹 브라우저 엔진이다.

HTML

CSS

JavaScript

↓

Chromium

↓

UI 출력

Electron 내부에 Chromium이 포함되어 있다.

Node.js

운영체제 기능 접근을 담당한다.

JavaScript

↓

Node.js

↓

파일

폴더

프로세스

OS 기능

Electron 동작 구조

Renderer Process

↓

웹 화면(UI)

HTML

CSS

JavaScript

----------------

Main Process

↓

OS 제어

파일 접근

창 생성

시스템 제어

기본 프로젝트 생성

npm init
npm install electron

package.json

{
  "name": "my-app",
  "main": "main.js"
}

메인 프로세스

const {

app,

BrowserWindow

} = require("electron");

function createWindow(){

  const win = new BrowserWindow({

    width: 1200,

    height: 800

  });

  win.loadFile("index.html");

}

app.whenReady()

.then(createWindow);

BrowserWindow

Electron 창을 생성한다.

const win = new BrowserWindow({

width:1200,

height:800

});

HTML 로드

win.loadFile(

"index.html"

);

URL 로드

win.loadURL(

"https://example.com"

);

실제 웹사이트를 앱처럼 띄울 수도 있다.

Renderer Process

<h1>Hello Electron</h1>

일반 웹 개발과 동일하다.

IPC 통신

Electron은 Renderer와 Main이 분리되어 있다.

Renderer

↓

IPC

↓

Main

Renderer

ipcRenderer.send(

"save-file"

);

Main

ipcMain.on(

"save-file",

()=>{

}
);

파일 읽기

const fs = require("fs");

const text =

fs.readFileSync(

"test.txt",

"utf8"

);

Node.js 기능을 사용할 수 있다.

폴더 선택

dialog.showOpenDialog();

시스템 알림

new Notification({

title:"알림",

body:"저장 완료"

});

자동 업데이트

대표 패키지

electron-updater

빌드

대표 패키지

electron-builder

설치

npm install

electron-builder

실행 파일 생성

npm run build

결과

MyApp.exe

MyApp.dmg

MyApp.AppImage

Electron + React

React

↓

Electron

↓

Desktop App

가장 많이 사용하는 조합이다.

Electron + Vue

Vue

↓

Electron

↓

Desktop App

Electron + Next.js

Next.js

↓

Electron

↓

Desktop App

최근에는 Next.js와 함께 사용하는 사례도 증가하고 있다.

장점

• 웹 개발 기술 재사용 가능
• 크로스 플랫폼 지원
• 개발 생산성 높음
• 풍부한 생태계
• Node.js 활용 가능
• UI 개발이 쉬움

단점

• 메모리 사용량이 큼
• 실행 파일 크기가 큼
• Chromium 포함으로 용량 증가
• 네이티브 앱보다 성능이 낮을 수 있음

Electron vs PySide6

Electron vs Flutter

대표 활용 분야

• 메신저
• IDE
• CMS 관리자
• AI 데스크톱 앱
• 노트 앱
• 파일 관리 프로그램
• 주식 프로그램
• 업무용 도구

실무 메모

실무에서는 다음과 같은 방식이 권장된다.

• React + Electron 조합 사용
• TypeScript 적용
• IPC 통신 구조 설계
• Node Integration 최소화
• Context Isolation 활성화
• Auto Update 적용
• electron-builder 사용
• 코드 서명(Code Signing) 적용
• SQLite 연동 고려
• 렌더러 보안 강화

Electron과 함께 사용하는 기술

• JavaScript
• TypeScript
• Node.js
• React
• Next.js
• Vue.js
• SQLite
• IPC
• HTML
• CSS

대표 활용 사례

• VS Code
• Discord
• Slack
• Postman
• Notion
• Obsidian
• GitHub Desktop

관련 문서

• Node.js
• React
• TypeScript
• Next.js
• SQLite
• IPC
• HTML
• CSS
• JavaScript
• Desktop Application

출처

• Electron 공식 문서
• Electron API Documentation
• GitHub Electron Project

메모

• Electron + React 템플릿 문서 작성 권장
• Electron 자동 업데이트 구축 가이드 작성 가능
• Electron + SQLite 문서 작성 가능
• Electron 보안 가이드 작성 가능
• Electron과 PySide6 비교 문서 작성 가능
• React, Node.js, SQLite와 상호 링크 추천