메시지 Your preview will appear here는 미리보기 프로세스가 작동하는 앱을 생성하지 못했다는 의미입니다. 이는 증상일 뿐 원인은 아닙니다. 일반적으로 터미널이나 브라우저 콘솔의 첫 번째 빨간 줄이 유용한 단서입니다.

30초 해결

  1. 플랫폼에 활성 중인 사고가 있는지 확인하세요.
  2. 프로젝트 터미널을 열고, 첫 번째 빌드 또는 런타임 오류를 복사하세요.
  3. npm run build를 실행하여 미리보기에서 숨기고 있는 오류를 노출하세요.
  4. 앱이 데이터베이스나 API를 사용하는 경우, 이 프로젝트에 필요한 시크릿가 있는지 확인하세요.
  5. 에이전트에게 정확한 오류를 제공하고, 해당 오류로 명시된 파일 또는 설정만 변경하도록 요청하세요.

일반적인 자동 수정 버튼을 눌러 계속 눌러서는 안 됩니다. 하나의 시도가 다른 오류를 생성할 경우, 다시 시도하기 전에 마지막으로 작동하는 버전으로 복원하세요.

분기 1 — 플랫폼이 사용 불가능한가요?

먼저 공식 상태 페이지를 확인하세요. 여러 프로젝트가 동시에 작동하지 않거나, 상태 페이지가 미리보기나 빌드 장애를 보고하는 경우, 플랫폼이 복구할 때까지 기다려야 합니다. 사고 중에 코드를 변경하면 노이즈가 생기고, 두 번째 문제를 만들 수 있습니다.

만약 하나의 프로젝트만 실패한다면, 아래의 프로젝트 검사를 계속하세요.

분기 2 — 첫 번째 터미널 오류를 찾기

Bolt에서 코드 뷰로 전환하고, 터미널 탭을 열고, Vite 기반 프로젝트라면 다음 명령어를 실행하세요:

bash

npm run build

마지막 failed 또는 exit code 1 줄에서 위로 이동하여 첫 번째 구체적인 오류를 복사하세요. 일반적인 분기에는 다음과 같은 경우가 있습니다:

  • Module not found 또는 임포트 오류: 파일, 패키지, 또는 파일명의 대소문자가 일치하지 않습니다.
  • 문법 또는 타입 오류: 최근 코드 변경이 컴파일되지 않았습니다.
  • 누락된 환경 변수: 앱이 필요한 데이터베이스나 API 설정이 존재하기 전에 시작됩니다.
  • 의존성 오류: 패키지가 프로젝트에 없거나 버전이 충돌합니다.

정확한 줄을 에이전트 채팅에 붙여넣고, '먼저 근본 원인을 설명해 주세요. 아직은 수정하지 마세요'라고 지시하세요. 설명이 로그와 일치하면, 하나의 제한된 변경을 요청하세요.

분기 3 — 빌드는 통과했지만 미리보기 여전히 비어 있습니다

브라우저 개발자 도구를 열고 콘솔을 선택한 후, 미리보기를 새로고침하세요. 첫 번째 빨간 런타임 오류를 복사하세요. 깨끗한 프로덕션 빌드도 브라우저에서 실패할 수 있습니다. 비밀 정보가 누락되었거나, API 요청이 차단되었거나, 클라이언트 코드가 정의되지 않은 값을 읽기 때문입니다.

프로젝트가 Supabase나 다른 API를 사용하는 경우, 프로젝트의 현재 비밀 정보 또는 환경 설정을 확인하세요. 변수 이름을 정확히 확인하고, 프레임워크가 요구하는 경우 공개용 접두사를 포함하세요. 절대 시크릿 값은 지원 포스트나 AI 프롬프트에 붙여넣지 마세요.

다음으로, 확장 프로그램과 VPN을 일시적으로 비활성화한 크로노미움 브라우저에서 미리보기를 테스트하세요. 만약 거기서 작동한다면, 프로젝트 코드가 원인일 가능성이 낮습니다. 하나씩 브라우저나 네트워크 계층을 다시 활성화하세요.

분기 4 — 구성 변경이 원인입니다

에이전트가 vite.config.ts, 라우팅, 프록시, 또는 보안 헤더를 수정한 직후에 실패가 시작된 경우, 해당 변경을 마지막으로 작동하는 버전과 비교하세요. 변경을 설명할 수 없는 경우, 마지막으로 작동하는 체크포인트를 복원하세요. 그런 다음 필요한 최소한의 설정만 다시 적용하세요.

전체 프로젝트를 리셋하지 마세요. 버전 롤백은 더 안전합니다. 이는 알려진 정상 상태의 기준을 제공하고, 파손된 변경을 시각화할 수 있기 때문입니다.

수정 확인

미리보기 이미지만으로는 충분하지 않습니다. 다음 네 가지 검사를 모두 확인하세요:

  1. npm run build이 오류 없이 완료됩니다.
  2. 브라우저 콘솔에 새로고침 후 새로운 빨간 예외가 없습니다.
  3. 첫 번째 화면이 렌더링되고, 주요 버튼 또는 폼이 반응합니다.
  4. 두 번째 브라우저 또는 시크릿 창에서 동일한 미리보기가 로드됩니다.

미리보기만 특정 브라우저에서 작동하는 경우, 앱 코드를 변경하기 전에 확장 프로그램, 캐시, VPN, 또는 네트워크 정책을 조사하세요.

여전히 작동하지 않는 경우

마지막으로 작동하는 버전으로 복원하고, 하나의 작은 변경으로 실패를 재현하세요. 터미널 오류, 콘솔 오류, 도구 이름, 브라우저, 그리고 해당 오류를 트리거한 단계를 포함한 세부 정보를 플랫폼의 공식 지원 채널로 전송하세요. API 키, 액세스 토큰, 프로젝트 비밀, 또는 개인 데이터는 포함하지 마세요.

초보자 요약

AI에게 '모든 것을 고쳐라'라고 요청하지 마세요. 터미널을 열고, 첫 번째 빨간 오류를 복사하고, 그 정확한 줄이 어떤 원인을 가졌는지 물어보세요. npm run build를 실행하고, 필요한 시크릿 설정을 확인한 후, 하나씩 변경하세요. 새로운 시도가 더 많은 문제를 일으키는 경우, 마지막으로 작동하는 버전으로 롤백하세요.