차트 스타일 북
이 문서는 "좋은" Blocklens 차트가 어떤 모습이어야 하는지에 대한 표준 레퍼런스입니다. 약 70개의 내장 템플릿(chart-templates), DB에 시드된 템플릿(template-seeds), 그리고 the chart renderer의 렌더링 동작 전반에 걸쳐 표현된 규칙을 정리한 것입니다.
대상 독자는 두 부류입니다.
- 프런트엔드 / 템플릿 작성자 — 새 템플릿이나 시드 데이터를 설계할 때 이 규칙을 적용합니다.
- Buddy
lab-author스킬 — AI가 생성한 차트 구성이 큐레이션된 카탈로그의 시각 언어와 일치하도록, 이 규칙의 축약본을 로드합니다.
아래 규칙이 현재 어떤 템플릿의 동작과 모순된다면, 레거시 사유로 인해 해당 템플릿이 우선합니다. 다만 새 작업은 이 가이드를 따라야 합니다.
1. 축(Axes)
1.1 가격은 항상 오른쪽 Y축, 로그 스케일
BTC 가격을 오버레이하는 모든 템플릿은 가격을 별도의 오른쪽 축에 scale: "log"로 배치합니다. 주요 지표는 왼쪽 축에 둡니다. 가격을 시각적으로는 연결하되 수치적으로는 분리함으로써, 빠르게 성장하는 지표(보유량, AUM, 공급량)와 가격 모두를 읽기 쉽게 유지합니다.
예외: 가격 모델 템플릿(realized_price, transferred_price)은 가격을 모델과 동일한 축에 두어 사용자가 두 가격을 하나의 스케일에서 비교할 수 있게 합니다. 해당 축은 로그입니다.
1.2 단위가 같은 지표는 축을 공유
lth_supply+sth_supply→ 하나의 왼쪽 축(둘 다 BTC).lth_mvrv+sth_mvrv→ 하나의 왼쪽 축(둘 다 비율).- Funding Rate(%)는 왼쪽, 가격(USD)은 오른쪽 — 단위가 다르므로 축도 다릅니다.
범위가 크게 다른 두 지표를 동일한 선형 축에 쌓지 마십시오. 작은 시리즈가 시각적으로 짓눌립니다.
1.3 사이클 비교: allLeftAxis: true + 로그 스케일
사이클 성과 템플릿(예: cycle-perf-low, cycle-perf-ath, cycle-perf-halving)은 yAxes: [{ side: "left", scale: "log" }]와 함께 allLeftAxis: true를 강제합니다. 여러 사이클이 동일한 로그 축에 오버레이되어 사이클 간 지수적 성장을 비교할 수 있습니다.
1.4 축 레이블 색상
- 서로 다른 색상의 여러 시리즈가 한 축을 공유 → 축 레이블은 중립적인 진회색
#6b7280. - 단일 지표가 한 축을 소유 → 레이블은 해당 지표의 색상을 상속할 수 있음(드물게 사용; 회색이 안전한 기본값).
2. 스케일 선택
| 선형(linear) 사용 | 로그(log) 사용 |
|---|---|
| 공급량, 플로우, 카운트, USD 값, 시가총액 | BTC 가격(항상) |
| 비율(MVRV, SOPR), 백분율, Funding Rate | 단독으로 표시되는 주가 지수(SPY/QQQ/IWM) |
| 일일 델타, 순변동 | 가격 모델(realized_price, transferred_price) |
| 제한된 범위 내에서 변동하는 모든 것 | 사이클 성과 오버레이 |
지표가 표시 구간에서 약 2자릿수(orders of magnitude) 이상을 넘나든다면 로그를 선호하십시오.
3. 지표별 차트 유형
| 스타일 | 사용 시점 | fillOpacity |
|---|---|---|
area | 보유량, 공급량, 누적 플로우, AUM, 스택형 코호트 | 0.3 |
line | 비율(MVRV, SOPR), 레이트(funding), 가격 오버레이 | 0.1 |
bar | 일일 / 30일 델타(순플로우, 공급량 30일 Δ) | 0.5 |
candlestick | OHLC 전용 | — |
로그 축에서 막대(bar)는 읽을 수 없게 렌더링됩니다 — 막대는 선형으로 유지하십시오.
4. 색상 팔레트
4.1 도메인별
| 도메인 | 요소 | Hex |
|---|---|---|
| 가격 오버레이 | BTC 가격(중립) | #6b7280 |
| 공급량 | LTH | #2563eb |
| 공급량 | STH | #dc2626 |
| 공급량 | 세 번째 코호트 | #fbbf24 / #FFBB28 |
| ETF | 보유량 | #f59e0b |
| ETF | AUM | #3b82f6 |
| ETF | 순플로우 | #10b981 |
| ETF | 누적 플로우 | #059669 |
| ETF | 점유율(dominance) | #8b5cf6 |
| ETF | 미국 보유량 | #3b82f6 |
| ETF | Realized Price | #dc2626 / #ea580c |
| DAT | 총 보유량 | #F7931A (Bitcoin 브랜드) |
| DAT | 상장 기업 | #0088FE |
| DAT | 정부 | #FF4444 |
| DAT | 비상장 기업 | #FFBB28 |
| DAT | 순변동 | #82ca9d |
| DAT | 점유율(dominance) | #ff7300 |
| Funding | 레이트 | #3b82f6 |
| Funding | 스프레드 | #f97316 |
| Funding | 과열 구간 | rgba(239,68,68,0.1) |
| Funding | 항복(capitulation) 구간 | rgba(34,197,94,0.1) |
| 매크로 | 금리(중립) | #6b7280 |
| 매크로 | 인플레이션 | #f59e0b |
| 매크로 | VIX / 리스크 | #ef4444 |
| 사이클 1→4 | 보라 → 파랑 → 초록 → 주황 | #8b5cf6 → #3b82f6 → #22c55e → #f97316 |
4.2 다중 지표 색상
관련된 두 코호트가 함께 나타날 때(LTH/STH, 미국/비미국, 상장/비상장)는 확립된 쌍(LTH/STH의 경우 파랑 + 빨강)을 사용하여 사용자가 하나의 멘탈 모델을 학습하도록 합니다. 차트마다 팔레트를 새로 만들지 마십시오.
5. 기준선과 기준 영역
다음은 임계값이 명확한 해석을 가질 때에만 사용하십시오.
- Funding Rate
> 20%→ 빨간색 음영 영역, 레이블 "과열(Overheated)". - Funding Rate
< -10%→ 초록색 음영 영역, 레이블 "항복(Capitulation)". - SOPR
= 1.0→ 손익분기점 기준선(기회 요소 — 아직 템플릿에는 없음). - MVRV
= 1.0→ 공정 가치 패리티 기준선.
수치적 의미가 없는 장식용 선은 피하십시오. 차트당 주석은 최대 한두 개로 제한합니다.
"referenceAreas": [
{ "y1": 20, "y2": 100, "yAxisId": "axis-left", "fill": "rgba(239,68,68,0.1)", "label": "Overheated" },
{ "y1": -100, "y2": -10, "yAxisId": "axis-left", "fill": "rgba(34,197,94,0.1)", "label": "Capitulation" }
]
6. 날짜 범위 기본값
| 프리셋 | 사용 시점 |
|---|---|
ALL | 장기 추세 지표 — 공급량, 밸류에이션, 사이클 오버레이, 사용자가 전체를 보고 싶어 하는 긴 이력을 가진 모든 것. |
1Y | 다년간 뷰가 신호를 가리는 노이즈가 많은 지표 — 일일 순플로우, DAT 순변동, Funding 스프레드. |
1W / 1M | 기본값으로 사용 금지 — 이들은 사용자가 직접 조작하는 확대 수준입니다. |
7. 스타일링 상수
차트별 특별한 이유가 없는 한 다음을 어디서나 사용하십시오.
- 모든 선에 대해
strokeWidth: 2. - 영역은
fillOpacity: 0.3, 선 오버레이는0.1, 막대는0.5. instanceId형식:{metricId}-{seq}(예:price-1,lth_supply-1). 편집 전반에서 안정적으로 유지.
8. 명명 규칙
- 차트 이름 — 컬럼 헤더처럼 타이틀 케이스로 작성된 명사구. 60자 이하. 이모지 금지.
- 좋은 예:
BTC LTH Supply with 30D Change,ETF Net Flow vs. Price - 나쁜 예:
📈 Bitcoin Long-Term Holders!!! (2024)
- 좋은 예:
- 설명 — 차트가 무엇을 보여주는지와 드러내는 인사이트를 한 문장으로 기술.
- 좋은 예:
Long-term holder supply with 30-day delta bars to surface accumulation and distribution waves.
- 좋은 예:
9. 안티패턴
템플릿이나 AI가 생성한 구성을 검토할 때 다음을 거부하십시오.
- 2축 레이아웃에 단일 지표 — 빈 축은 공간 낭비입니다.
- 스택 없이 한 축에 4개를 초과하는 시리즈 — 시각적으로 읽을 수 없습니다.
- 단일 선형 축에 매우 다른 범위를 혼합(예: 1
2M 카운트와 20k100k 가격) — 작은 시리즈가 보이지 않습니다. - 고성장 지표와 짝지을 때 BTC 가격을 선형 축에 배치 — 가격이 시각적으로 지배합니다.
- 수치적 의미가 없는 장식용 기준선 — 신호가 아니라 노이즈를 더합니다.
- 로그 스케일의 막대 — 읽을 수 없게 렌더링됩니다.
- 차트별 맞춤 팔레트 — 사용자가 학습한 색상 연상을 깨뜨립니다.
10. lab-author 스킬을 위한 빠른 참조
Buddy가 자연어로부터 차트 구성을 만들 때:
search_metrics/get_metric을 통해 지표 ID를 해석합니다. 각 지표의grade가 사용자 등급(tier) 범위 내에 있는지 확인합니다.- 축 레이아웃을 결정합니다.
- 시리즈 중 하나가 BTC 가격인가? → 가격은
scale: "log"로 오른쪽에, 주요 지표는 왼쪽에. - 나머지 지표가 단위를 공유하는가? → 같은 축. 단위가 다른가? → 다른 축.
- 시리즈 중 하나가 BTC 가격인가? → 가격은
- §3에 따라 차트 스타일을 선택합니다.
- §4.1에 따라 색상을 선택합니다 — 해당 도메인의 확립된 팔레트를 사용합니다.
- §2에 따라 스케일을 선택합니다.
- §6에 따라 날짜 범위를 선택합니다.
- 임계값이 명확한 의미를 가질 때에만 기준선/기준 영역을 추가합니다(§5).
- 스타일링 상수(§7)와 명명 규칙(§8)을 적용합니다.
- 저장하기 전에 안티패턴 체크리스트(§9)를 실행합니다.
11. 템플릿이 위치한 곳
- 정적(프런트엔드) —
chart-templates. 앱 시작 시 로드되는 약 70개의 템플릿. - 데이터베이스(
templates테이블) —template-seeds로 시드되고the templates API를 통해 노출되는 큐레이션 템플릿. - 사용자 생성(
user-charts테이블) — 이 가이드의 나머지가 다루는 대상. Lab UI를 통해, 템플릿을 포크하여, 또는 Buddy의save_chartMCP 도구를 통해 저장됨.
구성 JSON 형태(metrics, formulas, yAxes, dateRange, referenceLines, referenceAreas 등)는 세 소스 모두에서 동일합니다 — TypeScript 정의는 the Lab API client의 the chart config를, Pydantic 스키마는 the API schema를 참조하십시오.