Tauri v2 시작해보기 (Electron과 차이점, 초반 세팅)

시작하며

 

AI를 활용한 사이드 프로젝트를 진행하며 다음과 같은 조건을 충족하는 프레임워크를 찾고 있었다:

• 뷰(View) 작성이 가능한 언어 사용
• OpenAI SDK가 제공되는 언어 사용
• API 키를 제3자에게 노출하지 않고 OpenAI API 호출 가능
• 콘텐츠를 웹에 노출하지 않고 로컬에서 임베디드 데이터베이스 또는 파일 시스템 활용

이 조건을 만족하는 프레임워크로 Electron과 Tauri를 알게 되었고, 이 중 Tauri를 선택하게 된 이유와 초기 설정 과정을 공유한다.

---

왜 Tauri인가?

장점:

1. 경량화:
   • Tauri로 빌드한 애플리케이션은 Electron에 비해 실행 파일 크기가 훨씬 작다.
   • Electron은 자체적으로 Chromium과 Node.js를 포함하기 때문에 무겁지만, Tauri는 시스템의 네이티브 웹뷰(WebView)를 활용한다.
2. 성능 최적화:
   • Electron보다 메모리 사용량이 적고 빠르게 실행된다.
   • CPU 및 메모리 리소스를 절약하여 경량 애플리케이션 개발에 적합하다.

단점:

• 아직은 작은 커뮤니티:
  • Electron에 비해 사용자와 개발자 커뮤니티가 작아 정보를 찾기가 어려울 때가 있다.
  • 질문에 대한 답변이나 예제를 찾는 데 시간이 더 걸릴 수 있다.
• 한계가 있는 Webview
  • Electron의 Chromium 에 비하면 Webview는 기능이 제한적이다.
• 불친절한 문서 (V2 버전):
  • V2 문서가 충분히 다듬어지지 않아 초보자가 이해하기 어려운 부분이 많다.
  • API 사용법과 설정 가이드가 간결하지 않아 시행착오를 겪기 쉽다.
• Rust 학습 필요:
  • 백엔드가 Rust 기반이므로, Rust를 처음 사용하는 개발자는 학습 곡선이 있을 수 있다.
  • Rust에 익숙하지 않다면 초기 개발 속도가 느릴 수 있다.

결론:

• 아직 개발 초기 단계라 코어 기능만 있어도됨
• Rust 문법에 익숙해지고 싶었음

---

 

초반 세팅

일단 Tauri를 사용하기 위해서는 Rust, Cargo, node package manager (npm, pnpm, yarn)가 필요하다.

설치 방법은 생략

 

1. 프로젝트 생성

bash, powershell, cargo, npm, yarn, pnpm, deno, bun 등으로도 생성할 수 있다.

참고: https://github.com/tauri-apps/create-tauri-app

*필자는 그냥 bash를 사용

sh <(curl https://create.tauri.app/sh)

 

bash를 실행하면 아래같이 옵션을 선택할 수 있다. 

* 흥미로운 점은 Rust, .NET 으로도 view 개발을 할 수 있는듯 싶다.

* create-tauri-app 버전에 따라서 옵션이 다를 수 있으니 주의 (아마 v4.5.8 or v4.5.7 이었던 것 같음)

? Project name (tauri-app) ›
? Identifier (com.tauri-app.app) ›

? Choose which language to use for your frontend ›
Rust  (cargo)
TypeScript / JavaScript  (pnpm, yarn, npm, bun)
.NET  (dotnet)

? Choose your package manager ›
pnpm
yarn
npm
bun

? Choose your UI template ›
Vanilla
Yew
Leptos
Sycamore

? Choose your UI template ›
Vanilla
Vue
Svelte
React
Solid
Angular
Preact

? Choose your UI flavor ›
TypeScript
JavaScript

 

필자는 Typescript / Javascript -> pnpm -> Vanilla -> React -> Javascript 로 선택했다.

 

2. 초기 세팅

 

앱에서 파일 시스템으로 접근하는 API에 권한 설정이 필요해서 세팅을 해줘야하는데

웹 상에 떠도는 레퍼런스는 보통 V1에 대한 내용이고 Tauri V2에 대한은 거의 전무한데 그 것도 버전에 따라서 달라서 결국 Tauri v2 개발 문서를 봐야했다. 문제는 버전 1보다는 성숙도가 낮아서 다소 알아먹기가 힘드니 주의

 

1. 의존성

우선 보통 Tauri는 api 와 plugin을 사용해서 앱 기능을 쓸 수 있는데 plugin의 경우 front와 Rust 부분에 패키지에다 둘다 추가해야한다.

*plugin에 대한 자세한 사항은 여기에서 참고

 

src-tauri/Cargo.toml

[dependencies]
tauri = { version = "2", features = [] }
tauri-plugin-dialog = "2"
tauri-plugin-fs = "2"

 

package.json

"dependencies": {
  "@tauri-apps/api": "^2",
  "@tauri-apps/plugin-dialog": "^2",
  "@tauri-apps/plugin-fs": "^2.2.0"
}

 

2. 플러그인 초기화

아래 같이 플러그인을 추가했으면 plugin() 함수를 써서 각 플러그인마다 init()을 호출해야한다.

src-tauri/src/lib.rs

pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_dialog::init())
        .plugin(tauri_plugin_fs::init())
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

 

3. 권한 관련 세팅

이 부분이 v1이나 다른 레퍼런스들이랑 많이 달라서 애먹었다.

보통 레퍼런스에서는 tauri.conf.json에서 작성하는 방식이었는데 필자가 사용한 버전은 조금 달라서,

아래와 같이 src-tauri/capabilities/default.json에서 permissions 라는 부분에 추가해줘야했다.

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "Capability for the main window",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "core:window:allow-close",
    "core:window:allow-minimize",
    "core:window:allow-maximize",
    "core:window:allow-unmaximize",
    "core:window:allow-unminimize",
    "core:window:allow-start-dragging",
    "core:window:allow-title",
    "core:window:allow-set-title",
    "core:window:allow-set-maximizable",
    "core:window:allow-set-minimizable",
    "core:window:allow-set-closable",
    "core:window:allow-set-resizable",
    "core:window:allow-set-fullscreen",
    "core:window:allow-set-title-bar-style",
    "fs:default",
    {"identifier": "fs:allow-exists", "allow": [{"path": "**"}]},
    {"identifier": "fs:allow-mkdir", "allow": [{"path": "**"}]},
    "dialog:allow-open"
  ]
}

 

* 주의: production 레벨에서는 path를 일일이 설정하는게 안전할 듯 싶다.

설명:

- core:window 같은 경우는 앱 창을 조절할 수 있는 함수들의 권한을 추가할때 씀. plugin 은 아니고 @tauri-apps/api의 기본 기능과 연관이 있음

- core로 시작하지 않는 나머지는 {plugin}:{permission} 임.

- fs:default, dialog:allow-open 설정 들은 폴더를 선택하는 창을 띄우고 싶을때 필요함

 

3. 마치며

개발은 재밌다. 에러에 쳐맞기 전까지는