콘텐츠로 이동
Tauri
Guides References Blog Releases

모델 애플리케이션의 기본 설정

이 장의 “모델 애플리케이션” 사례에서는 기존 프로젝트에 WebDriver 테스트를 추가하는 데에만 초점을 맞춥니다. 이어지는 두 장에서 테스트할 프로젝트를 준비하기 위해, 해당 테스트에서 사용할 최소한의 Tauri 애플리케이션을 구성합니다. 여기서는 Tauri CLI나 프론트엔드 종속성, 빌드 절차는 사용하지 않으며, 나중에 애플리케이션을 번들링하지도 않습니다. 여기서의 작업은 기존 애플리케이션에 WebDriver 테스트를 추가하는 방법을 보여주고, 최소한의 구성 설정을 소개하기 위한 것입니다.

이 “모델 애플리케이션” 제작 가이드에서 소개된 내용에 기반한 완성된 프로젝트 사례만 보고 싶다면, https://github.com/chippers/hello_tauri 를 참조하십시오.

Cargo 프로젝트 초기화

섹션 제목: “Cargo 프로젝트 초기화”

이 “모델 애플리케이션”을 저장하기 위한 새로운 바이너리 Cargo 프로젝트를 만듭니다. 이는 커맨드 라인에서 cargo new hello-tauri-webdriver --bin을 사용하면 간단하게 수행할 수 있으며, 이를 통해 최소한의 바이너리 Cargo 프로젝트가 준비됩니다. 이 디렉토리는 앞으로 이 제작 가이드의 작업 디렉토리로 기능하므로, 실행하는 명령이 이 새로운 hello-tauri-webdriver/ 디렉토리 내에 있는지 확인하십시오.

최소 구성의 프론트엔드 만들기

섹션 제목: “최소 구성의 프론트엔드 만들기”

“모델 애플리케이션”의 프론트엔드가 될 최소한의 HTML 파일을 만듭니다. 나중에 WebDriver 테스트 중에 이 프론트엔드의 몇 가지 항목을 사용하게 됩니다.

먼저, “모델 애플리케이션”의 Tauri 부분을 빌드할 때 필요한 Tauri distDir을 만듭시다. 명령 mkdir dist로 dist/라는 새 디렉토리를 만들고, 거기에 다음 index.html 파일을 배치합니다.

dist/index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello Tauri!</title>
    <style>
      body {
        /* 보기 좋은 색상 구성표(colorscheme) 추가 */
        background-color: #222831;
        color: #ececec;


        /* 본체를 창 크기에 맞춤 */
        margin: 0;
        height: 100vh;
        width: 100vw;


        /* body 태그의 자식 요소를 수직 및 수평으로 가운데 정렬 */
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <h1>Hello, Tauri!</h1>
  </body>
</html>

Tauri를 Cargo 프로젝트에 추가

섹션 제목: “Tauri를 Cargo 프로젝트에 추가”

다음으로, 위의 Cargo 프로젝트를 Tauri 프로젝트로 변환하는 데 필요한 항목을 추가합니다. 먼저, Cargo 매니페스트 파일(Cargo.toml)에 종속성을 추가하여 Cargo가 빌드 시에 종속성을 로드하도록 합니다.

Note

Cargo.toml 아래의 Cargo.toml 파일은 일부 내용이 오래되었을 수 있습니다. 예를 들어 2025.02.20 현재 Rust 에디션은 “2024”, 최신 버전은 “1.85”입니다. 버전 “1.56”은 2021.10.21 릴리스, tauri 1.0 릴리스가 2022.06.19이므로, 그 무렵에 작성된 사례로 보입니다. 적절히 읽어주세요.

Cargo.toml:

[package]
name = "hello-tauri-webdriver"
version = "0.1.0"
edition = "2021"
rust-version = "1.56"


# 빌드 시 Tauri용으로 몇 가지 설정이 필요
[build-dependencies]
tauri-build = "1"


# 실제 Tauri 종속성과 페이지를 표시(serve)하기 위한 `custom-protocol`
[dependencies]
tauri = { version = "1", features = ["custom-protocol"] }


# --release로 작고(opt-level = "s") 빠르며(lto = true) 바이너리를 빌드합니다
# 이 설정은 완전히 선택 사항이지만, 일반적인 릴리스 설정에 최대한 가까운 상태에서 애플리케이션을 테스트할 수 있음을 보여줍니다
# 참고: 이로 인해 컴파일 속도가 저하됩니다
[profile.release]
incremental = false
codegen-units = 1
panic = "abort"
opt-level = "s"
lto = true

아마 눈치채셨겠지만, [build-dependency](빌드 종속성)가 추가되었습니다. 이 [build-dependency]를 이용하려면, 이를 빌드 스크립트에서 사용해야 합니다. 그래서 build.rs에서 만듭니다.

build.rs:

fn main() {
    // 재컴파일 시 `dist/` 디렉토리만 감시하여 다른 프로젝트의 하위 디렉토리 파일을 변경했을 때 불필요한 변경이 가해지는 것을 방지합니다
    println!("cargo:rerun-if-changed=dist");


    // Tauri build-time helpers를 실행합니다
    tauri_build::build()
}

이제 Cargo 프로젝트는 Tauri의 종속성과 그 설정을 로드하여 빌드할 수 있게 되었습니다. 실제 프로젝트 코드에 Tauri를 설정하여 이 최소한의 Tauri 모델 애플리케이션을 완성합시다. 이 Tauri 기능을 추가하기 위해 src/main.rs 파일을 편집합니다.

src/main.rs:

fn main() {
    tauri::Builder::default()
        .run(tauri::generate_context!())
        .expect("unable to run Tauri application");
}

어때요? 아주 간단하죠?

Tauri 설정

섹션 제목: “Tauri 설정”

이 모델 애플리케이션을 성공적으로 빌드하려면 두 가지가 필요합니다. 첫 번째는 “아이콘 파일”입니다. 이 작업에는 어떤 PNG 데이터든 상관없습니다. 그것을 icon.png에 복사합니다. 일반적으로 이 데이터는 프로젝트 생성에 Tauri CLI를 사용하면 그 준비 처리의 일부로 제공됩니다. 기본 Tauri 아이콘을 얻으려면, 명령 curl -L "https://github.com/chippers/hello_tauri/raw/main/icon.png" --output icon.png를 사용하여 “Hello Tauri 샘플 리포지토리”에서 사용되는 아이콘을 다운로드합니다.

두 번째는 Tauri용 중요 설정 값을 설정하기 위한 “tauri.conf.json” 파일입니다. 이 파일도 일반적으로 스캐폴딩 명령인 tauri init으로 생성되지만, 여기서도 독자적인 최소한의 구성을 만듭니다.

Note

스캐폴딩 명령 scaffolding command: “scaffold”는 “공사 현장의 비계”, “비계를 설치하다”라는 의미이지만, 본고에서는 주로 “준비”라는 번역어를 사용합니다. “스캐폴딩 명령”이란 애플리케이션 제작 시작 시 필요한 파일들을 자동으로 생성/준비해주는(작업용 비계를 설치해주는) 명령을 말합니다.

tauri.conf.json:

{
  "build": {
    "distDir": "dist"
  },
  "tauri": {
    "bundle": {
      "identifier": "studio.tauri.hello_tauri_webdriver",
      "icon": ["icon.png"]
    },
    "allowlist": {
      "all": false
    },
    "windows": [
      {
        "width": 800,
        "height": 600,
        "resizable": true,
        "fullscreen": false
      }
    ]
  }
}

몇 가지 항목의 내용을 살펴보겠습니다. 방금 만든 dist/ 디렉토리가 distDir 속성에 지정된 것을 볼 수 있습니다. 빌드된 애플리케이션이 고유한 ID를 갖도록 번들 식별자(ID)를 설정하고, 아이콘에는 icon.png만 지정했습니다. Tauri의 API나 기능은 사용하지 않으므로, allowlist에서 "all": false를 설정하여 비활성화했습니다. 창 값에는 적절한 기본값을 사용하여 생성되는 단일 창을 설정할 뿐입니다.

이제 실행 시 간단한 인사를 표시하는 기본적인 “Hello World” 애플리케이션이 완성되었습니다.

모델 애플리케이션 실행

섹션 제목: “모델 애플리케이션 실행”

올바르게 설정되었는지 확인하기 위해 이 애플리케이션을 빌드해 보겠습니다. WebDriver 테스트도 릴리스 버전용 설정 프로필로 실행하므로, 이 애플리케이션을 --release 버전으로 실행합니다. cargo run --release를 실행하면 컴파일 후 다음 애플리케이션이 팝업으로 표시될 것입니다.

Hello Tauri Webdriver

참고: 애플리케이션을 수정하여 Devtools를 사용하고 싶다면, --release 지정 없이 실행하면 오른쪽 클릭 메뉴에서 “Inspect Element/요소 검사”가 표시되어 사용할 수 있습니다.

이제 이 모델 애플리케이션을 이용하여 “WebDriver 프레임워크”를 사용한 테스트를 시작할 준비가 되었습니다. 다음 장부터 Selenium 이용하기와 WebdriverIO 이용하기 모두에 대해 이 순서대로 설명합니다.

【※ 이 한국어판은, 「Feb 22, 2025 영문판」에 근거하고 있습니다】

Support on Open Collective Sponsor on GitHub

© 2025 Tauri Contributors. CC-BY / MIT