실시간 암호화폐 선물 모의투자 플랫폼
선물 거래를 실전처럼 연습하고,
시장 분석에 필요한 모든 데이터를 실시간으로 확인하세요.
stopLoss.mov
| 항목 | 설명 |
|---|---|
| 지원 종목 | BTC, ETH, SOL, BNB, XRP, DOGE, ADA, AVAX, DOT, MATIC (USDT 페어) |
| 실시간 시세 | Binance @ticker combined stream (WebSocket) |
| 시장 데이터 | 펀딩비, Open Interest, 24h 통계, 롱숏비율 — 15초 폴링 |
| 차트 | lightweight-charts 기반 캔들스틱 + 거래량 히스토그램 |
| TP/SL 관리 | 차트 위 드래그로 조절, Supabase 실시간 동기화 |
| 포지션 저장 | Supabase 기반 주문/포지션 영속 저장 |
| 기능 | 설명 | 데이터 소스 | 갱신 방식 |
|---|---|---|---|
| 실시간 청산 | 바이낸스 선물 청산 $5,000 이상 필터링 | Binance !forceOrder@arr |
WebSocket |
| 고래 거래 추적 | BTC·ETH·SOL·BNB·XRP $50K 이상 체결 감지 | Binance aggTrade |
WebSocket (combined stream) |
| 실시간 시세 | 심볼별 가격, 변동률, 24h 거래량 | Binance @ticker |
WebSocket + REST 배치 |
| 캔들 차트 | 1분~1일봉 차트, 과거 데이터 무한 스크롤 | Binance @kline_{interval} |
WebSocket + REST |
| 김치프리미엄 | 업비트-바이낸스 괴리율 (MID 호가 기준) | 자체 API /api/kimchi |
5초 폴링 |
| 공포탐욕지수 | Alternative.me Fear & Greed Index | 자체 API /api/fear-greed |
마운트 시 1회 |
| 롱숏 비율 | Top Trader 포지션 비율 (5m~1d) | Binance Futures API | 60초 폴링 |
| 핫코인 | 거래량 × 변동성 스코어 상위 15개 로테이션 | Binance 24hr ticker | 30초 폴링, 2초 회전 |
| 시장지수 | S&P 500, Gold, KOSPI 등 글로벌 지수 | 자체 API /api/market-indices |
30초 폴링 |
| 실시간 채팅 | 유저 간 실시간 메시지 + 롱/숏 투표 | Supabase Realtime | postgres_changes 구독 |
| 뉴스 피드 | 최신 암호화폐 뉴스 30건 | Supabase | 마운트 시 1회 |
| 현재 접속자 | 디바이스 기반 실시간 접속자 수 | Supabase Realtime | 15초 heartbeat |
성능 최적화
- 폴링 기반 컴포넌트는 탭 비활성 시 자동 중지 (
useVisibilityPolling) - WebSocket 연결 끊김 시 3초 후 자동 재연결
시각화 로직
- Binance 24hr ticker에서 거래대금 $500K 이상 필터링
- 상위 150개 코인을 Squarified Treemap 레이아웃으로 표시
- 면적:
sqrt(거래량)로그 스케일 적용 - 색상: 24h 변동률 기반 red-green gradient
- 30초마다 자동 갱신
| 구분 | 기술 |
|---|---|
| 프레임워크 | Next.js 15 (App Router), TypeScript |
| 스타일링 | TailwindCSS |
| 상태 관리 | Jotai |
| 실시간 통신 | WebSocket (Binance Stream), Supabase Realtime (postgres_changes) |
| 차트 | lightweight-charts |
| 백엔드 | Supabase (PostgreSQL, Realtime, Auth, Storage) |
| 배포 | Vercel |
프로젝트 기획부터 구현, 최적화까지의 과정을 시리즈로 기록했습니다.
| 회차 | 제목 | 링크 |
|---|---|---|
| 1 | 왜 coinpan은 대박났을까? | Velog 보기 |
| 2 | 구상 과정 | Velog 보기 |
| 3 | 사용자 피드백 받고 UI 고도화하기 | Velog 보기 |
| 4 | 바이낸스 API 451 에러 해결 | Velog 보기 |
| 5 | 사람들은 돈이 몰리는 곳을 찾는다 | Velog 보기 |
| 6 | 트리맵 오버레이 최적화 | Velog 보기 |
| 7 | 리뉴얼, UI 개편과 실시간성 | Velog 보기 |
| 8 | 선물 모의투자, 연습할 공간이 필요했다 | Velog 보기 |
| 9 | 사람들이 계속 돌아오게 하려면 | Velog 보기 |
Built by 정재형 | Contact: whird398@naver.com