Figma·FigJam 동기화가 도는 이유와 Clash 분류: CDN·WebSocket·국내 직행까지【2026】

스피너·불완전 로딩이 나오는 구조적 이유

브라우저 탭 하나가 곧 “한 서비스”가 아닙니다. 편집기 셸은 figma.com 계열 호스트에서 내려오고, 썸네일·폰트 프리뷰·일부 미디어는 별도 호스트명의 CDN을 타며, 협업 상태는 지속 연결로 동기화됩니다. 중간에 TLS 핸드셰이크가 한 번이라도 끊기거나, DNS가 출구마다 다른 답을 주거나, 프록시 노드가 긴 idle WebSocket을 조기에 닫으면 UI는 살아 있어도 “업데이트 대기”에 머무릅니다.

전역적으로 모든 트래픽을 한 노드에 태우면 단순하지만, 국내 SaaS·화상·사내 SSO는 불필요하게 RTT가 늘고 로그인 리다이렉트가 꼬일 수 있습니다. 반대로 과도한 DIRECT는 FigJam 보드만 프록시하고 편집기 코어는 빠진 채 정적 파일 404에 가까운 증상을 만들기도 합니다. 핵심은 “Figma 생태만 같은 출구·같은 DNS 해석 습관을 갖게 한다”는 점입니다.

• 정적 CDN: 캐시 미스·지역 라우팅 이슈로 스피너가 길어질 수 있습니다.
• API·인증: 토큰 교환이 느리면 후속 WebSocket도 지연됩니다.
• 실시간 채널: 재연결 루프가 보이면 노드 안정성과 idle 시간을 의심하세요.

트래픽을 네 축으로 나누는 방법

운영 가능한 최소 단위로 쪼개면 유지보수가 쉽습니다. 실제 호스트 이름은 제품 업데이트로 바뀔 수 있으니, 아래 축은 멘탈 모델로 보고 로그·개발자 도구 네트워크 탭에서 확인한 뒤 규칙을 좁혀 가면 됩니다.

축	역할	증상 힌트
앱·문서 호스트	편집기 HTML·메인 스크립트	흰 화면, 초기 부팅 실패
API·GraphQL	파일 메타, 권한, 협업 상태	저장 안 됨, 권한 오류 반복
정적 CDN	이미지·폰트·번들 조각	아이콘·프리뷰만 비어 있음
WebSocket·실시간	다중 사용자 커서·댓글 스트림	편집은 되는데 상대 화면이 멈춤

FigJam은 보드·스티커·타이머 등 협업 빈도가 높아 실시간 축 비중이 더 부각됩니다. 파일 형식이 달라도 도메인 suffix와 원격 rule-provider에서 같은 정책 그룹을 공유하게 두면 “디자인 툴 묶음”을 한 번에 옮길 수 있습니다.

독립 전략 그룹·rule-providers 설계

구독에 이미 큰 MATCH,PROXY 블록이 있다면, Figma 전용 행을 그보다 앞에 두세요. 스니펫 이름은 예시뿐이며, 실제 구독 포맷에 맞춰 proxy-groups 항목을 추가하면 됩니다.

커뮤니티 rule-provider를 붙였다면, “디자인/협업 SaaS” 목록이 광고·트래킹 차단과 겹치지 않는지 확인하세요. 과도한 REJECT는 HTTPS 텔레메트리가 아니라 정상 자산 요청을 막아 반쪽짜리 UI를 만들 수 있습니다.

규칙 순서·YAML 스케치

아래는 설명용 스케치입니다. DESIGN-STABLE·호스트 패턴을 자신의 환경에 맞게 바꾸고, Merkle 목록보다 로컬에서 캡처한 호스트를 우선하세요.

# Illustrative — replace policy group names; verify domains in DevTools
rules:
  - DOMAIN-SUFFIX,figma.com,DESIGN-STABLE
  - DOMAIN-KEYWORD,figma,DESIGN-STABLE
  # Add CDN hosts you observe (font bundles, static edges, etc.)
  - DOMAIN-SUFFIX,example-cdn.observed.local,DESIGN-STABLE
  - GEOIP,CN,DIRECT
  - MATCH,DESIGN-STABLE

한국 사무실에서 국내 트래픽은 DIRECT, 해외 SaaS만 프록시하는 패턴이면 GEOIP,KR,DIRECT 또는 사내에서 쓰는 지역 전용 규칙을 디자인 그룹보다 뒤가 아니라 앞에 둘지 여부를 신중히 정해야 합니다. “국내 사이트는 무조건 직행”을 최우선에 두고, 그 다음에 Figma suffix를 넣으면 의도한 대로 동작합니다. 반대 순서면 GEOIP가 먼저 삼켜 버려 의도와 다른 출구가 나올 수 있습니다.

DNS·fake-ip·스플릿 터널 감각

동일한 호스트라도 클라이언트 DNS가 로컬 ISP를 보느냐 프록시 내부를 보느냐에 따라 다른 ANYCAST 엣지로 갈 수 있습니다. fake-ip를 쓰는 구성에서는 브라우저·데스크톱 앱이 기대하는 해석과 Clash 로그의 목적지가 어긋나 보일 수 있으니, 증상이 DNS 성격이면 《DNS·fake-ip 점검》을 먼저 맞추고 Figma 규칙을 조정하세요.

Windows 초기 세팅이 필요하면 《Clash for Windows 설치 가이드》에서 Rule 모드와 TUN/시스템 프록시 차이를 확인한 뒤, 브라우저만 쓰는지 네이티브 앱까지 쓰는지에 따라 캡처 지점을 선택합니다.

「디자인만 프록시·국내 업무는 직행」 운영 팁

실무에서 자주 쓰는 조합은 다음과 같습니다. 팀 정책·보안 규정에 맞게 조정하세요.

1. 인증·메일·캘린더: 회사 단말 정책상 국내 직행이 안정적이면 DIRECT 또는 사내 PAC 패턴 유지.
2. Figma·FigJam suffix 묶음: 동일 DESIGN-STABLE 그룹으로 보내 동기화·CDN·API 출구 일관화.
3. 모니터링: 연결 로그에서 정책 이름·대상 호스트·재시도를 함께 봅니다.
4. 노드 교체: 지터가 심한 url-test는 WebSocket에 치명적일 수 있어, 안정적인 fallback이나 고정 단일 노드 실험이 도움이 됩니다.

개발자가 Cursor로 코드를 보거나, 《Lovable·Bolt 프리뷰 라우팅》처럼 AI 빌더 프리뷰를 쓰는 워크플로와 병행한다면, 각 SaaS마다 다른 API·CDN 패턴이 있어 규칙이 늘어납니다. 그래도 “디자인 협업 한 덩어리”를 이름 붙인 그룹으로 묶어 두면 트러블슈팅 범위가 분리됩니다. 터미널·Git까지 한 번에 쓰는 경우 《Clash·Cursor 개발 가이드》와 교차해 점검해 보세요.

FigJam·대규모 보드에서 특히 유의할 점

참가자 수가 많은 워크숍 보드는 순간 트래픽 burst가 크고, 실시간 이벤트가 밀집합니다. 유선 연결·혼잡한 Wi-Fi 채널·VPN 배터리 절전이 겹치면 “Clash 문제”처럼 보여도 물리 계층이 원인인 경우가 많습니다. 네트워크가 깨끗한지 확인한 뒤에도 동기화만 이상하면 설계한 전략 그룹과 DNS를 재검증하세요.

FAQ

캔버스는 열리는데 타인 커서가 안 움직인다

WebSocket 축이 다른 정책으로 새거나 노드가 idle 연결을 끊는 경우가 많습니다. 동일 그룹으로 묶였는지, 다른 규칙이 끼어 들지 않았는지 로그로 확인하세요.

폰트·아이콘만 깨진다

별도 CDN 호스트가 DIRECT로 남아 지역 엣지에서 막혔는지, 혹은 반대로 프록시 노드가 해당 호스트를 제대로 TLS 완료하지 못하는지 살펴보세요.

회사 SSL 검사와 충돌한다

기업 프록시가 복호화하는 환경에서는 클라이언트 인증서 신뢰이 추가로 필요할 수 있습니다. 네트워크 팀 정책을 따르고, 개인 단말에서만 이 글의 분류를 적용하세요.

실무 체크리스트

정리

2026년에도 디자인 협업 SaaS는 AI 코딩·영상 도구만큼 트래픽 축이 많습니다. Clash는 한 번에 “모든 사이트”를 고치려 하기보다, Figma 생태만 독립 정책으로 묶고 나머지는 국내 직행으로 두는 전형이 가장 설명 가능합니다.

Clash를 무료로 내려받고 분류 규칙을 직접 적용해 보세요