SunLabs AG· OrderXFE Part Lead
2025.10 – 현재크립토 파생상품에서 출발해 장기적으로 기관용 트레이딩 데스크를 지향하는 터미널입니다. Deribit, Hyperliquid, Lighter, Bybit, Binance 같은 크립토 거래소와 OPRA(미국 옵션), CME, IBKR 같은 전통 시장을 한 화면에서 다룹니다. 대형 멀티스트랫 펀드와 파일럿을 진행했고, 프라이빗 베타 단계에서 명목 거래 $10B를 처리하며 $1M 매출을 냈습니다. 프론트엔드는 초기 세팅부터 1인 주도로 개발하고, 필요한 구간은 페어 프로그래밍으로 풀었습니다. 18개 피처 도메인을 설계했습니다.
성과
- 파일럿 + 프라이빗 베타 단계에서 명목 거래 $10B 처리, $1M 매출. 대형 멀티스트랫 펀드 파일럿 운영.
- 주문 실행과 멀티 거래소 지원을 프론트에서 통합해, 트레이더가 거래소를 오가지 않고 한 화면에서 여러 계정으로 주문.
- 브라우저 메모리 상시 점유 3.8GB → 1GB 내외. 하루 종일 켜 두는 트레이더 워크플로우에서 리로드 없이 운용.
- AI 워크플로우 정착: 단일 에이전트 작업에서 방치되던 엣지 케이스를 planner/reviewer 단계에서 잡아, 기능당 작업일 1~3일 이상 절감. 소수 인원으로 MVP 기능 플로우 전체를 완성. 다국어는 Figma → i18n 에이전트 파이프라인으로 자동화.
프로젝트
주문 실행과 멀티 거래소 지원2025.12 – 2026.09
문제 · 트레이더는 Deribit, Hyperliquid, Bybit 같은 거래소마다 계정을 여러 개 갖고 있고, 같은 BTC 옵션이라도 거래소마다 종목 이름·소수점·증거금 방식이 다릅니다. 기존에는 거래소 화면을 오가며 따로 주문해야 했고, 실수하면 엉뚱한 계정이나 종목으로 돈이 나갔습니다.
- 하나의 주문 폼에서 여러 종목을 골라 한 번에 제출하는 배치 주문 구조. 종목마다 앵커 가격을 정해 미리보기에서 예상 체결가를 보여주고, 제출 전 검증을 통과해야 나가도록 설계.
- 종목·거래소·사용자 선택을 조합해 주문이 갈 계정을 자동으로 고르는 계정 해석 규칙을 만들어, 계정을 잘못 고르는 실수를 UI에서 차단.
- 거래소별 종목 표기(Deribit 'BTC-26DEC25-90000-C' vs OPRA 'IBIT_271217P00048000')를 문자열이 아닌 구조화된 필드(기초자산, 만기, 행사가, 콜/풋)로 다뤄 거래소가 늘어나도 주문 로직이 깨지지 않게 함.
- 이 위에 전문 트레이더용 주문 방식을 하나씩 올림: TP/SL 예약 주문, RFQ 견적 주문, Spreader 스프레드 주문, Arb 빌더, Hedge 시뮬레이션, TWAP 분할 주문, One-tap buy.
- AI 채팅으로 주문할 때 화면 상태를 AI에 넘기는 UIContext가 배치 주문과 TP/SL을 표현하지 못하는 문제를 발견하고, 개선안을 RFC 문서로 써서 백엔드 팀과 프로토콜을 바꿈. '@계정' 태그로 종목별 계정을 지정하는 방식도 제안.
- 여러 계정의 포지션을 한 표에 합칠 때 서버 메시지에 계정 정보가 없어 안전하게 구분할 수 없다는 점을 분석해, 백엔드 변경 요구사항으로 정리.
브라우저 메모리 최적화 (3.8GB → 1GB)2026.04 – 2026.08
문제 · 실시간 스트림, 위젯 상태, TradingView iframe, 쿼리 캐시가 누적되며 크롬 메모리가 상시 3.8GB까지 올라가 장시간 사용 시 UI가 느려지고 탭이 죽었습니다.
- 오더북·포지션 테이블의 갱신 단위를 행/심볼 단위로 쪼개 불필요한 리렌더와 객체 생성을 제거.
- AG Grid를 자체 DataTable로 교체하고 행 메모이제이션, 가상화, 구독 해제 경로를 정리.
- 3단계 런타임 복구 시스템으로 백그라운드 탭 복귀 시 부분 재구독 → 캐시 무효화 → 리로드를 단계적으로 수행. 주문 입력 중에는 리로드 차단.
translate 기반 자체 그리드 시스템2026.06 – 2026.09
문제 · react-grid-layout이 리사이즈 중 매 mousemove마다 레이아웃을 재계산하고 React 리렌더를 유발해 CPU를 잡아먹었습니다.
- dnd-kit + 명령형 DOM transform(translate) 업데이트로 드래그 중에는 React를 거치지 않도록 설계.
- grid ↔ pixel 변환을 순수 함수로 분리하고 테스트로 고정.
- 위젯 stretch, 공유 가능한 페이지 레이아웃(OG 이미지 자동 생성) 추가.
AI 워크플로우 도입2026.01 – 2026.09
문제 · 소수 인원으로 18개 도메인의 MVP 기능을 동시에 밀어야 했습니다. 단일 모델·단일 에이전트로 만들면 당장은 돌아가도 엣지 케이스가 방치돼, 며칠에서 몇 주 뒤 같은 기능을 다시 열어봐야 하는 일이 반복됐습니다.
- 레포 컨벤션·아키텍처·도메인 규칙을 context injection으로 고정해 어떤 에이전트가 붙어도 같은 기준으로 작업하게 함.
- Claude(planner) – Codex(reviewer) 역할 분리로 설계 → 구현 → 리뷰를 나눔. Plan/Design 문서와 Gap 분석을 남겨 검증.
- react-doctor 기반 클린업을 정기 루틴으로 돌려 기능 통합 시 누적되는 부채를 제거.
- 결과: 속도보다 커버리지. 리뷰 단계에서 잡힌 엣지 케이스 덕분에 기능당 작업일 기준 1~3일 이상의 재작업이 사라짐.
Figma MCP + i18n 에이전트 파이프라인2026.06 – 2026.09
문제 · 디자인 변경과 다국어 문구 반영이 수작업이라 릴리스마다 누락과 불일치가 생겼습니다.
- Figma MCP로 디자인 소스를 직접 읽어 컴포넌트 변경을 반영.
- i18n 에이전트가 누락 키를 찾아 번역·등록하고 Lokalise와 동기화. next-intl 기반 다국어 서비스 운영.
차트 라이브러리 마이그레이션 (lightweight-charts → TradingView)2026.03 – 2026.09
문제 · 백엔드가 표준 규격이 아닌 Protobuf over HTTP + WebSocket이라 TradingView의 기본 Datafeed를 쓸 수 없었습니다.
- Provider 패턴의 커스텀 Datafeed 작성. 포지션/체결 오버레이, 실시간 호가 push, 계정별 오버레이.
- 커스텀 인디케이터(OI 프로파일, visible range 프로파일, 크로스 거래소 스터디)와 범위 프리셋 툴바. FedWatch, 경제 캘린더, SVI 파라미터 같은 분석 위젯.
Frontend: Next.js 15, React 19, TypeScript, Bun, Tailwind v4, Radix UI, Jotai, TanStack Query, React Hook Form, Zod, dnd-kit, framer-motion, react-virtuoso · Realtime: Protocol Buffers (ts-proto) over HTTP + WebSocket · Chart: TradingView Charting Library v31, TitanCharts, ECharts · AI: Vercel AI SDK, assistant-ui, ElevenLabs · Tooling: Playwright, Bun test, Lokalise, PostHog, OpenTelemetry, AWS Amplify