30초 개요: 이 페이지는 Taiwan.md 시각화 시스템의 "활용 예시"이다. 열 가지 기사 내 시각 모듈을 각각 한 번씩 렌더링하고, 모두 동일한 실제 타이완 주거 데이터(주가소득비, 국택, 사택, 국제 비교)를 사용한다. 편집 가이드 graph.md 와 짝을 이룬다. graph.md 는 "언제 어떤 모듈을 쓰고, 어떻게 하면 좋고, 문법은 어떻게 쓰는지"를 설명하며, 이 페이지는 "실제로 어떻게 보이는지"를 직접 보여준다. 각 모듈은 순수 HTML/SVG로 렌더링되므로, 사람, 스크린 리더, Google, AI 크롤러가 모두 동일한 데이터를 읽을 수 있다. 이것이 바로 우리가 인터랙티브 차트가 아닌 정적 시각화를 선택한 이유다.
숫자를 다루는 글을 쓸 때 가장 두려운 것은 데이터를 단락마다 숫자를 쌓아올리는 것이다. 독자가 세 번째 퍼센트를 읽는 순간 멍해진다. 시각화의 역할은 "밀도 높은 숫자 산문"을 "한눈에 읽히는 구조"로 역전시키는 것이다.
그러나 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인 데이터에 적합하다.
정책 타임라인 tw-timeline
제도나 정책의 핵심 시점 맥락을 노드 타임라인으로 연결한다. 이것은 "시각 보조"임에 유의한다. 본문 소제목을 연대기식("1975년…")으로 쓰는 것과는 별개의 문제다.
인용 카드 tw-quote
한 문장이 글 전체의 핵심 긴장을 대표할 때, 그것을 인용 카드로 확대한다. 인용문에 직접 따옴표를 넣을 필요 없으며, 모듈이 자동으로 추가한다. 인용은 반드시 원문 그대로이고 확인 가능해야 한다.
시가 3,000만 위안인 집이 6,000만~7,000만 위안짜리 집이 된다……빈곤층에서 부유층으로 돈을 빼앗는 것이다. 국가가 돈을 들여 부유층의 집을 재개발해주는 것이다
출처 바 tw-source
한 단락의 분석 출처를 조용한 칩(chip)으로 모아 단락 옆에 배치한다. 신뢰성은 큐레이션의 일부다——타이완 디지털 미디어가 출처 표기를 잊는 경우가 많은데, 이것은 우리가 다르게 할 수 있는 부분이다.
내정부 부동산 정보 플랫폼, 실거래가 신고, 정대 부동산 연구센터, 입법원 공보, 홍콩 주택위원회
꺾은선형 차트 tw-line
네 개 이상의 시점에 걸친 추세를 inline SVG로 꺾은선형 차트로 그린다. y축의 상한과 하한이 표시되어 범위를 알 수 있다. 가장 중요한 것은——자동으로 숨겨진 데이터 테이블을 생성하여 스크린 리더와 AI 크롤러가 원본 데이터를 읽을 수 있게 한다. 그래프는 사람이 보는 것이고, 테이블은 기계가 읽는 것이며, 둘은 동일한 출처에서 나온다.
| 년 | 전국 |
|---|---|
| 2014 | 8.41 |
| 2016 | 9.32 |
| 2018 | 8.57 |
| 2020 | 9.2 |
| 2022 | 9.61 |
| 2024 | 10.76 |
| 출처: 정대 부동산 연구센터, 내정부 부동산 정보 플랫폼 |
히트맵 tw-heatmap
지역×지표, 또는 연도×범주의 행렬 비교이다. 각 열이 개별적으로 색 농도로 정규화되며, 숫자가 클수록 따뜻한 색이 진해진다. 그 자체가 HTML 테이블이므로 태생적으로 AI가 읽을 수 있다——이것이 히트맵이 우리 시스템에서 "색깔 있는 한 장의 이미지"보다 나은 이유다.
| 시현 | 주가소득비(배) | 주택대출 부담률(%) |
|---|---|---|
| 타이베이 | 16.60 | 63.9 |
| 신베이 | 13.03 | 56.9 |
| 타이중 | 11.11 | 48.0 |
| 타오위안 | 9.0 | 40.0 |
| 출처: 내정부 부동산 정보 플랫폼 |
이 모듈들을 사용하는 방법
각 모듈은 기사의 Markdown 안에 ```tw-* 블록을 작성하고 |로 열을 구분하면, 빌드 시 위에서 본 형태로 자동 변환된다——저자는 HTML이나 JavaScript를 일절 작성할 필요가 없다. 전체 문법, 언제 어떤 모듈을 써야 하는지, 색상과 좌표축을 어떻게 설계해야 오해를 유발하지 않는지, 그리고 게시 전 시각화 체크리스트는 모두 graph.md 에 있다.
이 시스템은 시각 내러티브 매체 The Pudding 의 편집 철학——질문이 데이터보다 먼저, 결론은 명확하게, 출처 표기가 주인공——을 참고했지만, Taiwan.md 자체에 맞는 기관으로 발전했다: 정적, 다국어, AI 가독. 설계의 전체 맥락은 시각화 시스템 설계 보고서 에 기술되어 있다.
이 모듈들이 실제 심층 기사에서 어떻게 서사 사이사이에 배치되는지 보고 싶다면 국택과 주거 정의 를 읽어본다——이 페이지의 데이터 대부분이 그 글의 연구에서 나왔다.
더 읽을거리:
- 국택과 주거 정의 — 이 주거 데이터 뒤의 완전한 이야기: 국택이 어떻게 저가 주택에서 자산 에스컬레이터가 되었는지, 이 페이지 모듈 대부분의 데이터 출처
- 사회주택과 주거 정의 — 2016년 이후 "전매 불가" 사회주택 노선
- 타이완 저출생 위기 — 집을 살 수 없고 아이를 낳을 수 없는, 세대 정의의 다른 면
참고 문헌
이미지 출처
본 글은 1장의 크리에이티브 커먼즈 라이선스 이미지를 사용하며, public/article-images/society/ 에 캐시되어 있다:
- 타이베이시 주택 스카이라인(샹산 시점) — Photo: Heeheemalu, 2026, CC BY-SA 4.0(hero)