blog-chart

Blog Chart — 내장 SVG 데이터 시각화

블로그 게시물에 다크모드 호환 인라인 SVG 차트를 생성합니다. 차트 데이터가 확인되면 blog-write 및 blog-rewrite에서 내부적으로 호출됩니다. 독립적인 사용자 명령어는 아닙니다.

스타일링 근간: references/visual-media.md

입력 형식

작성자 또는 연구자가 차트 요청을 전달합니다:

차트 요청:
- 유형: 가로 막대
- 제목: "플랫폼별 AI 인용 출처"
- 데이터: ChatGPT 43.8%, Perplexity 6.6%, Google AI Overviews 2.2%, Reddit 7.15%
- 출처: Ahrefs, 2025년 12월
- 플랫폼: mdx (또는 html)

차트 유형 선택

데이터 패턴에 따라 선택합니다. 하나의 게시물 내에서 유형을 반복하지 말고 다양성을 유지해야 합니다.

데이터 패턴	최적 차트 유형
전후 비교	그룹 막대 차트
순위별 요인 / 상관관계	막대 사탕(Lollipop) 차트
전체 대비 부분 / 시장 점유율	도넛 차트
시간에 따른 추세	꺾은선 차트
백분율 개선	가로 막대 차트
분포 / 범위	영역 차트
다차원 점수	레이더 차트

스타일링 규칙 (필수)

모든 차트는 어두운 배경과 밝은 배경 모두에서 작동해야 합니다:

텍스트 요소:     fill="currentColor"
그리드 선:        stroke="currentColor" opacity="0.08"
축 선:            stroke="currentColor" opacity="0.3"
배경:             투명 (루트 SVG에 채우기 없음)
부제목 텍스트:     fill="currentColor" opacity="0.45"
출처 텍스트:        fill="currentColor" opacity="0.35"
라벨 텍스트:        fill="currentColor" opacity="0.8"

색상 팔레트

색상	Hex	용도
주황색	#f97316	기본 / 최고값
하늘색	#38bdf8	보조 / 비교
보라색	#a78bfa	세 번째 / 특별 범주
초록색	#22c55e	네 번째 / 긍정 지표

색상 요소 내부의 텍스트: fill="white" 및 fontWeight="800".

표준 SVG 셸 (HTML)

<svg
  viewBox="0 0 560 380"
  style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif"
  role="img"
  aria-label="핵심 데이터가 포함된 차트 설명"
>
  <title>차트 제목</title>
  <desc>모든 핵심 데이터 포인트와 출처를 포함한 스크린 리더용 설명</desc>

  <!-- 차트 내용 -->

  <text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
    출처: 출처 이름 (연도)
  </text>
</svg>

JSX/MDX 셸 (camelCase 속성)

<svg
  viewBox="0 0 560 380"
  style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}}
  role="img"
  aria-label="차트 설명"
>
  <title>차트 제목</title>
  <desc>스크린 리더용 설명</desc>

  {/* 차트 내용 */}

  <text x="280" y="372" textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.35">
    출처: 출처 이름 (연도)
  </text>
</svg>

JSX 속성 변환 (MDX 필수)

HTML	JSX
stroke-width	strokeWidth
stroke-dasharray	strokeDasharray
stroke-linecap	strokeLinecap
text-anchor	textAnchor
font-size	fontSize
font-weight	fontWeight
font-family	fontFamily
class	className
style="..."	style={{...}}

차트 유형 구성

가로 막대 차트

최적 용도: 백분율 개선, 단일 지표 비교.

1. 차트 영역 정의: x=80, y=40, width=440, height=280
2. 막대 높이 계산: chartHeight / dataCount - gap (gap=8)
3. 막대 너비 계산: (value / maxValue) * chartWidth
4. 막대 위치: y = chartY + index * (barHeight + gap)
5. 왼쪽 라벨 (x=75에서 오른쪽 정렬): 범주 이름
6. 막대 끝 값 라벨: 백분율 또는 숫자
7. 하단 중앙에 출처 텍스트

그룹 막대 차트

최적 용도: 전후 비교, A 대 B 비교.

1. Y축을 따라 그룹 정의, 각 그룹 내 막대
2. 두 계열에 2가지 색상 사용 (기본 + 보조)
3. 상단 범례: 각 계열에 색상 사각형 + 라벨
4. 그룹 간 간격 > 그룹 내 간격

도넛 차트

최적 용도: 전체 대비 부분, 시장 점유율.

1. 중심: cx=280, cy=180, 외부 반지름=140, 내부 반지름=80
2. 누적 각도를 사용하여 호 세그먼트 계산
3. 각 세그먼트: <path d="M... A... L... A... Z" fill="color" />
4. 중앙 텍스트: 합계 또는 핵심 라벨
5. 차트 아래 범례: 색상 사각형 + 라벨 + 값

꺾은선 차트

최적 용도: 시간에 따른 추세.

1. X축: 시간 기간, 균등 간격
2. Y축: 4-5개의 그리드 선이 있는 값 범위
3. 그리드 선 그리기: stroke="currentColor" opacity="0.08"
4. 데이터 포인트 표시: <circle cx=... cy=... r="4" fill="color" />
5. 연결: <polyline points="..." fill="none" stroke="color" strokeWidth="2" />
6. 선택 사항: 선 아래 영역 채우기 opacity="0.1"

막대 사탕(Lollipop) 차트

최적 용도: 순위별 요인, 상관관계.

1. 가로 방향 (막대 차트와 유사하지만 원 포함)
2. 축에서 데이터 포인트로 가는 얇은 선: stroke="currentColor" opacity="0.15" strokeWidth="1"
3. 데이터 포인트 원: r="6", 채우기 색상
4. 원 옆에 값 라벨
5. Y축에 범주 (왼쪽 정렬)

영역 차트

최적 용도: 분포, 누적 데이터.

1. 꺾은선 차트와 동일하지만 아래 영역 채움
2. 영역 채우기: <path d="M... L... L... Z" fill="color" opacity="0.15" />
3. 위에 선: stroke="color" strokeWidth="2" fill="none"
4. 영역 뒤에 그리드 선

레이더 차트

최적 용도: 다차원 점수 (5-7개 축).

1. 중심: cx=280, cy=190
2. 그리드를 위한 동심 다각형 그리기 (3-4 레벨)
3. 동일한 각도로 축 끝점 계산
4. 각 축에 데이터 포인트를 값에 비례하여 표시
5. 데이터 포인트를 채워진 다각형으로 연결: fill="color" opacity="0.2" stroke="color"
6. 외부 가장자리에 각 축 라벨

출력 형식

모든 차트를 <figure> 요소로 감쌉니다:

HTML:

<figure>
  <svg viewBox="0 0 560 380" style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" role="img" aria-label="[설명]">
    <title>[차트 제목]</title>
    <desc>[스크린 리더를 위한 데이터 포인트가 포함된 전체 설명]</desc>
    <!-- 차트 내용 -->
    <text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
      출처: [출처 이름] ([연도])
    </text>
  </svg>
</figure>

MDX:

<figure className="chart-container" style={{margin: '2.5rem 0', textAlign: 'center', padding: '1.5rem', borderRadius: '12px'}}>
  <svg viewBox="0 0 560 380" style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} role="img" aria-label="[설명]">
    <title>[차트 제목]</title>
    <desc>[전체 설명]</desc>
    {/* camelCase 속성을 사용한 차트 내용 */}
    <text x="280" y="372" textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.35">
      출처: [출처 이름] ([연도])
    </text>
  </svg>
</figure>

품질 체크리스트 (반환 전 확인)

• 하드코딩된 텍스트 색상 없음 (모두 currentColor 사용)
• 흰색/밝은 배경 없음 (투명 또는 없음)
• 하단에 출처 표시 텍스트 있음
• <svg>에 role="img" 및 aria-label 있음
• <svg> 내부에 <title> 및 <desc> 있음
• 이 게시물에서 아직 사용하지 않은 차트 유형
• MDX의 경우: 모든 속성 camelCase (속성 이름에 하이픈 없음)
• 데이터 값이 출처 데이터와 정확히 일치
• 색상 팔레트는 승인된 색상만 사용
• ViewBox는 0 0 560 380 (표준) 또는 정당한 대안