과거의 Desktop App은 각 운영체제에 맞는 네이티브 언어(C/C++, Objective-C, C#, Java 등)를 사용해 개발되었지만, 최근에는 Electron과 같은 웹 기반 프레임워크를 활용해 크로스 플랫폼 애플리케이션을 개발하는 방식이 대세가 되고 있다.
Desktop App 개발 방식의 변천사
Desktop App 개발은 운영체제(OS)의 GUI API에 직접 접근하는 방식에서 출발했다. 윈도우에서는 Win32 API, macOS에서는 Cocoa, Linux에서는 GTK나 Qt를 사용하는 방식이었다. 하지만 이러한 접근은 운영체제마다 다른 API와 UI 라이브러리를 사용해야 하므로, 플랫폼 간 호환성이 매우 낮았다.
반면, Electron은 HTML, CSS, JavaScript로 앱을 만들고 이를 Node.js + Chromium 엔진 위에서 실행함으로써 웹 앱을 데스크톱 앱처럼 실행할 수 있도록 설계된 프레임워크다. 이를 통해 한 번의 개발로 Windows, macOS, Linux 모두에서 동일한 UX를 제공할 수 있게 되었다.
전통 데스크톱 앱과 Electron 기반 앱의 구조 비교
| 항목 | 전통 방식 어플 | Electron 기반 어플 |
|---|---|---|
| 개발 언어 | C/C++, C#, Java 등 | JavaScript (Node.js), HTML, CSS |
| 플랫폼 종속성 | 높음 (OS 별로 따로 개발) | 낮음 (크로스 플랫폼) |
| UI 구성 | OS GUI API 사용 | HTML + CSS |
| 실행 환경 | 운영체제의 네이티브 런타임 | Node.js + Chromium |
| 배포 방식 | 플랫폼 별 바이너리 | 단일 패키지로 묶인 웹 + JS + 런타임 |
예:
- Windows 앱:
.exe - macOS 앱:
.app - Electron 앱: 모든 OS용 바이너리를 자동 생성 가능 (
electron-builder등 사용 시)
Electron 기반 앱의 컴파일 및 실행 원리
Electron 기반 앱은 웹 기술로 작성되지만, 내부적으로는 두 개의 프로세스로 구성된다.
(1) Main Process
- Node.js 런타임에서 실행됨
- OS 기능 접근: 파일 시스템, 메뉴 바, 창 관리 등
main.js또는main.ts가 진입점(entry point)
(2) Renderer Process
- Chromium 엔진에서 실행됨
- 실제 사용자 UI를 그리는 웹 페이지 (HTML + JS)
- React, Vue, Svelte 등 프론트엔드 프레임워크 사용 가능
실행 흐름
electron .혹은npm run start로 앱 실행main.js에서BrowserWindow객체를 생성하여 하나의 창을 띄움index.html파일을 로드하여 화면을 구성- 사용자의 UI 이벤트에 따라
IPC (Inter-Process Communication)를 통해 Main ↔ Renderer 간 메시지 전달
패키징 및 빌드
- 개발 중:
Electron은 로컬 Node.js + Chromium으로 실행 - 배포용 빌드:
electron-builder,electron-forge등으로
Electron의 장점과 한계
Electron은 웹 개발 지식만으로 Desktop App을 만들 수 있고, 한 번의 개발로 여러 운영체제에 배포할 수 있다는 점에서 생산성을 비약적으로 향상시켰다. 하지만 다음과 같은 단점도 있다:
- 메모리 사용량이 크고, 앱 크기가 수백 MB에 이를 수 있음 (Chromium 포함 때문)
- 네이티브 성능이 요구되는 앱에는 부적합
- 보안 설정을 신중히 하지 않으면 Node.js API로 인해 보안 위험 가능성 존재
그러나 Slack, Discord, Visual Studio Code 등 수많은 상용 앱이 Electron을 사용하고 있다는 점에서, 이는 현대 데스크톱 개발의 실용적 표준으로 자리 잡았다고 할 수 있다.