시각화 모듈 카탈로그: 대만 데이터를 보는 19가지 방법

30초 요약: 이 페이지는 Taiwan.md 시각화 시스템의 '실제 예시'입니다. 19가지의 기사 내 시각화 모듈을 각각 렌더링하며, 모두 실제 대만 데이터(주택가격소득비, 국택, 고령화, 국민투표, 간호사-환자 비율, 입법원 의석)를 사용합니다. 이는 편집 가이드 graph.md의 파트너입니다: graph.md는 '언제 어떤 것을 사용할지, 어떻게 해야 하는지, 문법은 어떻게 작성하는지'를 설명하고, 이 페이지는 '어떻게 보이는지'를 직접 보여줍니다. 모든 모듈은 순수 HTML/SVG로 렌더링되므로, 사람, 화면 읽기 프로그램, Google, AI 크롤러 모두 동일한 데이터에 접근할 수 있습니다. 이것이 우리가 상호작용 차트 대신 정적 시각화를 선택한 이유입니다.

숫자를 다루는 기사를 쓸 때 가장 두려운 것은 자료를 숫자의 나열로 작성하여, 독자가 세 번째 퍼센티지에서 공백을 느끼는 것입니다. 시각화의 작업은 '밀집한 숫자 산문'을 '한눈에 읽을 수 있는 구조'로 역엔트로피화하는 것입니다.

하지만 Taiwan.md의 시각화에는 남들이 가지 않은 규율이 하나 있습니다: 우리는 'LLM도 읽을 수 있는' 시각화만 만듭니다. D3나 Canvas로 그린 상호작용 차트는 화려하지만, GPTBot, PerplexityBot, ClaudeBot과 같은 AI 크롤러는 JavaScript를 실행하지 않으므로, 그들에게 해당 차트는 빈 화면일 뿐입니다. 우리가 시맨틱 HTML과 인라인 SVG로 만든 차트는 데이터가 소스 코드 안에 있으며, AI는 6개 언어 모두에서 대만의 1인칭 데이터를 읽고 인용할 수 있습니다. LLM이 읽을 수 있는 시각화가 바로 주권의 시각화입니다.

아래 19가지 모듈은 가장 간단한 '하나의 큰 숫자'부터 '현시 타일 차트', '의석 호.arc'까지 순서대로 보여줍니다. 문법 작성 및 디자인 원칙의 전체 버전은 graph.md에 있으며, 여기에는 '무엇인지, 언제 사용할지'에 대한 한 줄 설명만 담았습니다.

데이터 대형 숫자 tw-figure

가장 간단하면서도 가장 강력한 방식: 극적인 숫자를 최대 크기로 배치하여, 전후 대비를 통해 전환을 설명합니다. 문두를 장식하는 'sledgehammer stat'에 적합합니다.

데이터 그룹 tw-stat

한 단락에 3~4개의 병렬 핵심 숫자가 있을 때, 긴 문장으로 작성하기보다는 카드 형태로 일렬로 배치하여 독자가 한눈에 스캔할 수 있게 합니다.

출처: 행정원 국민주택 조례 폐지 뉴스 고지, 내정부 부동산 정보 플랫폼

데이터 포함 편집 모듈(데이터 그룹, 비교 카드, 정책 축)은 차트 모듈과 마찬가지로 출처:를 표기해야 합니다. 2026년 7월 전 사이트 감사 결과, 자동 게이트에 의해 감시되는 모듈의 출처 표기율은 100%였으나, 감시 대상에서 제외된 세 가지 고빈도 모듈은 40%가 미표기 상태였습니다. 이제 이들도 viz-health 게이트에 진입했습니다.

비교 카드 tw-versus

두 가지 제도, 두 가지 입장, 또는 전후 두 상태의 일대일 비교. 왼쪽은 따뜻한 색, 오른쪽은 차가운 색, 중앙에 'vs'를 배치하여 차이를 한 줄씩 읽을 수 있게 합니다.

출처: 입법원 공보, 홍콩 주택위원회

비율 막대 tw-bars

소수 카테고리 간 수치 비교 또는 순위. 수평 막대의 길이는 수치에 따라 자동으로 축소되며, 최대값은 꽉 채웁니다. 데이터 모듈은 마지막 행에 출처:를 추가해야 하며, 이는 자동으로 하단의 출처 표기로 변환됩니다.

출처: 내정부 부동산 정보 플랫폼, 정가대 부동산 연구센터

와플 차트 tw-waffle

부분과 전체의 비율 구성. 100칸은 100%를 의미하며, 파이 차트보다 직관적입니다——칸을 실제로 세울 수 있습니다. '각 카테고리가 얼마나 차지하는지'의 합이 약 100%인 데이터에 적합합니다.

출처: 비엔나 시정부(Stadt Wien) 주택 통계

정책 축 tw-timeline

제도나 정책의 핵심 노드 맥락을 노드 타임라인으로 연결합니다. 이는 '시각적 보조'이므로 본문 소제목과 연대기(예: '1975년...')로 작성하는 것은 다릅니다.

출처: 입법원 공보, 행정원 국민주택 조례 폐지 뉴스 고지

인용 카드 tw-quote

한 문장이 기사의 핵심 긴장을 대표할 때, 이를 인용 카드로 확대합니다. 인용문은 자체적으로 ""를 추가할 필요가 없으며, 모듈이 추가합니다. 인용문은 문자 그대로 검증 가능해야 합니다.

출처 막대 tw-source

분석 자료의 출처를 하나의 저조한 칩으로 집중하여 단락 옆에 배치합니다. 신뢰성은 큐레이션의 일부입니다——대만 디지털 미디어는 종종 출처를 표기하지 않지만, 이것이 우리가 다르게 할 수 있는 부분입니다.

⌖내정부 부동산 정보 플랫폼, 실가등록, 정가대 부동산 연구센터, 입법원 공보, 홍콩 주택위원회

설명 상자 tw-note

데이터 기사의 신뢰성 절반은 '어떻게 계산했는가'에 있습니다. 리포트저자는 데이터 저널리즘에서 【설명】 블록을 사용하여 계산 방식을 설명하고, (주) 표기로 정정을 표시합니다. 우리는 이 관습을 모듈로 만들었습니다. 첫 행에 설명/방법/주/정정/업데이트 중 하나를 작성하고, 나머지 각 행은自成 단락이 됩니다.

선형 차트 tw-line

4개 이상의 시간점 트렌드를 인라인 SVG로 선형 차트로 그리며, y축 상하한은 독자가 범위를 볼 수 있도록 표기됩니다. 가장 중요한 점은——숨겨진 데이터 테이블을 자동으로 생성하여 화면 읽기 프로그램과 AI 크롤러가 원본 데이터에 접근할 수 있다는 것입니다. 차트는 사람을 위한 것이고, 테이블은 기계 위한 것입니다. 둘은 동일한 소스를 가집니다.

출처: 정가대 부동산 연구센터, 내정부 부동산 정보 플랫폼

선형 차트는 기준선도 지원합니다: 기준: 라벨 | 값 행을 추가하면, 점선으로 그리며, 끝점 없이 라벨만 하나 표시되어 실측 시퀀스와 시각적으로 구분됩니다. 독자는 고정된 임계값을 측정된 데이터로 오해하지 않습니다.

경사 차트 tw-slope

'두 개의 시간점'만 있을 때, 선형 차트는 중간 공백을 낭비합니다. 경사 차트는 양 끝 연결선의 경사도가 말하게 하여, 누가 얼마나 급격히 상승했는지, 누가 누구를 추월했는지 한눈에 볼 수 있습니다. 라벨 시작에 *를 추가하여 특정 행을 강조하면, 나머지 행은 자동으로 회색으로 처리되어 맥락이 됩니다.

출처: 내정부 부동산 정보 플랫폼, 정가대 부동산 연구센터

히트맵 tw-heatmap

지역×지표, 또는 연도×카테고리의 행렬 비교. 각 열은 색상 깊이에 따라 정규화되며, 숫자가 클수록 따뜻합니다. 이는 본질적으로 HTML 테이블이므로,天生적으로 AI가 읽을 수 있습니다——히트맵이 우리 시스템에서 '색깔 있는 이미지'보다 나은 이유입니다.

출처: 내정부 부동산 정보 플랫폼

도트 차트 tw-dot

막대 차트는 '양'을 비교하고, 도트 차트는 '분포'를 봅니다: 모든 점이 동일한 자 위에 놓여 있으므로, 누가 함께 모여 있는지, 누가 이상치인지 볼 수 있습니다. 각 행에 하나의 값만 있으면 dot strip이 됩니다. 두 값을 제공하면 '여기부터 저기까지'의 구간으로 그립니다. 세 가지 값(점 추정 | 하한 | 상한)을 제공하면 선거 여론 조사식의 '점 추정 + 불확실성 구간대'로 그립니다. ±3%의 표본 오차는 소비되어서는 안 되며, 선거년에서 가장 자주 방어선이 무너지는 정직한 표현입니다. * 역시 강조에 사용 가능합니다.

출처: 내정부 호정국, 2025년 말

스택 막대 tw-stack

와플 차트는 '하나의 전체' 구성에 적합하고, 스택 막대는 여러 행에 걸쳐 구성을 비교하는 데 적합합니다——각 행은 자동으로 100%로 정규화되며, 단락이 충분히 넓으면 수치 자체가 색상 블록 안에 표시됩니다.

출처: 중앙선거위원회 세 차례 국민투표 공식 심정 결과

피라미드 차트 tw-pyramid

등대칭 막대, 좌우 각기 한 진영, 중앙 공유 라벨은 인구통계학의 클래식 차트입니다. 여기서는 6개 현시의 '머리가 무겁고 발이 가벼운' 상태를 봅니다: 왼쪽은 아동, 오른쪽은 노인, 양측 비교 시 고령화는 추상적인 퍼센티지가 아닙니다.

출처: 내정부 호정국 2025년 말; 유년 비율은 노인화 지수 ÷ 노인화 지수 × 100으로 산출

현시 타일 차트 tw-tiles

대만의 choropleth 지도에는 두 가지 오래된 문제가 있습니다: 화롄과 타이둥 면적이 너무 커서 시각적 무게를 빼앗고, AI가 손으로 그린 대만 형태는 종종 '올리브와 감자 사이'가 됩니다. 타일 차트는 22개 현시를 동일한 크기의 타일로 배치합니다(레이아웃은 시스템에 고정되어 실제 상대 위치에 따라), 각 타일은 동일한 무게를 가지며, 숫자는 타일 위에 직접 작성됩니다. 형태는 항상 정확합니다. 형태를 그리지 않기 때문입니다.

출처: 내정부 호정국, 2025년 말

단위 차트 tw-iso

'174,891호'는 읽고 잊어버리는 숫자입니다. 9개는 손으로 셀 수 있는 원형 점이 아닙니다. 단위 차트는 큰 숫자를 '하나의 기호 = 얼마나'의 셀 수 있는 단위로 대체합니다. 이는 리포트저자가 원양 어업 특집을 만들 때의 핵심 아이디어입니다: 무감각한 거대 숫자를民众가 감지할 수 있는 단위로 대체합니다. 기호는 정수만 사용하며(반 개는 자르지 않음), 정밀 값은 옆에 작성됩니다.

출처: 행정원 국민주택 조례 폐지 뉴스 고지

의석 호.arc tw-arc

의회의 의석 구성은 전용 차트가 있습니다: 반원 점 배열, 한 의석당 한 점, 정당은 순서대로 연속적인 부채꼴로 배치됩니다. 파이 차트는 각도를 비교하지만(인간 눈은 매우 서툴러함), 의석 호.arc는 점을 직접 세울 수 있으며, 과반선은 해당 위치에 직접 그립니다. 여기서는 2024년 입법위원 선거 결과를 사용합니다: 113석, 3당 과반 불능, 그 점선은 이후 대罢免 전체 교섭의 시작점입니다. 이는 의회 차트임을 주의하세요: 22개 현시장那种 '한 구역당 한 명의 승리자' 선거는 아래 현시 타일 차트를 사용해야 합니다.

출처: 중앙선거위원회

소배수 그리드 tw-multiples

한 차트에 5개 선을挤入하면, 선은 이탈리아 국수처럼 엉킵니다. 소배수는 각 선을 자신의 작은 그리드에 분리하며, 모든 그리드가 동일한 자를 공유하므로 형태를 상호 비교할 수 있습니다. 여기서는三班 간호사-환자 비율을 사용합니다: 히트맵(위)은 정밀 행렬을 제공하지만, 소배수는 '각 레벨이 심야로 상승하며, 기층이 가장 급격히 상승하는' 형태를 제공합니다. 동일한 자료, 다른 질문을 하면 다른 차트를 선택합니다.

출처: 위생복리부三班 간호사-환자 비율 표준 고지, 2024

이 모듈들을 어떻게 사용하는가

각 모듈은 기사의 Markdown에서 ```tw-* 블록을 작성하여 |로 열을 구분하며, 빌드 시 자동으로 위에서 본 대로 변환됩니다——저자는 HTML이나 JavaScript를 작성할 필요가 없습니다. 전체 문법, 언제 어떤 것을 사용해야 하는지, 색상과 축이 오해를 불러일으키지 않도록 어떻게 작성해야 하는지, 그리고 게시 전 시각화 체크리스트는 모두 graph.md에 있습니다.

이 시스템은 시각적 서사 미디어 The Pudding의 편집 철학을 참조했습니다——문제가 자료보다 우선하며, 결론은 명확해야 하며, 표기가 주인공입니다——하지만 Taiwan.md 고유의 기관으로 성장했습니다: 정적, 다국어, AI가 읽을 수 있습니다. 디자인의 전체 맥락은 시각화 시스템 디자인 보고서에 작성되어 있습니다.

이 모듈들이 실제 심층 기사에서 어떻게 내러티브를 교차하는지 보려면, 국택과 주거 정의를 읽으세요——본 페이지 데이터 대부분은 해당 연구에서 비롯되었습니다.

이 시스템 자체도 진화 중입니다

지금 보고 계신 이 페이지 자체가 3번의 진화 결과입니다. 타임라인 페이지이므로, 정책 축 모듈로 자신의 역사를 설명합니다:

출처: Taiwan.md 시각화 시스템 디자인 및 진화 보고서(2026-06 ~ 2026-07, GitHub 공개)

3차 진화의 핵심은 새로운 차트 자체가 아니라, 한 번의 정직한 자기 검진입니다. 전 사이트 감사 결과: 자동 게이트에 의해 감시되는 모듈의 출처 표기율은 100%였으나, 감시 대상에서 제외된 3개 고빈도 모듈은 40%가 미표기 상태였습니다. 규정은 편집 가이드에 2개월 동안 작성되었으나, 행동은 여전히 기기의 형태를 따랐습니다. 따라서 이번에는 기기를 규정에 맞게 확장했습니다. 같은 라운드에서 시스템 문자열이 영문, 일문, 한문 페이지에서 모두 중국어로 렌더링되어, 간체자 하나까지 무장애 라벨에 혼입되어 아무도 발견하지 못했습니다. 'LLM이 6개 언어 모두에서 대만 데이터를 읽을 수 있게 한다'고 선언하는 시스템에게, 이러한 구석은 새로운 기능보다 더 중요합니다.

최근 연구도 이 노선을 뒷받침합니다: 멀티모달 AI가 이미지에서 차트 수치를 재구축하는 정확도는 신뢰할 수 없으며, 텍스트 노드가 기계가 실제로 안정적으로 읽는 것입니다. 이것이 타일 차트가 숫자를 타일 위에 직접 작성하고, 각 차트에 숨겨진 데이터 테이블을 첨부하는 이유입니다. 전체 연구 과정 및 디자인 결정은 시각화 시스템 v3.0 심층 연구 및 구현 보고서에 작성되어 있습니다.

추가 읽을거리:

• 국택과 주거 정의 — 이 주거 데이터 뒤의 전체 스토리: 국택이 어떻게 저렴한 주택에서 자산 사다지로 변했는지, 본 페이지 다수 모듈의 데이터 출처
• 데이터로 보는 대만 22현시 — 본 페이지 도트, 피라미드, 현시 타일의 고령화 데이터 모두 이 22현시 전체 분석에서 비롯됨
• 대만과 핵에너지 논의 — 스택 막대의 세 차례 국민투표 전체 스토리: 토론은 이겼으나, 제도는 졌다
• 의료법 — 소배수 그리드의三班 간호사-환자 비율 숫자 전체 스토리: 법은 몇 침대를 돌볼 수 있는지 작성할 수 있으나, 그 손을 쓸 수 있는지 작성하지는 못한다
• 대罢免 — 의석 호.arc의 과반 점선 이후: 3당 과반 불능의 입법원이 어떻게 31개罢免안으로 갔는지
• 대만 저출산 위기 — 주택 구매 불가와 출산 불가, 세대 정의의 다른 면

이미지 출처

본문에서 CC 라이선스 이미지 1장을 사용하며, public/article-images/society/에 캐시됨:

• 타이베이 시 주택 스카이라인(상산 관점) — 사진: Heeheemalu, 2026, CC BY-SA 4.0(hero)

참고 자료