[알고리즘 트레이딩] 웹 UI 기반 트레이딩 보조 도구 개발 계획

 

웹 UI 기반 트레이딩 보조 도구 개발 (Modern JavaScript)

개요

업비트와 바이낸스에서 데이터를 가져와 웹 자체 DB에 저장하고, 다양한 지표를 분석하여 모니터링 및 이벤트 발생을 수행하는 트레이딩 보조 도구를 개발합니다. 백엔드를 배포하지 않고, JavaScript, CSS, HTML 파일을 정적 형태로 배포하여 사용자 환경에서 실행되도록 구현할 예정입니다. 주요 목표 중 하나는 트래픽 비용을 절감하는 것입니다.

---

기술 스택

1. 데이터 가져오기 (업비트 & 바이낸스)

• REST API: fetch() 또는 axios를 사용해 HTTP 요청으로 데이터 가져오기.
• WebSocket API: 실시간 시세 데이터를 수신하여 즉각적인 분석 가능.
• IndexedDB: 브라우저 내장 데이터베이스를 활용하여 데이터를 저장하고 유지.

샘플 코드 (WebSocket API 활용 예제)

const upbitSocket = new WebSocket("wss://api.upbit.com/websocket/v1");

upbitSocket.onopen = function () {
    upbitSocket.send(JSON.stringify([{ ticket: "test" }, { type: "ticker", codes: ["KRW-BTC"] }]));
};

upbitSocket.onmessage = function (event) {
    event.data.text().then((data) => {
        console.log("Received data:", JSON.parse(data));
    });
};

2. 트래픽 비용 절감을 위한 최적화 기법

백엔드가 없기 때문에 클라이언트 측에서 대부분의 작업을 수행하여 불필요한 서버 트래픽을 줄일 수 있습니다. 이를 위해 다음과 같은 기술을 활용합니다:

✅ IndexedDB 활용 (데이터 캐싱 및 저장)

• API 요청 후 받은 데이터를 IndexedDB에 저장하여 중복 요청을 방지.
• 일정 시간 동안 동일한 데이터를 요청하지 않도록 로컬 캐시를 활용.

✅ WebSocket 우선 사용

• 반복적인 HTTP 요청을 줄이기 위해 WebSocket을 활용하여 실시간 데이터를 수신.
• 필요할 때만 REST API를 호출하여 데이터를 갱신.

✅ Service Worker & PWA 적용

• Service Worker를 활용해 네트워크 요청을 캐싱하여 반복 요청을 줄이고 오프라인 지원 가능.
• PWA(Progressive Web App) 적용 시 오프라인에서도 이전 데이터를 확인 가능.

✅ 데이터 압축 및 경량화

• JSON 대신 MessagePack, Protocol Buffers 등 더 효율적인 바이너리 포맷을 사용할 수 있음.
• 불필요한 데이터 항목을 제거하고, 필요한 정보만 요청하여 네트워크 비용 절감.

✅ CDN 활용 및 정적 배포

• GitHub Pages, Netlify, Vercel 등을 이용하여 정적 리소스를 무료로 제공.
• CDN을 활용해 정적 파일(HTML, CSS, JavaScript)을 빠르게 로드.

3. 지표 분석 및 WebAssembly(WASM) 활용

• JavaScript + Math 라이브러리: 기본적인 기술적 지표(이동 평균, 볼린저 밴드 등) 계산.
• TA-Lib (wasm 버전): WebAssembly(WASM) 기반 TA-Lib을 사용하여 지표 분석 성능 향상.
• Pandas.js / Dfd.js: 데이터 프레임 형태로 시세 데이터를 다룰 수 있는 라이브러리 활용.

✅ WebAssembly(WASM) 적용 범위

• 대량의 데이터 처리 및 계산 속도를 높이기 위해 WebAssembly를 활용.
• 이동 평균, 볼린저 밴드, RSI 등 기술적 지표 계산을 WebAssembly로 수행하여 성능 최적화.
• JavaScript로 처리하기 어려운 벡터 연산, 행렬 연산, 최소제곱법(OLS) 기반 회귀 분석 등을 WebAssembly로 구현 가능.
• C, Rust 등을 사용하여 성능이 중요한 부분을 컴파일한 후 WASM 모듈로 로드하여 사용.

샘플 코드 (WASM 로드 및 실행 예제)

WebAssembly.instantiateStreaming(fetch("indicators.wasm"), {}).then(({ instance }) => {
    const calculateEMA = instance.exports.calculateEMA;
    console.log("EMA result:", calculateEMA([100, 102, 101, 103, 105], 5));
});

4. UI 및 데이터 시각화

• Recharts / Chart.js / ApexCharts: 가격 변동 및 지표 분석 결과를 시각적으로 표현.
• Tailwind CSS: 빠른 스타일링 적용.
• Vanilla JavaScript 또는 React (CDN 사용): React를 CDN으로 가져와 컴포넌트 기반 UI 구성 가능.

5. 이벤트 발생 및 알림

• Web Notifications API: 가격 조건 충족 시 브라우저 알림 제공.
• Audio API: 특정 조건에서 비프음 등의 사운드 알림 구현.
• LocalStorage / IndexedDB: 이전 데이터와 비교하여 조건 충족 여부 판단 및 알림 트리거.

샘플 코드 (브라우저 알림 예제)

if (Notification.permission === "granted") {
    new Notification("트레이딩 알림", { body: "BTC 가격이 목표치에 도달했습니다!" });
} else {
    Notification.requestPermission().then((permission) => {
        if (permission === "granted") {
            new Notification("트레이딩 알림", { body: "BTC 가격이 목표치에 도달했습니다!" });
        }
    });
}

---

참고 문헌 (영문 도서)

트레이딩 및 금융 데이터 분석

1. "Advances in Financial Machine Learning" - Marcos López de Prado
2. "Quantitative Trading" - Ernest P. Chan
3. "Technical Analysis of the Financial Markets" - John Murphy

JavaScript 및 웹 개발

1. "Eloquent JavaScript" - Marijn Haverbeke
2. "You Don't Know JS" 시리즈 - Kyle Simpson
3. "JavaScript: The Good Parts" - Douglas Crockford

WebAssembly 관련 도서

1. "Programming WebAssembly with Rust" - Kevin Hoffman
2. "Hands-On WebAssembly for Rust" - Rick Battagline
3. "WebAssembly in Action" - Gerard Gallant

---

결론

본 프로젝트는 백엔드 없이 클라이언트 환경에서 모든 작업을 처리하는 방식으로 설계됩니다. 트래픽 비용 절감을 위해 WebSocket을 활용하고, IndexedDB 및 Service Worker 기반 데이터 캐싱을 적극 도입하여 불필요한 API 요청을 최소화할 예정입니다. 또한, WebAssembly(WASM)를 활용하여 성능을 최적화하고, 지표 계산 및 대량 데이터 처리 속도를 높일 수 있도록 설계됩니다. 🚀