30초 개요: 이 페이지는 Taiwan.md 시각화 시스템의 “실전 예시”——열일곱 가지 기사 내 시각화 모듈을 각각 한 번씩 렌더링하고, 모두 실제 타이완 데이터(주택가격·소득비, 공공주택, 고령화, 국민투표)를 사용한다. 이는 편집 가이드인 graph.md의 파트너 역할을 한다: graph.md는 “언제 어떤 모듈을 쓰고, 어떻게 하면 좋은지, 문법은 어떻게 쓰는지”를 설명하고, 이 페이지는 실제 모습(“어떻게 보이는가”)을 바로 보여준다. 모든 모듈은 순수 HTML·SVG로 렌더링되므로 사람, 화면 읽기 프로그램, Google, AI 크롤러가 동일한 데이터를 읽을 수 있다——이것이 우리가 정적 시각화를 선택하고 인터랙티브 차트를 쓰지 않는 이유다.
숫자를 나열하는 기사에서는 데이터가 연속된 수치 덩어리로 변해 독자가 세 번째 백분율을 읽고 머뭇거리기 쉽다. 시각화 작업은 “밀집된 수치 prose”를 “한눈에 읽히는 구조”로 역엔트로피하는 것이다.
하지만 Taiwan.md의 시각화에는 다른 곳에 없는 규율이 있다: 우리는 “LLM도 읽을 수 있는” 시각화만 만든다. D3·Canvas로 만든 인터랙티브 차트는 화려하지만, GPTBot·PerplexityBot·ClaudeBot 같은 AI 크롤러는 JavaScript를 실행하지 못한다. 그들에게는 차트가 빈 화면일 뿐이다. 반면 우리는 semantic HTML과 inline SVG를 사용해 데이터를 원시 코드에 그대로 두어, AI가 여섯 언어로도 읽고 타이완의 1인칭 데이터를 인용할 수 있다. LLM이 읽을 수 있는 시각화는 주권의 시각화다.
아래 열일곱 개 모듈은 “한 큰 숫자”부터 “도시 타일 지도”까지 순서대로 보여준다. 문법 전체와 설계 원칙은 graph.md에 있으며, 여기서는 “이게 뭐고 언제 쓰는가” 한 줄만 제시한다.
데이터 대숫자 tw-figure
가장 간단하면서도 강력한 형태: 극적인 수치를 가장 크게 표시하고 전후 대비를 설명한다. 서두에 “sledgehammer stat”을 제시하고 싶을 때 적합하다.
데이터 집합 tw-stat
단락에 세·네 개의 핵심 수치가 들어갈 때, 긴 문장 대신 카드 형태로 가로 배열해 독자가 한눈에 스캔하도록 한다.
비교 카드 tw-versus
두 제도·두 입장·또는 전후 상태를 포인트별로 대조한다. 왼쪽은 따뜻한 색, 오른쪽은 차가운 색, 가운데 “vs”가 있어 차이를 한 줄씩 읽을 수 있다.
비율 막대 tw-bars
소수 카테고리의 수치 비교·순위 표시. 가로 막대 길이가 수치에 따라 자동 스케일링되며, 최대값은 전체 폭을 채운다. 마지막에 출처: 행을 추가하면 자동으로 하단에 출처 표시가 된다.
와플 차트 tw-waffle
전체 대비 부분 비율을 나타내며, 100칸이 100%를 의미한다. 원형 차트보다 직관적이며 실제로 격자를 셀 수 있다. “각 카테고리 비중이 100에 가까운” 데이터를 표시할 때 적합하다.
정책 축 tw-timeline
제도·정책의 핵심 전환점을 시간축으로 연결한다. 이는 “시각적 보조”이며 본문 소제목과는 별개로 연대기 형태를 쓰지 않는다.
인용 카드 tw-quote
핵심 문장이 전체 논조를 대변할 때 확대 인용 카드로 만든다. 인용문에 따옴표를 직접 넣지 않아도 모듈이 자동으로 추가한다. 인용문은 직역·검증 가능해야 한다.
시가 3,000만 원 주택이 6,000~7,000만 원으로 상승……가난한 사람을 착취하고 부자를 부양한다, 국가는 부유층의 재건을 지원한다
출처 칩 tw-source
분석에 사용된 자료 출처를 하나의 저자칩으로 모아 단락 옆에 배치한다. 타이완 디지털 미디어는 출처 표기를 자주 누락하는데, 여기서는 차별화된 점이다.
내정부 부동산 정보 플랫폼, 실거래 등록, 정대 부동산 연구센터, 입법부 공보, 홍콩 주택 위원회
설명 박스 tw-note
데이터 기사에서 신뢰성의 절반은 “어떻게 계산했는가”에 달려 있다. 보도자는 【설명】 영역을 사용해 계산 방식을 밝히고, (주) 표시로 정정을 기록한다. 첫 줄에 설명·방법·주·정정·업데이트 중 하나를 쓰고, 이후 각 줄을 독립된 단락으로 만든다.
선 그래프 tw-line
네 개 이상의 시점 추세를 인라인 SVG 선 그래프로 표시한다. y축 상·하한을 명시해 범위를 보여준다. 가장 중요한 점은 숨겨진 데이터 테이블이 자동 생성돼 화면 읽기 프로그램과 AI 크롤러가 원시 데이터를 읽을 수 있다는 것이다. 차트는 사람을 위한 것이고, 표는 기계를 위한 것이다.
| 연도 | 전국 |
|---|---|
| 2014 | 8.41 |
| 2016 | 9.32 |
| 2018 | 8.57 |
| 2020 | 9.2 |
| 2022 | 9.61 |
| 2024 | 10.76 |
| 기준: 2014 시작점 | 8.41 |
| 출처: 정대 부동산 연구센터, 내정부 부동산 정보 플랫폼 |
선 그래프는 기준선도 지원한다: 기준: 라벨 | 값 행을 추가하면 점선 형태로 표시되며, 실제 측정값과 시각적으로 구분된다. 독자는 고정 문턱을 데이터와 혼동하지 않는다.
기울기 그래프 tw-slope
시간점이 두 개뿐인 경우 선 그래프는 중간 빈칸을 남긴다. 기울기 그래프는 양 끝을 바로 연결해 상승·하강 정도를 한눈에 보여준다. 라벨 앞에 *를 붙이면 해당 행을 강조하고, 나머지는 회색 처리돼 맥락을 제공한다.
| 2014 | 2024 | |
|---|---|---|
| 전국 | 8.41 | 10.76 |
| 타이베이 | 12.0 | 16.60 |
히트맵 tw-heatmap
지역×지표 또는 연도×카테고리 매트릭스 비교. 각 열은 색 농도로 정규화돼 숫자가 클수록 따뜻한 색이 된다. 자체가 HTML 표이므로 AI가 바로 읽을 수 있다—이는 색채 이미지보다 히트맵을 선호하는 이유다.
| 시·군 | 주택가격·소득비 (배) | 주택담보대출 부담률 (%) |
|---|---|---|
| 타이베이 | 16.60 | 63.9 |
| 신베이 | 13.03 | 56.9 |
| 타이중 | 11.11 | 48.0 |
| 타오위안 | 9.0 | 40.0 |
| 출처: 내정부 부동산 정보 플랫폼 | – | – |
점 그래프 tw-dot
막대 그래프가 “양”을, 점 그래프는 “분포”를 보여준다. 모든 점이 같은 눈금에 놓여 있어 누가 밀집했는지, 누가 이상치인지 확인할 수 있다. 두 값이 있으면 구간을 그린다. * 로 강조 가능하다.
누적 막대 tw-stack
와플 차트가 “전체 구성”에 적합하다면, 누적 막대는 여러 행을 가로질러 구성비를 비교한다—각 행은 자동으로 100%로 정규화되며, 충분히 넓은 영역에서는 색상 안에 수치가 직접 표시된다.
| 투표 | 찬성 | 반대 |
|---|---|---|
| 2018년 원자력 친환경화 | 59 | 41 |
| 2021년 원자력 4호기 재가동 | 47 | 53 |
| 2025년 제3원전 연장 | 74 | 26 |
| 출처: 중앙선거위원회 3차 국민투표 공식 결과 |
피라미드 tw-pyramid
좌우가 각각 한 진영인 역대칭 막대로, 중앙 라벨을 공유한다. 인구학에서 고전적인 형태이며, 여기서는 6개 시·군의 “머리 무겁고 발 가벼움”을 보여준다: 왼쪽은 어린이 비율, 오른쪽은 노인 비율, 양쪽을 비교하면 고령화가 단순 백분율보다 시각적으로 명확해진다.
시·군 타일 지도 tw-tiles
타이완의 choropleth 지도는 두 가지 오래된 문제를 안고 있다: 화롄·타이둥이 면적이 커서 시각적 비중을 차지하고, AI가 손그림한 타이완 형태가 “올리브와 감자 사이”가 되기 쉽다. 타일 지도는 22개 시·군을 동일 크기의 타일에 배치(시스템에 고정된 레이아웃, 실제 상대 위치 반영)해 각 타일에 숫자를 직접 표시한다. 형태는 언제나 정확하고, 실제 지형을 그릴 필요가 없다.
단위 지도 tw-iso
“174,891 가구”는 기억하기 어려운 숫자지만, 손가락으로 셀 수 있는 아홉 개의 원점은 기억에 남는다. 단위 지도는 큰 수치를 “하나의 기호 = 얼마”라는 가산 단위로 변환한다. 이는 원거리 어업 특집 기사에서 사용한 기법으로, 무감각한 거대한 수치를 대중이 체감할 수 있는 단위로 바꾼다. 기호는 정수만 사용하고(반으로 나누지 않음), 정확한 값은 옆에 표기한다.
● ≈ 1
이 모듈들 어떻게 쓰나요
각 모듈은 기사 Markdown 안에 ```tw-* 블록을 삽입하고 | 로 구분하면, 빌드 시 위에 보이는 형태로 자동 변환된다——작성자는 HTML이나 JavaScript를 전혀 작성할 필요가 없다. 전체 문법, 언제 어떤 모듈을 써야 하는지, 색채·축 설정이 독자를 오도하지 않도록 하는 방법, 그리고 게시 전 시각화 검수 체크리스트는 모두 graph.md에 있다.
이 시스템은 시각적 서사 매체 The Pudding의 편집 철학을 참고했다——문제 정의가 데이터보다 앞서고, 결론은 명확히 제시하며, 출처가 주인공이다——하지만 Taiwan.md에 맞게 정적·다국어·AI 가독성을 갖춘 자체 구조로 발전했다. 설계 전반은 시각화 시스템 설계 보고서에 기록돼 있다.
이 모듈들이 실제 심층 기사에 어떻게 삽입되는지 보고 싶다면, 공공주택과 주거 정의를 참고하라——본 페이지 데이터 대부분이 그 연구에서 비롯되었다.
연관 읽기:
- 공공주택과 주거 정의 — 이 주거 데이터 뒤에 숨은 전체 이야기: 공공주택이 저가 주택에서 자산 사다리로 변모한 과정, 대부분 모듈 데이터 출처
- 데이터로 보는 타이완 22개 시·군 — 점 그래프·피라미드·시·군 타일 지도에 사용된 고령화 데이터 전체 분석
- 타이완과 핵에너지 논쟁 — 누적 막대에 등장한 3차 국민투표 전체 이야기: 논쟁은 승리했지만 제도는 패배
- 사회주택과 주거 정의 — 2016년 이후 “임대 전용” 사회주택 정책 전개
- 타이완 저출산 위기 — 주택 구매 불가능과 출산 감소, 세대 정의의 다른 면모
참고 자료
이미지 출처
본 문서는 CC 라이선스 이미지 1장을 사용했으며, public/article-images/society/에 캐시된다:
- 타이베이 시 주거 스카이라인 (상산 전망) — 사진: Heeheemalu, 2026, CC BY-SA 4.0 (히어로)