Electron: 웹 기술 데스크톱 앱 개발

Electron 개념정리: 웹 기술로 데스크톱 앱 만들기

Electron은 웹 기술(HTML, CSS, JavaScript)을 활용하여 크로스 플랫폼 데스크톱 애플리케이션을 개발할 수 있도록 돕는 프레임워크다. GitHub이 텍스트 편집기 Atom 개발을 위해 만들었으며, 2014년 오픈 소스로 공개된 후 많은 개발자에게 사랑받는 도구가 되었다. 웹 개발 경험이 있다면 누구나 손쉽게 데스크톱 애플리케이션을 만들 수 있다.

1. 일렉트론(Electron)이란?

Electron은 Chromium(웹 페이지 렌더링 엔진)과 Node.js(JavaScript 런타임)를 하나의 런타임으로 통합하여 JavaScript, HTML, CSS만으로 데스크톱 애플리케이션을 구축할 수 있게 해주는 Native 애플리케이션 프레임워크다.

• Native 애플리케이션: 특정 플랫폼(운영체제)이나 디바이스를 위해 개발된 소프트웨어 프로그램. 일반적인 애플리케이션을 의미한다.

2. 일렉트론 특징

크로스 플랫폼 (Cross-Platform)

Electron은 HTML, CSS, JavaScript를 사용하여 Windows, macOS, Linux 등 다양한 운영체제에서 호환되는 데스크톱 애플리케이션 개발을 지원한다. 한 번 작성된 코드로 각 운영체제용으로 패키징하여 배포 가능하다.

오픈 소스 (Open Source)

Electron은 오픈 소스 프레임워크다. Electron 공식 홈페이지(https://electronjs.org/apps)에서 Electron으로 개발된 다양한 오픈 소스 프로젝트를 확인할 수 있다.

웹 기술 (Web Technology)

Node.js 기반 프레임워크로, Node.js 기본 개념만 알아도 데스크톱 애플리케이션을 쉽게 만들 수 있다. 웹 사이트 구축 경험이 있다면 데스크톱 애플리케이션 개발에 빠르게 적응 가능하다.

3. 일렉트론으로 만들어진 애플리케이션

많은 회사들이 Electron을 사용하여 유명한 애플리케이션을 개발했다. 대표적인 예시는 다음과 같다:

• Atom
• Skype
• Visual Studio Code
• Slack
• Discord
• Twitch
• Figma

(이미지 참조: https://electronjs.org/)

4. 일렉트론 구조

Electron 애플리케이션은 크게 Main 프로세스와 Renderer 프로세스로 구성된다.

Main Process

• Node.js 기반으로 동작하며, 모든 Node.js 모듈을 사용 가능하다.
• 애플리케이션의 백엔드 영역을 담당한다.
• package.json 파일의 main 스크립트를 실행하는 프로세스다.
• 웹 페이지를 GUI로 표시하는 역할을 수행한다.
• Electron 애플리케이션당 하나만 존재한다.

Renderer Process

• HTML, CSS, JavaScript로 구성되는 프런트엔드 영역이다.
• Electron은 Chromium을 사용하여 웹 페이지를 렌더링하므로, Chromium의 멀티 프로세스 아키텍처를 따른다.
• Electron 애플리케이션 내의 각 웹 페이지는 독립적인 Renderer 프로세스에서 동작한다.
• 여러 개의 Renderer 프로세스가 존재할 수 있다.

Main Process와 Renderer Process의 차이점

| 구분 | Main Process | Renderer Process |
| :--------------- | :-------------------------------------------- | :-------------------------------------------- |
| 역할 | 애플리케이션 라이프사이클 관리, 네이티브 API 접근, BrowserWindow 생성 및 관리 | 웹 페이지 렌더링 및 사용자 인터페이스 처리, 웹 표준 API 사용 |
| Node.js 모듈 사용 | 가능 | 가능 (단, Electron API를 통한 접근 권장) |
| DOM 접근 | 불가 | 가능 |
| 존재 개수 | 1개 | 여러 개 |

메인 프로세스는 BrowserWindow 클래스를 사용하여 웹 페이지를 생성한다. 각 BrowserWindow 인스턴스는 자체 Renderer 프로세스를 호출하여 웹 페이지를 실행하며, BrowserWindow가 종료되면 해당 Renderer 프로세스도 함께 종료된다.

결론적으로, 메인 프로세스는 모든 웹 페이지와 렌더러 프로세스를 관리하는 관리자 역할을 수행하며, 각 렌더러 프로세스는 서로 독립적으로 동작한다. Electron은 각 프로세스 타입에 따라 사용 가능한 API를 제공한다. 대부분의 API는 메인 프로세스에서만 사용 가능하며, 일부는 렌더러 프로세스에서만, 또 일부는 양쪽 모두에서 사용 가능하다.

프로세스 간 통신 (Inter-Process Communication, IPC)

Electron은 메인 프로세스와 렌더러 프로세스 간 통신을 위해 ipcMain 및 ipcRenderer 모듈, 그리고 remote 모듈을 제공한다.

IPC 모듈

• ipcMain: 메인 프로세스에서 렌더러 프로세스로의 비동기 통신을 담당한다.
  • 수신: ipcMain.on(channel, listener) 함수를 사용한다. 새로운 메시지가 도착하면 listener(event, arg)로 호출된다.
  • 응답: 수신한 비동기 메시지에 응답하기 위해 event.sender.send(channel, [arg])를 호출한다.

• ipcRenderer: 렌더러 프로세스에서 메인 프로세스로의 비동기 통신을 담당한다.
  • 전송: ipcRenderer.send(channel, [arg]) 함수를 사용하여 channel을 통해 메인 프로세스에 비동기 메시지를 보낸다.
  • 수신: ipcRenderer.on(channel, listener) 함수를 사용한다. 새로운 메시지가 도착하면 listener(event, arg)로 호출된다.

Remote 모듈

remote 모듈은 메인 프로세스에서만 사용 가능한 API를 렌더러 프로세스에서 사용할 수 있게 해주는 역할을 한다. 예를 들어, 렌더러 프로세스에서 BrowserWindow를 직접 생성할 수 없는 경우, remote 모듈을 통해 메인 프로세스의 BrowserWindow 객체에 접근하여 생성할 수 있다.

---

더 자세한 Electron 개발 환경 구축 방법은 다음 글을 참고하라:

일렉트론 개발환경 구축하기

---