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개 인덱스
| # | 파일 | 다루는 주제 | 핵심 키워드 |
|---|---|---|---|
| 01 | What is Electron | Electron의 정확한 정의·구성요소·한 프로세스 트리의 구조 | Chromium · V8 · Node · libuv · electron binary · runtime bundle |
| 02 | History & Ecosystem | Atom 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 동기화 |
| 03 | Web vs Electron vs Native | 브라우저 웹·Electron·네이티브(Cocoa/WPF/Qt) 3축 비교 — 권한·배포·시작비용·OS API·보안 모델 | same-origin · sandbox · code signing · cold start · OS API surface |
| 04 | Mental Model | ”Chromium 렌더러 + Node 메인 + IPC 통로” 멘탈 모델. main.js + preload.js + index.html 최소 예제 | main process · renderer · preload · contextBridge · BrowserWindow |
| 05 | When 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에 어떻게 닿는가”*라는 질문을 디폴트로 던지게 만드는 것이다.