Electron은 웹 기술을 이용하여 데스크톱 앱을 만들 수 있는 오픈 소스 프레임워크입니다. Chromium과 Node.js를 합쳐 만들어진 Electron은 기존의 웹 개발 경험을 활용하여 크로스 플랫폼 데스크톱 애플리케이션을 손쉽게 제작할 수 있게 해줍니다.
웹 기술을 활용한 데스크톱 앱 개발
웹 개발자는 Electron을 사용하여 HTML, CSS, JavaScript 등의 웹 기술로 데스크톱 앱을 개발할 수 있습니다. 이는 웹 애플리케이션을 데스크톱 환경에서도 실행할 수 있게 해주는 것으로, 별도의 데스크톱 개발 언어나 도구를 배우지 않고도 데스크톱 앱 개발이 가능합니다.
Electron의 구성요소
Electron 애플리케이션은 크게 두 가지 프로세스로 나뉩니다.
- 메인 프로세스: 앱의 생명 주기를 관리하며, 원하는 수의 렌더러 프로세스를 생성할 수 있습니다.
- 렌더러 프로세스: 웹 페이지를 표시하는 부분으로, Chromium의 인스턴스입니다.
이 두 프로세스는 IPC(Inter-Process Communication)를 통해 통신하며, Electron은 이 두 프로세스 간의 통신을 쉽게 만들어줍니다.
Electron의 주요 특징
크로스 플랫폼 호환성
Electron은 단일 코드베이스로 Windows, macOS, Linux 등 다양한 플랫폼에서 실행 가능한 애플리케이션을 제작할 수 있습니다. 이로써 개발자는 각각의 운영 체제에 맞게 별도로 개발을 할 필요 없이, 한 번의 개발로 여러 플랫폼에서 작동하는 앱을 제공할 수 있게 되었습니다.
웹 기술 활용
Electron은 웹 기술을 그대로 활용하여 데스크톱 앱을 제작할 수 있게 해줍니다. HTML, CSS, JavaScript 등 웹 개발자가 이미 익숙한 기술로 빠르게 앱을 개발할 수 있습니다. 또한, 웹에서 사용하는 프레임워크나 라이브러리, 예를 들면 React나 Vue.js도 Electron과 함께 사용이 가능합니다.
풍부한 네이티브 기능 지원
웹 애플리케이션에서는 접근이 제한된 시스템 리소스나 네이티브 기능들을 Electron을 통해 쉽게 활용할 수 있습니다. 파일 시스템, 메뉴 바, 트레이 아이콘 등의 네이티브 기능에 쉽게 접근하며, Electron의 API를 활용해 더욱 강력한 데스크톱 애플리케이션을 제작할 수 있습니다.
이러한 특징들 덕분에 Electron은 웹 개발자들에게 데스크톱 애플리케이션 개발의 새로운 가능성을 열어주었습니다. 다음 섹션에서는 Electron을 설치하고 간단한 앱을 만들어 보는 과정을 살펴보도록 하겠습니다.
Electron 설치 및 기본 앱 생성하기
Node.js와 npm 설치
Electron은 Node.js 환경에서 동작하므로, Electron을 사용하기 위해서는 Node.js와 npm(Node.js 패키지 관리자)가 필요합니다.
- Node.js 공식 웹사이트(https://nodejs.org/)에서 본인의 운영 체제에 맞는 버전을 다운로드합니다.
- 설치 파일을 실행하여 Node.js와 npm을 설치합니다. 기본 설정 그대로 설치하면 npm도 함께 설치됩니다.
- 설치가 완료된 후 터미널(또는 커맨드 프롬프트)를 열고
node -v및npm -v명령어로 정상적으로 설치되었는지 버전을 확인합니다.
Electron 전역 설치
Electron을 전역으로 설치하면 어디서든 Electron 애플리케이션을 생성하거나 테스트할 수 있습니다.
npm install electron -g위의 명령어를 터미널에 입력하면 Electron을 전역에 설치합니다. 설치가 완료된 후 electron -v로 버전을 확인해봅니다.
새로운 프로젝트 폴더 생성 및 초기화
- 원하는 위치에 프로젝트 폴더를 생성합니다. 예:
mkdir my-electron-app - 생성한 폴더로 이동합니다. 예:
cd my-electron-app npm init명령어를 실행하여 새 Node.js 프로젝트를 초기화합니다. 질문에 따라 프로젝트 정보를 입력하거나 기본값을 사용하려면 엔터 키를 누릅니다.- 초기화가 완료되면
package.json파일이 생성됩니다. 이 파일은 프로젝트의 메타 정보와 사용하는 패키지에 관한 정보를 담고 있습니다.
이제 기본 설정은 완료되었습니다. 다음 단계에서는 Electron으로 첫 애플리케이션을 생성하는 방법에 대해 알아보겠습니다.
Electron 기본 앱 구조
Electron 애플리케이션은 웹 애플리케이션과 다소 유사한 구조를 가지고 있지만, 몇 가지 핵심적인 차이점이 있습니다. 이러한 차이점을 이해하는 것은 Electron 애플리케이션 개발에 있어 핵심적입니다.
‘main.js’와 ‘index.html’의 역할
- ‘main.js’:
- ‘main.js’는 Electron 애플리케이션의 진입점입니다. 이 파일은 앱의 전체 생명 주기를 관리하는 메인 프로세스에서 실행됩니다.
- 애플리케이션의 창을 생성하거나 애플리케이션을 종료하는 등의 작업을 처리합니다.
- Node.js API를 사용하여 OS 레벨의 작업에 접근할 수 있습니다.
- ‘index.html’:
- ‘index.html’는 Electron 애플리케이션의 첫 번째 창에 표시될 웹 페이지입니다.
- 이 파일은 브라우저 창 내에서 실행되는 렌더러 프로세스에서 처리됩니다.
- 일반적인 웹 페이지처럼 HTML, CSS, JavaScript를 사용하여 UI를 구성합니다.
메인 프로세스와 렌더러 프로세스의 차이
- 메인 프로세스:
- Electron 애플리케이션의 주 프로세스입니다. 애플리케이션의 생명 주기, 네이티브 인터페이스, 원격 웹 페이지 등을 관리합니다.
- 애플리케이션에는 한 개의 메인 프로세스만 있으며, ‘main.js’에서 실행됩니다.
- GUI 관련 작업을 직접 수행하는 것이 아니라, 렌더러 프로세스에 이러한 작업을 위임합니다.
- 렌더러 프로세스:
- Electron에서의 각 웹 페이지는 자체 렌더러 프로세스에서 실행됩니다. 이 프로세스는 웹 페이지의 동작과 관련된 모든 작업을 담당합니다.
- Chromium의 멀티 프로세스 아키텍처를 사용하며, 각 렌더러 프로세스는 독립적으로 동작합니다.
- Node.js API에 접근이 가능하므로, 웹 페이지에서도 OS 레벨의 작업을 수행할 수 있습니다.
이렇게 메인 프로세스와 렌더러 프로세스의 역할과 차이를 이해하는 것은 Electron 애플리케이션 개발의 기초가 됩니다. 다음으로, 이 두 프로세스 간의 통신 방법과 애플리케이션의 확장성에 대해 알아볼 수 있습니다.
간단한 앱 제작: 메모장 앱
Electron을 사용하면 네이티브 애플리케이션과 같은 복잡한 기능을 가진 앱을 쉽게 제작할 수 있습니다. 여기서는 간단한 메모장 앱을 예제로 삼아 Electron의 기본적인 기능들을 적용해볼 것입니다.
프로젝트 설정 및 구조 준비
- 새 프로젝트 폴더를 생성하고 이동합니다.
mkdir electron-memo && cd electron-memonpm init명령을 실행하여 새로운 Node.js 프로젝트를 초기화합니다.- 필요한 Electron 패키지를 설치합니다.
npm install electronmain.js와index.html파일을 프로젝트 폴더에 생성합니다.main.js는 앱의 시작점이 될 것이고,index.html은 메모장의 주요 인터페이스가 됩니다.
메인 윈도우 생성 및 로딩
main.js파일을 열어 Electron에서 필요한 모듈을 불러옵니다.
const { app, BrowserWindow } = require('electron');- 앱이 준비되면 새로운 브라우저 윈도우를 생성하는 코드를 추가합니다.
let win;
app.whenReady().then(() => {
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('index.html');
});메뉴 생성 및 이벤트 처리
- Electron에서
Menu모듈을 불러옵니다.
const { Menu } = require('electron');- 메뉴 항목과 해당 이벤트 핸들러를 정의합니다. 이를 통해 파일을 열거나 저장할 수 있는 메뉴 항목을 추가합니다.
- 기본 앱 메뉴를 구성하고, 이를 메인 윈도우에 할당합니다.
파일 열기 및 저장 기능 구현
- Electron에서
dialog모듈과 Node.js의fs모듈을 불러옵니다.
const { dialog } = require('electron');
const fs = require('fs');- ‘파일 열기’와 ‘파일 저장’ 메뉴 항목의 이벤트 핸들러를 작성하여, 해당 기능을 구현합니다.
스타일 및 레이아웃 설정
index.html에 Bootstrap 또는 사용자가 선호하는 CSS 프레임워크를 추가하여, 앱의 스타일과 레이아웃을 구성합니다.- 기본 텍스트 에디팅 기능을 위한 툴바와 버튼, 텍스트 에리어 등의 UI 요소를
index.html에 추가합니다. - 메모장의 기본 스타일을 설정하기 위한 CSS를 추가합니다.
이로써 기본적인 메모장 앱의 기능이 구현되었습니다. 여기서 추가로 고급 기능이나 테마, 확장 기능 등을 추가하여 더욱 풍부한 앱을 만들 수 있습니다.
Electron에서의 IPC 통신: 메인과 렌더러 프로세스 간의 데이터 교환
Electron에서 앱을 구축할 때, 종종 메인 프로세스와 렌더러 프로세스 간에 데이터를 교환해야 할 상황이 발생합니다. 이를 위해 Electron은 IPC (Inter-Process Communication) 메커니즘을 제공합니다. 이 섹션에서는 IPC 통신의 기본적인 개념과 그 활용 방법을 살펴봅니다.
IPC의 기본 개념 이해하기
- 메인 프로세스: Electron 앱의 시작점. 네이티브 GUI 작업을 담당하며, 렌더러 프로세스를 생성 및 관리합니다.
- 렌더러 프로세스: 웹 페이지를 렌더링하는 역할을 합니다. 각 브라우저 윈도우는 별도의 렌더러 프로세스에서 실행됩니다.
- IPC 메인 및 렌더러: Electron에서 제공하는 두 가지 모듈. 이 모듈들은 메인 프로세스와 렌더러 프로세스 간에 메시지를 전송하는 데 사용됩니다.
기본 IPC 통신 설정하기
main.js에서 IPC 메인 모듈을 불러옵니다.
const { ipcMain } = require('electron');- 렌더러 프로세스 (예:
renderer.js)에서 IPC 렌더러 모듈을 불러옵니다.
const { ipcRenderer } = require('electron');IPC를 활용한 실제 데이터 교환 예제
Electron에서 메인 프로세스와 렌더러 프로세스 간의 통신은 IPC (Inter-Process Communication)를 통해 이루어집니다. 이를 통해 두 프로세스는 서로 데이터를 주고 받을 수 있습니다. 이번 섹션에서는 IPC를 활용하여 실제로 데이터를 교환하는 방법을 알아보겠습니다.
1. IPC 설정하기
먼저 Electron의 ipcMain과 ipcRenderer 모듈을 임포트합니다.
// main.js (메인 프로세스)
const { ipcMain } = require('electron');
// renderer.js (렌더러 프로세스)
const { ipcRenderer } = require('electron');2. 렌더러 프로세스에서 메인 프로세스로 데이터 전송하기
렌더러 프로세스에서 사용자로부터 입력받은 텍스트를 메인 프로세스로 전송해봅시다.
// renderer.js
let textData = document.getElementById('memoText').value;
ipcRenderer.send('textData', textData);3. 메인 프로세스에서 데이터 받기
메인 프로세스에서는 ipcMain을 사용하여 데이터를 받습니다.
// main.js
ipcMain.on('textData', (event, textData) => {
console.log(textData); // 사용자로부터 입력받은 텍스트를 출력
// 필요한 로직을 수행 (예: 파일 저장)
});4. 메인 프로세스에서 렌더러 프로세스로 데이터 전송하기
이제 메인 프로세스에서 처리한 결과를 렌더러 프로세스로 전송하여 화면에 표시해보겠습니다.
// main.js
let processedData = "Processed: " + textData;
event.sender.send('processedData', processedData);5. 렌더러 프로세스에서 데이터 받기
렌더러 프로세스에서는 ipcRenderer를 사용하여 메인 프로세스로부터 데이터를 받습니다.
// renderer.js
ipcRenderer.on('processedData', (event, processedData) => {
document.getElementById('result').innerText = processedData; // 화면에 처리된 데이터 표시
});IPC를 활용하면 메인 프로세스와 렌더러 프로세스 간에 쉽게 데이터를 주고받을 수 있습니다. 위의 예제는 간단한 데이터 교환을 보여주며, 실제 애플리케이션에서는 더 복잡한 로직과 데이터 처리가 필요할 수 있습니다.
Electron 앱 배포하기
Electron 앱을 개발했다면, 사용자에게 제공하기 위해 해당 앱을 패키징하고 배포해야 합니다. 이 섹션에서는 Electron 앱을 패키징하고 배포하는 방법을 알아보겠습니다.
1. Electron-Packager 사용하기
Electron-Packager는 Electron 앱을 패키징하기 위한 도구입니다. 이를 사용하면 OS별 실행 파일을 생성할 수 있습니다.
- Electron-Packager 설치하기
npm install electron-packager --save-dev- 패키징 명령 실행하기
electron-packager . MyApp --platform=win32 --arch=x64위의 명령은 MyApp이라는 이름의 Windows 64비트용 실행 파일을 생성합니다.
electron-packager . MyApp --platform=darwin --arch=x64 --icon=path/to/icon.icns이 명령어는 Mac용 실행파일을 생성합니다.
2. Electron-Builder 사용하기
Electron-Builder는 Electron 앱을 패키징하고, 업데이트 서버와 통합하여 앱을 배포할 수 있는 도구입니다.
- Electron-Builder 설치하기
npm install electron-builder --save-devpackage.json파일에 설정 추가하기
{
"name": "MyApp",
"version": "0.1.0",
"build": {
"appId": "com.example.myapp",
"mac": {
"category": "your.app.category.type"
}
}
}- 앱 빌드하기
npm run dist이 명령을 실행하면, Electron-Builder는 ./dist 폴더에 패키징된 앱을 생성합니다.
3. 앱 업데이트 설정하기
Electron 앱은 자동 업데이트 기능을 제공합니다. electron-updater 패키지를 사용하여 이 기능을 구현할 수 있습니다.
electron-updater설치하기
npm install electron-updater --save- 메인 프로세스에 업데이트 로직 추가하기
const { autoUpdater } = require("electron-updater");
app.on('ready', function() {
autoUpdater.checkForUpdatesAndNotify();
});4. 배포 플랫폼 선택하기
다양한 플랫폼에서 Electron 앱을 배포할 수 있습니다. 예를 들면, Windows의 경우 Microsoft Store, macOS의 경우 Mac App Store, Linux의 경우 Snap Store 등에 배포할 수 있습니다.
각 플랫폼별 배포 가이드를 확인하여 앱을 배포하시면 됩니다.
Electron 앱의 배포는 처음에는 복잡해 보일 수 있지만, 적절한 도구와 가이드를 활용하면 간편하게 앱을 사용자에게 제공할 수 있습니다. 위에서 언급한 도구 외에도 다양한 Electron 관련 도구와 서비스가 있으므로, 앱의 요구사항에 맞게 선택하여 활용하시기 바랍니다.