미리보기

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

작동 방식

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

개발 명령 구성

UI 컴포넌트에서 lifecycle.dev 설정:

import { defineConfig } from './kazzle.types';

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

​미리보기

​작동 방식

​개발 명령 구성

​미리보기 URL

​핫 리로드

​수동 제어

​검증