chart-setup

name	chart-setup
description	Binance Futures TradingView 차트 설정 자동화. 수평선 그리기, 지표 추가, 차트 초기화. 키워드: 차트 설정, 차트 분석, 수평선, 지지선, 저항선, TradingView, 차트 최적화, horizontal line, chart setup
allowed-tools	mcp__playwright__browser_evaluate, mcp__playwright__browser_take_screenshot, mcp__playwright__browser_snapshot

Chart Setup — Binance Futures TradingView 차트 설정

Role

Playwright MCP를 사용하여 Binance Futures TradingView 차트에 수평선(지지/저항 레벨)을 정확히 그리고 차트를 분석 최적 상태로 설정한다.

Trigger

사용자가 "차트 설정", "차트 분석 최적화", "수평선 그려줘", "레벨 표시" 등을 요청할 때 호출.

TradingView 내부 API (핵심 지식)

차트 모델 접근

const iframe = document.querySelector('iframe[name="tradingview_85d71"]') || document.querySelector('iframe');
const win = iframe.contentWindow;
const cwc = win.chartWidgetCollection;
const chartWidget = cwc.activeChartWidget.value();
const model = chartWidget.model();  // 핵심 모델
const panes = model.panes();
const pane = panes[0];  // 메인 가격 차트 pane
const priceScale = pane.defaultPriceScale();

핵심 API 목록

API	상태	설명
model.removeAllDrawingTools()	✅ 정상	모든 수평선/드로잉 삭제
priceScale.priceToCoordinate(price)	✅ 정상	가격 → pane 내 y좌표 변환
priceScale.coordinateToPrice(y)	✅ 정상	pane y좌표 → 가격 변환
model.crosshairSource().index	✅ 정상	현재 bar index 조회
model.drawRightThere('LineToolHorzLine', pane, {index, price})	❌ null 반환	tool name이 isLineToolName 체크 미통과
사이드바 버튼 클릭 후 canvas 이벤트 디스패치	⚠️ 부정확	좌표가 미세하게 틀림

좌표계 설명

• iframe 위치: 페이지 상단에서 약 248px (getBoundingClientRect로 확인)
• pane 위치: iframe 내부에서 y=0에서 시작 (canvasTop=0)
• 페이지 절대 y = iframe.top + priceToCoordinate(price)

// 가격의 페이지 절대 y 좌표 계산
const iframeRect = document.querySelector('iframe').getBoundingClientRect();
const paneY = priceScale.priceToCoordinate(targetPrice);
const pageY = iframeRect.top + paneY;

Process

Step 1: 현재 차트 상태 확인

// iframe 확인 + 현재 가격 범위
const pane = model.panes()[0];
const priceScale = pane.defaultPriceScale();
const range = priceScale.priceRange();
// range._minValue, range._maxValue

Step 2: 기존 드로잉 초기화

model.removeAllDrawingTools();
// 잠시 대기 후 확인

Step 3: 타겟 가격의 좌표 계산

const targets = [
  { price: 1.4700, label: 'BoxHigh' },
  { price: 1.4200, label: 'TP' },
  { price: 1.3580, label: 'Entry' },
  { price: 1.3413, label: 'SL' },
  { price: 1.3300, label: 'BoxLow' },
];

for (const t of targets) {
  const paneY = priceScale.priceToCoordinate(t.price);
  const pageY = iframeRect.top + paneY;
  // pageY를 Playwright page.mouse.click(x, pageY)로 클릭
}

Step 4: 수평선 그리기 (Playwright mouse.click 사용)

CRITICAL: canvas 이벤트 디스패치보다 Playwright의 page.mouse.click()이 더 정확함.

// evaluate로 좌표 계산
const coords = await page.evaluate(() => {
  const iframe = document.querySelector('iframe');
  const win = iframe.contentWindow;
  const model = win.chartWidgetCollection.activeChartWidget.value().model();
  const priceScale = model.panes()[0].defaultPriceScale();
  const iframeRect = iframe.getBoundingClientRect();

  return targets.map(t => ({
    price: t.price,
    pageY: iframeRect.top + priceScale.priceToCoordinate(t.price),
    pageX: iframeRect.left + 500  // 차트 중앙 x
  }));
});

// 각 가격에 수평선 그리기
for (const coord of coords) {
  // 수평선 도구 활성화
  await page.evaluate(() => {
    const doc = document.querySelector('iframe').contentDocument;
    for (const btn of doc.querySelectorAll('[data-tooltip]')) {
      if (btn.getAttribute('data-tooltip') === 'Horizontal Line') {
        btn.click(); break;
      }
    }
  });
  await page.waitForTimeout(200);

  // 정확한 y 위치에 클릭
  await page.mouse.click(coord.pageX, coord.pageY);
  await page.waitForTimeout(300);
}

// Escape로 도구 해제
await page.keyboard.press('Escape');

Step 5: 결과 검증

스크린샷 찍어서 우측 price label 확인.

XRP 박스권 설정 예시

// XRP 포지션 기준 레벨 (2026-03-07)
const XRP_LEVELS = [
  { price: 1.4700, label: '🟠 Box High', color: '#FF9800' },
  { price: 1.4200, label: '🎯 TP',       color: '#4CAF50' },
  { price: 1.3580, label: '📍 Entry',    color: '#2196F3' },
  { price: 1.3413, label: '🛡️ SL',       color: '#F44336' },
  { price: 1.3300, label: '📦 Box Low',  color: '#FF9800' },
];

알려진 이슈 & 교훈

1. drawRightThere API 미작동

• model.drawRightThere('LineToolHorzLine', pane, {index, price}) → null 반환
• 이유: 내부 isLineToolName() 체크 실패 (minified 코드의 Qt.isLineToolName)
• 해결: 우측 사이드바 버튼 클릭 후 mouse.click으로 선 그리기

2. Canvas 이벤트 디스패치 부정확 (±0.04 오차)

• canvas.dispatchEvent(new MouseEvent('click', {clientX, clientY})) → 큰 좌표 오차
• 해결: browser_run_code의 page.mouse.click(pageX, pageY) 사용 (OS 레벨 이벤트)
• 결과: ±0.002~0.003 수준으로 정확도 대폭 개선

3. 좌표 계산 핵심

• priceToCoordinate = pane-local CSS y좌표 (DPR 무관)
• 페이지 절대 y = iframe.getBoundingClientRect().top + paneY
• iframe top ≈ 248px (4H 차트 기준, 화면 크기에 따라 변동)

4. 차트 자동 스케일 주의

• 선 하나 그리면 차트 스케일이 재조정될 수 있음
• 해결: 모든 좌표를 한번에 계산 후 빠르게 연속 클릭

5. browser_run_code가 핵심 (CRITICAL)

• browser_evaluate만으로는 page.mouse 접근 불가
• 반드시 browser_run_code 사용: async (page) => { await page.mouse.click(x, y); }
• 이것이 canvas dispatch 대비 정확도를 20배 개선하는 핵심

6. 클릭 중 차트 시간축 스크롤 주의

• 클릭 위치가 차트 좌측(시간축 버튼 영역)에 가까우면 차트가 스크롤될 수 있음
• pageX = iframeRect.left + 500 (차트 중앙)이 안전

검증된 완성 코드 (2026-03-07 확인)

// browser_run_code로 실행 — 완전한 5선 그리기 스크립트
async (page) => {
  // 1. 기존 모든 드로잉 삭제
  await page.evaluate(() => {
    const iframe = document.querySelector('iframe[name="tradingview_85d71"]') || document.querySelector('iframe');
    iframe.contentWindow.chartWidgetCollection.activeChartWidget.value().model().removeAllDrawingTools();
  });
  await page.waitForTimeout(600);

  // 2. 좌표 한번에 계산
  const coords = await page.evaluate(() => {
    const iframe = document.querySelector('iframe[name="tradingview_85d71"]') || document.querySelector('iframe');
    const priceScale = iframe.contentWindow.chartWidgetCollection.activeChartWidget.value().model().panes()[0].defaultPriceScale();
    const rect = iframe.getBoundingClientRect();
    return [
      { price: 1.4700 }, { price: 1.4200 },
      { price: 1.3580 }, { price: 1.3413 }, { price: 1.3300 },
    ].map(t => ({ ...t, pageX: rect.left + 500, pageY: rect.top + priceScale.priceToCoordinate(t.price) }));
  });

  // 3. 각 선 그리기
  for (const c of coords) {
    await page.evaluate(() => {
      const doc = (document.querySelector('iframe[name="tradingview_85d71"]') || document.querySelector('iframe')).contentDocument;
      for (const btn of doc.querySelectorAll('[data-tooltip]'))
        if (btn.getAttribute('data-tooltip') === 'Horizontal Line') { btn.click(); return; }
    });
    await page.waitForTimeout(200);
    await page.mouse.click(c.pageX, c.pageY);
    await page.waitForTimeout(300);
  }
  await page.keyboard.press('Escape');
}

실측 정확도 (page.mouse.click 사용):

목표	실제	오차
$1.4700	1.4722	+0.002
$1.4200	1.4227	+0.003
$1.3580	1.3587	+0.001
$1.3413	1.3441	+0.003
$1.3300	1.3347	+0.002

스크린샷 검증

선 그린 후 우측 price label 확인:

• 목표 가격과 ±0.005 이내면 성공
• BB bands(상단/중간/하단)도 우측에 표시되므로 혼동 주의
  • BB Upper ≈ 1.46-1.47 / BB Middle ≈ 1.39-1.40 / BB Lower ≈ 1.33-1.34
• TP 선이 크게 틀리면 → 차트 스케일 변화 의심 → 좌표 재계산 후 재시도

지표 설정 최적화 (Indicator Tuning)

최적 설정값 (4H 박스권 단타 기준)

지표	파라미터	기본값	최적값	이유
RSI	length	14	14	표준, 유지
RSI	smoothingLength	14	3	신호 지연 제거, 반응성 20x↑
Volume	showMA	false	true	거래량 급증 vs 평균 식별
Volume	length	20	20	유지

지표 파라미터 변경 API (검증된 방법)

// ✅ 작동: _properties.childs().inputs.childs()[id].setValue()
await page.evaluate(() => {
  const iframe = document.querySelector('iframe[name="tradingview_85d71"]') || document.querySelector('iframe');
  const model = iframe.contentWindow.chartWidgetCollection.activeChartWidget.value().model();

  for (const pane of model.panes()) {
    for (const src of pane.studySources()) {
      const name = src.metaInfo().shortDescription;
      const inputChilds = src._properties.childs().inputs.childs();

      if (name === 'RSI') inputChilds['smoothingLength'].setValue(3);
      if (name === 'Volume') inputChilds['showMA'].setValue(true);
    }
  }
});

// ❌ 미작동: src._tryChangeInputs(), src._changeInputsImpl(), inputs 직접 할당

API Dependencies

• Playwright MCP (mcp__playwright__browser_evaluate, mcp__playwright__browser_take_screenshot, mcp__playwright__browser_run_code)
• Binance Futures 차트가 TradingView 위젯을 사용하는 페이지 오픈 상태 필요