Offcanvas

개발자 / 애플리케이션

'거의 모든 OS 에서 동작'··· 크로스 플랫폼 '타우리 프레임워크' 따라잡기

2023.03.30 Matthew Tyson  |  InfoWorld
타우리(Tauri)는 자바스크립트 또는 타입스크립트 코드를 거의 모든 운영체제의 네이티브 애플리케이션으로 변환하는 크로스 플랫폼 프레임워크다. 일렉트론(Electron) 또는 리액트 네이티브(React Native)와 비슷하지만 타우리는 다양한 프론트엔드 기술을 처리할 수 있다. 프론트엔드와 결합해 필요한 운영체제용 네이티브 애플리케이션을 뽑아낸다. 

아키텍처 측면에서 보면, 타우리는 네이티브 애플리케이션을 생성하는 타우리 프로세스와 함께 병렬로 프론트엔드 애플리케이션 코드를 실행한다. 따라서 웹 애플리케이션과 함께 네이티브 애플리케이션을 개발할 수 있으며, 네이티브 애플리케이션에 러스트 호출을 통합해 운영체제 기능을 사용할 수 있다. 타우리의 강력한 기능 대부분이 이 하이브리드 프로세스에서 나온다. 즉, 어느 스택을 사용하든 개발 프로세스는 완전히 동일하다. 타우리는 기존 프로세스를 데코레이팅할 뿐이다. 

타우리와 스벨트킷 

타우리 지원 웹 애플리케이션을 개발하기 위한 프로세스는 애플리케이션 코드와 함께 러스트 연결 구조를 생성하거나 채택하고, 이후 타우리를 웹 애플리케이션 개발 모드로 실행하는 단계로 구성된다. 그다음 타우리 커넥터(IPC, 프로세스간 통신)를 실행하고 네이티브 애플리케이션을 실행하고 웹 애플리케이션에 대한 변경 사항이 반영되는 것을 확인하면 된다. 애플리케이션을 프로덕션용으로 전달할 준비가 되면 특정 플랫폼 타겟을 위한 번들을 릴리스할 수 있다. 

여기서는 스벨트킷 애플리케이션을 대상으로 타우리를 실행하는 프로세스를 살펴본다. 스택마다 자체적인 요구사항이 있지만 전반적인 단계는 비슷하다. 먼저 러스트가 설치돼 있어야 한다. 타우리는 성능, 크로스 플랫폼, 보안을 위해 러스트를 사용한다. rustc –version을 입력하면 명령줄에 응답이 반환된다. 러스트를 설정하려면 타우리 문서의 설정 단계에 따르면 된다. rustup update를 실행하고 rustc --version으로 설치를 확인한다. 

러스트를 사용할 수 있게 되면 npm create tauri-app으로 새 타우리 레이아웃을 구성할 수 있다. 이를 위해서는 npm이 설치돼 있어야 한다. 타우리 빠른 시작 문서에는 애플리케이션을 위한 타우리 인프라를 설치하는 다른 방법도 나와 있다. 예를 들어 셸 스크립트나 러스트 카고를 사용할 수 있다. 어쨌든 스벨트킷을 위해서도 필요하므로 여기서는 npm을 사용한다. 

npm create tauri-app을 실행한 다음에는 프롬프트에 따라 프로젝트 이름을 지정한다(필자의 경우 iw-tauri). 그다음 패키지 관리자(이 예제에서는 얀(Yarn))와 사용 중인 프레임워크(스벨트킷)를 지정한다. 이후 cd를 사용해서 새 iw-tauri 디렉터리로 이동해서 yarn install을 입력해 패키지를 설치하고, yarn run dev를 입력해 개발 서버를 시작할 수 있다. 이제 localhost:1420을 방문하면 애플리케이션이 열리고 <그림 1>과 같은 화면이 표시된다. 
 
<화면 1> 타우리 앱용 스벨트킷 프론트엔드 ⓒ IDG

현재 이 화면에는 스벨트킷 애플리케이션만 표시된다. 타우리의 기능을 살펴보려면 npm run tauri dev를 입력한다. 그러면 스벨트킷 애플리케이션과 타우리 프론트엔드(타우리 러스트 트윈에 의해 실현됨)가 모두 실행된다. 타우리는 웹 인터페이스와 같은 UI의 네이티브 창을 생성한다. 참고로 이 작업을 처음 하는 경우 타우리가 종속 항목을 설치하는 데 약간의 시간이 걸린다. 다음부터는 빠르게 시작된다. dev 빌드를 자동으로 업데이트하는 개발 환경(스벨트킷 등)을 사용하고 있다면 코드 작성과 변경이 네이티브 UI에 의해 자동으로 반영된다. 
 

타우리 애플리케이션을 생성하는 방법 

타우리는 웹 애플리케이션을 주시하면서 그곳의 코드 변경을 반영하는 러스트 네이티브 애플리케이션을 실행한다. 앞 섹션에서 npm create tauri-app을 사용했는데 이는 타우리 애플리케이션을 생성하는 수동 프로세스의 단축 명령이다. 이 프로세스는 다음과 같은 단계로 구성된다. 
 
  1. 스벨트킷과 같은 프레임워크를 사용해서 프론트엔드 프로젝트를 만든다. 
  2. 타우리와 함께 작동하도록 프론트엔드 프로젝트를 구성한다. 
  3. 타우리 애플리케이션을 실행한다. 
  4. 프론트엔드 애플리케이션을 주시하도록 타우리 애플리케이션을 구성한다. 

수동 프로세스에서는 프론트엔드 구성 단계에서 프레임워크별 매개변수도 설정해야 한다. 예를 들어 스벨트킷의 경우 정적 어댑터가 사용되는지 확인해야 한다. /src-tauri 디렉터리에서 타우리용 코드를 찾을 수 있다. 이 디렉터리에는 타우리 자체를 구성하기 위한 tauri.conf.json 파일이 포함돼 있다. create tauri-app으로 생성된 파일을 보면 어떤 식으로 작동하는지 파악할 수 있고, 더 자세한 내용은 여기서 볼 수 있다. <리스트 1>에는 타우리 구성 코드의 일부분이 포함돼 있다. 

<리스트 1> 타우리 구성의 일부
{
  "build": {
    "beforeDevCommand": "yarn dev",
    "beforeBuildCommand": "yarn build",
    "devPath": "http://localhost:1420",
    "distDir": "../build",
    "withGlobalTauri": false
  },

<리스트 1>에서 볼 수 있듯이 타우리에 dev 실행에 앞서 무엇을 할지를 지시한다. 즉, yarn dev를 사용해 웹 애플리케이션을 개발 모드로 시작한 다음 애플리케이션이 어디에서 실행되고 있는지를 알린다(localhost, 포트 1420). 타우리를 사용한 웹 기반 네이티브 애플리케이션 개발에 대한 비디오 가이드는 타우리, 러스트 기반의 일렉트론 대안에서 볼 수 있다. 또한 타우리 가이드에서 타우리 프로젝트를 수동으로 설정하는 방법에 대한 자세한 내용을 볼 수 있다. 
 

자바스크립트에서 네이티브 호출하기 

타우리에서는 자바스크립트 호출을 러스트의 네이티브 기능에 바인딩할 수 있다. 기본 개념은 러스트 함수를 타우리 명령으로 노출하면(src-tauri/src/main.rs 파일) 타우리가 이를 웹 애플리케이션에서 실행할 수 있는 자바스크립트 함수로 제공하는 것이다. 다음은 타우리 문서에서 발췌한 부분이다. 

<리스트 2> 자바스크립트의 네이티브 명령 사용 
// In src-tauri/src/main.rs
#[tauri::command]
fn my_custom_command() {
 println!("I was invoked from JS!");
}
// register the command:
fn main() {
 tauri::Builder::default()
   .invoke_handler(tauri::generate_handler![my_custom_command])
   .run(tauri::generate_context!())
   .expect("failed to run app");
}

// In your JavaScript
import { invoke } from '@tauri-apps/api/tauri'
const invoke = window.__TAURI__.invoke

invoke('my_custom_command');


<리스트 2>는 자바스크립트 네이티브 명령 사용의 기본적인 개요를 보여준다. 그 외에도 훨씬 더 많은 부분이 있지만 전반적으로 웹 애플리케이션을 운영체제에 연결하는 매우 좋은 방법이라고 할 수 있다. 
 

타우리 내부 : 러스트와 웹뷰 

이제 타우리가 웹 애플리케이션과 함께 어떻게 구성되는지에 대한 전반적인 개념을 이해했을 것이다. 타우리의 기발한 부분은 두 구성요소 간의 커뮤니케이션이다. 타우리에서는 이 기능을 프로세스간 커뮤니케이션이라고 한다. 기본적으로 두 애플리케이션은 메시지를 교환하는 상호 격리된 샌드박스다. 메시지의 유형은 이벤트와 명령, 두 가지다. 이벤트는 양방향이며 타우리 자바스크립트 또는 타입스크립트 클라이언트가 타우리 서버와 상호작용하기 위해 사용하는 지정된 형식이 있다. 

명령 프로토콜은 이벤트 프로토콜 위에 계층화된다. 명령 프로토콜은 항상 클라이언트 측 애플리케이션에 의해 시작되고 요청-응답 상호작용으로 작동한다. 항상 데이터의 JSON 직렬화가 가능하도록 JSON-RPC를 통해 원격으로 협상되는 외부 함수 인터페이스와 비슷하다. 운영체제에 대한 모든 호출이 원격 프로시저 호출에 의해 중재된다는 점에서 진정한 외부 함수 인터페이스는 아니고, 따라서 많은 보안 위험이 완화된다. 

타우리는 러스트와 웹뷰를 모두 사용해 네이티브 사용자 인터페이스를 생성한다. 웹뷰는 타우리에 표준화되고 잘 알려진 기반을 제공해 이 기반 위에 나머지 기능을 구축할 수 있게 해준다. 웹뷰는 운영체제 네이티브이므로 크로미엄(Chromium)과 같은 2차 계층보다 더 뛰어난 성능을 제공한다. 

타우리는 응답성 높은 UI 처리를 위해 멀티 프로세스 모델을 사용한다. 기본적으로 타우리는 클라이언트 애플리케이션으로부터 수신되는 이벤트와 명령을 처리하기 위해 필요에 따라 프로세스를 스폰한다. 코어 타우리 프로세스는 필요한 구체적 권한을 가진 서브 프로세스를 생성한다. 각 프로세스에는 당면한 작업에만 적용되는 수명 주기가 있다. 

웹뷰의 작동 방식에 대한 더 자세한 내용을 볼 수 있다. 깃허브의 타우리 프로젝트에서는 타우리의 맞춤형 러스트 기반 웹뷰 엔진도 있다. 타우리의 내부 작동에 대해 알아보려면 타우리 아키텍처를 심층적으로 살펴보면 된다. 
 

결론 

타우리는 일렉트론 및 리액트 네이티브와 비슷한 프레임워크다. 각각 장단점이 있지만 개발자들이 타우리를 빠르게 채택하고 있다는 것은 타우리가 확실한 장점을 갖고 있음을 보여준다. 네이티브 웹뷰와 러스트를 사용하기로 한 결정이 뛰어난 성능이라는 성과로 돌아왔다. 타우리는 새 프로젝트뿐만 아니라 네이티브 애플리케이션을 생성하는 기능이 필요한 기존 웹 애플리케이션을 위해서도 유력한 프레임워크다.
editor@itworld.co.kr
CIO Korea 뉴스레터 및 IT 트랜드 보고서 무료 구독하기
추천 테크라이브러리

회사명:한국IDG 제호: CIO Korea 주소 : 서울시 중구 세종대로 23, 4층 우)04512
등록번호 : 서울 아01641 등록발행일자 : 2011년 05월 27일

발행인 : 박형미 편집인 : 천신응 청소년보호책임자 : 한정규
사업자 등록번호 : 214-87-22467 Tel : 02-558-6950

Copyright © 2024 International Data Group. All rights reserved.