"숫자만으론 HTS 안 보여!" 봇의 뇌 구조를 들여다보는 웹 HTS 시뮬레이터 구축



1. 텍스트 로그(CLI)가 가진 치명적인 한계
안녕하세요! 내 계좌를 위한 자동매매 시스템을 빚어가는 [계좌 리팩토링] 시리즈 16편입니다. 지난 15편에서는 실전과 완벽하게 동일한 로직(evaluateTick)으로 돌아가는 강력한 CLI 기반의 백테스팅 엔진을 완성하고, VWAP와 EMA를 활용한 눌림목 전략을 테스트해 보았습니다.
CLI에서 수백 일치의 과거 데이터를 돌리면 '총 거래수 50회, 승률 45%, 순수익 15%' 같은 결과가 터미널에 텍스트로 찍힙니다. 하지만 개발자이자 트레이더로서 우리는 곧 깊은 갈증을 느끼게 됩니다.
"도대체 이 매매는 왜 여기서 진입한 거지? 수익이 나긴 했는데, 정말 내가 의도한 예쁜 눌림목(Pullback) 자리였나? 아니면 운 좋게 반등한 휩쏘(거짓 신호)였나?"
텍스트 로그만으로는 주가의 흐름과 보조지표들의 미세한 관계를 파악할 수 없습니다. 전략의 치명적인 결함(예: 청산 로직 꼬임)을 디버깅하고 과최적화를 피하려면, 봇이 매매를 결정한 순간의 차트를 내 눈으로 직접 확인해야만 합니다. 그래서 저는 11편에서 만든 Nuxt 대시보드에 나만의 웹 HTS 시뮬레이터를 구축하기로 했습니다.
2. 시뮬레이터의 뼈대: TradingView 차트 연동
웹 프론트엔드에서 증권사 HTS 수준의 부드러운 캔들 차트를 그리기 위해, 트레이딩뷰(TradingView)에서 제공하는 lightweight-charts 라이브러리를 Nuxt에 도입했습니다.
백엔드 HTS API를 호출해 과거의 OHLCV(시가, 고가, 저가, 종가, 거래량) 배열을 가져와 캔들을 렌더링하고, 그 위에 전략의 핵심인 VWAP(파란선)와 EMA9(주황선), 그리고 장전 고점/저점(PMH/PML) 라인을 오버레이 시켰습니다. 이로써 봇이 바라보는 시장의 형태가 제 눈앞에 시각적으로 펼쳐지게 되었습니다.
3. 매매 마커와 '세력의 흔적(HVN)' 시각화
차트를 띄웠으니, 이제 CLI 백테스트 엔진이 뱉어낸 진입/청산 기록을 차트 위에 매핑할 차례입니다.

진입/청산 마커 (Markers): 봇이 롱(매수) 포지션에 진입한 캔들 아래에는 초록색 ▲ 진입 마커를, 매도한 캔들 위에는 빨간색 ▼ 청산 마커를 찍어줍니다. 이제 스크롤을 넘겨가며 "아, 여기서 돌파할 때 샀고, EMA 하향 이탈할 때 팔았구나!"를 직관적으로 디버깅할 수 있습니다.
매물대 (Volume Profile)와 HVN 시각화: 15편에서 언급했던 전략 중 가장 고도화된 필터가 바로 'HVN(High Volume Node) 감시'입니다. 현재가 바로 위에 거래량이 터진 두터운 매물대가 있다면 저항을 맞고 떨어질 확률이 높으므로 진입을 포기하는 로직이죠. 이를 눈으로 검증하기 위해 차트 좌측에 가격대별 누적 거래량을 가로형 막대그래프로 직접 계산하여 그려 넣었습니다.

실제로 차트에 매물대를 그려보니, 봇이 진입을 주저했던 이유(머리 위에 거대한 악성 매물대가 존재함)를 한눈에 납득할 수 있었습니다.



4. "딸깍" HTS 한 번에 전략이 바뀐다: 반응형 파라미터 패널
시뮬레이터의 화룡점정은 화면 좌측에 배치한 '전략 파라미터 튜닝 패널'입니다.
이전에는 터미널에서 코드를 수정하거나 플래그를 바꿔가며 백테스트를 돌렸지만, 이제는 웹 UI에서 EMA 기간(9), 횡보 임계값(3), VP 구간 수(50), 눌림 이격도(%) 등의 입력값을 마우스로 쓱쓱 조절한 뒤 [▶ 시뮬레이션 실행] 버튼만 누르면 됩니다.
버튼을 누르는 즉시 백엔드 엔진이 새로운 파라미터로 시뮬레이션을 다시 돌리고, 변경된 승률, MDD(최대 낙폭), 순손익 결과를 하단 테이블에 실시간으로 업데이트해 줍니다. 수십 개의 파라미터 조합을 테스트하고 차트 변화를 눈으로 확인하는 과정이 몇 분 만에 끝나는 기적을 경험하게 됩니다.
5. 마무리하며: '보는 것'이 곧 '믿는 것'이다
CLI 기반의 탄탄한 백테스트 엔진(15편)과 이를 눈으로 보여주는 웹 HTS 시뮬레이터(16편)가 결합되면서, Parker Brooks 프로젝트는 완벽한 '알고리즘 트레이딩 연구소'로 거듭났습니다.
자동매매 로직은 머릿속의 상상만으로는 절대 완성할 수 없습니다. "왜 여기서 팔았을까?", "왜 이 꿀자리를 놓쳤을까?"라는 끝없는 질문에 대해, 시각화된 차트는 가장 정직하고 정확한 해답을 줍니다.
프론트엔드 역량을 총동원해 나만의 HTS를 만들어보는 경험, 여러분의 계좌뿐만 아니라 개발 실력까지 한 차원 높여줄 최고의 리팩토링이 될 것이라 확신합니다!