Dev.log

목차

• 💡 시작하며: 웹 개발자의 영역이 데스크톱으로 확장되다
• 데스크톱 앱 개발의 발전 과정
  • (1) 네이티브 개발 (Native Desktop App)
  • (2) 1세대 크로스 플랫폼 (Java & C++ Qt)
  • (3) 웹 기술 기반 크로스 플랫폼: Electron의 시대
• 더 가볍고 안전하게: Tauri의 등장
  • Tauri의 핵심 작동 원리
• 핵심 개념 비교: Chromium vs OS WebView
• Tauri의 핵심 장점 4가지
• Tauri 도입 시 고려해야 할 트레이드오프 (Trade-offs)
• 주요 데스크톱 프레임워크 한눈에 비교하기
• 실전 데이터 비교: Electron vs Tauri
  • (1) 실행 파일 용량 비교 (macOS ARM64 기준)
  • (2) 메모리 사용량 (RAM)
• ⚠️ 크로스 플랫폼 앱 개발 시 주의사항

💡 시작하며: 웹 개발자의 영역이 데스크톱으로 확장되다

AI 기술이 발전하고 개발 도구가 다변화되면서, 아이디어만 있다면 개발할 수 있는 서비스의 범위가 크게 넓어졌다. 이전에는 웹 서비스 구축에 머물렀던 프론트엔드 개발자들도 이제 아이디어만 있으면 웹 서비스 뿐 아니라 구현하고자 하는 아이디어에 특화된 기술로 개발할 수 있다.

하지만 데스크톱 앱 개발 환경은 오랫동안 높은 진입장벽을 가지고 있었다. 네이티브 방식부터 최근의 경량화 프레임워크인 Tauri까지, 데스크톱 앱 개발 생태계가 어떻게 변화해 왔는지 차근차근 정리해보려고 한다.

---

데스크톱 앱 개발의 발전 과정

(1) 네이티브 개발 (Native Desktop App)

• Windows: C++, C#

• macOS: Objective-C, Swift

• 장점: OS 최적화가 극대화되어 최고 수준의 성능 제공, OS 고유의 네이티브 UI/UX 완벽 구현.

• 단점: OS별로 완전히 개별 개발이 필요하여 개발 비용과 인력이 2~3배 증가, 코드 재사용 불가능.

(2) 1세대 크로스 플랫폼 (Java & C++ Qt)

• 주요 기술: Java Swing, JavaFX, Qt Framework (QML UI)
• 장점: 단 한 번의 코드 작성으로 여러 OS에서 동작하는 크로스 플랫폼 지원.
• 단점: OS 고유 네이티브 UI 느낌과의 이질감, JVM 등 무거운 런타임 환경 탑재로 인한 번들 용량 증가, 높은 학습 난이도.

(3) 웹 기술 기반 크로스 플랫폼: Electron의 시대

Angular, React, Vue 등 프론트엔드 3대장 프레임워크가 부상하면서 **"React/Vue 코드로 데스크톱 앱도 만들 수 있다"**는 개념이 등장했습니다. 바로 Electron의 부상이었습니다.

• Electron의 장점:
  • 기존 웹 개발 인력(HTML, CSS, JS)을 별도 학습 없이 그대로 투입 가능.
  • 빠른 UI 구현 속도 및 거대한 커뮤니티/생태계 (VS Code, Slack, Discord 등).
• Electron의 단점:
  • 모든 앱 내부에 Chromium(웹 브라우저) + Node.js 런타임을 통째로 패키징.
  • 이로 인해 설치 파일 용량이 커지고, 실행 시 메모리(RAM)를 과도하게 점유하는 "무거움" 문제 발생.

---

더 가볍고 안전하게: Tauri의 등장

Tauri(타우리)는 웹 개발 경험은 그대로 유지하면서, Electron의 치명적 단점인 용량과 메모리 점유율을 극적으로 해결하기 위해 탄생한 차세대 경량 데스크톱 프레임워크다.

Tauri의 핵심 작동 원리

1. 웹 프론트엔드 그대로 활용: React, Vue, Svelte, Nuxt 등 기존 웹 프레임워크와 UI 라이브러리를 제한 없이 사용.
2. OS WebView 재사용: 앱 안에 Chromium을 직접 포함하지 않고, 각 OS에 이미 내장되어 있는 WebView를 활용.
3. Rust 기반 백엔드: 강력한 성능과 메모리 안전성을 자랑하는 Rust 언어로 네이티브 OS API 제어 및 시스템 로직 처리.

---

핵심 개념 비교: Chromium vs OS WebView

Tauri가 Electron 대비 극적인 경량화를 이룰 수 있었던 비밀은 바로 "렌더링 엔진을 어디서 가져오는가"에 있다.

구분	Chromium (Electron 방식)	OS WebView (Tauri 방식)
개념	크롬 브라우저의 핵심 렌더링 엔진(Blink + V8)을 앱 내부에 번들링	OS가 기본적으로 제공하는 내장 브라우저 뷰 컴포넌트를 호출하여 사용
OS별 구현체	앱 내부 포함 (Chromium 동일)	Windows: WebView2 (Edge/Chromium)macOS: WKWebView (WebKit)Linux: WebKitGTK
장점	모든 OS에서 100% 동일한 UI 및 CSS/JS 동작 보장	설치 용량 및 메모리 사용량 극적 절감, OS 업데이트 시 자동 보안 패치 적용
단점	설치 파일 용량 수백 MB 이상, 실행 시 프로세스 메모리 다량 점유	OS/엔진 버전별 미세한 CSS/JS 파싱 차이 가능성 (크로스 브라우징 테스트 필요)
비유	모니터를 새로 사서 가방에 짊어지고 다니는 느낌	집에 이미 있는 TV에 HDMI 케이블만 꽂아서 쓰는 느낌

---

Tauri의 핵심 장점 4가지

1. 극도로 작은 번들 크기
   • Chromium을 포함하지 않으므로 번들 용량이 수 MB 수준으로 획기적으로 줄어든다.
2. 낮은 메모리 점유율
   • OS 내장 웹뷰를 재사용하므로 앱 실행 중 RAM 점유율이 낮고, 노트북 배터리 소모가 적다.
3. 강력한 보안 모델
   • 권한 기반(Capability-based) API 접근 제어와 Rust의 Compile-time 메모리 안전성이 결합되어 뛰어난 보안성을 자랑한다.
4. 모바일 지원 확장 (Tauri v2)
   • Tauri v2부터는 데스크톱(Windows/macOS/Linux)뿐만 아니라 Android 및 iOS까지 하나의 코드베이스로 확장 배포가 가능해졌다.

---

Tauri 도입 시 고려해야 할 트레이드오프 (Trade-offs)

Tauri가 항상 만능 정답은 아니다. 프로젝트 성격에 따라 다음 요소를 고려해야 한다.

• 1) Rust 학습 곡선 (Learning Curve):
  • 간단한 UI 웹 앱은 JS만으로 충분하지만, 복잡한 네이티브 OS 기능 및 파일 제어가 필요한 경우 Rust 코드 작성이 필수적이다.
• 2) OS별 WebView 미세 차이:
  • Windows(Chromium 기반 WebView2)와 macOS(WebKit 기반 WKWebView)의 렌더링 차이로 인해, 크로스 플랫폼 테스트가 필수적으로 요구된다.
• 3) 생태계 성숙도:
  • 오랜 기간 검증된 Electron에 비해 레퍼런스, 라이브러리, 디버깅 모듈이 상대적으로 적다. (하지만 커뮤니티와 생태계가 빠르게 성장 중)

---

주요 데스크톱 프레임워크 한눈에 비교하기

항목	Electron	Tauri	Flutter	React Native
데스크톱 지원	Windows, macOS, Linux	Windows, macOS, Linux(v2: iOS, Android)	Windows, macOS, Linux	Win/mac (RN for Win/mac)
UI 렌더링	Chromium 내장	OS WebView	자체 엔진 (Skia/Impeller)	네이티브 UI 컴포넌트
개발 언어	JS / TS	Web UI + Rust	Dart	JS / TS
앱 용량 / 메모리	큼 (100~150MB+)	아주 작음 (수 MB 수준)	중간	중간 ~ 낮음
UI 일관성	매우 좋음	OS별 미세 차이 가능	매우 좋음	대체로 좋음
주요 강점	생태계, 풍부한 레퍼런스	경량화, 고성능, 강력한 보안	뛰어난 UI 품질, 모바일 강점	모바일에서의 데스크톱 확장

---

실전 데이터 비교: Electron vs Tauri

실제 동일한 간단한 Hello World만 작성한 앱 및 빌드 결과를 비교해보면 확연한 차이를 체감할 수 있다.
크로미움을 통해 그린 일렉트론 앱과 대비해 tauri로 만든 앱은 상단바 스타일이 다르다.

(1) 실행 파일 용량 비교 (macOS ARM64 기준)

• Electron App: 234.7 MB
• Tauri App: 8.7 MB
• ➔ Tauri가 약 27배 이상 가볍다!

(2) 메모리 사용량 (RAM)

• Hello World 실행 시점:
  • Tauri 프로세스 합계: 약 66.1 MB
  • Electron 프로세스 합계: 약 96.9 MB
• 핵심 차이: 단순 Hello World 상태에서는 두 프레임워크 모두 최소 구동 프로세스로 인해 수십 MB 수준으로 보이지만 "앱 기능이 복잡해질 때" 진짜 격차가 벌어진다고 한다. Electron은 복잡한 브라우저 엔진 특성상 메모리가 폭주하는 반면, Tauri는 안정적이고 가볍게 메모리 곡선을 억제한다.

---

⚠️ 크로스 플랫폼 앱 개발 시 주의사항

window mac

실제 타우리 기반 앱을 만들면서 마주친 이슈다.
오목을 만들었고 이 앱은 마우스 휠을 내리고 올리면 투명해져서 안 보이게 되는 기능을 탑재했다.
회사에서 몰래하는 게임인 컨셉인 건데 윈도우에서는 투명하게 잘 처리가 되었는데 나중에 알고보니 mac에서는 투명하게 만드려고 하면 하얗게 변해버렸다.
찾아보니 mac에서는 실제로 창 자체는 투명해진 상태지만 그 뒤에 숨어있던 웹뷰 엔진의 기본 하안 바탕이 드러나 버린 것이었다.
수정했지만 이렇듯 크로스 플랫폼 개발 시 각 os별 테스트 필요성을 느꼈다.

---

Rust를 배워서 개발해볼 생각이 있거나 아니면 AI 도움을 받으며 개발할 수도 있으니, 가벼운 웹 기술 기반 데스크톱 앱을 고민하고 있다면, Tauri를 사용해보는 것도 좋겠다.