Tauri 시작하기

이 장에서는 Tauri 개발에 필요한 도구를 설치하고, 첫 프로젝트를 만들어 개발 모드로 실행하는 과정까지 다룹니다. 편집기 설정과 자주 쓰는 CLI 명령도 함께 살펴봅니다.

Tauri 앱은 두 부분으로 이루어집니다. 화면은 HTML · CSS · JavaScript로 만들고 운영체제가 제공하는 WebView가 그립니다. 창 관리, 파일 접근, 시스템 연동 같은 일은 Rust로 작성한 코어가 맡습니다. 그래서 개발 환경에는 Rust 도구 모음, 운영체제별 WebView 개발 라이브러리, 그리고 웹 프런트엔드를 쓴다면 Node.js가 필요합니다.

사전 준비

먼저 운영체제별 시스템 의존성을 설치합니다.

Debian · Ubuntu 계열에서는 다음 명령으로 한 번에 설치할 수 있습니다. 다른 배포판은 공식 문서의 사전 준비 쪽에서 패키지 이름을 확인하세요.

sudo apt update
sudo apt install libwebkit2gtk-4.1-dev \
  build-essential curl wget file \
  libxdo-dev libssl-dev \
  libayatana-appindicator3-dev librsvg2-dev

다음으로 Rust를 공식 설치 도구 rustup으로 설치합니다. Windows에서는 rustup-init.exe를 내려받아 실행하거나 winget install --id Rustlang.Rustup을 쓰고, MSVC 툴체인을 기본으로 둡니다.

# macOS · Linux
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# 설치 확인
rustc --version
cargo --version

JavaScript나 TypeScript로 화면을 만든다면 Node.js LTS 버전도 설치합니다. Android나 iOS 앱까지 만들 계획이라면 Android Studio와 NDK, 또는 Xcode 전체가 추가로 필요하지만, 데스크톱 앱부터 시작한다면 지금은 건너뛰어도 됩니다.

프로젝트 만들기

새 프로젝트는 create-tauri-app으로 만듭니다.

npm create tauri-app@latest

명령을 실행하면 몇 가지를 묻습니다.

1. 프로젝트 이름: 폴더 이름이자 기본 앱 이름입니다.
2. 식별자(identifier): com.example.myapp처럼 역도메인 형식의 고유한 이름입니다.
3. 프런트엔드 언어: TypeScript/JavaScript, Rust, .NET 중에서 고릅니다.
4. 패키지 관리자: npm, pnpm, yarn, bun 등입니다.
5. UI 템플릿: Vanilla, Vue, Svelte, React, Solid, Angular, Preact 등입니다.
6. UI 종류: TypeScript 또는 JavaScript입니다.

이미 있는 웹 프로젝트에 Tauri를 붙일 수도 있습니다. CLI를 개발 의존성으로 설치하고 tauri init을 실행하면 src-tauri 폴더가 만들어지며, 개발 서버 주소와 빌드 결과 폴더, 빌드 명령을 묻습니다.

npm install -D @tauri-apps/cli@latest
npx tauri init

개발 모드로 실행하기

프로젝트 폴더로 이동해 의존성을 설치하고 개발 모드로 실행합니다.

cd tauri-app
npm install
npm run tauri dev

tauri dev는 설정 파일의 beforeDevCommand(보통 Vite 개발 서버)를 먼저 띄우고, Rust 코어를 컴파일한 뒤 앱 창을 엽니다. 처음에는 Rust 의존성을 모두 빌드하므로 몇 분 걸릴 수 있지만, 이후에는 바뀐 부분만 다시 컴파일합니다. 프런트엔드 코드를 고치면 화면이 바로 새로 고쳐지고, Rust 코드를 고치면 다시 빌드한 뒤 앱이 재시작됩니다.

개발 빌드에서는 창에서 마우스 오른쪽 버튼을 눌러 "검사(Inspect)"를 고르거나 Windows · Linux에서 Ctrl+Shift+I, macOS에서 Cmd+Option+I를 눌러 WebView 개발자 도구를 열 수 있습니다.

템플릿의 프런트엔드는 Rust 함수 greet를 이렇게 부릅니다. 이 호출 방식은 3장에서 자세히 다룹니다.

import { invoke } from "@tauri-apps/api/core";

const input = document.querySelector<HTMLInputElement>("#greet-input")!;
const output = document.querySelector<HTMLParagraphElement>("#greet-msg")!;

document.querySelector("#greet-form")!.addEventListener("submit", async (event) => {
  event.preventDefault();
  output.textContent = await invoke<string>("greet", { name: input.value });
});

편집기 설정

VS Code를 쓴다면 rust-analyzer 확장과 Tauri 확장을 설치합니다. tauri.conf.json에는 JSON 스키마가 연결되어 있어 설정 키를 자동 완성으로 볼 수 있습니다. Rust 코드가 src-tauri 아래에 있으므로, 저장소 루트를 열었을 때 rust-analyzer가 프로젝트를 찾지 못하면 .vscode/settings.json에 위치를 알려 줍니다.

{
  "rust-analyzer.linkedProjects": ["src-tauri/Cargo.toml"]
}

자주 쓰는 CLI 명령

빌드가 실패하거나 창이 뜨지 않을 때는 먼저 tauri info로 시스템 의존성이 빠지지 않았는지 확인하세요.

정리

• Tauri 개발에는 Rust, 운영체제별 WebView 개발 라이브러리, 웹 프런트엔드를 쓴다면 Node.js가 필요합니다.
• npm create tauri-app@latest로 프로젝트를 만들고 npm run tauri dev로 실행합니다.
• 첫 빌드는 오래 걸리지만 이후에는 바뀐 부분만 다시 컴파일합니다.
• 편집기에는 rust-analyzer를 설치하고, 문제가 생기면 tauri info부터 확인합니다.