프리뷰·번들·패키지가 동시에 열릴 때: 웹 IDE도 호스트는 여럿이다

Lovable·Replit·Bolt 같은 AI 코딩·빌더형 웹 IDE는 UI 상으로는 “한 탭에서 프롬프트→배포”로 보이지만, 실제 HTTPS·WebSocket·HMR·패키지 설치는 vercel.com·vercel.app·replit.com·replit.dev·npm 레지스트리·엣지 CDN으로 갈라집니다. 그중 일부만 DIRECT에 남고 나머지는 느린 노드·다른 리전을 타면, 캔버스는 뜨는데 미리보기·터미널·API만 pending으로 남아 무한 스피너처럼 느껴집니다. Clash 연결 로그에 찍힌 SNI·도메인을 먼저 모으는 것이 timeout·TLS를 노드만 탓하지 않게 하는 첫걸음입니다. TUN과 Windsurf·Codeium 글을 함께 보면 “에디터 확장”과 “배포·프리뷰” 축을 구분하기 쉽습니다.

흔한 실수는 lovable·replit 마케팅 도메인만 정책에 넣는 것입니다. 배포 프리뷰·*.vercel.app·vusercontent 류·replit 샌드박스 호스트가 GEOIP나 거친 KEYWORD·공용 RULE-SET에 먼저 잡히면, 같은 “생성 루프” 안에서도 출구가 섞입니다. TUN 모드로 시스템 전체를 한 프로필에 올리거나, CLI·Docker·터미널만 HTTP_PROXY를 타게 해 둔 경우엔 브라우저 탭과 경로가 달라 “탭마다 다름”이 생깁니다. 클라이언트·프로필을 고정한 뒤 한 번에 한 옵션만 바꿔 규칙 적중을 비교하세요.

ℹ 세 줄 정리: (1) DevTools 네트워크·Clash 라이브 연결에 동시에 기록한다. (2) vercel·replit·npm·배포 프리뷰 FQDN을 날짜와 함께 목록화한다. (3) fake-ip·Meta DNS가 규칙과 같은 출구 결론을 내는지 맞춘다.

순수 ChatGPT·추론 API 글과 무엇이 다른가

ChatGPT·Claude 류 글은 openai.com·anthropic.com·추론 API 호스트에 초점이 있습니다. Cursor 글은 IDE·AI 백엔드에 가깝고, Windsurf는 마켓·Codeium CDN이 중심입니다. 본문이 다루는 축은 “프롬프트 응답”이 아니라 웹 IDE + Vercel/Replit 호스팅 + npm + 프리뷰 URL이 동시에 열릴 때의 도메인 분류입니다. Notion·AWS·Figma 글과 같이 “한 제품처럼 보이는데 호스트는 여럿” 전제이나, 호스트 지도는 다릅니다. 범용 규칙 세트만 켜 두면 배포·패키지 줄만 빈칸이 남는 패턴이 반복됩니다.

대용량 패키지·캐시를 옮기는 팀은 Hugging Face 글과 비슷하게 “다운로드 전용” 정책을 분리하는 사고가 도움이 될 수 있으나, AI 빌더 세션은 미리보기·API·OAuth 콜백이 섞이므로 출구를 지나치게 쪼개면 세션이 엇갈릴 수 있습니다. url-test·fallback·노드 리전을 함께 보는 것이 안전합니다.

vercel.com·배포·엣지·*.vercel.app

Vercel을 쓰는 빌더·템플릿은 vercel.com 대시보드·api.vercel.com 류, 배포·미리보기 *.vercel.app·*.now.sh(레거시)·엣지·vusercontent에 가까운 정적·SSR 자산, 그리고 Git 연동·웹훅에 가까운 API가 한 화면에 겹칩니다. 제품 변경으로 하위 도메인이 늘거나 바뀌므로, 커뮤니티 YAML을 그대로 믿기보다 본인 프로젝트를 열었을 때의 DevTools·연결 로그를 기준으로 삼는 편이 낫습니다. WebSocket·HMR이 긴 연결이면 중간 프록시·TLS 재개가 실패할 때 “가끔만” 프리뷰가 끊깁니다.

팀 CI·로컬 CLI가 HTTP_PROXY를 탈 때와 브라우저 탭이 다른 노드로 나가면, 배포 URL은 뜨는데 에셋만 404·타임아웃처럼 보일 수 있습니다. 관측된 FQDN을 DOMAIN으로 먼저 박고, 반복되는 패턴만 DOMAIN-SUFFIX로 승격하세요. DOMAIN-KEYWORD,vercel은 다른 SaaS·문서에 붙는 문자열까지 끌어올 수 있어 부작용이 큽니다.

replit.com·replit.dev·에이전트·콘솔

Replit은 replit.com·replit.app·개발/프로덕 replit.dev·repl.co·에이전트·터미널·패키지 인덱스·때로는 Object Storage에 가까운 호스트가 한 세션에 겹칩니다. Replit Agent는 추론·도구 호출·외부 API로 연결을 넓혀, “챗 한 줄”이 아니라 다중 fetch가 동시에 터질 수 있습니다. GUI 셸·포워딩이 켜진 경우 localhost·루프백·내부 URL이 Clash TUN·시스템 프록시와 겹쳐 브라우저 확장·이중 경로 이슈로 번지기도 하니, 에디터만의 문제인지 출구 문제인지 먼저 가릅니다.

replit 샌드박스·컨테이너가 DNS·npm Registry·GitHub raw·unpkg 류를 동시에 잡는 경우, 모델·CDN 글에서 다루는 “큰 다운로드”와 출구를 맞출지, 빌드 전용으로 분리할지 팀이 정해야 합니다. 서명·TTL 짧은 URL은 상위 접미사와 같은 정책 의도로 묶고 로그로 재수집하는 방식이 현실적입니다.

Lovable·Bolt·비슷한 AI 빌더의 공통 패턴

Lovable·Bolt 등 “프롬프트로 풀스택”형 제품은 브랜드 도메인 + Vercel 배포 + npm + 때로 Supabase·Stripe류 API로 이어집니다. 호스트 이름은 제품·계약·리전에 따라 달라지므로, 공개 예시 리스트보다 본인 세션에 찍힌 SNI를 1차 근거로 삼는 것이 안전합니다. Clash로는 “AI 코딩 전용” 정책 그룹·RULE-SET을 두고, SaaS 범용 세트와 겹침을 점검하세요.

노드 리전이 Vercel 엣지·Replit 풀과 엇갈리면 지연·콜드 스타트·캐시 미스가 겹쳐 체감이 나빠집니다. 구독·url-test만으로 해결되는지, 아니면 도메인 분류 오류로 DIRECT에 떨어지는지 로그로 먼저 가립니다. Clash는 규칙 적중을 텍스트로 남겨 온콜·위키에 붙이기 좋습니다.

정책 그룹: AI_WEB_HOST 한 의도로 묶기

예시로 AI_WEB 하나에 vercel.com·vercel.app·replit.com·replit.dev·관측된 프리뷰·API FQDN을 넣거나, npm·레지스트리만 NPM으로 쪼갤 수 있습니다. 핵심은 “같은 빌드·미리보기 세션에서 기대하는 지연·지역이 비슷한가”입니다. 노드가 불안정하면 도메인을 다듬어도 스피너는 남습니다.

규칙 프로바이더 URL이 갱신 실패하면 어제까지 되던 CDN 줄이 오늘 비어 있을 수 있으니, 구독 점검과 같은 주기로 묶는 습관을 권합니다.

관측 우선: 예시 DOMAIN-SUFFIX

아래는 형식 예시입니다. DevTools·연결 로그에 나온 호스트로 치환하고, proxy-groups 이름은 팀 규칙에 맞게 바꿉니다. 주석은 영어로 둡니다.

Illustrative YAML fragment

proxy-groups:
  - name: AI_WEB
    type: select
    proxies: [NODE-A, NODE-B, DIRECT]

rules:
  - DOMAIN-SUFFIX,vercel.com,AI_WEB
  - DOMAIN-SUFFIX,vercel.app,AI_WEB
  - DOMAIN-SUFFIX,replit.com,AI_WEB
  - DOMAIN-SUFFIX,replit.dev,AI_WEB
  # Add preview hostnames from your session, e.g.:
  # - DOMAIN,xxxx.vercel.app,AI_WEB
  # - DOMAIN,xxxx.repl.co,AI_WEB
  # npm / Git: scope carefully; broad keywords can pull unrelated traffic.
  - DOMAIN-SUFFIX,registry.npmjs.org,NPM
  - GEOIP,KR,DIRECT
  - MATCH,DIRECT

GEOIP,KR,DIRECT는 예시이며, 거주·회선·회사 정책에 맞게 조정합니다. DOMAIN-SUFFIX,amazonaws.com 같이 지나치게 넓은 줄은 다른 AWS 워크로드까지 끌어올 수 있어, Notion 글의 세밀한 접미사 전략과 병행할 때는 특히 주의하세요.

RULE-SET·GEOIP 순서

원격 RULE-SET·GEOIP가 위에 있으면, 아래에 둔 vercel·replit 전용 DOMAIN이 실행되지 않습니다. 규칙 모범대로 (1) 제품 관측 규칙, (2) 지역/측정, (3) 공용 원격 세트, (4) MATCH 순으로 쌓습니다. RULE-SET이 404·인증 실패로 비어 있으면 조용히 빠질 수 있으니 갱신 알림을 습관화하세요.

prepend-rules·소규모 rule-providers로 “우리 관측 덩어리”를 앞에 두면, 커뮤니티 세트 업데이트에 덜 흔들립니다. mixin·프로필 병합 팀이면 층을 나누어 롤백을 쉽게 하세요.

DNS·fake-ip·TUN으로 교차 검증

fake-ip와 실제 해석이 어긋나면 “이름은 풀렸는데 TCP가 안 붙는” 현상이 납니다. Meta DNS fake-ip-filter에 vercel·replit·관측 CDN 호스트를 넣고, nameserver·fallback이 규칙과 같은 출구를 가리키는지 확인합니다. 라우터 DoH·OS DNS가 겹치면 한 축씩 바꿉니다.

검증 루틴은 (1) TUN ON/OFF, (2) 시스템 프록시만, (3) 브라우저만 중 둘을 골라 A/B하고, 도메인 분류 결과를 비교합니다(개인정보·로그아웃·악성 링크에 주의).

준수·팀·캠퍼스

⚠ 알림: 이 글은 합법이며 조직/학교/국가/서비스 약관이 허용하는 망·계정·라이선스 전제의 라우팅 위생을 다룹니다. 무단 우회·보안장치 무력화·약관 위반을 돕는 내용이 아닙니다.

사내 프록시·SSL 가시성·분할 터널이 있으면 개인 YAML만으로는 재현이 어렵습니다. IT 승인 하에 AI_WEB 덩어리를 위키에 문서화하고, 기업 VPN과 Clash 이중 터널이 금지돼 있지 않은지 확인합니다.

체크리스트

  1. 네트워크 탭·연결 로그에서 vercel·replit·npm·프리뷰 SNI를 한 목록으로 모은다.
  2. 각 호스트를 AI_WEB·NPM 등 팀이 동의한 의도에 매핑한다.
  3. 규칙 배열에서 RULE-SET·GEOIP가 세밀한 줄을 가로채지 않는지 본다.
  4. DNS·fake-ip·스니핑이 규칙과 같은 출구를 가리키는지 본다.
  5. 브라우저·CLI·컨테이너가 동일 프로필·TUN 상태에서 재현되는지 비교한다.
  6. 필요 시 TLS·노드·구독 갱신을 병행한다.

맺음말

2025–2026년 AI 코딩·웹 IDE 흐름은 Lovable·Replit·Bolt 같은 이름으로 요약돼도, 망 뒤에서는 Vercel 배포·replit 샌드박스·npm·엣지 CDN·API가 겹쳐집니다. Clash로 도메인 분류·RULE-SET·DNS·TUN을 맞추면 “UI는 뜨는데 미리보기만 돈다”는 체감을 줄일 수 있습니다. Cursor·Windsurf 에디터 글의 호스트를 그대로 복붙하면 호스팅·프리뷰 빈칸이 남기 쉽고, Notion 글의 AWS맵을 그대로 쓰면 Vercel·Replit 전용 호스트가 빠질 수 있으니 별도 맵을 유지하는 것이 운영에 유리합니다.

규칙을 텍스트로 남기고 연결마다 적중을 추적할 수 있다는 점에서, AI 빌더·수업 환경에서 Clash는 실험과 롤백이 쉬운 편입니다. 정책은 천천히 다듬고, 관측 로그는 짧은 주기로 갱신하는 습관을 권합니다.

→ Clash를 무료로 다운로드하고, Vercel·Replit·프리뷰·CDN 도메인 분류를 연결 로그로 맞춰 웹 IDE·배포 루프가 덜 끊기는지 확인해 보세요.