비교 표를 뉴럴 차트로 자동 변환 — 테이블 한 번에 SVG 시각화

1 min read · 330 words
활용 팁 / 데이터 시각화 / 블로그 운영 · Python
약 2,400자

블로그 글에

만든 이유

HTML

작동 원리

publish_post 의 hook chain 안 한 단계가 transform_tables_to_neural(html) 호출입니다. 작동:

  1. 표 탐지 — BeautifulSoup 으로

    실제 효과

    • 라이브 글 모바일 가로 스크롤: 평균 32% → 0% (사이트 글 전체에 적용 후)
    • 글 평균 체류 시간 (GA4): 1분 47초 → 2분 11초 (+13%)
    • 비교 글 CTR (GSC): 평균 3.4% → 4.1% (+20%, 6주 비교)
    • 표 → 차트 변환 누적 횟수: 약 1,200건 (사이트 전체)
    • SVG 평균 크기: 2.8KB inline. 외부 이미지 호스팅 비용 0.

    차트가 표보다 무조건 낫다는 건 아닙니다. 데이터가 6컬럼 × 12행처럼 빽빽하면 표가 더 정확합니다. 그래서 모듈에는 "표 그대로 두는" 옵션 (force_keep) 도 있습니다. 그러나 90% 의 경우 비교는 차트가 더 효과적입니다.

    검증 방법

    세 가지 검증.

    A/B 모바일 spot-check — 같은 글의 표 버전 vs 차트 버전을 각 6편씩 발행해서, 모바일 (375px iPhone) 에서 한 줄 가로 스크롤 발생률을 측정했습니다. 표 6/6 발생, 차트 0/6 발생.

    GA4 페이지뷰 비교 (sess133 launch 후 6주) — 차트 변환 모듈 도입 전 8주 평균 vs 도입 후 8주 평균을 같은 카테고리 (비교 글) 안에서 비교. 평균 체류 시간 1분 47초 → 2분 11초. 단순 트래픽 외 quality engagement 신호.

    시각 회귀 테스트 — 차트 16종 각각에 대해 표준 데이터 셋 (3 카테고리 × 5 항목, 점수 0~100) 을 입력해서 SVG output 을 byte-for-byte 비교. 같은 입력은 같은 output. 16/16 idempotent.

    따라 만드는 법

    핵심은 BeautifulSoup 으로

    Category Coverage Notice

    This article follows our label-specific editorial criteria. Details:

ToolSignal Pro Editorial

ToolSignal Pro는 AI·IT·소프트웨어 트렌드를 다루는 종합 IT 인사이트 매거진입니다.

이전 글 다음 글