← 프로젝트 목록으로
2023 · 프론트엔드

자문형 크립토 ‘Selfrecipe’ — 실시간 시각화와 리텐션

자문형 크립토 ‘Selfrecipe’ — 실시간 시각화와 리텐션

TradingView 도입과 실시간 연결로 시각화 중심 UX 구현.

DjangoBinanceTradingViewWebSocketCI/CD

문제

‘주문넣기’ 부재와 화면 간 UI 비일관성으로 사용자 여정이 단절되고, 자문형 흐름에서 데이터 신뢰/가시성이 낮음.

목표

대시보드 재설계로 ‘계산→주문→관리’ 일관 플로우 제공, 실시간 시각화로 신뢰 체감도 향상.

해결

- 대시보드 탭 구조(계산/주문/관리)로 정보·행동 동선 정렬 - 모바일 하단 네비게이션으로 ‘홈→대시보드→오토봇(→랭킹)’ 여정 명시 - 계산 연동 일괄주문 도입(PC 버튼, 모바일 FAB) - 코인 티커 추가(현재가·24h 등락·고저·거래량·거래대금) - 포지션/주문 취소(일괄·단일) 화면 설계 - TradingView 레이어 커스터마이즈 + WebSocket 실시간 반영 - 환경 분리 및 CI/CD 자동배포

성과

- UX 일관성 향상으로 흐름의 단절 감소, 주문 전환 경로 명확화 - 리텐션 30% 증가, 세션 체류시간 2배(4m→9m) - 데이터 렌더링 지연 40% 감소, 실시간 차트 기반 의사결정 강화

인사이트

서비스 철학(계산→주문→관리)을 UI/UX로 번역할 때 신뢰가 형성된다.

상세

Selfrecipe — 2023 UI/UX 개편

의의: ‘계산→주문→관리’ 플로우 정립과 서비스 완성도 향상

사용자 여정

  • 홈(시황/분석) → 대시보드(계산/주문/관리) → 오토봇(자동) → 랭킹 → 거래소

화면 구조 변경(PC/모바일)

  • 대시보드: 계산/주문(탭), 관리(포지션/대기주문/체결/USDT/과거레시피)
  • 모바일: FAB ‘주문하기’, 하단 네비게이션, 차트↔표 전환
  • 차트: TradingView + 안내선/대기주문/포지션 오버레이
대시보드 화면
대시보드 정보 구조
대시보드 상세
주요 컴포넌트 배치

핵심 기능

  • 일괄주문: 계산기 결과 기반 간편 실행
  • 코인 티커: 현재가·24h 등락/고저·거래량·거래대금
  • 포지션/주문 취소: 일괄/단일(마켓/리밋)
모바일 UI
하단 네비게이션/주문 관리 카드
레시피 상단
레시피·주문 핵심 요소

왜 이 스택인가

  • TradingView — 복잡 지표 시각화 — 레이어/오버레이 동기화 — 반영 지연 40%↓
  • WebSocket — 실시간 체결·호가 — 이벤트 파이프라인/전파 규칙 — 체류 2배(4m→9m)
  • Django — 도메인 로직 재사용 — API/권한/캐시 경계 — 회귀·운영 리스크↓
  • Binance API — 일괄주문/취소 표준 — 유효성/가드 — 실패·재시도 오류율↓
  • CI/CD(GitLab) — 자동 배포/환경 분리 — 리드타임·실패율↓

주문조작 기능 BDD 요약

  • 일괄주문: 계산→주문서 반영, 유효성 검사(거래규칙), 주문상세 팝업, 보안인증(이메일) 후 실행
  • 주문 취소: 단일 취소(DELETE /order), 다중 취소(DELETE /batchOrders), 전체 취소(DELETE /allOpenOrders)
  • 포지션/체결/자산: 체결내역 조회(All Orders), 실시간 잔고·가용·UPnL·Risk(Account v2)
  • 모바일 UI: 주문관리 카드형, 하단 네비게이션, 차트↔표 전환
  • 차트 상 조회/조작: 포지션·대기주문 오버레이 및 취소 조작

주요 API 엔드포인트

  • POST /fapi/v1/batchOrders — Place Multiple Orders
  • POST /fapi/v1/order — New Order
  • DELETE /fapi/v1/order — Cancel Order
  • DELETE /fapi/v1/batchOrders — Cancel Multiple Orders
  • DELETE /fapi/v1/allOpenOrders — Cancel All Open Orders
  • GET /fapi/v1/allOrders — All Orders
  • GET /fapi/v2/account — Account Information v2
  • GET /fapi/v1/income — Get Income History

유효성/가드

  • 투자금액 입력·계산 완료 전에는 ‘주문서 반영하기/이대로 주문넣기’ 비활성
  • 계산 미완료 시 안내 팝업("계산기에서 계산을 먼저 해주세요")
  • 유효하지 않은 주문을 리스트업(아이콘/방향/심볼/가격/투자금액/오류설명)
  • 주문상세 팝업: 주문정보(전략·내역·위험), 시간정보(타겟·계산완료·현재·차이)
  • 주문 잠금 해제: 이메일 인증으로 24시간 해제

일정(2023.02)

  • 02.01 대시보드 UI 개편(완료)
  • 02.02~03 모바일 하단 네비게이션(완료)
  • 02.06~07 일괄주문 화면(완료)
  • 02.10~13 코인 티커(진행)
  • 추가: 포지션/주문 취소, PC 헤더, 랭킹(계획)

역할/기여

  • 플로우 설계: 계산→주문→관리 여정 정의, 모바일/PC 정보구조 정리
  • UI 구현: 대시보드 탭/FAB/하단 네비, 티커/관리 탭
  • 거래 연동: 계산-주문 데이터 파이프 연결(일괄주문)

확장성/수익모델

  • 오토봇 전환을 고려한 모듈화(계산·주문·관리 분리)
  • 거래소 리베이트/네트워크 기반 BM, 글로벌 확장 가능성

완성도는 흐름의 단절을 줄일 때 올라간다. 구조가 UX다.

← 프로젝트 목록으로