(CEX Exchange · Trading Terminal (PC))

※ 좌측 상단 ‘NDA’ 표기는 로고가 아닌, 고객사/업무비밀 보호를 위한 브랜드 비노출 처리입니다.

본 포트폴리오는 실시간 시세/차트/호가/주문/포지션 관리까지 한 화면에서 제공하는 CEX 거래소 트레이딩 터미널 개발 사례입니다. 사용자가 거래에 필요한 핵심 정보를 빠르게 판단할 수 있도록, 저지연(LOW-LATENCY) UX운영 관점의 모니터링까지 함께 고려해 구현했습니다.


프로젝트 개요

해당 CEX 포트폴리오는 마켓 리스트(좌측 코인 목록), 캔들 차트(중앙), 오더북/호가(우측), 주문 패널(리밋/마켓), 오픈 포지션/주문/체결 내역(하단)을 단일 화면 흐름으로 구성한 데스크톱 트레이딩 UI입니다.
당사는 거래 화면에서 사용자가 ‘지금 무엇을 보고 결정해야 하는지’를 최우선으로 설계하여, 정보 과부하를 줄이고 거래 판단 → 주문 → 체결/관리까지 매끄럽게 이어지도록 구현했습니다.

UX 설계 포인트

CEX 거래소는 “기능이 많다”보다 “거래가 빠르고 정확하게 된다”가 핵심이기 때문에, 다음 요소를 즉시 확인 가능한 구조로 배치했습니다.

  • Market Overview(시세 요약): 상단 주요 마켓 가격/변동률을 한 줄로 제공해 빠른 시장 인지 지원
  • Chart(차트): 타임프레임 전환과 가격 흐름을 중심으로, 거래 판단을 방해하지 않는 심플한 레이아웃 구성
  • Order Book(호가): 가격/수량/누적 구조를 시각적으로 분리하여 체결 강도 판단이 쉬운 형태로 제공
  • Trading Panel(주문): Limit / Market 주문 탭 구조 및 수량 슬라이더 등 입력 편의성 강화
  • Positions & PnL(포지션/손익): 진입가, 마크프라이스, 강제청산 관련 핵심 정보(예: Liq. Price)와 손익(PnL) 정보를 한 번에 확인

운영/안정성 관점 구현

본 화면에는 단순 거래 UI를 넘어, 운영 환경에서 반드시 필요한 요소인 시스템 상태(System Healthy), 지연 시간(Latency), 분산 노드(Distributed Nodes) 모니터링 영역이 포함돼 있습니다.
이는 실시간 거래 서비스에서 장애를 “나중에” 아는 것이 아니라, 운영 중 즉시 감지하고 대응할 수 있도록 설계된 구조입니다.

  • Latency 표시: 거래 경험에 직결되는 지연 정보를 UI 레벨에서 즉시 확인
  • System Health: 핵심 컴포넌트/노드 상태를 시각화해 운영 대응성 강화
  • 실시간 데이터 UX: 시세/호가/체결/포지션 등 변동 데이터가 끊기지 않도록 화면 갱신 구조 최적화

핵심 구현 포인트

  • 실시간 거래 화면 구성: 시세·차트·오더북·주문·포지션을 단일 터미널로 통합
  • 저지연 UX 지향: 거래 의사결정에 필요한 정보를 우선순위 기반으로 배치
  • 주문 입력 안정성: 주문 타입 분리(Limit/Market) 및 입력 실수 방지 흐름 구성
  • 포지션 관리 가시성: 진입가/마크프라이스/손익 등 핵심 지표를 한 화면에서 관리
  • 운영 모니터링 내장: 시스템 상태/지연/노드 기반의 운영 대응성 강화

(주)아트스토어 담당자 개발 후기

“CEX 거래 화면은 기능 나열이 아니라, 실시간 데이터의 우선순위를 설계하는 일이 핵심이었습니다. 차트·호가·주문·포지션이 동시에 움직이는 환경에서 사용자가 ‘지금 필요한 정보’를 즉시 확인하도록 UX를 최적화했습니다.”

“운영 단계에서의 안정성까지 고려해 System Health/Latency/노드 모니터링을 함께 구성했고, 실제 서비스 환경에서 대응 가능한 트레이딩 터미널 완성도를 목표로 개발했습니다.”

Note
본 포트폴리오는 고객사 보안 및 업무비밀 보호를 위해 일부 정보(브랜드/식별 요소 등)를 비노출 처리했습니다. 실제 수행 범위(기획/디자인/프론트/백엔드/인프라/연동 등)는 프로젝트 조건에 따라 조정될 수 있습니다.