---
title: 프로젝트 만들기
sidebar:
  order: 3
---

import { Card, Steps } from '@astrojs/starlight/components';

import Cta from '@fragments/cta.mdx';

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

`create-tauri-app`에는 현재 다음과 같은 템플릿이 있습니다: "vanilla"(HTML, CSS 및 JavaScript/프레임워크 없음), "[Vue.js](https://vuejs.org)", "[Svelte](https://svelte.dev)", "[React](https://reactjs.org/)", "[SolidJS](https://www.solidjs.com/)", "[Angular](https://angular.io/)", "[Preact](https://preactjs.com/)", "[Yew](https://yew.rs/)", "[Leptos](https://github.com/leptos-rs/leptos)" 및 "[Sycamore](https://sycamore-rs.netlify.app/)"입니다. [Awesome Tauri repo](https://github.com/tauri-apps/awesome-tauri)에서 찾을 수 있는 커뮤니티 제작 템플릿이나 프레임워크도 추가로 사용할 수 있습니다.

{/* TODO: redirect to integrate to existing front-end project specific docs */}
또는 아래의 "[수동 설정](#수동-설정)"을 실행하여 Tauri를 현재 작업 중인 프로젝트에 추가함으로써 현재 코드를 Tauri 앱으로 변경할 수 있습니다.

## `create-tauri-app` 이용하기

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

<Cta />

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

:::tip[어떤 것을 선택해야 할지 모르겠나요?]

{/* TODO: redirect to integrate to existing front-end project specific docs */}
처음이라면 "vanilla" 템플릿(HTML, CSS 및 JavaScript/프레임워크 없음)을 이용하여 프로젝트를 시작하는 것이 좋습니다. 언제든지 나중에 [프론트엔드 프레임워크를 통합](/ko/start/create-project/)할 수 있습니다.

- 프론트엔드에 사용할 언어 선택: `TypeScript / JavaScript`
- 패키지 관리자 선택: `pnpm`
- 사용자 인터페이스(UI) 템플릿 선택: `Vanilla`
- 사용자 인터페이스(UI) 맛 선택: `TypeScript`

:::

#### 새로운 프로젝트 준비하기

<Steps>

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/)
   ```

</Steps>

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

{/* TODO: Can CTA offer to install the deps? */}

#### 개발 서버 시작

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

import CommandTabs from '@components/CommandTabs.astro';

<CommandTabs
  npm="cd tauri-app
    npm install
    npm run tauri dev"
  yarn="cd tauri-app
    yarn install
    yarn tauri dev"
  pnpm="cd tauri-app
    pnpm install
    pnpm tauri dev"
  deno="cd tauri-app
    deno install
    deno task tauri dev"
  cargo='cd tauri-app
    cargo install tauri-cli --version "^2.0.0" --locked
    cargo tauri dev'
/>

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

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

## 수동 설정

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

:::note
다음 예에서는 새 프로젝트를 시작한다고 가정합니다. 애플리케이션의 프론트엔드를 이미 초기화한 경우 첫 번째 단계를 생략할 수 있습니다.
:::

<Steps>

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

        <CommandTabs
            npm="mkdir tauri-app
                cd tauri-app
                npm create vite@latest ."
            yarn="mkdir tauri-app
                cd tauri-app
                yarn create vite ."
            pnpm="mkdir tauri-app
                cd tauri-app
                pnpm create vite ."
            deno="mkdir tauri-app
                cd tauri-app
                deno run -A npm:create-vite ."
        />

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

        <CommandTabs
            npm="npm install -D @tauri-apps/cli@latest"
            yarn="yarn add -D @tauri-apps/cli@latest"
            pnpm="pnpm add -D @tauri-apps/cli@latest"
            deno="deno add -D npm:@tauri-apps/cli@latest"
            cargo='cargo install tauri-cli --version "^2.0.0" --locked'
        />

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

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

        <CommandTabs
            npm="npx tauri init"
            yarn="yarn tauri init"
            pnpm="pnpm tauri init"
            deno="deno task tauri init"
            cargo="cargo tauri init"
        />

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

        ```sh frame=none
        ✔ 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 앱이 작동하는지 확인하기 위해 개발 서버를 실행합니다:

        <CommandTabs
            npm="npx tauri dev"
            yarn="yarn tauri dev"
            pnpm="pnpm tauri dev"
            deno="deno task tauri dev"
            cargo="cargo tauri dev"
        />

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

</Steps>

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

## 다음 단계는...

- [프론트엔드 설정에 대해](/ko/start/frontend/)
- [Tauri 명령줄 인터페이스에 대해](/ko/reference/cli/)
- [Tauri 앱 만드는 방법에 대해](/ko/develop/)
- [Tauri 확장을 위한 추가 기능에 대해](ko/plugin/)
