⚡ Electron0. Electron의 기초📖 개요

00 — Foundations (챕터 인덱스)

이 챕터가 답하는 질문: “Electron이라는 게 정확히 무엇이고, 왜 등장했고, 왜 그냥 브라우저진짜 네이티브가 아니라 그 사이에 자리를 잡았는가?” 한 줄 답 (Pyramid Top): “Electron은 Chromium 렌더러와 Node.js 런타임을 한 프로세스 트리에 묶고 IPC로 연결한 패키지된 데스크톱 런타임이다 — 웹 기술을 그대로 쓰되 웹의 격리·배포·권한 모델은 다시 쓴다.”


챕터 지도


Why — 왜 기초 챕터가 따로 존재하는가

Electron은 세 단어(“Chromium + Node + IPC”)로 한 줄 요약이 되지만, 이 한 줄을 그냥 외운 상태로 코드에 들어가면 거의 반드시 길을 잃는다. 세 단어 각각이 다른 패러다임을 끌고 오기 때문이다.

단어끌고 오는 패러다임흔한 충돌
Chromium브라우저 보안 모델 (origin·sandbox·CSP)“왜 fetch가 CORS에 걸리지?”
Node서버 런타임 (fs · child_process · npm)“왜 렌더러에서 require('fs')를 막아둔 거지?”
IPC분산 메시지 패싱 (요청·응답 비동기)“왜 한 줄로 못 부르고 invoke/handle을 거쳐?”

세 패러다임이 한 프로세스 트리 안에서 부딪힌다. 이 챕터는 그 충돌을 만나기 전에 어디서 누가 무엇을 하는지의 지도를 먼저 그려준다. 운영 디테일(보안·배포·성능)은 뒷장에서 깊이 다루지만, 그 디테일이 왜 그런 식으로 설계됐는지는 이 챕터에서만 설명된다.

웹 개발자의 직관, 데스크톱 개발자의 직관, Node 개발자의 직관이 모두 부분만 맞는다. 이 챕터는 그 부분의 합집합과 차집합을 만든다.


본문 5개 인덱스

#파일다루는 주제핵심 키워드
01What is ElectronElectron의 정확한 정의·구성요소·한 프로세스 트리의 구조Chromium · V8 · Node · libuv · electron binary · runtime bundle
02History & EcosystemAtom Shell(2013) → Electron(2015) → Microsoft VS Code의 표준화. 대표 앱(VS Code·Slack·Discord·Figma desktop·Notion·Postman 등)Atom Shell · Cheng Zhao · Electron 1.0 · VS Code · Chromium 동기화
03Web vs Electron vs Native브라우저 웹·Electron·네이티브(Cocoa/WPF/Qt) 3축 비교 — 권한·배포·시작비용·OS API·보안 모델same-origin · sandbox · code signing · cold start · OS API surface
04Mental Model”Chromium 렌더러 + Node 메인 + IPC 통로” 멘탈 모델. main.js + preload.js + index.html 최소 예제main process · renderer · preload · contextBridge · BrowserWindow
05When to choose Electron적합한 자리 / 적합하지 않은 자리. PWA·Tauri·Wails·Capacitor 결정 트리PWA · Tauri · Wails · Capacitor · webview vs bundled Chromium

어떻게 읽는가

  • 처음 만나는 사람: 01 → 04 → 03 → 05 → 02 순서. 무엇인지어떻게 생겼는지를 먼저 본 뒤, 비교와 역사로 맥락을 채운다.
  • 이미 웹 개발자: 03만 깊게 — 직관과 어디서 깨지는지가 같이 잡힌다. 그다음 04.
  • 이미 네이티브 개발자: 01 → 03 → 04. 왜 굳이 브라우저를 끼우는가의 합리화가 03에서 잡힌다.
  • 기술 선택 회의 직전: 03 + 05만. 30분 의사결정 패키지.

What-if — 이 챕터의 한계

기초 챕터는 지도다 — 지도만 보고 운전할 수는 없다.

이 챕터로 푸는 문제다음 챕터
”Main과 Renderer에 코드를 어떻게 나누는가?“01-process-model
”BrowserWindow를 어떻게 라이프사이클에 맞춰 관리하는가?“02-window-lifecycle
contextBridge로 정확히 무엇을 노출해야 하는가?“03-ipc-bridge
fs·shell·Tray·Menu를 실무에서 어떻게 다루나?“04-native-integration
”context isolation·sandbox·CSP를 어떻게 같이 켜나?“05-security
”코드 서명·notarization·auto-update는 어떻게 운영하나?“06-packaging-distribution

이 챕터를 끝내고 “이제 더 알 게 없네”라는 느낌이 들면 위험 신호다 — 운영 디테일이 전혀 안 들어와 있다는 뜻이다.


한 단락 요약

기초 챕터는 Electron의 정체성·계보·웹과의 거리·최소 코드 모양·대안과의 위치를 다섯 문서로 펼친다. 한 줄 답(“Chromium + Node + IPC를 묶은 런타임”)이 왜 그렇게 설계됐고 어디서 깨지는지까지 잡히면, 다음 챕터들의 운영 디테일이 맥락을 가진 디테일로 들어온다. 이 챕터의 가치는 답을 외우게 하는 것이 아니라, *“내 코드는 어느 프로세스에 살고, OS에 어떻게 닿는가”*라는 질문을 디폴트로 던지게 만드는 것이다.