Electron은 어떤 문제를 해결하는가
웹 개발자는 이미 많은 화면을 만들 수 있습니다. HTML로 구조를 잡고, CSS로 모양을 만들고, JavaScript로 동작을 붙입니다. React, Vue, Svelte 같은 프런트엔드 도구를 사용하면 복잡한 상태와 화면 전환도 다룰 수 있습니다.
하지만 웹 앱은 기본적으로 브라우저 안에서 실행됩니다. 사용자는 주소를 입력하거나 링크를 눌러 접속합니다. 파일 시스템, 운영체제 메뉴, 트레이 아이콘, 전역 단축키, 자동 업데이트 같은 기능은 브라우저 보안 모델의 제약을 받습니다. 브라우저는 사용자의 컴퓨터를 보호하기 위해 웹 페이지가 로컬 시스템에 직접 접근하지 못하게 막습니다.
Electron은 이 제약을 데스크톱 앱의 방식으로 풀어 가기 위한 도구입니다. 공식 설명처럼 Electron은 Chromium과 Node.js를 함께 사용해 JavaScript를 데스크톱 환경으로 가져옵니다.1 즉, 화면은 웹 기술로 만들고, 운영체제와 가까운 작업은 Node.js와 Electron API로 처리합니다.
이 구조 덕분에 웹 개발자는 완전히 새로운 언어와 UI 프레임워크를 처음부터 배우지 않고도 Windows, macOS, Linux에서 실행되는 앱을 만들 수 있습니다. Electron은 "웹 페이지를 앱처럼 보이게 포장하는 도구"에 그치지 않습니다. Chromium 기반의 렌더링 환경, Node.js 런타임, 운영체제 연동 API, 배포 도구가 함께 움직이는 애플리케이션 실행 환경입니다.
AI 생성 이미지
Chromium과 Node.js가 함께 움직이는 방식
Electron 앱은 크게 두 세계를 연결합니다.
첫 번째는 Chromium입니다. Chromium은 Chrome의 기반이 되는 오픈소스 브라우저 프로젝트입니다. Electron은 앱 안에 Chromium을 포함합니다. 그래서 사용자의 컴퓨터에 어떤 브라우저가 설치되어 있는지와 관계없이, 앱은 비교적 일관된 렌더링 환경에서 HTML, CSS, JavaScript를 실행할 수 있습니다.
두 번째는 Node.js입니다. Node.js는 브라우저 밖에서 JavaScript를 실행하는 런타임입니다. 파일을 읽고 쓰거나, 로컬 프로세스와 통신하거나, 운영체제 정보를 읽는 작업에 사용됩니다. 일반 웹 페이지에서는 보안상 이런 작업을 직접 할 수 없지만, Electron 앱은 Node.js와 Electron API를 통해 데스크톱 앱에 필요한 작업을 수행할 수 있습니다.
다만 중요한 점이 있습니다. Electron 앱의 모든 코드가 마음대로 운영체제에 접근하는 것은 아닙니다. 오히려 현대적인 Electron 앱은 화면을 담당하는 코드와 운영체제에 접근하는 코드를 분리하는 쪽으로 설계합니다.
메인 프로세스: 앱의 시작점입니다. 창을 만들고, 메뉴를 구성하고, 파일 시스템이나 운영체제 API와 가까운 작업을 처리합니다.
렌더러 프로세스: 실제 화면을 그립니다. 웹 앱의 프런트엔드 코드가 주로 이곳에서 실행됩니다.
프리로드 스크립트: 렌더러가 직접 Node.js 기능을 마음대로 쓰지 않도록 막으면서, 필요한 기능만 안전하게 노출하는 통로를 만듭니다.
이 책의 뒤쪽 장에서 이 구조를 자세히 다룹니다. 지금은 Electron이 "웹 화면"과 "데스크톱 기능"을 한 앱 안에서 연결하되, 두 영역의 책임을 나누어 다루는 구조라는 점을 잡으면 충분합니다.
웹 앱, 네이티브 앱, Electron 앱의 차이
Electron을 배우기 전에 먼저 세 가지 앱의 실행 방식을 구분해야 합니다.
웹 앱은 브라우저에서 실행됩니다. 배포는 서버에 새 파일을 올리는 방식으로 이루어집니다. 사용자는 URL로 접근합니다. 업데이트가 빠르고 설치 과정이 거의 없지만, 로컬 파일 시스템이나 운영체제 기능에 접근하는 데 제한이 있습니다. 물론 최신 브라우저도 알림, 카메라, 일부 파일 접근 API를 제공하지만, 데스크톱 앱 수준의 자유도를 항상 보장하지는 않습니다.
네이티브 앱은 각 운영체제의 기술로 작성됩니다. Windows에서는 C#, C++, WinUI 같은 선택지가 있고, macOS에서는 Swift와 AppKit 또는 SwiftUI를 사용할 수 있습니다. 운영체제와 깊게 통합하기 좋고 성능을 세밀하게 다룰 수 있습니다. 대신 여러 운영체제를 지원하려면 플랫폼별 코드와 UI 규칙을 따로 관리해야 하는 경우가 많습니다.
Electron 앱은 중간 지점에 있습니다. 화면은 웹 기술로 만들고, 앱은 데스크톱 프로그램처럼 설치하고 실행합니다. 하나의 코드베이스로 여러 운영체제를 지원할 수 있으며, 파일 시스템, 메뉴, 알림, 클립보드, 트레이, 자동 업데이트 같은 데스크톱 기능을 사용할 수 있습니다. 반면 Chromium과 Node.js 런타임을 앱에 함께 포함하므로 앱 용량과 메모리 사용량이 커질 수 있습니다.
정리하면 Electron은 다음 상황에 잘 맞습니다.
이미 웹 기술로 만든 제품을 데스크톱 앱으로 확장하려는 경우
Windows, macOS, Linux를 하나의 코드베이스로 지원해야 하는 경우
로컬 파일, 메뉴, 단축키, 알림 등 데스크톱 기능이 필요한 경우
빠른 제품 검증과 반복 배포가 중요한 경우
반대로 다음 상황에서는 신중히 검토해야 합니다.
매우 낮은 메모리 사용량이 핵심 요구사항인 경우
그래픽, 오디오, 실시간 처리처럼 네이티브 성능이 중요한 경우
운영체제별 UI 규칙을 깊게 따라야 하는 전문 앱인 경우
Electron은 모든 문제의 답이 아닙니다. 웹 기술의 생산성과 데스크톱 기능 사이에서 균형을 선택하는 도구입니다.
Electron 기반 앱에서 볼 수 있는 장점과 한계
Electron은 이미 많은 실제 제품에서 사용되었습니다. Visual Studio Code는 Electron 기반의 대표적인 개발 도구로 알려져 있으며, Electron 저장소에서도 Electron이 Visual Studio Code와 여러 앱에서 사용된다고 설명합니다.2 Electron 공식 쇼케이스에서도 Slack, Discord, GitHub Desktop, Postman, Notion, Figma 같은 다양한 앱을 확인할 수 있습니다.3
이 앱들에서 Electron의 장점을 확인할 수 있습니다.
첫째, 웹 기술을 제품 전반에 재사용할 수 있습니다. 웹 앱을 가진 팀이라면 기존 UI 지식과 일부 코드를 데스크톱 앱에도 활용할 수 있습니다. 완전히 별도의 네이티브 팀을 구성하지 않아도 데스크톱 경험을 만들 수 있습니다.
둘째, 여러 운영체제에 같은 기능을 비교적 일관되게 제공할 수 있습니다. 기업용 도구, 협업 도구, 개발 도구는 사용자의 운영체제가 다양합니다. Electron은 하나의 앱 구조로 Windows, macOS, Linux를 모두 겨냥할 수 있게 합니다.
셋째, 웹 기반 제품의 업데이트 흐름과 잘 맞습니다. 화면과 상태 관리 구조는 웹 프런트엔드 개발 방식에 가깝고, 데스크톱 기능은 Electron API를 통해 추가할 수 있습니다. 이 조합은 빠른 개선이 필요한 제품에 유리합니다.
하지만 한계도 분명합니다.
Electron 앱은 Chromium을 포함하므로 작은 유틸리티 앱에도 일정한 기본 용량이 필요합니다. 메모리 사용량도 단순한 웹 페이지 하나를 띄우는 경우보다 커질 수 있습니다. 앱 창을 여러 개 열거나, 무거운 프런트엔드 번들을 로드하거나, 백그라운드 작업을 많이 실행하면 체감 성능이 나빠질 수 있습니다.
그래서 Electron 개발에서는 "동작한다"에서 멈추면 안 됩니다. 어떤 코드를 메인 프로세스에 둘지, 렌더러에는 무엇만 노출할지, 큰 파일을 어떻게 처리할지, 창을 언제 만들고 언제 해제할지 계속 판단해야 합니다. 이 책에서 보안과 성능을 별도 장으로 다루는 이유가 여기에 있습니다.
학습 전에 알고 있으면 좋은 것
이 책은 웹 개발 경험이 있는 독자를 기준으로 합니다. 모든 기초를 다시 설명하지는 않지만, 필요한 개념은 Electron 문맥 안에서 다시 짚습니다.
먼저 JavaScript의 기본 문법을 알고 있어야 합니다. const, let, 함수, 모듈 import/export, Promise, async/await는 자주 사용합니다. Electron API는 비동기 작업이 많기 때문에 Promise와 에러 처리에 익숙할수록 흐름을 이해하기 좋습니다.
HTML과 CSS도 필요합니다. Electron의 화면은 결국 브라우저 환경에서 렌더링됩니다. 버튼, 입력 폼, 레이아웃, 스크롤, 반응형 화면 같은 기본 지식이 있어야 렌더러 화면을 구성할 수 있습니다.
Node.js 기초도 알아두어야 합니다. npm으로 패키지를 설치하고, package.json의 scripts를 실행하고, 파일 경로를 다루는 정도는 반복해서 등장합니다. 파일 시스템을 읽고 쓰는 작업, 환경 변수, 빌드 도구와의 연결도 뒤에서 사용합니다.
프런트엔드 프레임워크는 필수는 아닙니다. 이 책의 핵심 예제는 최신 Electron 구조와 JavaScript를 중심으로 설명합니다. 다만 실제 프로젝트에서는 React, Vue, Svelte, Solid 같은 프레임워크를 렌더러에 붙이는 경우가 많습니다. 해당 내용은 필요한 지점에서 함께 언급합니다.
TypeScript도 필수는 아니지만 실무에서는 강력한 선택지입니다. IPC처럼 프로세스 사이를 오가는 데이터가 많아지면 타입 정의가 버그를 줄이는 데 도움이 됩니다. 이 책은 JavaScript를 기본으로 하되, TypeScript로 확장할 때 고려할 점을 함께 설명합니다.
이 책에서 만들 예제 앱
이 책에서는 작은 데스크톱 작업 노트 앱을 단계적으로 완성합니다. 목표는 화려한 화면을 만드는 것이 아니라 Electron 앱의 핵심 구조를 실제 기능으로 연결하는 것입니다.
예제 앱은 다음 기능을 갖게 됩니다.
노트 목록과 편집 화면
로컬 파일 또는 로컬 데이터베이스를 이용한 저장
앱 메뉴와 단축키
시스템 트레이와 알림
안전한 IPC 통신
운영체제별 동작 차이 처리
테스트와 디버깅 흐름
패키징, 코드 서명, 자동 업데이트 준비
초반 장에서는 개발 환경을 만들고 첫 창을 띄웁니다. 이어서 메인 프로세스, 렌더러 프로세스, 프리로드 스크립트가 어떤 책임을 가지는지 나눕니다. 그다음 IPC를 통해 화면에서 요청한 작업을 메인 프로세스가 안전하게 처리하도록 구성합니다.
중반부에서는 실제 데스크톱 앱다운 기능을 붙입니다. 파일을 저장하고, 메뉴와 단축키를 만들고, 트레이 아이콘과 알림을 추가합니다. 이 과정에서 "가능한 API를 호출하는 법"보다 "어디까지 렌더러에 허용할 것인가"를 더 중요하게 봅니다.
후반부에서는 실무 품질을 다룹니다. 보안 설정, 디버깅, 테스트, 성능, 접근성, 국제화, 운영체제별 차이, 패키징과 자동 업데이트까지 이어집니다. Electron 앱은 개발 중에 잘 실행되는 것만으로 완성되지 않습니다. 사용자의 컴퓨터에 설치되고, 업데이트되고, 문제 상황에서도 예측 가능한 방식으로 동작해야 합니다.
첫 장에서 기억할 것
Electron은 웹 기술로 데스크톱 앱을 만들 수 있게 해주는 실행 환경입니다. Chromium이 화면을 렌더링하고, Node.js와 Electron API가 운영체제 기능을 연결합니다.
웹 앱보다 로컬 시스템과 더 깊게 통합할 수 있고, 네이티브 앱보다 웹 개발 경험을 더 많이 재사용할 수 있습니다. 대신 앱 크기, 메모리 사용량, 보안 경계, 프로세스 구조를 신중하게 다뤄야 합니다.
앞으로의 목표는 Electron API를 많이 외우는 것이 아닙니다. 어떤 코드를 어느 프로세스에 둘지, 렌더러와 메인을 어떻게 연결할지, 사용자의 컴퓨터에서 안전하고 예측 가능하게 동작하는 앱을 어떻게 만들지 배우는 것입니다. 이 관점을 잡고 나면 Electron은 웹 개발자가 데스크톱 환경으로 확장할 수 있는 현실적인 도구가 됩니다.
참고
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.