제품 가이드 - Graph & Token Flow

Graph & Token Flow

Graph 뷰는 Web3Map이 추적하는 모든 토큰, 거래소, DEX, 이동 경로를 하나의 인터랙티브 네트워크로 그려내고, Token Flow는 그 네트워크를 단일 자산 중심으로 좁혀 보여줍니다.

Graph 뷰는 Web3Map의 연결성 계층입니다. 제품의 다른 모든 화면(차익거래 카드, 스파이크 알림, Telegram 메시지)은 가격 격차가 존재한다는 사실을 알려줍니다. 그래프는 그 기회에 실제로 대응할 수 있는지를 알려줍니다. 토큰이 어떤 체인에 존재하는지, 지금 이 순간 어떤 거래소가 해당 토큰의 입출금을 받아주는지, 어떤 DEX 풀에서 거래되는지, 그 사이의 체인들을 어떤 브릿지가 연결하는지 말입니다. 이동 경로가 없는 가격 신호는 숫자에 불과합니다. 그래프가 그 경로를 제공합니다.

화면은 다섯 종류의 노드를 렌더링하고 이를 이동 엣지와 구조 엣지로 연결합니다:

이 페이지는 같은 캔버스를 공유하는 두 가지 동작 모드를 가집니다:

1. Graph 모드.

   전체 네트워크를 한 번에 봅니다. 사이드바 필터와 노드 클릭으로 관심 있는 부분만 분리할 수 있습니다. 베뉴와 경로를 탐색하는 곳입니다.

2. Token Flow 모드.

   아무 토큰이나 클릭하면 메인 그래프가 숨겨지고 자산 중심 오버레이가 그 자리를 대신합니다. 토큰이 중앙에 놓이고, 그 주위에 체인들이 배치되며, 해당 토큰과 닿는 모든 CEX, DEX, 브릿지 경로가 표시됩니다. 하나의 자산을 평가하는 곳입니다. Token Flow를 참고하세요.

툴바

툴바는 모든 뷰에서 앱 상단을 가로지릅니다. 내용은 사용 가능한 폭에 맞춰 달라집니다. 전체 폭에서는 분할형 뷰 전환기와 개별 액션 버튼이 표시되고, 900px 미만에서는 액션들이 하나의 Actions 메뉴로 접히며, 모바일 분기점 아래에서는 사이드바용 햄버거 버튼이 나타납니다.

Graph / Arbitrage / Board 뷰 전환기

세 가지 메인 뷰를 전환합니다. 넓은 툴바(720px 이상)에서는 분할형 컨트롤이고, 좁은 툴바에서는 현재 뷰 이름과 화살표가 표시되는 드롭다운이 됩니다. 각 옵션은 /graph, /arbitrage, /board로 향하는 실제 링크이므로, Ctrl/Cmd 클릭이나 Shift 클릭은 새 탭에서 뷰를 열고, 일반 클릭은 새로고침 없이 제자리에서 전환합니다.

Arbitrage 배지

다른 뷰에 있는 동안 Arbitrage 옆에 작은 숫자 배지가 나타날 수 있습니다. 이 숫자는 Arbitrage 뷰를 마지막으로 본 이후 도착한 New Entries와 Price Spikes의 합계입니다. Arbitrage 뷰를 방문하면 모두 확인한 것으로 처리됩니다. 뷰를 떠날 때 마지막 확인 시각이 기록되고 배지 카운터가 초기화됩니다. 카운트가 0이면 배지는 숨겨집니다.

Fit View

보이는 모든 노드가 화면에 들어오도록 카메라를 다시 중앙 정렬하고 줌을 맞춥니다. 400ms 애니메이션과 여유 있는 패딩이 적용됩니다. 현재 활성화된 그래프를 대상으로 합니다. Graph 모드에서는 메인 네트워크, 자산이 열려 있을 때는 Token Flow 오버레이입니다. 필터를 많이 적용한 뒤나 뷰를 엉뚱한 곳으로 끌고 간 뒤에 사용하세요. Arbitrage 뷰에는 그래프 캔버스가 없으므로 그동안 이 버튼은 숨겨집니다.

Refresh View

페이지를 받치고 있는 데이터(통계, 자산, 그래프 자체, 기회, 스파이크, DEX 풀, 워커 상태)를 강제로 다시 가져옵니다. 또한 포스 시뮬레이션을 다시 가열해 새 데이터로 레이아웃이 다시 안정화되도록 합니다. 다시 가져오는 동안 버튼은 Refreshing...으로 표시되며 비활성화되고, 성공하면 초록색으로 바뀌어 1.5초 동안 Refreshed로 표시된 뒤 Refresh View로 돌아갑니다. 데이터가 실시간으로 흘러들어오기 때문에 이 버튼이 필요한 경우는 드물지만, 노트북이 오래 절전 상태였다가 복귀했을 때 가장 빠르게 회복하는 방법입니다.

Login

게스트로 둘러보는 동안 표시됩니다. 로그인, 계정 생성, 지갑으로 계속하기가 가능한 로그인 페이지로 이동합니다.

My Page와 닉네임 버튼

로그인 상태에서는 오른쪽 인증 영역에 My Page 링크(계정, 결제, 알림 설정)와 함께 닉네임(길면 말줄임표로 잘림)과 로그아웃 아이콘이 있는 버튼이 표시됩니다. 닉네임 버튼을 클릭하면 그 자리에서 즉시 로그아웃됩니다. 세션이 곧바로 게스트 토큰으로 교체되며 화면 깜빡임은 없습니다.

Actions 메뉴 (900px보다 좁은 툴바)

좁은 레이아웃에서는 개별 버튼이 하나의 드롭다운으로 접힙니다. 메뉴 순서: Login 또는 Logout ({nickname})이 먼저, 그다음 Fit View(Arbitrage 뷰에서는 생략), 그다음 동일한 Refreshing... 및 Refreshed 상태를 가지는 Refresh View입니다. 로그인한 사용자에게는 메뉴 옆에 My Page 버튼이 그대로 표시됩니다.

모바일 햄버거

작은 화면에서는 햄버거 버튼(접근성 레이블 Toggle sidebar)이 툴바 왼쪽 끝에 위치합니다. 왼쪽 사이드바를 전체 오버레이로 열어 검색과 필터를 사용할 수 있게 하고, 결과를 선택하면 다시 닫힙니다.

왼쪽 사이드바

왼쪽 사이드바(데스크톱에서 300px 폭, 모바일에서는 오버레이)는 Graph 뷰의 컨트롤 룸입니다. 실시간 카운트, 검색, 체인 필터, 베뉴 브라우저, 표시 토글, API 상태 표시기가 들어 있습니다. Arbitrage 뷰에서는 같은 사이드바가 차익거래 필터로 바뀝니다. 그 내용은 Arbitrage 대시보드 가이드에서 다룹니다.

통계 카드

상단의 카드 네 장이 현재 로드된 내용을 요약합니다: Tokens, CEX, DEX, Bridges. 데이터를 로드하는 동안 값은 -로 표시됩니다. DEX 숫자는 버전이 아니라 프로토콜을 셉니다. 세 가지 버전이 배포된 프로토콜도 한 번만 세고, 단일 버전 DEX도 한 번만 셉니다. Bridges 카드는 카운트가 0이면 아예 숨겨집니다.

검색

Search 입력란

플레이스홀더는 Search CEX, DEX, Tokens...입니다. 첫 글자부터 200ms 디바운스로 검색이 시작됩니다. 결과는 두 가지 소스를 결합합니다. 로드된 그래프 노드에 대한 즉시 매칭(정확히 일치하는 결과가 가장 먼저, 그다음 접두사 일치, 그다음 부분 문자열 일치이며, 한 글자 검색어는 정확히 일치할 때만 매칭)과 서버 측 자산 검색 결과가 중복 제거되어 병합됩니다.

결과 그룹

결과는 세 가지 헤더로 그룹화됩니다: CEX(최대 4개), DEX(최대 4개), Tokens(최대 8개). 토큰을 클릭하면 해당 자산의 Token Flow가 열립니다. CEX나 DEX를 클릭하면 해당 베뉴의 서브그래프를 분리하고 상세 패널을 엽니다. 어느 쪽이든 검색창이 비워지고, 모바일 사이드바가 닫히며, 다른 뷰에 있었다면 먼저 Graph 뷰로 전환됩니다.

Chain Filter

체인 필터는 사이드바 스크롤 영역 맨 위에 위치하며 스크롤하는 동안 고정(sticky)되어 있습니다. 선택한 체인으로 그래프 전체를 제한합니다.

Search chains... 입력란

입력하면 최대 10개의 체인 제안이 표시됩니다. 각 제안에는 해당 체인의 자산 수가 함께 표시되어 그 체인이 그래프에서 차지하는 비중을 한눈에 알 수 있습니다.

인기 체인 버튼

가장 인기 있는 체인 4개(자산 수 내림차순)가 한 줄로 표시되어 원클릭 필터링이 가능하고, 그 뒤에 이 줄 너머에 몇 개의 체인이 더 있는지 보여주는 +{N} 힌트가 따라옵니다.

선택된 체인 태그와 Clear

선택된 모든 체인은 ×가 붙은 태그로 표시됩니다. 태그를 클릭하면 해당 체인 하나가 제거되고, 오른쪽의 Clear를 클릭하면 필터 전체가 해제됩니다.

필터가 실제로 하는 일: 토큰 노드는 자산이 선택된 체인 중 적어도 하나에 존재할 때만 표시되고, 입금, 출금 및 기타 엣지는 체인 집합이 선택과 교차할 때만 표시되며, 필터로 인해 모든 엣지를 잃은 노드도 함께 숨겨지므로 그래프에 고립된 베뉴가 표시되는 일이 없습니다. 아래의 베뉴 브라우저 목록도 선택된 체인과 관련된 베뉴로 줄어듭니다.

베뉴 브라우저

베뉴 브라우저는 모든 CEX와 DEX를 선택 가능한 트리로 나열합니다. 베뉴를 선택하면 해당 베뉴들과 그 연결만으로 구성된 결합 서브그래프가 만들어집니다.

포커스 바: {N} venue selected / {N} venues selected + Reset

서브그래프가 활성화되면 브라우저 맨 위에 나타납니다. Reset 버튼은 서브그래프를 해제하고 상세 패널을 닫아 전체 네트워크로 되돌립니다.

CEXs 섹션

주황색 점, 펼침 화살표, 카운트 배지가 표시되고, 오른쪽에는 모든 CEX를 한 번에 선택하거나 해제하는 All 버튼이 있습니다(전부 선택된 경우 버튼이 활성 스타일로 표시됩니다). 거래소는 지원 네트워크 수 내림차순으로 정렬됩니다. 각 행에는 거래소 이름과 메타 줄이 표시됩니다. 멀티 서피스 거래소는 {N} surfaces · {M} networks, 그 외에는 {M} networks만 표시됩니다. 오른쪽의 체크 표시는 선택 상태를 나타냅니다. 멀티 서피스 거래소는 마켓 서피스별 자식 행으로 펼쳐지며, 마켓 타입 이름(예: spot_usdt, spot_krw, perp_usdt)과 함께 오른쪽에 계약 유형 또는 surface라는 단어가 표시됩니다.

DEXs 섹션

보라색 점, 카운트 배지, 자체 All 버튼이 표시됩니다. 내부는 EVM과 Non-EVM 두 하위 섹션으로 나뉘며, 각각 자체 펼침 컨트롤, 카운트 배지, All 버튼을 가집니다. 프로토콜은 배포 체인 수 내림차순으로 정렬됩니다. 멀티 버전 프로토콜 행은 {N} versions · {M} chains로 표시되고, 단일 버전 프로토콜은 대신 체인 목록을 표시합니다. 버전 자식 행은 버전 이름과 함께 단일 체인 이름 또는 {N} chains를 표시합니다.

부모와 자식 선택 동작

부모를 클릭하면 부모와 모든 자식이 함께 토글됩니다. 자식 하나를 해제하면 부모도 해제되고, 모든 자식을 선택하면 부모가 자동으로 선택됩니다. 결과 서브그래프는 선택된 모든 베뉴의 합집합입니다. 부모는 2-hop 이웃을 제공하고(버전이나 서피스, 그리고 그것들이 닿는 모든 것이 계속 표시되도록), 그 외 베뉴는 1-hop을 제공합니다. 상세 패널은 선택을 따라갑니다. 논리적 베뉴 하나를 선택하면 해당 노드 상세가 열리고, 여러 개를 선택하면 {N} Venues라는 제목의 결합 패널이 열리며, 선택을 해제하면 패널이 닫힙니다. 모바일에서는 선택 후 사이드바가 자동으로 닫혀 결과를 바로 볼 수 있습니다.

체인 필터가 활성화되어 있으면 베뉴 브라우저도 이를 따릅니다. CEX는 입금, 출금 또는 perp 엣지가 선택된 체인에 닿을 때 유지되고, DEX는 버전 중 하나라도 선택된 체인에 배포되어 있을 때 유지됩니다.

Display

Labels 칩

캔버스의 노드 레이블을 토글합니다. 기본값은 켜짐입니다. 레이블이 켜져 있어도 레이아웃이 안정화된 후에만 렌더링됩니다. 노드가 아직 움직이는 동안에는 애니메이션을 부드럽게 유지하기 위해 레이블과 엣지 파티클이 표시되지 않습니다. 노드에 마우스를 올리면 이 토글과 무관하게 항상 레이블이 표시됩니다.

Show All 칩

단일 소스 자산의 표시 여부를 제어합니다. 기본값은 꺼짐입니다. 단일 소스 자산이란 독립적인 데이터 소스 2개 미만에서 보고되었고 아직 품질 승인을 받지 않은 자산입니다. 베뉴 하나에서만 보이는 토큰은 베뉴 간 가격 비교가 불가능하고 노이즈일 가능성이 더 높기 때문에 기본적으로 숨겨집니다. Show All을 켜면 포함되지만 매우 흐리게(15% 불투명도) 렌더링되어 크로스 베뉴 자산과 시각적으로 경쟁하지 않습니다. 같은 규칙이 상세 패널의 Supported Assets 목록에도 적용됩니다. 칩이 꺼져 있으면 그곳에는 멀티 소스 자산만 나열됩니다.

API 상태 점

사이드바 맨 아래에서 색이 있는 점과 레이블이 백엔드의 준비 상태를 보고합니다. 첫 확인이 진행되는 동안에는 Checking API..., 그다음 Connected ({N} tokens)(토큰 수를 알 수 없으면 Connected만), API가 준비되지 않았으면 Disconnected가 표시됩니다. 이 확인은 15초마다 API 상태 엔드포인트를 폴링합니다.

그래프 읽기

캔버스의 모든 요소가 의미를 담고 있습니다. 모양은 엔터티 유형이고, 크기는 연결성이며, 선 스타일은 실시간 상태입니다. 왼쪽 아래 모서리의 화면 범례 패널이 이를 Nodes와 Edges 두 섹션으로 요약합니다.

노드 유형

베뉴 노드 크기는 연결 수에 따라 로그 곡선으로 커지므로, 수백 개의 상장을 가진 베뉴는 캔버스를 압도하지 않으면서도 눈에 띄게 큽니다. 부모 노드(여러 서피스를 가진 CEX, 여러 버전을 가진 DEX 프로토콜)는 자식들의 연결 수까지 흡수하기 때문에 주요 거래소와 프로토콜이 화면에서 가장 큰 도형으로 보입니다. 노드에 마우스를 올리면 노드가 커지고 흰색 외곽선이 그려집니다.

엣지 유형

이동 엣지의 실시간 상태 스타일

입금과 출금 엣지는 30초마다 갱신되는 거래소 상태 데이터로 계속 다시 스타일링됩니다. 선 스타일이 곧 상태 신호입니다:

이 스타일 업데이트는 실시간 채널로 상태 변경이 도착할 때 제자리에서 적용되므로, 거래소가 지갑 하나를 일시 중지했다고 해서 레이아웃이 다시 섞이는 일은 없습니다.

알아두면 좋은 렌더링 세부 사항

• 전체 네트워크에서 입금/출금 경로 엣지는 의도적으로 흐리고 얇게 그려집니다. 서브그래프를 분리하거나 노드에 마우스를 올리면 선명해집니다.
• 엣지 불투명도는 줌에 따라 조정됩니다. 줌 아웃하면 클러스터 구조가 잘 읽히도록 엣지가 흐려지고, 줌 인하면 개별 경로를 추적할 수 있도록 밝아집니다. 노드에 마우스를 올리면 해당 노드의 엣지가 완전한 강도로 복원됩니다.
• 토큰 노드에 닿는 엣지에는 흐름 방향을 보여주는 천천히 움직이는 파티클이 하나씩 표시됩니다. 파티클은 모바일에서, 그리고 레이아웃이 아직 안정화되는 동안에는 비활성화됩니다.
• 같은 노드 쌍 사이의 여러 엣지는 곡선으로 벌어져 한 줄로 겹치지 않습니다.

상호작용

캔버스의 모든 요소는 상호작용이 가능합니다. 클릭 가능한 요소 위에서는 포인터가 손 모양으로 바뀝니다.

베뉴 노드 클릭 (CEX, CEX 마켓, DEX, DEX 버전)

해당 베뉴의 이웃을 서브그래프로 분리합니다. 일반 노드는 1-hop, 멀티 버전 DEX 프로토콜이나 멀티 서피스 CEX 부모는 버전이나 서피스 그리고 그것들이 연결된 모든 것이 계속 보이도록 2-hop입니다. 해당 노드의 상세 패널이 열리고 카메라가 서브그래프에 맞게 줌됩니다. 그래프는 분리 전에 노드 위치를 스냅샷으로 저장하므로, 서브그래프를 떠나면 레이아웃이 정확히 복원됩니다.

토큰 노드 클릭

해당 자산의 Token Flow 오버레이와 Token Details 패널을 엽니다. 토큰 클릭은 작은 이동 허용치를 가진 엄격한 히트 테스트를 사용하므로, 몇 픽셀 이상 흘러간 클릭은 드래그로 간주되어 플로우가 실수로 열리지 않습니다.

엣지 클릭

양쪽 끝점에 포커스를 맞춥니다. 두 끝점은 호버 크기로 커지고 다른 모든 노드는 50% 불투명도로 흐려지며, 보이는 서브그래프는 양 끝점의 1-hop 이웃의 합집합이 됩니다. 상세 패널에 엣지 상세가 표시되고 카메라가 맞춰 줌됩니다.

배경 클릭

포커스, 서브그래프, 열린 패널을 모두 해제하고, 서브그래프가 열리기 전에 저장된 노드 위치를 복원하며, 전체 네트워크가 들어오도록 다시 줌 아웃합니다. 언제든 처음으로 되돌아가는 범용 제스처입니다.

호버

마우스를 올린 노드는 흰색 외곽선과 함께 커지고 HTML 툴팁을 표시합니다. 노드 툴팁에는 굵게 표시된 노드 이름, Type: 줄(token, cex, cex market, dex 또는 dex protocol), CEX 마켓 노드의 경우 Surface: {market_type} 줄, Chains: 목록, 그리고 거래소의 경우 지원 네트워크 수를 나타내는 Networks: 카운트가 포함됩니다. 엣지 툴팁은 유형별로 고정된 패턴을 따르며 아래에 나열되어 있습니다.

드래그

포인터를 움직이는 누름은 클릭이 아니라 드래그로 처리되므로, 뷰를 재배치하다가 실수로 노드를 선택하거나 Token Flow를 여는 일이 없습니다. 클릭 핸들러는 포인터가 작은 이동 임계값 안에 머무를 때만 작동합니다.

엣지 툴팁 패턴

Token Flow

Token Flow는 그래프의 자산 중심 모드입니다. 전체 네트워크 대신 하나의 토큰이 중앙에 놓이고, 그 토큰이 닿을 수 있는 모든 것이 주위에 배치됩니다. 토큰의 체인들, 토큰을 받아주는 거래소들, 토큰을 거래하는 DEX들, 체인 사이에서 토큰을 옮기는 브릿지들입니다. 플로우가 열려 있는 동안 메인 그래프는 그 아래에서 숨겨지고 일시 중지됩니다. 배경을 클릭하면 플로우가 닫히고 떠났던 바로 그 자리의 네트워크로 돌아갑니다.

여는 네 가지 방법

1. 토큰 노드를 클릭합니다.

   메인 그래프에서 클릭하면 됩니다.

2. 검색에서 토큰을 선택합니다.

   사이드바 검색의 Tokens 그룹 아래 결과를 선택하면 해당 자산의 플로우가 열립니다.

3. Arbitrage 뷰의 자산 링크를 따라갑니다.

   차익거래 카드의 자산 심볼을 클릭하면 해당 자산의 플로우가 열린 상태로 Graph 뷰로 이동합니다.

4. 딥링크를 사용합니다.

   ?asset={id}(양의 정수 자산 id)가 포함된 URL은 항상 Graph 뷰로 진입해 해당 자산의 Token Flow를 엽니다. 공유 링크와 Telegram 알림 링크가 올바른 토큰에 도달하는 방식입니다.

플로우는 세 가지 데이터 소스를 결합합니다. 자산의 상세 레코드(체인별 멤버 토큰), 30초마다 갱신되는 마켓 데이터 피드(CEX 가격, perp 가격, 거래소 상태, DEX 풀, perp 상태, 브릿지 경로), 그리고 그래프 자체의 엣지입니다.

노드 구성

엣지 구성

플로우 내부 클릭

체인 노드 클릭

전역 Chain Filter에서 해당 체인을 토글합니다(그리고 패널에 해당 노드의 상세를 표시합니다). 멀티 체인 자산을 실제로 경유할 한두 개 체인으로 좁히는 가장 빠른 방법이며, 가격 패널과 브릿지 카드가 즉시 반응합니다.

CEX 또는 DEX 노드 클릭

플로우를 떠나 메인 그래프의 해당 베뉴 서브그래프로 이동합니다. 메인 그래프에서 그 베뉴를 클릭한 것과 정확히 같습니다. "이 토큰을 무엇이 옮길 수 있는가"에서 "이 베뉴는 그 밖에 무엇을 지원하는가"로 시점을 전환할 때 사용하세요.

중앙 토큰 클릭

패널을 다른 곳으로 이동했었다면 토큰의 패널 내용을 다시 엽니다.

엣지 클릭

패널에 플로우 엣지 상세를 엽니다. 경로 끝점, 툴팁 정보 줄, 입금/출금 엣지의 실시간 Status 카드, 또는 브릿지 엣지의 경우 해당 체인 쌍으로 필터링된 브릿지 상세 카드입니다.

Fit View

툴바 버튼은 플로우 안에서도 동작하며, 카메라를 플로우의 노드들에 다시 맞춥니다.

상세 패널

상세 패널은 오른쪽에 도킹되며(데스크톱에서 350px 폭, 모바일에서는 전체 폭) 선택한 대상에 따라 다른 내용을 렌더링합니다. 노드, 여러 베뉴, 엣지, 자산, 또는 Token Flow 내부의 노드/엣지입니다. 아무것도 선택하지 않으면 No Selection과 함께 힌트 Click on a node or edge to see details, 푸터 노트 click or tap to select가 표시됩니다. 헤더 제목은 노드 선택 시 노드 이름, 멀티 베뉴 선택 시 {N} Venues, 자산 선택 시 Token Details, 그 외에는 Details입니다.

노드 상세 (베뉴)

헤더 카드

노드의 유형 색상 위에 아이콘 문자(토큰은 C, DEX 노드는 D, CEX 노드는 X), 노드 이름, 그리고 유형 레이블(TOKEN, DEX PROTOCOL, CEX MARKET, CEX 또는 DEX)이 표시됩니다. 서브그래프에서 벗어났다면 헤더를 클릭해 노드의 서브그래프를 다시 분리할 수 있습니다.

Chains 섹션

체인마다 태그 하나씩이며 섹션 제목에 카운트 배지가 붙습니다. 거래소의 경우 네트워크는 사용하는 자산 수가 많은 순으로 정렬되고, DEX의 경우 배포 체인입니다. 모든 태그는 클릭 가능하며 전역 체인 필터에서 해당 체인을 토글합니다(활성 태그는 강조 배경이 적용됩니다). 체인이 12개를 넘으면 +{N} more 뒤로 접히며 show less로 다시 접을 수 있습니다.

Versions 카드 (멀티 버전 DEX 프로토콜)

부제는 {N} versions이고, 각 행에는 버전 레이블과 {N} chains 카운트가 표시됩니다.

Surfaces 카드 (CEX 노드)

부제는 {N} surfaces이고, 각 행에는 서피스 레이블과 마켓 타입, 계약 유형 또는 surface라는 단어가 표시됩니다.

Supported Assets 카드

부제는 {N} assets입니다. 이 베뉴와 입금, 출금 또는 perp 엣지(CEX의 경우)나 스왑 엣지(DEX의 경우)로 연결된 모든 자산의 태그 그리드입니다. 그리드는 Show All 칩을 따릅니다. 칩이 꺼져 있으면 멀티 소스 자산만 나열됩니다. 태그를 클릭하면 해당 자산의 Token Flow가 열립니다. 12개를 넘으면 +{N} more / show less로 접히고, 연결이 없는 베뉴는 No connected assets로 표시됩니다.

Connections 카드

부제는 {N} edges입니다. 카테고리별 카운트: Deposit Routes(초록), Withdraw Routes(빨강), Surface Nodes(주황, CEX 전용), Perp Markets, Bridge Routes(파랑). 카운트가 0인 행은 카드를 간결하게 유지하기 위해 대부분 숨겨집니다.

엣지 상세

헤더

유형의 첫 글자가 표시된 아이콘, 유형 레이블, 그리고 부제 Active입니다. 유형 레이블: Deposit, Withdraw, Both (Deposit + Withdraw), Bridge, Swap, DEX Version, CEX Market, Perp Market.

본문 행

DEX 엣지는 Pair({asset} <-> {quote} 형식)와 DEX를 표시합니다. CEX 엣지는 Pair, CEX, 그리고 마켓 타입이 있는 경우 Surface 행을 표시합니다. 그 외 엣지는 단순한 From과 To 행을 표시합니다. CEX와 DEX 엣지에는 체인 필터를 토글하는 클릭 가능한 Chains 태그 섹션도 함께 표시됩니다.

Token Mappings 섹션

토큰 매핑을 가진 엣지(브릿지 등)의 경우 각 행은 {chain_id} {coin} 배지와 {cex_id} {coin} 배지를 ->로 연결해 표시합니다. 행을 클릭하면 해당 자산의 Token Flow가 열립니다. 매핑이 20개를 넘으면 +{N} more 뒤로 접힙니다.

추가 카드

엣지가 특정 자산에 속하면 자산 요약 카드가 이어지고, 그다음 양 끝점의 노드 상세 카드가 따라옵니다. 엣지를 한 번 클릭하는 것만으로 그 엣지가 닿는 모든 것의 전체 맥락을 볼 수 있습니다.

자산 상세 (Token Flow 패널)

자산을 선택하면 세 블록이 순서대로 쌓입니다. 자산 요약 카드, 가격 패널(브릿지 데이터가 있으면 그 섹션들 사이에 브릿지 카드가 끼워집니다), 그리고 Venues 카드입니다.

로딩과 오류 상태

로딩 중: Loading token details.... 자산이 사라진 경우: Token details unavailable과 This asset is unavailable or no longer visible. 요청이 제한된 경우: Too many token detail requests와 Selected asset requests are rate limited. 그리고 서버가 대기 시간을 알려주면 Try again in {N}s. 플랜으로 접근할 수 없는 경우: Your account cannot access this selected asset view. 그 외 실패: Could not load token details와 Retry the selected asset request. 모든 오류 상태에는 Retry 버튼이 포함됩니다.

Venues 카드

부제에 전체 베뉴 수가 표시됩니다. CEX 섹션은 각 거래소를 이 자산에 대해 정확히 무엇을 지원하는지 설명하는 경로 레이블과 함께 나열합니다: deposit + withdraw + perp, deposit + withdraw, deposit + perp, withdraw + perp, only deposit, only withdraw 또는 perp market. DEX 섹션은 프로토콜을 나열합니다(버전은 프로토콜당 한 행으로 중복 제거). 항목이 8개를 넘으면 +{N} more / show less로 접히고, 베뉴가 전혀 없으면 카드에 No connected venues가 표시됩니다.

자산 요약 카드

헤더

자산 색상 위의 T 아이콘, 대표 심볼, 그리고 TOKEN 레이블입니다. 헤더를 클릭하면 이 자산의 Token Flow가 열리거나 다시 열리며, 필요하면 Graph 뷰로 전환됩니다.

Chains 태그

체인마다 클릭 가능한 태그 하나와 카운트 배지가 있습니다. 태그는 체인 필터를 토글하며 12개를 넘으면 접힙니다.

멤버 토큰 행: {N} chain(s), {M} member(s)

자산 뒤에 있는 실제 온체인 컨트랙트를 체인별로 묶어 나열하는 접이식 행(화살표로 펼침)입니다. 각 멤버는 심볼과 함께 앞 8자, 뒤 6자로 축약된 식별자를 표시합니다. 식별자를 클릭하면 전체 값이 복사되고, 행에 1.5초 동안 Copied!가 표시됩니다. 체인 필터가 모든 멤버를 제외하면 목록에 No members match the current chain filter.가 표시됩니다.

플로우 노드와 플로우 엣지 상세

Token Flow 내부에서 노드를 선택하면 자산 요약 카드와 가격 패널이 표시되고, 중앙이 아닌 노드의 경우 Chain, CEX Market, CEX, DEX 또는 Asset 유형 레이블로 노드를 식별하는 작은 카드가 추가됩니다. 그 카드의 헤더를 클릭하면 메인 그래프의 해당 베뉴 서브그래프로 이동합니다. 플로우 내부에서 엣지를 선택하면 간략한 토큰 요약(아이콘 A, 심볼, TOKEN, Chains 카운트), 가격 패널, 그리고 Both, Deposit, Withdraw, Perp 또는 DEX 유형의 엣지 카드가 부제 Token Flow Path와 From / To / Info 행과 함께 표시됩니다. 브릿지 엣지는 해당 체인 쌍으로 필터링된 브릿지 상세 카드로 대체됩니다.

Status 카드 (입금/출금 플로우 엣지)

부제는 Real-time입니다. 각 방향(Deposit, Withdraw)에 대해 초록색 Enabled 또는 빨간색 Disabled, 값이 fresh면 초록, warning이면 노랑, 그 외에는 빨강으로 칠해지는 Freshness 행, 그리고 상태 뒤에 있는 정확한 거래소 지갑을 식별하는 {cex_id}:{coin}:{cex_network} 형식의 CEX Key 행이 표시됩니다. 매핑은 존재하지만 기록된 상태가 없으면 카드에 No status data available이 표시됩니다.

가격 패널

가격 패널은 자산 뷰의 핵심입니다. 자산을 거래하는 모든 베뉴에 걸친 실시간 순위형 가격 비교이며, 자산의 마켓 데이터 피드에서 30초마다 갱신됩니다. 카드 헤더에는 항상 $1000 basis라는 표시가 붙습니다. 표시되는 모든 가격은 호가 최상단 틱이 아니라 $1,000 체결 시뮬레이션입니다. 이 단일 규칙 덕분에 얕은 DEX 풀과 깊은 거래소 오더북을 비교할 수 있습니다. $1,000을 나쁜 유효 가격으로만 소화할 수 있는 풀은 정확히 그에 걸맞은 순위에 놓입니다.

데이터 도착 전 상태: 로딩 중에는 Loading prices…, 실패 시 Could not load prices.와 Retry 버튼, 피드는 정상이지만 이 자산에 데이터가 없으면 No price data available이 표시됩니다.

Spot 탭

Buy 섹션

베뉴를 매수 가격 오름차순으로 정렬해 토큰을 가장 싸게 살 수 있는 곳이 맨 위에 옵니다. Transfer blocked 또는 Fallback 배지가 붙은 행은 가격과 무관하게 순위 하단으로 밀립니다. 옮길 수 없거나 완전히 신뢰할 수 없는 좋은 가격은 좋은 가격이 아니기 때문입니다.

Sell 섹션

베뉴를 매도 가격 내림차순으로 정렬해 토큰을 가장 좋은 조건으로 처분할 수 있는 곳이 맨 위에 옵니다. 같은 우선순위 하향 규칙이 적용됩니다.

행 구성

각 행에는 베뉴 레이블, 체결 시뮬레이션 가격, 그리고 행의 스프레드가 베이시스 포인트({spread}bp)로 표시됩니다. 베뉴 레이블 형식: CEX 행은 BINANCE USDT나 UPBIT KRW처럼 표시됩니다(거래소와 호가 마켓이며, 호가 코인이 마켓 이름과 다르면 괄호로 덧붙습니다). DEX 행은 UNISWAP V3 eth처럼(프로토콜, 버전, 체인) 표시되며, 여러 풀이 견적을 받치는 경우 (3p) 같은 풀 카운트 접미사가 붙습니다. 가격은 동적 소수 자릿수를 사용하고, 극히 작은 값은 마이크로캡 가격도 읽기 쉽도록 선행 0 표기(예: $0.0(zeros)digits)로 압축됩니다.

+{N} more / Show less

각 섹션은 기본적으로 상위 세 행만 표시하고 나머지는 이 토글 뒤로 접습니다.

Fallback 배지

폴백 견적에서 파생된 가격을 표시합니다. 예를 들어 주문이 오더북을 크로스했지만 전체 수량으로는 체결되지 않은 부분 체결입니다. 폴백 가격도 여전히 정보이기 때문에 화면에 남지만, 순위는 항상 마지막이며 클라이언트 측 스프레드 계산은 해당 베뉴에 기본 가격이 없을 때만 이를 사용합니다.

Transfer blocked 배지

해당 다리의 이동 방향이 현재 선택된 체인에서 그래프상 경로가 없을 때 CEX 행에 나타납니다. 매수 측에 출금 경로가 없거나(살 수는 있지만 토큰을 꺼낼 수 없음) 매도 측에 입금 경로가 없는 경우(팔기 위해 토큰을 넣을 수 없음)입니다. 가격은 실제지만 그 주위의 경로가 없는 것입니다.

오래된 행

가격 신선도가 오래된 행은 행 전체가 절반 불투명도로 렌더링되며 Spread 계산에서 완전히 제외됩니다. 흐려진 숫자는 과거의 사실이지 실시간 견적이 아닙니다.

Spread 행

유효한 쌍이 존재하면 패널은 오래되지 않은 최적 매수, 매도 행으로 클라이언트 측 스프레드를 계산합니다. 초록색 +{pct}% 수치와 함께 그 아래에 해당 수치를 만들어 낸 정확한 베뉴 쌍을 명시하는 Buy {VENUE} -> Sell {VENUE} 설명이 표시됩니다.

풀 id 복사 (DEX 행)

DEX 행에서는 베뉴 레이블이 풀 식별자 복사 버튼을 겸합니다. 호버 타이틀에 풀 id가 표시되고 클릭하면 복사되며 Copied!와 체크 표시로 확인됩니다. 이 버튼은 API 응답에 풀 id가 포함될 때만 존재하며, 이는 플랜의 데이터 접근 범위에 따라 달라집니다.

탭에 행이 하나도 없으면 No spot price data가 표시됩니다.

Perp 탭

perp 탭은 같은 매수, 매도 순위를 사용하되 무기한 선물 마켓만 대상으로 하며, BINANCE PERP처럼 레이블이 붙습니다. 여기에는 입금이나 출금 게이트가 없습니다. perp 포지션은 마진으로 열리므로 온체인에서 아무것도 이동할 필요가 없고 Transfer blocked 배지도 적용되지 않습니다. 순위 아래에는 각 perp 마켓마다 네 개의 필드가 있는 상태 블록이 표시됩니다:

빈 상태: No perp price data.

저하 모드

마켓 데이터 쿼리가 실패하고 폴백할 캐시 데이터도 없으면, 패널은 Market data unavailable - arbitrage temporarily paused라는 빨간 배너를 표시하고 클라이언트 측 스프레드 계산을 중단합니다. 이는 의도된 하드 스톱입니다. 검증할 수 없는 데이터로 스프레드를 계산하느니 아무것도 계산하지 않는 것입니다.

Arbitrage 오버레이

Token Flow가 열려 있고 기회 피드에 해당 자산의 기회가 있으면, 플로우 그래프가 지도 위에 그 거래를 그립니다. 어느 베뉴에서 사고 어느 베뉴에서 팔지, 그리고 그 사이의 체인 경로 또는 누락된 브릿지를 표시합니다. 오버레이는 가격 패널 안의 Arbitrage 카드로 제어됩니다.

Arbitrage 카드

Spot-Spot / Spot-Perp / Perp-Perp 탭

각 탭에는 기회 수 배지가 붙고 이 자산에 대한 해당 카테고리의 기회가 나열됩니다. 선택된 탭은 그래프 위 오버레이 모드도 함께 전환하므로 카드와 캔버스는 항상 같은 거래 유형을 설명합니다. 기본값은 Spot-Spot입니다.

기회 행

각 행은 Spread와 초록색 +{pct}%로 시작하고, 그다음 배지 상태가 옵니다. 경로에 브릿지가 필요하고 존재하면 Bridge, 필요하지만 없으면 Need bridge입니다. 실행할 수 없는 행은 차단 사유와 함께 55% 불투명도로 렌더링되거나 단순히 Blocked로 표시됩니다. 그 아래 Buy 행과 Sell 행이 각각 베뉴와 가격을 명시합니다. 베뉴 형식은 가격 패널과 같습니다. DEX는 UNISWAP V3 eth, 현물 마켓은 BINANCE USDT, perp 마켓은 BINANCE PERP USDT입니다. 카드는 최대 다섯 행과 +{N} more를 표시하고, 보여줄 것이 없으면 No opportunities로 표시됩니다.

오버레이가 그릴 대상을 고르는 방식: Spot-Spot에서는 체인 필터를 통과하고, 매수와 매도 베뉴가 플로우에 존재하며, 스프레드가 양수인 이 자산의 현물 기회들을 검토한 뒤 우선순위에 따라 하나를 고릅니다(경로가 존재하는 것이 더 큰 스프레드보다 우선, 그다음 더 큰 스프레드, 그다음 더 적은 hop 수, 그다음 브릿지 상태 순). perp 탭에서는 해당 유형의 가장 큰 스프레드를 가져와 실시간 funding과 미결제약정으로 보강합니다. perp 탭에 perp 기회가 없으면 오버레이는 현물 기회로 폴백합니다. 피드 자체는 프리미엄에서 30초마다, 공개 티어에서 60초마다 갱신됩니다.

그래프 위 시각 요소

오버레이 카드

요약 카드가 그래프 상단 중앙에 떠 있습니다. 왼쪽 블록: 매수 또는 롱 쪽으로, 액션 배지, 베뉴 레이블, 유효숫자 다섯 자리의 가격이 표시됩니다. DEX 베뉴에는 풀 id 복사 버튼이 포함됩니다(호버 타이틀에 id가 표시되고, 클릭하면 Copied와 체크 표시로 확인). 중앙: 퍼센트 위에 Spread라는 단어. 오른쪽 블록: 같은 형식의 매도 또는 숏 쪽. 아래 푸터 줄은 경로 상태를 보고합니다:

브릿지 상세

브릿지 경로가 관련된 모든 곳(자산 패널, 플로우 노드, Token Flow 내부의 브릿지 엣지)에서 브릿지 상세 카드가 현재 자산의 경로를 요약합니다. 헤더에는 B 아이콘, 프로토콜 이름(브릿지 id의 타이틀 케이스 표기이며, 여러 프로토콜이 자산을 지원하면 쉼표로 구분), 부제 {N} route(s)가 표시됩니다.

Chains 필터 태그

이 자산의 브릿지 경로에 나타나는 모든 체인의 태그입니다. 클릭하면 다른 곳과 마찬가지로 전역 체인 필터가 토글됩니다. 체인을 하나 선택하면 그 체인이 어느 한쪽 끝점인 경로가 매칭되고, 둘 이상 선택하면 양 끝점이 모두 선택된 체인이어야 합니다. 태그가 12개를 넘으면 접힙니다.

경로 행

각 행은 {from_chain} → {to_chain}으로 표시되며 오른쪽에 배지가 붙습니다. 경로의 전송 모드가 초록색으로 표시되고, 경로 유형 배지는 pool(유동성 풀 기반 전송) 또는 oft(민트 앤 번 OFT 전송)입니다. 양쪽의 토큰 심볼이 다르면 행에 {from_symbol} -> {to_symbol}로 표기됩니다. 기본적으로 다섯 행이 표시되고 나머지는 +{N} more routes / Show less 뒤로 접힙니다.

Load bridge route details 버튼

카드는 처음에 그래프의 브릿지 엣지 보강 데이터(수수료, credit, 예상 시간)로 요약을 표시합니다. 이 버튼을 누르면 전체 경로 상세를 가져와 수수료 내역, 환율, 양쪽 풀 TVL, 모드가 추가됩니다. 가져오는 동안에는 Loading bridge route details...로 표시됩니다. 오류 상태: Bridge route details unavailable과 Bridge route details are unavailable for this asset.(찾을 수 없음), Too many bridge route requests(요청 제한), Your account cannot access this bridge route view.(플랜 제한), 또는 Could not load bridge route details와 Retry the bridge route request. 경로가 없는 자산은 No bridge routes available for this asset.으로, 체인 필터가 모든 것을 제외하면 No bridge routes match the current chain filter.로 표시됩니다.

지표 레퍼런스

데이터가 있는 지표만 렌더링되므로, 그리드가 듬성하면 대개 요약 단계가 표시되고 있다는 뜻이며 Load bridge route details가 나머지를 채워 줍니다.

신선도 & 실시간

이 페이지의 모든 실시간 숫자는 나이 신호를 가지며, 그 인코딩 방식은 화면 요소마다 다릅니다. 이 표가 해독표입니다:

데이터가 화면에 도달하는 방식

앱은 백엔드와 실시간 웹소켓 연결을 유지하며 첫 메시지로 인증합니다. 서버는 이를 통해 가격 스냅샷과 업데이트 알림을 푸시하고, 앱은 이를 곧바로 데이터 캐시에 주입합니다. 엣지 스타일과 가격 행이 눈에 보이는 새로고침 없이 바뀌는 이유입니다. 연결은 소켓이 열린 시점이 아니라 첫 메시지가 도착한 순간부터 살아 있는 것으로 간주됩니다.

웹소켓이 끊기면 가격과 상태 훅이 자동으로 REST 폴링으로 전환됩니다. 프리미엄은 30초마다, 공개 티어는 60초마다입니다. 클라이언트는 연결이 끊긴 동안 주기적인 안전 재요청도 수행하고, 지수 백오프로 웹소켓 재연결을 시도합니다(인증이 거부될 때만 재시도를 멈춥니다). 실질적인 결과는 이렇습니다. 끊어진 웹소켓에 대한 오류 배너는 없으며, 사이드바 상태 점은 소켓이 아니라 API 준비 상태를 추적하므로 여전히 Connected ({N} tokens)로 표시됩니다. 웹소켓 장애의 유일한 증상은 업데이트가 즉시가 아니라 폴링 주기로 도착한다는 것뿐입니다.