[Rust] tauri로 크로스플랫폼 앱 만들기

tauri는 일렉트론과 유사한 스타일의 데스크탑 애플리케이션 프레임워크다.
UI는 Web 포맷으로 만들고, 제어 로직은 Rust로 짜는 형태다.

성능은 일렉트론보다는 좀 좋다는 모양이다. 개발 편의성도 괜찮은 편이다. Rust만 쓸줄 안다면.
요즘 나름 트렌드를 타서 이것저것 나오는 중이다.

플랫폼 지원

3대장인 windows, macOS, Linux는 당연히 지원하고, 아직 미완성이지만 모바일앱도 지원한다.

모바일은 아직 알파버전에 불과하니 쓸만한 정도는 못될거같다.

CLI 설치

먼저 cli를 만들어줘야 한다.

cargo install create-tauri-app --locked
cargo install tauri-cli

좀 많이 오래걸린다.
디펜던시를 얼마나 걸어둔건지

프로젝트 생성

방금 만든 create-tauri-app을 통해서 프로젝트를 생성해보겠다.

 cargo create-tauri-app

이름 정하고, 프론트엔드 언어로 뭘 쓸지 고른다.

놀랍게도 Rust로 웹 front를 짜는 부분도 제공을 한다.

여기서 그나마 쓸만한건 Yew다.

특이취향이 있는게 아니라면 그냥 JS/TS를 쓰는걸 추천한다. 리액트, 스벨트, Vue 등 대중적인건 다 있다.

난 스벨트-TS 스택으로 골랐다.

시작하기

npm i로 디펜던시를 설치한 후에 다음 명령을 실행하면 빌드가 시작된다.

npm i 
npm run tauri dev

dev 빌드는 러스트답지 않게 금방 끝난다.

빌드가 끝나면

이렇게 그럴듯한 앱이 시작될 것이다.

텍스트칸에 텍스트를 치고 Greet 버튼을 누르면

아래에 상호작용으로 텍스트가 뜬다.

기본 구조

프로젝트를 생성하면 아래와 같은 형태로 구조가 만들어진다.

src 경로에는 우리가 원래 알던 스벨트 프로젝트가 들어있다.

이게 앱의 UI를 표현한다.

src-tauri에는 전반적인 제어 로직이 들어간다. 앱을 시작하는 것도 여기에 들어있다.

tauri는 일렉트론과 비슷하게 앱에서 프론트엔드<>백엔드를 구분지어서 동작하는 특이한 구조를 갖추고 있다.
UI는 웹 코드를 쓰지만, 뭔가 데이터 핸들링이 들어가거나 interaction, 무거운 작업을 할때는 백엔드 로직을 태운다.

그래서 버튼을 눌렀을때 텍스트를 띄운 것도 백엔드 로직으로 동작한 것이었다.
자동 생성된 greet 컴포넌트를 보면

이런식으로 invoke 함수를 통해 내부 Rust 로직을 호출한 것이다. "greet"라는 함수를 호출하면서 name이란 파라미터를 넘겼다.
일렉트론에 비해 인터페이스가 조금 더 단순한 감은 있다.

반면 받는 쪽에서는 이렇게 구성이 된다.

함수명이 greet, 파라미터가 name이다. 그걸 받고 문자열을 생성해서 반환한 것이다.

대충 이런 느낌이다.

릴리즈 빌드하기

tauri의 가장 강력한 장점 중 하나가 이런 빌드 편의성인거같다.
이것도 단일 바이너리로 만들어주는데, 바이너리만 뱉는게 아니라, 각 플랫폼 환경에 맞게 인스톨러까지 자동으로 만들어준다.

먼저 tauri.conf.json에 들어가서 identifier를 적당히 바꿔준다. 기본값은 unique하지 않아서 빌드가 안된다.

대충 취향대로

그리고 build 명령을 때린다.

이건 릴리즈빌드라 시간이 좀 걸린다.

빌드되면 target/release/bundle 경로에 인스톨러가 생성되는데

실행하면

익히 보던 인스톨러 UI가 뜬다.

이런거도 다 자동으로 구성해준다.

런치하면 실행되고

설치된 경로로 들어가보면

바이너리와 uninstaller가 세팅되어있다.

끝

기타: auto reload

코드를 편집해서 저장하면 자동으로 재빌드를 해서 reload를 해준다.

별거 아닌거같지만 생산성에 꽤 영향을 미친다.

참조
https://tauri.app/ko/about/intro/
https://tauri.app/v1/guides/getting-started/setup