프리뷰 패널
Preview 패널에서는 만들고 있는 앱을 실시간으로 확인하고 테스트할 수 있습니다.
주요 특징
1. 실시간 렌더링
AI가 코드를 생성/수정하면 즉시 Preview에 반영됩니다.
코드 변경 → 자동 새로고침
별도의 빌드 과정 없음
실제 앱과 동일한 동작
2. 상호작용 가능
Preview에서 실제 앱처럼 동작합니다.
버튼 클릭
폼 입력
모달 열기/닫기
페이지 이동
3. 반응형 확인
PC와 Mobile 뷰를 전환하여 반응형 디자인을 확인합니다.
PC / Mobile 전환
Header의 토글 버튼으로 전환합니다.
PC
전체 너비
데스크톱 레이아웃 확인
Mobile
375px 너비
모바일 레이아웃 확인
Visual Edit 모드
Visual Edit 모드가 활성화되면 Preview에서 요소를 선택할 수 있습니다.
활성화 방법
Chat 패널의 🎯 버튼 클릭
선택 방법
Preview에서 수정할 요소 위에 마우스 오버
요소가 하이라이트됨
클릭하여 선택
선택 후
Chat에 선택된 요소 정보 표시
Right 패널에 상세 정보 표시
해당 요소에 대한 수정 요청 가능
→ Visual Edit Mode 상세
데이터 테스트
Preview에서 입력한 데이터는 임시 데이터입니다.
임시 데이터 특징
새로고침하면 사라짐 (데이터 저장 기능 추가 전)
에디터 내에서만 유지
테스트 목적으로 사용
실제 데이터 저장
데이터를 영구 저장하려면 AI에게 요청하세요.
저장 기능 추가 후에는:
입력한 데이터가 서버에 저장
새로고침해도 유지
배포 후에도 동일하게 동작
페이지 네비게이션
다중 페이지 앱에서는 Preview 내에서 페이지를 이동할 수 있습니다.
페이지 이동 방법
앱 내 링크/버튼 클릭
URL 직접 입력 (Header의 URL 입력창)
현재 페이지 확인
Chat 패널 하단의 페이지 칩에서 현재 경로를 확인합니다.
로딩 상태
AI가 코드를 생성하는 동안 로딩 오버레이가 표시됩니다.
스피너 애니메이션
"Loading preview..." 메시지
코드 생성 완료 시 자동으로 사라짐
에러 표시
코드에 오류가 있으면 Preview에 에러 메시지가 표시됩니다.
에러 메시지 예시
에러 해결 방법
AI에게 요청: "Preview에서 에러가 나. 수정해줘"
직접 수정 (Pro): Code 패널에서 해당 라인 수정
새로고침
Preview를 수동으로 새로고침하려면:
Header의 새로고침 버튼 클릭
키보드 단축키 사용
새로고침이 필요한 경우
Preview가 멈춘 것 같을 때
상태가 꼬인 것 같을 때
초기 상태로 돌아가고 싶을 때
Preview 확대/축소
Code 패널이 열려 있을 때 Preview 패널 크기를 조절할 수 있습니다.
접기 버튼 (◀): Preview 숨김
펼치기 버튼 (▶): Preview 표시
팁
마지막 업데이트