Tauri 와 Electron — 데스크탑 앱의 두 갈래

HTML/CSS/JS 로 데스크탑 앱을 만든다는 발상은 새롭지 않습니다. 가장 큰 두 갈래가 Electron 과 Tauri 이고 비슷해 보이지만 아키텍처가 꽤 다릅니다.

1. Electron 에 대한 이야기

Electron 은 2013 년 Atom Editor 를 위해 GitHub 가 만든 프레임워크입니다. 처음 이름은 atom-shell, 2016 년 1.0 과 함께 Electron 으로 개명. 2022 년 OpenJS Foundation 에 이전됐습니다. 라이선스는 MIT.

구조는 단순합니다. Chromium + Node.js 를 한 바이너리로 묶어 그 위에서 웹 앱을 실행합니다. 프로세스 모델은 메인 프로세스 (Node) 1 개와 렌더러 프로세스 (Chromium) N 개.

널리 알려진 사용처는 VS Code · Slack · Discord · Notion · Figma 데스크탑 (과거).

2. Tauri 에 대한 이야기

Tauri 는 2020 년 첫 공개된 프레임워크입니다. 1.0 이 2022 년 6 월, 2.0 이 2024 년 10 월. 라이선스는 MIT/Apache-2.0. 회사·재단 형태가 아니고 OpenCollective 후원 + Tauri Programme within Commons Conservancy.

구조는 다릅니다. 시스템에 이미 깔린 WebView + Rust 코어.

Windows: WebView2 (Microsoft Edge 기반)
macOS: WKWebView (Safari 기반)
Linux: WebKitGTK
2.0 부터 Android (System WebView) · iOS (WKWebView)

3. 사실 비교

항목	Electron	Tauri
코어 언어	C++/JS (Chromium + Node)	Rust
UI 엔진	Chromium 번들	OS 의 WebView
백엔드 런타임	Node.js 동봉	Rust 또는 외부 사이드카
번들 크기 (Hello World)	수십~수백 MB	수~십 MB 대
메모리	Chromium 기준	OS WebView 기준 (보통 더 작음)
자동 업데이트	Squirrel 기반	Tauri Updater 플러그인
보안 모델	nodeIntegration · contextIsolation 옵션	capabilities 명시 권한
모바일	없음	2.0+

번들 크기와 메모리는 측정 방법에 따라 달라집니다. 위는 Hello World 기준 일반적 보고치이며 실제 앱은 차이가 줄어들 수 있습니다.

4. Chromium 번들 vs OS WebView

Chromium 번들 (Electron):

모든 OS 에서 같은 렌더 결과. 디버깅이 일관됨.
보안 패치를 앱이 직접 배포해야 합니다.
디스크·메모리 비용이 큽니다.

OS WebView (Tauri):

OS 가 보안 패치를 책임집니다.
디스크·메모리가 작습니다.
OS 별로 렌더 차이가 있습니다 (특히 Linux 의 WebKitGTK 가 가장 다릅니다).

5. Rust 코어와 IPC

Tauri 의 백엔드는 Rust 함수입니다. #[tauri::command] 로 노출하고 JS 가 invoke("name", args) 로 부릅니다. 인자/반환은 serde 가 JSON 으로 직렬화합니다.

#[tauri::command]
fn greet(name: String) -> String { format!("hi, {name}") }

import { invoke } from "@tauri-apps/api/core"
const msg = await invoke<string>("greet", { name: "world" })

6. 권한 모델 (capabilities)

Tauri 2 는 명시적 권한 시스템을 가집니다. src-tauri/capabilities/*.json 에 어떤 윈도우가 어떤 플러그인 명령을 부를 수 있는지 적습니다.

{
  "identifier": "default",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "fs:allow-read-text-file",
    "dialog:allow-open"
  ]
}

Electron 의 nodeIntegration: true 같은 광범위 권한 대신 명령 단위로 허용합니다. 공급망 공격 면에서 자주 거론됩니다.

7. 플러그인 아키텍처

Tauri 의 OS 기능은 대부분 플러그인으로 분리돼 있습니다.

tauri-plugin-fs — 파일 시스템
tauri-plugin-dialog — 파일/메시지 다이얼로그
tauri-plugin-sql — SQLite/MySQL/Postgres
tauri-plugin-store — 키-값 저장
tauri-plugin-notification — 시스템 알림
tauri-plugin-updater — 자동 업데이트
tauri-plugin-os · tauri-plugin-shell 등

각 플러그인은 Rust crate + JS 패키지 짝으로 배포됩니다.

8. 다른 후보들

도구	첫 릴리스	모델	비고
Electron	2013	Chromium 번들 + Node	가장 큰 생태계.
NW.js (구 node-webkit)	2011	Chromium 번들 + Node	Electron 보다 먼저.
Tauri	2020	OS WebView + Rust	작은 바이너리.
Wails	2019	OS WebView + Go	Tauri 의 Go 판. v3 진행 중.
Capacitor	2019, Ionic	iOS/Android WebView	모바일 우선. Electron 어댑터 있음.
Flutter	2017, Google	자체 렌더 엔진 (Skia/Impeller)	웹뷰 안 씀.
.NET MAUI / WinUI	2022	OS 네이티브	C# 진영.

선택은 트레이드오프입니다. 가장 일관된 렌더가 필요하면 Electron, 작은 배포·OS 통합·공급망 보안이 중요하면 Tauri, 모바일이 1 순위면 Capacitor 또는 Tauri 2 가 자주 거론됩니다.

9. Tauri 2 시작

# 사전 요구
# Windows: WebView2 (대부분 윈도우 11 에 기본 포함), Visual Studio Build Tools
# macOS:   xcode-select --install
# Linux:   webkit2gtk, libgtk-3-dev 등 (배포판마다 다름)

pnpm dlx create-tauri-app
cd my-app
pnpm install
pnpm tauri dev

10. 자주 걸리는 자리

첫 빌드가 느림 — Rust 의존성을 처음부터 컴파일합니다. 분 단위가 흔합니다. 이후는 증분 빌드.

Linux WebKitGTK 차이 — CSS · ServiceWorker · IndexedDB 동작이 Chromium · WebKit2 와 다를 때가 있습니다. Linux 가 가장 다르다는 평이 흔합니다.

권한 누락 — capabilities 에 등록하지 않은 플러그인 명령은 호출이 거부됩니다. 에러 메시지를 보고 capabilities JSON 을 갱신합니다.

WebView2 부재 (Windows) — 옛 Windows 10 에는 자동으로 깔려있지 않을 수 있습니다. 인스톨러가 부트스트래퍼를 포함하도록 설정합니다.

macOS notarization — 정식 배포에는 Apple Developer ID 서명·notarization 이 필요합니다. Tauri Action 또는 별도 CI 단계.

Node 의존 라이브러리 — Electron 에서 잘 돌던 Node 네이티브 모듈은 Tauri 의 webview 안에서는 동작하지 않습니다 (Node 가 없습니다). 같은 자리를 Rust 명령 또는 사이드카로 메웁니다.

자동 업데이트 키 — Updater 는 서명된 매니페스트를 요구합니다. 개인키 분실은 업데이트 채널의 끝입니다. 안전한 보관이 첫 단계입니다.

하고픈 말

Tauri 는 첫 빌드의 느림과 Linux WebKit 차이를 빼면 작은 배포 크기와 권한 모델의 명료함이 큰 강점입니다. Electron 의 일관된 렌더가 꼭 필요한 자리가 아니면 Tauri 가 더 어울리는 흐름이 늘었습니다.

i18n-korean-first
material3-tokens

Tauri 공식 사이트 · Tauri 2 문서 · Tauri GitHub · Electron 공식 · Tauri Plugins · Wails · Capacitor 를 참고합니다.

Tauri 와 Electron — 데스크탑 앱의 두 갈래

HTML/CSS/JS 로 데스크탑 앱을 만든다는 발상은 새롭지 않습니다. 가장 큰 두 갈래가 Electron 과 Tauri 이고 비슷해 보이지만 아키텍처가 꽤 다릅니다.

1. Electron 에 대한 이야기

널리 알려진 사용처는 VS Code · Slack · Discord · Notion · Figma 데스크탑 (과거).

2. Tauri 에 대한 이야기

구조는 다릅니다. 시스템에 이미 깔린 WebView + Rust 코어.

Windows: WebView2 (Microsoft Edge 기반)
macOS: WKWebView (Safari 기반)
Linux: WebKitGTK
2.0 부터 Android (System WebView) · iOS (WKWebView)

3. 사실 비교

항목	Electron	Tauri
코어 언어	C++/JS (Chromium + Node)	Rust
UI 엔진	Chromium 번들	OS 의 WebView
백엔드 런타임	Node.js 동봉	Rust 또는 외부 사이드카
번들 크기 (Hello World)	수십~수백 MB	수~십 MB 대
메모리	Chromium 기준	OS WebView 기준 (보통 더 작음)
자동 업데이트	Squirrel 기반	Tauri Updater 플러그인
보안 모델	nodeIntegration · contextIsolation 옵션	capabilities 명시 권한
모바일	없음	2.0+

번들 크기와 메모리는 측정 방법에 따라 달라집니다. 위는 Hello World 기준 일반적 보고치이며 실제 앱은 차이가 줄어들 수 있습니다.

4. Chromium 번들 vs OS WebView

Chromium 번들 (Electron):

모든 OS 에서 같은 렌더 결과. 디버깅이 일관됨.
보안 패치를 앱이 직접 배포해야 합니다.
디스크·메모리 비용이 큽니다.

OS WebView (Tauri):

OS 가 보안 패치를 책임집니다.
디스크·메모리가 작습니다.
OS 별로 렌더 차이가 있습니다 (특히 Linux 의 WebKitGTK 가 가장 다릅니다).

5. Rust 코어와 IPC

Tauri 의 백엔드는 Rust 함수입니다. #[tauri::command] 로 노출하고 JS 가 invoke("name", args) 로 부릅니다. 인자/반환은 serde 가 JSON 으로 직렬화합니다.

#[tauri::command]
fn greet(name: String) -> String { format!("hi, {name}") }

import { invoke } from "@tauri-apps/api/core"
const msg = await invoke<string>("greet", { name: "world" })

6. 권한 모델 (capabilities)

Tauri 2 는 명시적 권한 시스템을 가집니다. src-tauri/capabilities/*.json 에 어떤 윈도우가 어떤 플러그인 명령을 부를 수 있는지 적습니다.

{
  "identifier": "default",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "fs:allow-read-text-file",
    "dialog:allow-open"
  ]
}

Electron 의 nodeIntegration: true 같은 광범위 권한 대신 명령 단위로 허용합니다. 공급망 공격 면에서 자주 거론됩니다.

7. 플러그인 아키텍처

Tauri 의 OS 기능은 대부분 플러그인으로 분리돼 있습니다.

tauri-plugin-fs — 파일 시스템
tauri-plugin-dialog — 파일/메시지 다이얼로그
tauri-plugin-sql — SQLite/MySQL/Postgres
tauri-plugin-store — 키-값 저장
tauri-plugin-notification — 시스템 알림
tauri-plugin-updater — 자동 업데이트
tauri-plugin-os · tauri-plugin-shell 등

각 플러그인은 Rust crate + JS 패키지 짝으로 배포됩니다.

8. 다른 후보들

도구	첫 릴리스	모델	비고
Electron	2013	Chromium 번들 + Node	가장 큰 생태계.
NW.js (구 node-webkit)	2011	Chromium 번들 + Node	Electron 보다 먼저.
Tauri	2020	OS WebView + Rust	작은 바이너리.
Wails	2019	OS WebView + Go	Tauri 의 Go 판. v3 진행 중.
Capacitor	2019, Ionic	iOS/Android WebView	모바일 우선. Electron 어댑터 있음.
Flutter	2017, Google	자체 렌더 엔진 (Skia/Impeller)	웹뷰 안 씀.
.NET MAUI / WinUI	2022	OS 네이티브	C# 진영.

9. Tauri 2 시작

# 사전 요구
# Windows: WebView2 (대부분 윈도우 11 에 기본 포함), Visual Studio Build Tools
# macOS:   xcode-select --install
# Linux:   webkit2gtk, libgtk-3-dev 등 (배포판마다 다름)

pnpm dlx create-tauri-app
cd my-app
pnpm install
pnpm tauri dev

10. 자주 걸리는 자리

첫 빌드가 느림 — Rust 의존성을 처음부터 컴파일합니다. 분 단위가 흔합니다. 이후는 증분 빌드.

Linux WebKitGTK 차이 — CSS · ServiceWorker · IndexedDB 동작이 Chromium · WebKit2 와 다를 때가 있습니다. Linux 가 가장 다르다는 평이 흔합니다.

권한 누락 — capabilities 에 등록하지 않은 플러그인 명령은 호출이 거부됩니다. 에러 메시지를 보고 capabilities JSON 을 갱신합니다.

WebView2 부재 (Windows) — 옛 Windows 10 에는 자동으로 깔려있지 않을 수 있습니다. 인스톨러가 부트스트래퍼를 포함하도록 설정합니다.

macOS notarization — 정식 배포에는 Apple Developer ID 서명·notarization 이 필요합니다. Tauri Action 또는 별도 CI 단계.

자동 업데이트 키 — Updater 는 서명된 매니페스트를 요구합니다. 개인키 분실은 업데이트 채널의 끝입니다. 안전한 보관이 첫 단계입니다.

하고픈 말

i18n-korean-first
material3-tokens

Tauri 공식 사이트 · Tauri 2 문서 · Tauri GitHub · Electron 공식 · Tauri Plugins · Wails · Capacitor 를 참고합니다.

Tauri 와 Electron

Tauri 와 Electron — 데스크탑 앱의 두 갈래

1. Electron 에 대한 이야기

2. Tauri 에 대한 이야기

3. 사실 비교

4. Chromium 번들 vs OS WebView

5. Rust 코어와 IPC

6. 권한 모델 (capabilities)

7. 플러그인 아키텍처

8. 다른 후보들

9. Tauri 2 시작

10. 자주 걸리는 자리

하고픈 말

Next

frontend 카테고리의 다른 글

Tauri 와 Electron

Tauri 와 Electron — 데스크탑 앱의 두 갈래

1. Electron 에 대한 이야기

2. Tauri 에 대한 이야기

3. 사실 비교

4. Chromium 번들 vs OS WebView

5. Rust 코어와 IPC

6. 권한 모델 (capabilities)

7. 플러그인 아키텍처

8. 다른 후보들

9. Tauri 2 시작

10. 자주 걸리는 자리

하고픈 말

Next

frontend 카테고리의 다른 글