---
title: 개발
description: Tauri를 이용한 프로그램 개발의 중심 개념
sidebar:
order: 0
label: 개요
i18nReady: true
---
import CommandTabs from '@components/CommandTabs.astro';
[Tauri란?](/ko/start/) 장에서 모든 설정을 마쳤다면, Tauri를 사용하여 애플리케이션을 실행할 준비가 된 것입니다.
"UI 프레임워크" 또는 "JavaScript 번들러"를 사용하는 경우, 개발 프로세스를 신속하게 하는 개발 서버에 연결할 수 있을 가능성이 있습니다. 따라서 앱의 "개발 URL"과 그것을 시작하는 "스크립트"를 설정하지 않았다면, "Reference(참고 정보)" 장에 있는 [devUrl](/ko/reference/config/#devurl) 및 [beforeDevCommand](/ko/reference/config/#beforedevcommand) 설정 값을 사용하여 설정할 수 있습니다:
```json title=tauri.conf.json
{
"build": {
"devUrl": "http://localhost:3000",
"beforeDevCommand": "npm run dev"
}
}
```
:::note
어떤 프레임워크든 고유한 개발 도구가 있습니다. 그러한 도구 전체를 다루거나 그 정보를 최신 상태로 유지하는 것은 이 가이드의 목적이 아닙니다.
자신이 선택한 프레임워크의 관련 문서를 참조하여 그 내용을 학습하고 올바른 설정 값을 확정하십시오.
:::
"UI 프레임워크"도 "모듈 번들러"도 사용하지 않는 경우, Tauri에서 "프론트엔드 소스 코드"를 로드하면 Tauri CLI에 의해 개발 서버가 시작됩니다:
```json title=tauri.conf.json
{
"build": {
"frontendDist": "./src"
}
}
```
위의 예에서는 `src` 폴더에 프론트엔드에서 로드된 다른 애셋과 함께 `index.html` 파일이 포함되어 있어야 한다는 점에 유의하십시오.
:::caution[기본 개발 서버 보안]
내장 Tauri 개발 서버는 "상호 인증"이나 "암호화"를 지원하지 않습니다. 따라서 신뢰할 수 없는 네트워크에서의 개발에는 사용하지 마십시오.
자세한 내용은 [개발 서버의 보안 관련 고려 사항](/ko/security/lifecycle/#개발-서버)을 참조하십시오.
> > > 《번역 주》 **기본 개발 서버** 원문은 "plain/vanilla Dev Server". 옵션이나 사용자 정의를 전혀 포함하지 않은 완전히 기본 상태의 서버.
:::
### 데스크톱 애플리케이션 개발
데스크톱용 애플리케이션을 개발하려면 `tauri dev` 명령을 실행합니다.
처음 이 명령을 실행하는 경우, Rust 패키지 관리자가 필요한 모든 패키지를 다운로드하고 빌드하는 데 **몇 분**이 걸릴 수 있습니다.
이러한 데이터는 캐시되어 있으며, 코드는 재빌드만 필요하므로 이후 빌드는 훨씬 빨라집니다.
Rust 빌드가 완료되면 Webview가 열리고 웹 앱이 표시됩니다.
웹 앱을 변경할 수 있으며, 도구가 지원하는 경우 브라우저처럼 Webview도 자동으로 업데이트됩니다.
#### "웹 인스펙터" 열기
Webview를 마우스 오른쪽 버튼으로 클릭하고 "검사(Inspect)"를 클릭하거나, Windows 및 Linux에서는 단축키 `Ctrl + Shift + I`, macOS에서는 단축키 `Cmd + Option + I`를 사용하여 "웹 인스펙터"를 열어 애플리케이션을 디버깅할 수 있습니다.
### 모바일 애플리케이션 개발
모바일 개발은 데스크톱 버전 개발과 유사하지만, 플랫폼에 따라 `tauri android dev` 또는 `tauri 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 설정 예입니다:
```js
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,
},
});
```
자세한 내용은 각 프레임워크의 "설정 가이드"를 확인하십시오.
:::note
[create-tauri-app](https://github.com/tauri-apps/create-tauri-app)을 사용하여 만든 프로젝트는 추가 설정 없이 바로 사용할 수 있는 모바일 개발용 개발 서버가 설정됩니다.
:::
#### 장치 선택
기본적으로 "모바일 dev 명령"은 연결된 장치에서 애플리케이션을 실행하려고 시도하고 사용할 시뮬레이터를 선택하라는 메시지를 표시합니다. 실행 대상을 미리 정의하려면 "장치 이름" 또는 "시뮬레이터 이름"을 인수로 지정합니다:
#### Xcode 또는 Android Studio 사용
또는 Xcode 또는 Android Studio를 사용하여 애플리케이션을 개발할 수도 있습니다.
이를 통해 명령줄 도구 대신 IDE를 사용하여 개발 문제를 해결할 수 있습니다.
연결된 장치 또는 시뮬레이터에서 실행하는 대신 모바일 IDE를 열려면 `--open` 플래그를 사용하십시오:
:::note
애플리케이션을 iOS 물리적 장치에서 실행하는 경우 `--host` 인수도 지정해야 하며, 개발 서버 측에서는 호스트로 `process.env.TAURI_DEV_HOST` 값을 사용해야 합니다.
자세한 내용은 각 프레임워크의 "설정 가이드"를 확인하십시오.
:::
:::caution[(경고)]
Xcode 또는 Android Studio를 사용하려면 Tauri CLI 프로세스가 실행 중이어야 하며, 강제 종료할 수 없습니다.
`tauri [android|ios] dev --open` 명령을 사용하여 IDE를 닫을 때까지 해당 프로세스를 실행 상태로 두십시오.
:::
#### "웹 인스펙터" 열기
- 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)**을 활성화해야 합니다.
:::note
각 Android 배포판에는 "개발자 모드"를 활성화하는 고유한 방법이 있습니다. 자세한 내용은 각 제조업체의 설명서를 확인하십시오.
:::
Android용 "웹 인스펙터"는 Google Chrome의 DevTools를 이용하며, Chrome 브라우저에서 `chrome://inspect`를 검색하면 액세스할 수 있습니다.
Android 애플리케이션이 실행 중인 경우 장치 또는 에뮬레이터가 "원격 장치 목록"에 표시되어야 하며, 장치에서 **검사(inspect)**를 클릭하면 "개발자 도구"를 열 수 있습니다.
#### 문제 해결
1. Xcode에서의 빌드 스크립트 실행 오류
Tauri는 Tauri CLI를 실행하는 빌드 단계를 생성하여 iOS Xcode 프로젝트에 연결(후크)하지만, 이는 실행 시 로드되는 라이브러리로 Rust 소스를 컴파일하기 위한 것입니다.
빌드 단계는 "Xcode 프로세스 컨텍스트"에서 실행되므로 PATH 추가와 같은 셸 수정을 수행하지 못할 수 있습니다. 이 때문에 "Node.js 버전 관리자"와 같은 도구를 사용하는 경우 호환성 문제가 있을 수 있으므로 주의하십시오.
2. iOS 앱 첫 실행 시 네트워크 허용 요청 프롬프트
처음 `tauri ios dev`를 실행하면 로컬 네트워크의 장치를 검색하고 연결할 수 있는 권한을 요청하는 iOS 메시지가 표시될 수 있습니다.
iOS 장치에서 개발 서버에 액세스하려면 개발 서버를 로컬 네트워크에 공개해야 하므로 이 권한이 필요합니다.
장치에서 앱을 실행하려면 "허용(Allow)"을 클릭하고 애플리케이션을 다시 시작해야 합니다.
### 소스 코드 변경에 대한 대응
Webview가 실시간으로 변경 내용을 반영하는 것과 마찬가지로 Tauri도 Rust 파일의 변경을 감시하고 있으며, 파일을 변경하면 애플리케이션이 자동으로 재빌드되고 재시작됩니다.
이 동작은 `tauri dev` 명령에 `--no-watch` 플래그를 사용하여 비활성화할 수 있습니다.
변경이 감시되는 파일을 제한하려면 "src-tauri" 폴더에 `.taurignore` 파일을 만듭니다. 이 파일은 일반적인 ".gitignore 파일"과 동일하게 작동하므로 임의의 폴더나 파일을 무시할 수 있습니다:
```filename=.taurignore
build/
src/generated/*.rs
deny.toml
```
### "브라우저 개발 도구" 사용
Tauri의 API는 앱 창에서만 작동하므로 일단 Tauri API 사용을 시작하면 시스템 브라우저에서 프론트엔드를 열 수 없게 됩니다.
브라우저 개발자 도구를 사용하려면 Tauri API 호출을 HTTP 서버를 통해 브리지하도록 [tauri-invoke-http](https://github.com/tauri-apps/tauri-invoke-http)를 설정하십시오.
### 소스 관리
"결정론적 빌드"를 제공하기 위해 Cargo가 잠금 파일을 사용하므로 프로젝트 리포지토리에서 `src-tauri/Cargo.lock`과 `src-tauri/Cargo.toml`을 git에 **커밋해야 합니다**.
따라서 모든 애플리케이션에서 `Cargo.lock`을 체크인(등록)하는 것이 좋습니다. `src-tauri/target` 폴더 또는 그 안의 파일은 **커밋하지 마십시오**.
> > > 《번역 주》 **결정론적 빌드** 원문은 "deterministic builds". determinstic이란 "알고리즘에 결정성이 있어 다음 단계가 항상 (확정적으로) 하나로 정해지는 것", 즉, "동일한 소스 코드를 사용하여 컴파일했을 때 확실히 동일한 바이너리 데이터를 재현하는 빌드 기법"을 말합니다(자세한 내용은 Wikipedia [재현 가능한 빌드](https://ko.wikipedia.org/wiki/재현_가능한_빌드)를 참조하십시오).
【※ 이 한국어판은, 「Mar 29, 2025 영문판」에 근거하고 있습니다】