Lovable·Bolt 미리보기가 멈출 때: 2026년 Clash로 AI 웹 제작·미리보기·CDN 출구 정리하기
2026년에는 대화형 AI 웹 제작과 프로토타입 도구가 브라우저 안에서 계속 붙고, Lovable·Bolt.new 같은 제품은 편집기·채팅·미리보기 iframe·배포 파이프라인까지 서로 다른 호스트로 트래픽을 쪼갭니다. 한 줄짜리 전역 프록시나 출구가 자주 바뀌는 노드만으로는 미리보기 로딩이 도는 것·흰 화면·빌드 타임아웃이 겹치기 쉽습니다. 이 글은 Clash 분류 규칙으로 제품 도메인과 정적 리소스 CDN·Vercel 계열 호스트를 의도한 정책 그룹에 묶고, DNS·fake-ip·노드 선택을 같은 축으로 맞춰 AI 빌더 워크벤치를 안정적으로 쓰는 순서를 정리합니다. IDE 단일 모델(Cursor 등) 글과 달리 초점은 브라우저 안 풀스택 편집·미리보기입니다.
왜 AI 웹 제작은 한 도메인으로 끝나지 않나
편집기 탭 하나처럼 보여도 실제로는 앱 셸(로그인·프로젝트 목록)·에디터·번들러와 연결된 웹소켓·미리보기용 서브도메인·npm·CDN에서 당겨 오는 스크립트가 동시에 붙습니다. 배포가 Vercel 등으로 나가면 *.vercel.app·엣지·이미지 최적화 호스트까지 더해집니다. 지연이 조금만 흔들려도 브라우저는 스피너를 길게 보여 주고, 일부 리소스만 실패하면 React류 앱은 하얀 화면으로 멈춘 것처럼 보입니다. Clash 사용자에게는 “노드 속도는 괜찮은데 미리보기만 이상하다”가 흔한데, 원인은 대개 출구가 호스트마다 다르다는 점입니다.
- 워크스페이스 API: 인증·프로젝트 메타데이터·생성 작업 큐.
- 미리보기·HMR: 별도 오리진·웹소켓·때로는 샌드박스 도메인.
- 정적 CDN: 폰트·아이콘·공용 라이브러리 호스트(글로벌 POP).
- 배포·프리뷰 URL: Vercel·유사 호스팅의 배포 단계와 연동.
증상: 스피너·흰 화면·빌드 타임아웃을 나누기
같이 보여도 원인 축은 다릅니다. 미리보기 iframe 안만 흰색이면 부모 페이지와 다른 호스트가 다른 정책·다른 노드로 나갔을 가능성이 큽니다. 콘솔에만 CORS·차단이 찍히고 UI는 멀쩡하면 프록시보다 브라우저 확장·쿠키·서드파티 차단을 먼저 의심하세요. 빌드가 서버 측에서 시간 초과로 끊기면 클라이언트 RTT만 줄인다고 해결되지 않습니다—그때는 에이전트 로그에서 API 호스트가 제한 시간 안에 응답했는지 보는 편이 낫습니다.
한 번에 한 변수
노드 도시를 바꾸기 전에 규칙 매칭 로그로 어떤 도메인이 DIRECT·REJECT·의도와 다른 그룹으로 나갔는지 확인하세요. 《DNS·fake-ip》와 같이 읽으면 해석이 빨라집니다.
규칙 묶음: 제품·미리보기·CDN·배포
공유 구독의 거대한 GEOIP 한 장만 믿지 말고, 로컬 rule-provider나 상단에 두는 소량의 DOMAIN-SUFFIX로 “AI 빌더 묶음”을 만드세요. 실제 접속 호스트명은 제품 업데이트로 바뀔 수 있으므로, 개발자 도구 네트워크 탭과 Clash 연결 로그를 한 번씩 대조하는 습관이 중요합니다. 아래 이름은 예시이며, 본인 환경에서 확인한 뒤 넣어야 합니다.
묶음 설계 메모
- 제품 워크스페이스: Lovable(
lovable.dev·프로젝트*.lovable.app)·Bolt 등 공식 앱 도메인을 한 정책 그룹(예: 안정적인 중계 노드)에. - 미리보기·샌드박스: iframe·프리뷰 전용 호스트—워크스페이스와 같은 그룹에 두어 출구를 맞추기 쉽습니다.
- 정적 CDN·패키지 레지스트리:
cdn.*·공용 JS·폰트—대역은 넓지만 지연만 크면 UI가 끊깁니다. 과도한 광고 차단 규칙이 여기를 건드리지 않는지 확인하세요. - Vercel·배포 프리뷰:
vercel.app등—프로덕션과 프리뷰가 다른 서브도메인이면 둘 다 포함합니다.
규칙 순서와 YAML 스케치
Clash Meta(Mihomo) 계열에서는 위에서 아래로 먼저 매칭된 규칙이 승리합니다. AI 빌더용 행은 넓은 MATCH·GEOIP 앞에 두세요. PROXY 자리에는 구독에서 쓰는 실제 정책 그룹 이름을 넣습니다.
# Illustrative — replace domains after verifying in DevTools / logs
rules:
- DOMAIN-SUFFIX,lovable.dev,PROXY
- DOMAIN-SUFFIX,lovable.app,PROXY
- DOMAIN-SUFFIX,bolt.new,PROXY
- DOMAIN-SUFFIX,vercel.app,PROXY
- DOMAIN-KEYWORD,vercel-cdn,PROXY
- DOMAIN-SUFFIX,unpkg.com,PROXY
- DOMAIN-SUFFIX,jsdelivr.net,PROXY
- MATCH,DIRECT
원격 규칙 세트를 쓰면 병합 순서 때문에 로컬 행이 묻히지 않는지 꼭 확인하세요. “한 번 잡았던 도메인”이 영원하지 않으니 rule-providers의 update-interval과 수동 갱신을 운영 습관으로 두면 2026년에도 덜 밀립니다.
노드·DNS·fake-ip를 같은 축으로
미리보기는 짧은 폴링·웹소켓·긴 폴링이 섞입니다. 스피드테스트에만 강하고 핸드셰이크가 자주 끊기는 노드는 체감상 “계속 로딩”이 납니다. 정책 그룹에 지연·간격 있는 헬스 체크를 쓰고, 가능하면 같은 국가·같은 ASN 출구로 묶어 세션 흔들림을 줄이세요. fake-ip를 쓰는 환경에서는 브라우저·시스템·Clash의 DNS 해석이 엇갈리면 일부 서브리소스만 다른 경로로 나갈 수 있습니다. 문제가 날 때는 fake-ip·redir-host 설정을 한 번에 하나만 바꿔 가며 재현 조건을 좁히는 것이 안전합니다.
터미널과 브라우저 출구 불일치
npm·CLI는 환경 변수 프록시를 타고, 탭은 시스템 프록시를 탈 수 있습니다. 빌드 로그는 터미널 쪽, 미리보기는 브라우저 쪽이라 증상이 갈라져 보입니다. 필요하면 《터미널 HTTP·Git 프록시》와 출구를 맞추세요.
프록시 체인 관점 진단
문제를 세 겹으로 나누면 디버깅이 빨라집니다. 첫째, DNS·규칙 매칭—요청이 기대한 정책 그룹으로 갔는지. 둘째, TCP·TLS—노드까지 왕복이 안정적인지, 인증서 경고가 없는지. 셋째, 애플리케이션 레벨—서버가 5xx·타임아웃을 내는지, CDN 엣지가 특정 지역에서만 느린지. Clash는 앞의 두 층을 잘 보여 주지만 세 번째는 제품 상태 페이지·커뮤니티와 교차 확인해야 합니다. Vercel·CDN 쪽 장애는 프록시를 바꿔도 동일하게 재현되는 경우가 많습니다.
| 현상 | 먼저 볼 곳 |
|---|---|
| 미리보기만 무한 스피너 | iframe 대상 호스트가 규칙에 없어 DIRECT·차단 행으로 갔는지 |
| 편집기는 되는데 배포 프리뷰만 실패 | vercel.app 등 배포 묶음·노드 UDP/긴 요청 제한 |
| 정적 파일 404· MIME 오류 | 프록시보다 빌드 출력·경로—네트워크 탭에서 해당 URL 직접 열기 |
FAQ
한 노드로 통일하면 편하지 않나요?
짧은 테스트에는 괜찮지만, 국내 직결 트래픽까지 해외로 돌리면 지연만 커질 수 있습니다. Rule 모드로 국내·결제·스트리밍을 분리하고 AI 빌더 묶음만 안정 출구로 두는 편이 낫습니다.
광고 차단 규칙을 켰더니 미리보기가 깨진다
생성·미리보기 도메인이 텔레메트리·분석 호스트와 같은 CDN을 쓰면 차단 목록에 걸립니다. AI 빌더용 도메인을 화이트리스트하거나 차단 세트를 좁히세요.
모바일 브라우저에서만 증상이 있다
데이터 세이버·프라이빗 DNS·VPN 중첩을 의심하세요. 데스크톱 Clash와 같은 구독·같은 규칙인지부터 맞춥니다.
실무 체크리스트
- 브라우저 네트워크 탭으로 실패한 호스트명을 목록화한다.
- Clash 로그에 같은 호스트가 찍히는지 보고 매칭된 정책을 확인한다.
- 제품·미리보기·CDN·Vercel 묶음을 한두 개 그룹으로 정리한다.
- DNS·fake-ip를 고정하고 한 번에 한 항목만 바꿔 재현을 줄인다.
- 노드 헬스·지연을 보며 웹소켓·긴 요청에 맞는 출구를 고른다.
규칙이 보일 때 Clash가 빛난다
AI 웹 제작 툴은 도메인이 많을수록 분류 규칙이 곧 사용성입니다. 로그로 검증 가능한 설정을 유지하면 Lovable·Bolt뿐 아니라 비슷한 대화형 빌더에도 같은 패턴을 재사용할 수 있습니다.