콘텐츠로 이동
Tauri
Guides References Blog Releases

프로젝트 만들기

Tauri가 매우 유연한 이유 중 하나는 사실상 어떤 프론트엔드 기술(프레임워크)과도 연동할 수 있다는 것입니다. 새로운 Tauri 프로젝트를 만드는 데 도움이 되도록 공식적으로 유지 관리되는 “유틸리티 create-tauri-app”이 있으며, 각 프론트엔드 기술용 템플릿이 몇 가지 준비되어 있습니다.

create-tauri-app에는 현재 다음과 같은 템플릿이 있습니다: “vanilla”(HTML, CSS 및 JavaScript/프레임워크 없음), “Vue.js”, “Svelte”, “React”, “SolidJS”, “Angular”, “Preact”, “Yew”, “Leptos” 및 “Sycamore”입니다. Awesome Tauri repo에서 찾을 수 있는 커뮤니티 제작 템플릿이나 프레임워크도 추가로 사용할 수 있습니다.

또는 아래의 “수동 설정”을 실행하여 Tauri를 현재 작업 중인 프로젝트에 추가함으로써 현재 코드를 Tauri 앱으로 변경할 수 있습니다.

create-tauri-app 이용하기

섹션 제목: “create-tauri-app 이용하기”

create-tauri-app을 이용하여 프로젝트를 시작하려면 프로젝트를 시작할 폴더에서 다음 명령 중 하나를 실행합니다. 어떤 명령을 사용해야 할지 모르는 경우 Linux 및 macOS에서는 “Bash” 명령, Windows에서는 “PowerShell” 명령을 사용하는 것이 좋습니다.

sh <(curl https://create.tauri.app/sh)

화면의 프롬프트 표시에 따라 “프로젝트 이름”, “프론트엔드 언어”, “패키지 관리자”, “프론트엔드 프레임워크” 및 (해당하는 경우) 프론트엔드 프레임워크 옵션을 선택합니다.

새로운 프로젝트 준비하기

섹션 제목: “새로운 프로젝트 준비하기”

  1. 프로젝트 이름과 번들 식별자(앱의 고유 ID)를 선택하십시오:

    ? Project name (tauri-app) › 《프로젝트 이름 (tauri-app)》
    ? Identifier (com.tauri-app.app) › 《식별자 (com.tauri-app.app)》

  2. 프론트엔드 언어를 선택하십시오:

    ? Choose which language to use for your frontend ›
    《? 프론트엔드에 어떤 언어를 사용하시겠습니까: 아래에서 선택》
    Rust  (cargo)
    TypeScript / JavaScript  (pnpm, yarn, npm, bun)
    .NET  (dotnet)

  3. 패키지 관리자를 선택합니다(선택지가 여러 개 있는 경우):

    TypeScript / JavaScript의 경우 선택지:

    ? Choose your package manager › 《패키지 관리자를 선택하십시오》
    pnpm
    yarn
    npm
    bun

  4. UI 템플릿과 맛을 선택하십시오(선택지가 여러 개 있는 경우):

    Rust의 경우 선택지:

    ? Choose your UI template › 《UI 템플릿을 선택하십시오》
    Vanilla
    Yew
    Leptos
    Sycamore

    TypeScript / JavaScript의 경우 선택지:

    ? Choose your UI template › 《UI 템플릿을 선택하십시오》
    Vanilla
    Vue
    Svelte
    React
    Solid
    Angular
    Preact
    

    ? Choose your UI flavor › 《UI 맛을 선택하십시오》
    TypeScript
    JavaScript

    .NET의 경우 선택지:

    ? Choose your UI template › 《UI 템플릿을 선택하십시오》
    Blazor  (https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor/)

설정이 완료되면 템플릿이 생성되고 설정 후 패키지 관리자를 사용한 해당 템플릿의 실행 방법이 표시됩니다. 만약 패키지 관리자가 시스템 내의 종속성 부족을 감지하면 패키지 목록이 출력되어 부족한 패키지 설치를 촉구합니다.

개발 서버 시작

섹션 제목: “개발 서버 시작”

create-tauri-app으로 설정 후, 프로젝트 폴더로 이동하여 종속성을 설치한 다음 Tauri CLI (명령줄 인터페이스)를 사용하여 개발 서버를 시작합니다.

cd tauri-app
npm install
npm run tauri dev

이제 새 창이 열리고 앱이 실행됩니다.

축하합니다! Tauri 앱이 완성되었습니다! 🚀

수동 설정

섹션 제목: “수동 설정”

이미 프론트엔드가 완성되었거나 직접 설정을 하고 싶은 경우, “Tauri CLI”를 이용하여 해당 프로젝트의 백엔드를 개별적으로 초기화할 수 있습니다.

  1. 프로젝트용 새 디렉토리를 만들고 프론트엔드를 초기화합니다. 일반적인 HTML, CSS, JavaScript나 Next.js, Nuxt, Svelte, Yew, Leptos와 같은 원하는 프레임워크를 사용할 수 있습니다. 필요한 것은 브라우저에 앱을 제공하는 방법뿐입니다. 간단한 예로, 다음은 간단한 Vite 프론트엔드 빌드 도구를 설정하는 방법입니다:

    mkdir tauri-app
    cd tauri-app
    npm create vite@latest .

  2. 다음으로, 위에서 도입한 패키지 관리자를 사용하여 Tauri의 CLI 도구를 설치합니다. cargo를 사용하여 Tauri CLI를 설치하는 경우 “전역 설치”해야 합니다:

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

  3. 프론트엔드 개발 서버의 URL을 결정합니다. 이는 Tauri가 콘텐츠를 로드하는 데 사용할 URL입니다. 예를 들어, Vite를 사용하는 경우 기본 URL은 http://localhost:5173입니다.

  4. 프로젝트 디렉토리로 돌아가 Tauri를 초기화합니다:

    npx tauri init

    위의 명령을 실행하면 다양한 질문 항목에 대한 프롬프트가 표시됩니다:

    ✔ What is your app name? tauri-app 《앱 이름은 무엇입니까?》
    ✔ What should the window title be? tauri-app 《창 제목은 무엇으로 하시겠습니까?》
    ✔ Where are your web assets located? .. 《웹 관련 데이터는 어디에 있습니까?》
    ✔ What is the url of your dev server? http://localhost:5173 《개발 서버의 URL은 무엇입니까?》
    ✔ What is your frontend dev command? pnpm run dev 《프론트엔드 개발 명령은 무엇입니까?》
    ✔ What is your frontend build command? pnpm run build 《프론트엔드 빌드
    명령은 무엇입니까?》

    이렇게 하면 필요한 Tauri 환경 설정 파일을 포함하는 src-tauri 디렉토리가 프로젝트에 생성됩니다.

  5. Tauri 앱이 작동하는지 확인하기 위해 개발 서버를 실행합니다:

    npx tauri dev

    이 명령은 Rust 코드를 컴파일하고 만든 웹 콘텐츠 창을 표시합니다.

축하합니다! Tauri CLI를 사용하여 새로운 Tauri 프로젝트가 완성되었습니다! 🚀

다음 단계는…

섹션 제목: “다음 단계는…”
Support on Open Collective Sponsor on GitHub

© 2025 Tauri Contributors. CC-BY / MIT