> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kazzle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 미리보기

> 앱 초안용 개발 서버 미리보기.

# 미리보기

앱 초안을 열면 Kazzle이 개발 서버를 시작하고 라이브 미리보기를 표시할 수 있습니다.

## 작동 방식

1. 사이드바에서 초안 탭 열기
2. 미리보기가 자동으로 시작됨 (또는 "미리보기 시작" 수동 클릭)
3. Kazzle이 `kazzle.config.ts`에서 `lifecycle.dev` 읽기
4. 개발 명령이 할당된 포트에서 실행
5. 미리보기 URL이 초안 탭에 표시

## 개발 명령 구성

UI 컴포넌트에서 `lifecycle.dev`를 설정합니다:

```typescript theme={"theme":"material-theme-darker"}
import { defineConfig } from '@kazzle/app';

export default defineConfig({
  components: [
    {
      name: 'My App',
      type: 'ui',
      path: '.',
      lifecycle: { dev: 'bun run dev' }
    }
  ]
});
```

`lifecycle.dev`가 설정되지 않으면 미리보기 시스템이 일반적인 개발 서버 감지(Vite, Next.js 등)로 폴백됩니다.

## 미리보기 URL

각 앱은 샌드박스의 전용 포트를 받습니다. 미리보기 URL은 다음 패턴을 따릅니다:

```
http://localhost:{PORT}
```

`PORT` 환경 변수는 미리보기 시스템에서 자동으로 설정됩니다.

## 핫 리로드

코드 변경 사항은 개발 서버의 핫 리로드(HMR)에 의해 감지됩니다. 사용자나 AI가 파일을 편집할 때 미리보기가 실시간으로 업데이트됩니다.

## 수동 제어

* **미리보기 시작** — 개발 서버가 실행 중이 아니면 시작
* **미리보기 중지** — 개발 서버 프로세스 종료
* **다시 시작** — 중지 + 시작 (구성 변경 후 유용)

## 검증

미리보기는 앱-개발 탭이 열리고 예상된 UI를 표시할 때만 검증됩니다. 시간 초과, 탭 열기 실패, 중지된 프로세스 또는 미리보기 URL 누락은 미리보기가 아직 검증되지 않았음을 의미합니다.

AI가 앱을 빌드할 때는 초안을 시작하거나 변경한 후 앱-개발 탭을 열어야 합니다. 명령 출력만으로 앱이 실행 중이라고 주장해서는 안 됩니다.