Electron Desktop App으로 웹 앱을 데스크톱 앱으로 만들기

웹 기반 애플리케이션(React + FastAPI)을 개발하다 보면, "이걸 설치형 프로그램으로 만들 수 없을까?"라는 생각이 들 때가 있습니다. 특히 오프라인 사용이 필요하거나, 사용자에게 설치형 프로그램의 편의성을 제공하고 싶을 때 말이죠. 바로 이럴 때 Electron이 강력한 해결책이 됩니다.

 

Electron이 뭔가요?

Electron은 웹 기술(HTML, CSS, JavaScript)로 데스크톱 애플리케이션을 만들 수 있게 해주는 프레임워크입니다.

쉽게 말해, 여러분이 만든 React 앱을 크롬 브라우저에 담아서 독립적인 실행 파일(.exe, .dmg, .AppImage)로 패키징하는 거죠.

유명한 Electron 앱들:

• Visual Studio Code
• Slack
• Discord
• Notion
• Figma

이 앱들 모두 사실 웹 기술로 만들어졌습니다!

 

 

 

왜 Electron을 추천받았을까?

현재 구조가 React(프론트엔드) + FastAPI(백엔드)라면, Electron은 정말 좋은 선택입니다.

장점

1. 기존 코드 재사용

• React 코드를 거의 그대로 사용 가능
• 별도로 네이티브 앱을 다시 만들 필요 없음

2. 크로스 플랫폼

• 한 번 개발하면 Windows, macOS, Linux 모두 지원
• 플랫폼별로 따로 개발할 필요 없음

3. 빠른 개발

• 이미 웹 개발 경험이 있다면 러닝커브가 낮음
• 웹 개발 도구와 디버깅 도구 그대로 사용

4. 풍부한 생태계

• npm 패키지 전부 사용 가능
• 활발한 커뮤니티와 많은 레퍼런스

단점

1. 용량이 큼

• Chromium 브라우저를 내장해서 기본 100MB 이상
• 간단한 앱도 설치 파일이 큼

2. 메모리 사용량

• 브라우저를 실행하는 것과 비슷한 메모리 사용
• 네이티브 앱보다 무거움

3. 성능

• CPU/GPU 집약적인 작업에는 부적합
• 하지만 일반적인 CRUD 앱에는 충분

 

 

React + FastAPI를 Electron으로 만들기

아키텍처 구조

 

 

Electron App
├── Main Process (Node.js)
│   ├── 앱 생명주기 관리
│   ├── 창(Window) 생성
│   └── FastAPI 서버 실행
│
└── Renderer Process (Chromium)
    └── React App 실행

두 가지 방식

방식 1: FastAPI를 별도 프로세스로 실행

Electron의 Main Process에서 FastAPI 서버를 자식 프로세스로 실행하고, React는 http://localhost:8000으로 API 호출

 

 

javascript

// main.js (Electron)
const { spawn } = require('child_process');
const path = require('path');

// FastAPI 서버 실행
const fastapi = spawn('python', [
  path.join(__dirname, 'backend', 'main.py')
]);

// React 앱 로드
mainWindow.loadURL('http://localhost:3000');

장점:

• 기존 구조를 거의 그대로 사용
• 개발할 때와 구조가 동일

단점:

• Python 런타임을 함께 배포해야 함
• 패키징이 복잡해짐

방식 2: FastAPI를 PyInstaller로 실행 파일로 만들기

FastAPI를 독립 실행 파일로 컴파일해서 Electron과 함께 배포

 

 

bash

# FastAPI를 실행 파일로 만들기
pyinstaller --onefile main.py
```

**장점:**
- Python 설치 없이 실행 가능
- 배포가 깔끔함

**단점:**
- 패키징 과정이 필요
- 실행 파일 크기가 커짐

## 실제 구현 흐름

### 1. 프로젝트 구조
```
my-electron-app/
├── electron/
│   ├── main.js          # Electron 메인 프로세스
│   └── preload.js       # 보안을 위한 중간 레이어
├── frontend/            # 기존 React 앱
│   ├── src/
│   └── package.json
├── backend/             # 기존 FastAPI 앱
│   ├── main.py
│   └── requirements.txt
└── package.json         # Electron 설정

2. 개발 단계

 

 

bash

# 1. Electron 설치
npm install electron electron-builder --save-dev

# 2. 개발 모드 실행
npm run dev
# → FastAPI 서버 시작 (localhost:8000)
# → React 개발 서버 시작 (localhost:3000)
# → Electron 앱 실행

3. 빌드 단계

 

 

bash

# 1. React 빌드
cd frontend && npm run build

# 2. FastAPI 패키징
pyinstaller backend/main.py

# 3. Electron 패키징
electron-builder --win --mac --linux

대안: Tauri

비슷한 목적의 더 가벼운 대안으로 Tauri도 있습니다.

Tauri의 특징:

• Chromium 대신 시스템 웹뷰 사용 → 용량 10MB 이하!
• Rust 기반 → 더 빠르고 안전
• 메모리 사용량 적음

단점:

• Electron보다 생태계가 작음
• Rust 학습 필요
• 브라우저 호환성 이슈 가능

추천 방향

여러분의 상황(React + FastAPI)에서는:

1. 프로토타입/MVP 단계: Electron 추천
   • 빠르게 만들 수 있음
   • 기존 코드 재사용 최대화
2. 상용 제품: 사용자 규모와 성능 요구사항에 따라 결정
   • 사용자가 많고 성능이 중요 → Tauri 고려
   • 빠른 개발과 안정성 → Electron
3. 하이브리드 접근:
   • 웹 버전은 그대로 유지
   • Electron은 "설치형 버전"으로 추가 제공

마무리

Electron은 웹 개발자가 데스크톱 앱 세계로 진입하는 가장 쉬운 방법입니다. 특히 이미 React로 프론트엔드를 만들어놨다면, 추가 노력이 크지 않으면서도 설치형 애플리케이션의 장점을 누릴 수 있습니다.

물론 "모든 앱을 Electron으로 만들어야 한다"는 것은 아닙니다. 웹 버전과 데스크톱 버전을 병행하거나, 사용자의 선택권을 제공하는 것도 좋은 전략입니다.

여러분의 프로젝트에 Electron이 적합한지 고민 중이라면, 작은 프로토타입부터 만들어보는 것을 추천드립니다! 🚀