프리뷰 패널

Preview 패널에서는 만들고 있는 앱을 실시간으로 확인하고 테스트할 수 있습니다.


주요 특징

1. 실시간 렌더링

AI가 코드를 생성/수정하면 즉시 Preview에 반영됩니다.

  • 코드 변경 → 자동 새로고침

  • 별도의 빌드 과정 없음

  • 실제 앱과 동일한 동작

2. 상호작용 가능

Preview에서 실제 앱처럼 동작합니다.

  • 버튼 클릭

  • 폼 입력

  • 모달 열기/닫기

  • 페이지 이동

3. 반응형 확인

PC와 Mobile 뷰를 전환하여 반응형 디자인을 확인합니다.


PC / Mobile 전환

Header의 토글 버튼으로 전환합니다.

모드
화면 크기
용도

PC

전체 너비

데스크톱 레이아웃 확인

Mobile

375px 너비

모바일 레이아웃 확인

circle-info

Mobile 뷰에서 레이아웃이 깨지면 AI에게 반응형 수정을 요청하세요.


Visual Edit 모드

Visual Edit 모드가 활성화되면 Preview에서 요소를 선택할 수 있습니다.

활성화 방법

Chat 패널의 🎯 버튼 클릭

선택 방법

  1. Preview에서 수정할 요소 위에 마우스 오버

  2. 요소가 하이라이트됨

  3. 클릭하여 선택

선택 후

  • Chat에 선택된 요소 정보 표시

  • Right 패널에 상세 정보 표시

  • 해당 요소에 대한 수정 요청 가능

→ Visual Edit Mode 상세


데이터 테스트

Preview에서 입력한 데이터는 임시 데이터입니다.

임시 데이터 특징

  • 새로고침하면 사라짐 (데이터 저장 기능 추가 전)

  • 에디터 내에서만 유지

  • 테스트 목적으로 사용

실제 데이터 저장

데이터를 영구 저장하려면 AI에게 요청하세요.

저장 기능 추가 후에는:

  • 입력한 데이터가 서버에 저장

  • 새로고침해도 유지

  • 배포 후에도 동일하게 동작


페이지 네비게이션

다중 페이지 앱에서는 Preview 내에서 페이지를 이동할 수 있습니다.

페이지 이동 방법

  • 앱 내 링크/버튼 클릭

  • URL 직접 입력 (Header의 URL 입력창)

현재 페이지 확인

Chat 패널 하단의 페이지 칩에서 현재 경로를 확인합니다.


로딩 상태

AI가 코드를 생성하는 동안 로딩 오버레이가 표시됩니다.

  • 스피너 애니메이션

  • "Loading preview..." 메시지

  • 코드 생성 완료 시 자동으로 사라짐


에러 표시

코드에 오류가 있으면 Preview에 에러 메시지가 표시됩니다.

에러 메시지 예시

에러 해결 방법

  1. AI에게 요청: "Preview에서 에러가 나. 수정해줘"

  2. 직접 수정 (Pro): Code 패널에서 해당 라인 수정

circle-info

에러 메시지를 그대로 복사해서 AI에게 전달하면 더 정확한 수정이 가능합니다.


새로고침

Preview를 수동으로 새로고침하려면:

  • Header의 새로고침 버튼 클릭

  • 키보드 단축키 사용

새로고침이 필요한 경우

  • Preview가 멈춘 것 같을 때

  • 상태가 꼬인 것 같을 때

  • 초기 상태로 돌아가고 싶을 때


Preview 확대/축소

Code 패널이 열려 있을 때 Preview 패널 크기를 조절할 수 있습니다.

  • 접기 버튼 (◀): Preview 숨김

  • 펼치기 버튼 (▶): Preview 표시


circle-info

실제 사용 시나리오로 테스트

Preview에서 실제 사용자처럼 앱을 사용해보세요. 예상치 못한 문제를 미리 발견할 수 있습니다.

circle-info

Mobile 뷰 체크

배포 전에 반드시 Mobile 뷰에서 레이아웃을 확인하세요. 실제 사용자의 절반 이상이 모바일로 접속합니다.

Last updated