Electron App이란?
Electron은 웹 기술로 데스크톱 애플리케이션을 만들 수 있게 해주는 오픈소스 프레임 워크이다.
한마디로, 웹 앱을 데스크톱 앱처럼 포장할 수 있게 도와주는 도구이다.
1. 탄생 배경과 개요
Electron은 GitHub에서 개발되었으며, 최초에는 Atom 에디터를 만들기 위해 사용되었다.
현재는 Slack, Visual Studio Code, Discord, Notion, JANDI 등 인기 앱들이 Electron 기반으로 만들어진다.
** 정의
HTML, CSS, JavaScript로 만든 웹 애플리케이션을 데스크탑 앱처럼 실행할 수 있도록 해주는 프레임워크
2. 동작 구조
Electron은 크게 두 개의 프로세스로 구성되는데,
1. Main Process
- Node.js 기반
- 앱의 실행 흐름, 창 관리, OS와의 상호작용 등을 담당
- 백엔드 역할 수행
2. Renderer Process
- Chromium 엔진 기반
- 웹 페이지처럼 UI를 렌더링 (HTML, CSS, JS 사용)
- 사용자와 직접 상호작용
-> 이 둘은 IPC (Inter-Process Communication)을 통해 통신한다.
3. Electron App의 장점
| 장점 | 설명 |
| 크로스 플랫폼 지원 | Windows, macOS, Linux 모두 한 번의 개발로 지원 가능 |
| 빠른 개발 | 웹 기술만 알면 Desktop 앱 제작 가능 |
| 강력한 생태계 | Node.js 모듈과 Chromium 기능을 함께 사용 가능 |
| 웹 앱 -> Desktop 전환 쉬움 | 기존 웹 서비스도 포딩 가능 (ex. Slack, Notion) |
4. 단점 및 한계
| 단점 | 설명 |
| 메모리 사용량 많음 | Chromium이 내장되기 때문에 리소스 소비가 큼 |
| 성능 최적화 어려움 | 고성능 UI나 게임에는 부적합 |
| 보안 취약 가능성 | 웹기반 취약점 (Node.js 모듈 악용, XSS, IPC 탈취 등) 가능 |
5. 대표적인 Electron App
- Visual Studio Code : 마이크로소프트의 코드 에디터
- Slack : 협업/채팅 툴
- Notion : 문서 및 협업 공간
- Discord : 커뮤니케이션 앱
- JANDI : 국내 협업툴 - 채팅, 일정, 파일 공유 등 제공
- Troello : 프로젝트 관리 앱
6. Electron 앱의 파일 구조 예시
📁 my-electron-app
├── main.js # 메인 프로세스 (Electron 시작점)
├── index.html # 렌더링할 UI 화면
├── preload.js # 보안용 브리지
├── package.json # 의존성 및 설정
└── node_modules/ # Node.js 모듈
7. 디지털 포렌식 관점에서의 중요성
Electron 앱은 로컬 시스템에 다음과 같은 아티팩트를 남김
| 경로 | 내용 |
| %AppData%\AppName | 실행 로그, 환경 설정 (JSON), 사용자 정보 |
| %AppData%\AppName\Cache | 이미지 캐시, 대화 내 |
| 메모리 | access_token, authId, teamId 등 평문 인증 정보 |
** 특히 메모리 포렌식 시 Electron 기반 앱은:
- 실행 중 access_token이 메모리에 남음
- JWT, 이메일, 채팅 메시지 등이 추출 가능
그래서 Electron 보안 이슈가 발생
-> Node.js 접근 가능성, IPC 탈취