Skip to content

Tauri #

Find similar titles

25회 업데이트 됨.

Edit

You are seeing an old version of the page. Go to latest version

Structured data

Category
Programming

Tauri란? #

Tauri는 웹을 기반으로 Desktop Application을 빌드할 수 있는 툴킷이며, 거의 모든 프론트엔드 프레임워크와 호환된다는 것이 큰 장점이다. 백엔드 언어는 Rust기반이며 CLI(Command line interface)은 Node.js가 사용되었다. 웹 기반 데스크탑 앱을 개발한다는 점에서 비슷한 프레임워크인 Electron과 유사한 점이 많고 그만큼 장단점이 확연하게 갈린다. Tauri에 대해 자세하게 설명하기 전 간단하게 Electron에 대해 알아보자.

Electron이란? #

Electron은 크로미움과 Node.js에 기초하여 HTML, CSS, JavaScript를 이용하여 웹앱을 제작하듯 데스크탑 기반의 앱을 제작할 수 있는 프레임워크이다. Cheng Zhao가 개발한 오픈소스 프레임워크로 현재는 깃허브에 의해 개발이 계속 진행 중이다. 2013년에 최초 출시한 만큼 역사가 길며, Electron을 사용하여 개발된 앱은 Discord, GitHub, Facebook Messenger, MongoDB, Notion, Skype, Visual Studio Code 등으로 일반 사용자뿐만 아니라 개발자도 자주 사용하는 앱도 보이니 Electron의 역사를 온몸으로 느낄 수 있다. Electron은 개발자가 작성한 한 코드로 Linux, Mac, Window를 모두 빌드할 수 있다는 점에서 굉장한 이점을 가지고 있지만, 그에 상응하는 단점도 많이 가지고 있다. 자세한 내용은 밑에서 Tauri와 비교하며 기술해보겠다.

Tauri vs Electron #

우선 역사가 긴 Electron에 대해 먼저 다루어보자.

Electron 장점 #

  1. OS에 제약받지 않고 한번 작성된 코드로 크로스 플랫폼(Linux, Mac, Window) 애플리케이션을 빌드할 수 있도록 도와준다.
  2. 자바스크립트를 사용하기 때문에 웹 기술을 사용할 수 있고, 그렇다 보니 웹 개발자도 데스크톱 애플리케이션을 만들 때 새로운 언어를 익힐 필요 없이 개발할 수 있다는 점에서 진입 장벽이 낮으며, 그만큼 개발 속도가 빠르다는 장점을 가지고 있다.
  3. NPM 레지스트리에 등록된 대부분의 모듈을 이용할 수 있으며 Node.js를 통해 파일 시스템에 접근 및 네트워크 리소스를 제약 없이 사용할 수 있다.
  4. Webview에서 Node.js에 대한 접근 권한을 관리할 수 있고, Webview 페이지 내에 Require나 Process와 같은 Node.js API를 직접 사용할 수 있다. 이를 통해 Webview 페이지 내부에서 로우레벨 리소스로 접근이 가능해 고급스러운 네이티브 데스크톱 애플리케이션을 만들 수 있다.
  5. 역사가 길고 많은 사람이 사용하다 보니 커뮤니티 및 오픈소스가 방대하다.

Electron 단점 #

  1. 설치 파일 용량이 크다. 데스크톱 애플리케이션 UI를 렌더링하기 위해 번들로 제공되는 크로미움과 구동에 필요한 여러 NPM 모듈들도 함께 패키징 되어 있어 간단한 애플리케이션을 개발한다고 해도 기본적으로 100MB이상은 차지한다.
  2. 시스템 리소스 및 RAM을 많이 차지하다 보니 애플리케이션 자체가 무거워 PC사양에 따라 UI가 느려질 수 있으며, 오직 하나의 플랫폼을 위해 특별한 네이티브 데스크탑 애플리케이션을 개발할 때는 적합하지 않다. (크로스 플랫폼의 역효과)
  3. Node.js를 통합으로 웹 기반 데스크탑 애플리케이션을 만들다 보니 보안에 취약하다. 사용자가 앱 소스 코드를 디컴파일해서 볼 수 있으며, 그에 따른 여러 공격을 대비해야 한다.
  4. 크로스 플랫폼을 지원하지만 하나의 플랫폼에서 타 플랫폼을 위한 애플리케이션을 빌드할 수 없다. 예전에는 가능했으나 현재는 일반적인 방법으론 불가능하다. 그렇다 보니 결국엔 여러 환경의 OS가 필요하다. 가상 머신으로도 대체가 가능하지만 결국 각 OS에서 필요한 최소한의 세팅 역시 해주어야 하기 때문에 번거로운 작업이 될 수밖에 없다.

    이렇게 장점도 많지만, 그에 따른 단점도 많아 개발자와 사용자들에게 다양한 찬사와 증오를 동시에 받는 프레임워크라고 한다. 그럼 이제 Tauri에 다루어보자.

Tauri 장점 #

  1. 거의 모든 프론트엔드 프레임워크들간 호환이 가능하며, 기본적인 스택인 HTML/CSS/JavasScript부터 Next.js, SvelteKit, Vite를 통해 더욱 쉽고 빠르게 사용이 가능하다. (기존 프로젝트에도 연동하여 사용이 가능하다.)
  2. Tauri는 Webview를 자체 개발한 WRY를 사용함으로써 런타임 퍼포먼스에서 상당한 이점을 가져다준다. 또한 인스톨러 2.5MB, 총설치 용량 3.64MB라는 가벼운 크기가 장점이다.
  3. CLI만 설치하면 핫 리로딩, 번들링, 앱 생성 등을 바로 사용이 가능하다.
  4. Rust언어를 기반으로 구동이 되기 때문에 Rust의 도구들을 직접적으로 사용할 수 있으며, 웹 기반 앱이라는 점이 가져다주는 취약점을 대부분 상쇄시켜준다.
  5. 내장된 Updater를 통해 자동으로 앱을 업데이트할 수 있다.

Tauri 단점 #

  1. 기능을 심화해 사용하기 위해선 Rust 언어에 대한 이해도가 강제된다. 하지만 러스트는 여러 방면에서 장점이 많아 많은 기업이 Rust로 프로젝트를 진행 및 변경 중이라는 점, 점유율은 C++에 비하면 밀리지만 많은 개발자들이 선호하고 만족하는 언어라는 점에서 Rust 언어를 이해하는 것에 있어서는 큰 단점은 되지 않을 것으로 생각된다. 추후 어플리케이션의 백엔드를 Rust뿐만 아니라 Python, C++, Deno도 지원할 예정이라고 하니 사라질 단점이기도 하다.
  2. Tauri는 2019년 12월 Pre-Alpha로 처음 출시되었고 2022년 6월에 정식 버전이 출시되었다. 그렇다 보니 커뮤니티가 상대적으로 작으며, 국내에선 정보를 많이 다루고 있지 않은 편이다. 공식 사이트에선 Blog, GitHub, Discord 등에 방법으로 소통하고 있으며, 그 중에서도 Discord가 가장 활발하게 활성화되어 있다.

Hello World #

장단점의 경우 확실하게 갈리는 부분들이 많았다. 그럼 이번엔 좀 더 상세하게 비교를 해보자.

비교 대상 Tauri Electron
실행 시간 0.427/s 0.505/s
번들 크기 1.8MB 127.47MB
메모리 사용량 311MB 469MB
스레드 수 42 65
시스템 호출 수 24286 30936
램 사용량 80MB 120MB
(리눅스의 경우 500MB이상으로 큰 차이가 발생)
앱 백엔드 Rust Node.js 런타임
보안 Rust 보안 기능들 + 고유한 보안 기능들을 통해 안전 사용자가 앱 소스코드를 디컴파일 할 수 있기 때문에 취약
자동 업데이트 내장 Updater 보유 electron-updater 패키지가 필요
커뮤니티 국내엔 정보가 없는 수준, 해외에서도 여전히 작은 규모 수많은 오픈소스 및 Quick-starter 제공, 방대한 커뮤니티를 통해 이슈 및 샘플소스를 볼 수 있어 개발 시간을 크게 단축할 수 있음

기준은 hello_world(가장 최소화했을 때를 기준)를 출력할 때의 결과이다. 성능 관련해서는 Tauri가 우세한 부분을 보여주지만 그렇다고 해서 무조건 Tauri가 좋다는 것은 잘못된 판단이라고 생각한다. 이러니저러니 해도 결국 선택은 개발자 본인이다. 퍼포먼스에서 조금 손해를 보더라도 조금 더 stable하게 개발 하고 싶으면 Electron이 좀 더 사용하기 편할 것이고, 개발하기엔 조금 번거로울지라도 성능, 보안, 편의성을 가져가며 개발하고자 한다면 Tauri가 좀 더 나을 것이다. 프로젝트 성격에 맞춰 가장 최적화된 프레임워크를 사용하는 것도 하나의 능력이라고 생각한다.

필자는 Electron과 React를 이용하여 앱을 배포해본 경험도 있고, Tauri의 Vite 스택을 이용하여 앱을 배포해본 경험이 있다. Rust에 대한 숙련도가 부족하여 개발 시간이 길어지기도 했지만, 배포된 시기부터는 Tauri App이 안정적이고 가볍고 빨랐다. 필자는 이런 경험을 통해 사용자가 특정되며, 규모가 크고 복잡한 프로젝트라면 Electron, 규모와 상관없이 사용자가 특정되지 않아 보안이 중요할 경우 Tauri를 사용할 것 같다.

Tauri 사전 준비 #

Tauri 공식 사이트 (https://tauri.app/)에선 한국어를 지원한다. (일부긴 하지만 reference를 번역 없이 볼 수 있다는 것이 큰 장점) 공식 사이트에서 권장하는 방법을 통해 초기 설정을 진행해보자.

Windows #

먼저 Microsoft Visual Studio C++ Build Tools (https://visualstudio.microsoft.com/ko/visual-cpp-build-tools/)를 설치한다.

Image

워크로드 설정 영역에서 "C++를 사용한 데스크톱 개발"을 체크, 우측에 설치 세부 정보에서 "C++ build tools"와 "Windows 10 SDK"를 선택 후 설치한다.

Image

Tauri는 Webview2에 의존하기 때문에 설치가 필요하다. Window 11에서는 이미 설치되어 있고, 만약 11이 아니라면 (https://developer.microsoft.com/en-us/microsoft-edge/webview2/#download-section) 이곳에서 에버그린 부트스트래퍼를 설치하면 된다.

Image

마지막으로 Rustup을 설치해야 하는데 (https://www.rust-lang.org/tools/install)에서 운영체제에 맞게 다운로드받으면 된다.

Image

이제 CMD 혹은 PowerShell에서 아래 명령어를 실행하여 Rustup을 설치한다.

PS C:\> winget install --id Rustlang.Rustup

macOS #

CLang과 macOS dev dependencies 설치해야한다.

$ xcode-select --install

dependencies 설치가 마무리되면 Rustup을 설치한다.

curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh
Rust is installed now. Great! // 해당 메시지가 출력된다면 성공이므로 터미널을 재시작한다.

Linux #

C 컴파일러와 webkit2gtk와 같은 System dependencies 설치해야한다.

sudo apt update
sudo apt install libwebkit2gtk-4.0-dev \
build-essential \
curl \
wget \
libssl-dev \
libgtk-3-dev \
libayatana-appindicator3-dev \
librsvg2-dev

dependencies 설치가 마무리되면 Rustup을 설치한다. (macOS와 동일)

$ curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh
Rust is installed now. Great! // 해당 메시지가 출력된다면 성공이므로 터미널을 재시작한다.

Rust언어는 기본적으로 rustup update 명령어를 통해 항상 최신 버전으로 유지하는 것을 권장한다. (자동 업데이터 사용 시 무방) rustup self uninstall 명령어를 통해 Rust 삭제 rustc --version 명령어를 통해 버전 확인 자 이제 사전 준비는 끝났으니 앱을 생성해보자.

Tauri Project 생성 #

필자는 Vite 스택을 활용하여 빌드하는 방식으로 진행할 텐데, 기본(HTML/CSS/JavaScript), Next.js, SvelteKit, 기존 프로젝트를 그대로 빌드와 같은 여러 가지 스택을 지원하기 때문에 원하는 스택을 활용하면 좋을 것이다. Vite는 프론트엔드 번들러 겸 빌드 도구로써 개발 중 핫 모듈 리로딩(HMR), 프로덕션 빌드에서 자동으로 소스 코드를 최적화와 HTML/CSS/JavaScript 코드로 변환하는 등 다양한 편의를 제공함으로써 사용하게 된다면 개발과정에서 많은 이점을 가져올 수 있다는 장점이 있다. 우선 vite를 설치하자.

yarn create vite

해당 명령어를 입력하면 아래와 같이 기본 setting을 돕는다.
첫 번째로 Project name을 묻는다. 말 그대로 프로젝트 명이며, 입력된 값으로 폴더가 생성된다.
두 번째로 사용할 frontend framework 묻는다. 필자는 react로 진행하였다.
마지막으로 Select a variant를 묻는데 Tauri에서는 기본적으로 Type Script를 권장하고 있다.

JavaScript를 사용하여도 기능에 차이는 없지만, 필자는 TypeScript에 대해서도 숙련도를 올리기 위해 TypeScript로 진행하였다. TypeScript 또한 굉장히 훌륭한 언어이기 때문에 한 번쯤은 다루어보면 좋을 것이다.
create가 성공하면 프로젝트를 바로 실행해볼 수 있다.

cd "프로젝트명"
yarn // 노드 모듈 설치
yarn dev // 스크립트 실행

Image

아직까진 앱을 생성하지 않았기 때문에 웹으로만 실행이 가능하다.

개발하기엔 아직 부족한 점이 많다. 천천히 내용을 추가하여 완성된 Tauri 앱을 만들어보자. vite.config.ts 파일 내용을 수정하여 개발함에 있어 필요한 기능들을 추가한다.

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],

// vite가 Rust 오류를 감추지 않게 한다.
clearScreen: false,
// Tauri가 포트값 고정을 요구하므로 그 포트를 쓸 수 없다면 실패하도록 한다.
server: {
    strictPort: true,
},
  // `TAURI_PLATFORM`, `TAURI_ARCH`, `TAURI_FAMILY`,
  // `TAURI_PLATFORM_VERSION`, `TAURI_PLATFORM_TYPE`,`TAURI_DEBUG`
  // 환경 변수를 사용
  envPrefix: ['VITE_', 'TAURI_'],
  build: {
    // Tauri는 es2021을 지원
    target: ['es2021', 'chrome100', 'safari13'],
    // 디버그 빌드에서는 최소화하지 않는다.
    minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
    // 디버그 빌드에서 소스맵을 제공한다.
    sourcemap: !!process.env.TAURI_DEBUG,
  }
 });

이제 본격적인 App을 생성하기 위해 Rust Project를 생성해보자. Rust의 공식 패키지 관리 매니저인 Cargo로 관리한다.

cargo install tauri-cli

해당 명령어를 실행하면 tauri에서 제공하는 cli를 설치한다.

cargo tauri init

해당 명령어를 입력하면 프로젝트를 생성하는데 기본적인 setting을 돕는다.
첫 번째로 운영 체제가 부를 앱의 이름을 묻는다.
두 번째로 기본 메인 Window에 대한 제목을 묻는다.
세 번째로 Tauri가 프로덕션으로 빌드할 때 프론트엔드 assets 경로를 묻는다. ../build를 기본값으로 제공해주고 있으며, 프로젝트 성격에 맞춰 자유롭게 변경해도 된다.
네 번째로 Tauri가 불러올 URL이나 파일 경로를 묻는다. 기본값은 http://localhost:5173이다.
다섯 번째로 프론트엔드 개발 서버 실행에 쓰이는 명령어를 묻는다. 기본값은 npm run dev이다.
여섯 번째로 프론트엔드 빌드에 쓰이는 명령어를 묻는다. 기본값은 npm run build이다.

Tauri init을 명령어를 입력하여 프로젝트를 생성하게 되면 src-tauri라는 폴더가 기본적으로 생기게 되는데 프로젝트를 진행하며 사용하게 되는 코어 관련 파일들은 이 안에 넣는 것이 Tauri앱의 규칙이다. 기본적으로 제공되는 파일은 아래와 같다.

Cargo.toml : Cargo의 매니페스트 파일이다. 앱에서 어떤 Rust Crate에 의존하는지 정의하며, 앱에 대한 부가 정보를 기록한다.

tauri.conf.json : 이름부터 허용된 API 목록까지, 이 파일을 통해 앱의 다양한 부분을 맞춤 설정한다.

src-tauri/src/main.rs : Rust 프로그램의 진입점과 부트스트랩을 정의한다.

src-tauri/src/main.rs
#![cfg_attr(
    all(not(debug_assertions), target_os = "windows"),
    windows_subsystem = "windows"
  )]

 fn main() {
 tauri::Builder::default()
   .run(tauri::generate_context!())
   .expect("error while running tauri application");
 }

기본적 구조는 이렇다. 첫번째 cfg! 매크로 같은 경우에는 windows OS에서 나오는 명령 프롬프트 창을 비활성화한다는 내용이다. main 함수는 진입점으로 프로그램을 실행할 때 가장 먼저 불리는 함수이다.

icon : 앱에 아이콘을 추가할 수 있다. Tauri에선 빠른 시작을 위해 기본 아이콘 묶음을 미리 포함 시켜 두었고, 앱을 공개하기 전, 기본 아이콘을 교체하는 것을 권장한다.

프론트엔드 스캐폴드 및 Rust 프로젝트를 초기화 했으니 생성된 tauri.conf.json은 다음과 같을 것이다.

tauri.conf.json
{
  "build": {
    // `tauri build`를 돌릴 때 이 명령어가 실행
    "beforeBuildCommand": "npm run build",
    // `tauri dev`를 돌릴 때 이 명령어가 실행
    "beforeDevCommand": "npm run dev",
    "devPath": "http://localhost:5173",
    "distDir": "../dist"
}

이 내용들은 초기 cargo tauri init 했을 때 내용이다. 해당 글을 읽으며 라이브 코딩을 하다 수정이 필요하거나 로컬 환경과 충돌을 일으키는 부분은 이곳에서 수정을 진행하면 된다. 자 드디어 개발 환경의 App을 빌드할 준비가 모두 끝났다. cargo tauri dev 명령어를 입력할 시 webview는 해당 OS가 사용하는 기본 브라우저를 바라보고 있으므로 Window는 Edge, Linux는 Firefox, MacOS는 Safari를 통해 GUI 화면이 보여지게 된다. 해당 명령어를 처음으로 실행하게 되면 Rust crate를 수집하고 빌드할 때 약간의 시간이 걸리지만 후속 실행에서는 앱의 코드만 다시 빌드하는 방식이므로 훨씬 빨라진다.

Tauri는 네이티브 기능과 함께 프론트엔드와의 통신 성능을 향상해준다. Calling Rust from the frontend라는 기능은 기본적으로 프론트엔드 JavaScript에서 호출할 수 있는 Rust 함수이다. 이를 통해 성능이 뛰어난 Rust 코드로 오래 걸리는 작업이나 OS 기능 호출 등을 처리할 수 있어, 더욱 우수한 프로젝트를 만들어 낼 수 있을 것이다. 공식 사이트에서 소개하는 간단한 예제를 한번 만들어 보겠다.

src-tauri/src/main.rs에 다음 코드를 추가한다.

src-tauri/src/main.rs
#[tauri::command]
    fn greet(name: &str) -> String {
        format!("Hello, {}!", name)
}

Rust언어라고 겁낼 거 없다. 천천히 살펴보면 C++과 큰 차이가 없는 것을 눈치챌 수 있을 텐데, 그 이유는 Rust가 C-family 언어 중 하나이기 때문이다. C++과 조금 차이가 있다면 Arrow operator와 포인터에서 변수가 아닌 문자열 혹은 Primitive 타입으로 타입을 선언해준다는 것에서 차이가 있다. 명령은 일반적인 Rust 함수와 같지만, JavaScript 맥락과 통신하게 해주는 #[tauri::command] 속성 매크로가 붙어있다. 이제 main 진입점 내부 블록에 Tauri가 적절히 호출을 전달하도록 새로 만든 명령에 대해 작성한다. 아래와 같이 invoke_handler()함수와 generate_handlier![] 매크로를 조합하여 작성한다.

src-tauri/src/main.rs
fn main() {
  tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![greet]) // greet 함수를 호출할 수 있도록 알려준다.
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

백엔드에서의 준비는 끝났다. 이제 프론트엔드에서 명령을 호출해보자.
새로 만든 명령을 호출하기 위해서 JavaScript 라이브러리인 @tauri-apps/api를 사용한다. 이 라이브러리 같은 경우 편리한 JavaScript Interface를 사용해 Window, 파일시스템 등 핵심 기능으로 가는 진입로를 제공하며, 설치는 아무런 패키지 매니저로 진행하면 된다. 필자는 yarn을 선호하니 yarn 명령어를 입력했다.

$ yarn add @tauri-apps/api

라이브러리 설치가 끝나면 해당 명령을 호출하도록 main.tsx(main.ts)파일에서 수정할 수 있다.

main.tsx(main.ts)
import { invoke } from '@tauri-apps/api'

// 명령을 호출
// "Hello, World!"가 콘솔에 출력된다.
invoke('greet', { name: 'World' })
  // `invoke`는 Promise를 반환한다.
  .then((response) => console.log(response))

TypeScript에서 greet함수를 name 파라미터의 World를 담아 호출한다. 이후 Rust에서 이를 응답하여 해당 함수가 실행되고, 그 결과 "Hello World"가 콘솔에 찍히게 된다.

실행 화면을 확인해보자.

cargo tauri dev

Node module이 설치되지 않아 오류가 발생할 경우 사용하는 패키지 매니저를 통해 설치를 진행한 뒤 다시 위에 명령어를 실행한다.

아래 중 앱에서 사용하는 패키지 매니저의 명령어를 실행한다.
yarn
yarn upgrade
npm install
pnpm update
cargo update

tauri app에 대한 setting을 했기 때문에 이제는 웹에서 URL을 통해 개발 환경을 실행하는 것이 아닌 tauri 전용 앱으로 실행된다.

Image

Windows OS에서 앱을 생성했기 때문에 기본 브라우저인 Edge를 기반으로 앱이 실행된다.

Image

웹 기반으로 앱이 실행되기 때문에 개발자 도구를 열 수 있으며 소스, 콘솔, 네트워크를 확인할 수 있다. 위에서 호출한 greed 함수가 성공적으로 동작하여 Hello World가 콘솔에 출력된 것을 확인할 수 있다.

쉽게 앱을 생성하는 방법? #

위에 내용은 상세한 내용들을 적용해 가며 앱을 생성하는 방식이다. Tauri에서는 기본적인 형태의 앱 구조를 유틸리티 패키지로 제공해주고 있다.

$ cargo install create-tauri-app
$ cargo create-tauri-app

위 명령어를 입력 시 훨씬 간단하고 빠르게 앱을 생성할 수 있다. 역시 마찬가지로 명령어를 입력하게 될 경우 사전에 어떤 방식으로 앱을 생성할지에 대해 묻는다.
첫 번째로는 프로젝트명을 묻는다.
두 번째로는 어떤 패키지 매니저를 사용할지 묻는다. cargo, pnpm, yarn, npm 이렇게 총 4가지만 지원한다.
세 번째로는 사용할 UI 템플릿을 묻는다. 아쉽게도 이 단계에선 vanilla와 yew만 지원하며, JavaScript로 제한된다. 제한되는 이유는 가장 가벼운 틀만 잡아주기 위해서 플러그인 없이 실행되는 Light한 구조로 앱을 생성해주는 것으로 판단된다. 필요한 프론트엔드 프레임워크나 이 외에 노드 모듈들은 패키지 매니저를 통해 설치하면 된다.

질문이 끝나게 되면 tauri-cli를 추가하고 종료된다. 물론 이 명령어만 입력했다고 바로 앱을 빌드할 수 있는 것은 아니다. 가장 기본적인 틀만 제공해주기 때문에 이제 개발자가 필요한 플러그인, 코드를 입력해야만 빌드할 수 있다. tauri 프로젝트에 대해 어느 정도 적응되었을 때 개발시간을 단축해주는 좋은 유틸리티 패키지이다. 필자는 아직 숙련도가 부족하기 때문에 유틸리티를 사용하지 않고 단계별로 앱을 생성하고 있다. GitHub에서도 프론트엔드 프레임워크별로 Quick Start를 제공해주고 있으므로 샘플소스로 참고해도 도움이 많이 될 것이다. 앱을 생성 및 개발단계까지 왔으니 이제 빌드와 배포를 해보자.

Tauri 빌드 & 배포 #

앱을 생성하고 실행하기까지 생각보다 많은 길을 걸어왔다. 하지만 빌드와 배포는 굉장히 간단하므로 빠르게 진행해보자. 우선 src/tauri.conf.json의 수정이 필요하다. tauri.bundle.identifier가 기본값인 com.tauri.dev로 되어 있는데, 이 상태로 빌드할 시

Error You must change the bundle identifier in `tauri.conf.json > tauri > bundle > identifier`. The default value `com.tauri.dev` is not allowed as it must be unique across applications.

위와 같은 에러를 뱉는다. 정상적으로 빌드하기 위해선 아래 내용과 같이 수정한다.

src/tauri.conf.json
"identifier": "com.tauri.vite" // com.tauri.dev가 기본값이며, 가장 마지막 depth의 프로퍼티를 앱 이름으로 수정하는 것이 가장 일반적이다.

위와 같이 수정 후 cargo tauri build 명령어를 실행하면 빌드 및 배포를 시작한다. cargo tauri dev 명령어와 마찬가지로 실행하게 되면 Rust crate를 수집하고 빌드할 때 약간의 시간이 걸리지만 후속 실행에서는 앱의 코드만 다시 빌드하는 빙식이므로 훨씬 빨라진다.

이후 tauri.conf.json에 설정된 distDir 경로로 dist폴더가 생성이 되고, src-tauri/target/release/앱 이름.exe로 바로 실행이 가능하며 bundle/msi/프로젝트명_버전_운영체제비트_언어.msi 형태의 파일을 통해 배포가 가능하다. 아직 크로스 플랫폼을 지원하지 않기 때문에 VM과 Docker를 활용해야하지만 소스코드 및 앱의 기본 config파일은 수정하지 않아도 무관하다.

Tauri의 비전 #

Tauri는 Electron과 Wry를 벤치마크하여 개발하고 있으므로 둘의 장점은 최대한 기용하고 단점은 없애는 방식으로 계속해서 발전될 것이다. 아직까진 Tauri가 Electron에 비해 불안정하지만, 몇 년내 Tauri팀이 Electron팀을 따라잡을 것이라고 생각된다. Electron같은 경우에는 크로스 플랫폼을 지원하다가 현재는 지원하고 있지 않아 VM, Docker를 사용해야 한다는 불편함이 있는데 Tauri에서는 추후 크로스 플랫폼을 지원한다고 하니 앱 빌드 및 배포 편의성은 Tauri가 앞서나갈 것이다.

추가로 Tauri에서는 어플리케이션의 백엔드를 Rust 뿐만 아니라 Python, C++, Deno도 지원할 예정이라고 하니 언어가 제한되는 불편함 또한 해소될 것이며, 2023년 안으로 모바일 빌드도 지원할 예정이기 때문에 React Native가 맡고 있는 하이브리드 어플리케이션의 영역을 완전히 가져올 가능성도 보이고 있다.

Tauri는 프론트엔드 영역에서도 여러 스택을 지원하고 거의 모든 프론트엔드 프레임워크, 라이브러리와 호환이 된다는 점, 기존 프로젝트에도 간단하게 붙일 수 있다는 점을 통해 더욱 강하고 빠른 앱을 생성할 수 프레임워크로 성장해나갈 것이다. 당장 주력으로 사용하진 않더라도 Tauri에 대해 간단하게라도 알고만 있다면 도움이 많이 될 것으로 판단된다.

참고출처 #

Tauri

0.0.1_20240318_1_v95