콘텐츠로 이동
Tauri
Guides References Blog Releases

개발

Tauri란? 장에서 모든 설정을 마쳤다면, Tauri를 사용하여 애플리케이션을 실행할 준비가 된 것입니다.

“UI 프레임워크” 또는 “JavaScript 번들러”를 사용하는 경우, 개발 프로세스를 신속하게 하는 개발 서버에 연결할 수 있을 가능성이 있습니다. 따라서 앱의 “개발 URL”과 그것을 시작하는 “스크립트”를 설정하지 않았다면, “Reference(참고 정보)” 장에 있는 devUrl 및 beforeDevCommand 설정 값을 사용하여 설정할 수 있습니다:

tauri.conf.json
{
  "build": {
    "devUrl": "http://localhost:3000",
    "beforeDevCommand": "npm run dev"
  }
}

“UI 프레임워크”도 “모듈 번들러”도 사용하지 않는 경우, Tauri에서 “프론트엔드 소스 코드”를 로드하면 Tauri CLI에 의해 개발 서버가 시작됩니다:

tauri.conf.json
{
  "build": {
    "frontendDist": "./src"
  }
}

위의 예에서는 src 폴더에 프론트엔드에서 로드된 다른 애셋과 함께 index.html 파일이 포함되어 있어야 한다는 점에 유의하십시오.

데스크톱 애플리케이션 개발

섹션 제목: “데스크톱 애플리케이션 개발”

데스크톱용 애플리케이션을 개발하려면 tauri dev 명령을 실행합니다.

npm run tauri dev

처음 이 명령을 실행하는 경우, Rust 패키지 관리자가 필요한 모든 패키지를 다운로드하고 빌드하는 데 몇 분이 걸릴 수 있습니다. 이러한 데이터는 캐시되어 있으며, 코드는 재빌드만 필요하므로 이후 빌드는 훨씬 빨라집니다.

Rust 빌드가 완료되면 Webview가 열리고 웹 앱이 표시됩니다. 웹 앱을 변경할 수 있으며, 도구가 지원하는 경우 브라우저처럼 Webview도 자동으로 업데이트됩니다.

”웹 인스펙터” 열기

섹션 제목: “”웹 인스펙터” 열기”

Webview를 마우스 오른쪽 버튼으로 클릭하고 “검사(Inspect)“를 클릭하거나, Windows 및 Linux에서는 단축키 Ctrl + Shift + I, macOS에서는 단축키 Cmd + Option + I를 사용하여 “웹 인스펙터”를 열어 애플리케이션을 디버깅할 수 있습니다.

모바일 애플리케이션 개발

섹션 제목: “모바일 애플리케이션 개발”

모바일 개발은 데스크톱 버전 개발과 유사하지만, 플랫폼에 따라 tauri android dev 또는 tauri ios dev를 실행해야 합니다:

npm run tauri [android|ios] dev

처음 이 명령을 실행하는 경우, Rust 패키지 관리자가 필요한 모든 패키지를 다운로드하고 빌드하는 데 몇 분이 걸릴 수 있습니다. 이러한 데이터는 캐시되어 있으며, 코드는 재빌드만 필요하므로 이후 빌드는 훨씬 빨라집니다.

개발 서버

섹션 제목: “개발 서버”

모바일용 개발 서버도 데스크톱용과 유사하게 작동하지만, iOS 물리적 장치에서 실행하는 경우 TAURI_DEV_HOST 환경 변수로 정의되고 Tauri CLI에서 제공하는 특정 주소에 응답(수신)하도록 설정해야 합니다. 이 주소는 “공용 네트워크 주소”(기본 동작) 또는 iOS 물리적 장치의 “TUN 주소” 중 하나입니다. 후자는 더 안전하지만 현재로서는 장치에 연결하려면 Xcode가 필요합니다.

iOS 장치 주소를 사용하려면 dev 명령을 실행하기 전에 Xcode를 열고 “창(Window)” > “장치 및 시뮬레이터(Devices and Simulation)” 메뉴에서 장치가 네트워크를 통해 연결되어 있는지 확인해야 합니다. 그런 다음 tauri ios dev --force-ip-prompt를 실행하여 iOS 장치 주소(::2로 끝나는 IPv6 주소)를 선택해야 합니다.

개발 서버가 iOS 장치에서 액세스할 수 있는 올바른 호스트에서 응답(수신)하도록 하려면 TAURI_DEV_HOST 값이 제공된 경우 이를 사용하도록 설정을 미세 조정해야 합니다. 다음은 Vite 설정 예입니다:

import { defineConfig } from 'vite';


const host = process.env.TAURI_DEV_HOST;


// https://vitejs.dev/config/
export default defineConfig({
  clearScreen: false,
  server: {
    host: host || false,
    port: 1420,
    strictPort: true,
    hmr: host
      ? {
          protocol: 'ws',
          host,
          port: 1421,
        }
      : undefined,
  },
});

자세한 내용은 각 프레임워크의 “설정 가이드”를 확인하십시오.

장치 선택

섹션 제목: “장치 선택”

기본적으로 “모바일 dev 명령”은 연결된 장치에서 애플리케이션을 실행하려고 시도하고 사용할 시뮬레이터를 선택하라는 메시지를 표시합니다. 실행 대상을 미리 정의하려면 “장치 이름” 또는 “시뮬레이터 이름”을 인수로 지정합니다:

npm run tauri ios dev 'iPhone 15'

Xcode 또는 Android Studio 사용

섹션 제목: “Xcode 또는 Android Studio 사용”

또는 Xcode 또는 Android Studio를 사용하여 애플리케이션을 개발할 수도 있습니다. 이를 통해 명령줄 도구 대신 IDE를 사용하여 개발 문제를 해결할 수 있습니다. 연결된 장치 또는 시뮬레이터에서 실행하는 대신 모바일 IDE를 열려면 --open 플래그를 사용하십시오:

npm run tauri [android|ios] dev --open

”웹 인스펙터” 열기

섹션 제목: “”웹 인스펙터” 열기”

  • iOS

    iOS 애플리케이션의 “웹 인스펙터”에 액세스하려면 Safari를 사용해야 합니다.

    Mac 컴퓨터에서 Safari를 열고 메뉴 막대에서 **Safari > 설정(Setting)**을 선택하고 **고급(Advanced)**을 클릭한 다음 **웹 개발자용 기능 표시(Show features for web developers)**를 선택합니다.

    물리적 장치에서 실행하는 경우 **설정(Settings) > Safari > 고급(Advanced)**에서 **웹 인스펙터(Web Inspector)**를 활성화해야 합니다.

    모든 절차를 수행하면 Safari에 개발(Develop) 메뉴가 표시되고, 거기에 검증해야 할 연결된 장치와 애플리케이션이 있습니다. 장치 또는 시뮬레이터를 선택하고 **localhost(로컬 호스트)**를 클릭하여 “Safari 개발 도구” 창을 엽니다.

  • Android

    “인스펙터”는 Android 에뮬레이터에서는 기본적으로 활성화되어 있지만 물리적 장치에서는 활성화해야 합니다. Android 장치를 컴퓨터에 연결하고 Android 장치에서 설정(Settings) 앱을 열고 **정보(About)**를 선택한 다음 “빌드 번호”까지 스크롤하여 일곱 번 탭합니다. 이렇게 하면 Android 장치의 “개발자 모드”와 개발자 옵션(Developer Options) 설정이 활성화됩니다.

    장치에서 애플리케이션 디버깅을 활성화하려면 개발자 옵션(Developer Options) 설정에 들어가 개발자 옵션 스위치를 켜고 **USB 디버깅(USB Debugging)**을 활성화해야 합니다.

    Android용 “웹 인스펙터”는 Google Chrome의 DevTools를 이용하며, Chrome 브라우저에서 chrome://inspect를 검색하면 액세스할 수 있습니다. Android 애플리케이션이 실행 중인 경우 장치 또는 에뮬레이터가 “원격 장치 목록”에 표시되어야 하며, 장치에서 **검사(inspect)**를 클릭하면 “개발자 도구”를 열 수 있습니다.

문제 해결

섹션 제목: “문제 해결”
  1. Xcode에서의 빌드 스크립트 실행 오류

Tauri는 Tauri CLI를 실행하는 빌드 단계를 생성하여 iOS Xcode 프로젝트에 연결(후크)하지만, 이는 실행 시 로드되는 라이브러리로 Rust 소스를 컴파일하기 위한 것입니다. 빌드 단계는 “Xcode 프로세스 컨텍스트”에서 실행되므로 PATH 추가와 같은 셸 수정을 수행하지 못할 수 있습니다. 이 때문에 “Node.js 버전 관리자”와 같은 도구를 사용하는 경우 호환성 문제가 있을 수 있으므로 주의하십시오.

  1. iOS 앱 첫 실행 시 네트워크 허용 요청 프롬프트

처음 tauri ios dev를 실행하면 로컬 네트워크의 장치를 검색하고 연결할 수 있는 권한을 요청하는 iOS 메시지가 표시될 수 있습니다. iOS 장치에서 개발 서버에 액세스하려면 개발 서버를 로컬 네트워크에 공개해야 하므로 이 권한이 필요합니다. 장치에서 앱을 실행하려면 “허용(Allow)“을 클릭하고 애플리케이션을 다시 시작해야 합니다.

소스 코드 변경에 대한 대응

섹션 제목: “소스 코드 변경에 대한 대응”

Webview가 실시간으로 변경 내용을 반영하는 것과 마찬가지로 Tauri도 Rust 파일의 변경을 감시하고 있으며, 파일을 변경하면 애플리케이션이 자동으로 재빌드되고 재시작됩니다.

이 동작은 tauri dev 명령에 --no-watch 플래그를 사용하여 비활성화할 수 있습니다.

변경이 감시되는 파일을 제한하려면 “src-tauri” 폴더에 .taurignore 파일을 만듭니다. 이 파일은 일반적인 “.gitignore 파일”과 동일하게 작동하므로 임의의 폴더나 파일을 무시할 수 있습니다:

build/
src/generated/*.rs
deny.toml

“브라우저 개발 도구” 사용

섹션 제목: ““브라우저 개발 도구” 사용”

Tauri의 API는 앱 창에서만 작동하므로 일단 Tauri API 사용을 시작하면 시스템 브라우저에서 프론트엔드를 열 수 없게 됩니다.

브라우저 개발자 도구를 사용하려면 Tauri API 호출을 HTTP 서버를 통해 브리지하도록 tauri-invoke-http를 설정하십시오.

소스 관리

섹션 제목: “소스 관리”

“결정론적 빌드”를 제공하기 위해 Cargo가 잠금 파일을 사용하므로 프로젝트 리포지토리에서 src-tauri/Cargo.lock과 src-tauri/Cargo.toml을 git에 커밋해야 합니다. 따라서 모든 애플리케이션에서 Cargo.lock을 체크인(등록)하는 것이 좋습니다. src-tauri/target 폴더 또는 그 안의 파일은 커밋하지 마십시오.

《번역 주》 결정론적 빌드 원문은 “deterministic builds”. determinstic이란 “알고리즘에 결정성이 있어 다음 단계가 항상 (확정적으로) 하나로 정해지는 것”, 즉, “동일한 소스 코드를 사용하여 컴파일했을 때 확실히 동일한 바이너리 데이터를 재현하는 빌드 기법”을 말합니다(자세한 내용은 Wikipedia 재현 가능한 빌드를 참조하십시오).

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

Support on Open Collective Sponsor on GitHub

© 2025 Tauri Contributors. CC-BY / MIT