무슨 일이 있었나요?
일본 전국의 기차역 9,300개가 처음 문을 연 연도 순서대로 지도 위에 하나씩 나타나는 애니메이션 시각화 프로젝트가 공개됐어요. 1872년 일본 최초의 철도가 개통되던 순간부터 2026년까지, 154년에 걸친 철도망의 성장을 짧은 영상처럼 눈으로 따라갈 수 있게 만든 거예요. 데이터 시각화를 좋아하는 개발자라면 "오, 이거 어떻게 만들었지?" 하고 손이 근질거릴 만한 작업이에요.
뭐가 매력적인가요?
이 프로젝트의 진짜 힘은 시간이라는 축을 더한 데이터 시각화라는 점이에요. 그냥 모든 역을 지도에 한꺼번에 점으로 찍으면 "일본에 역이 많네" 정도로 끝나거든요. 그런데 개통 연도순으로 하나씩 등장하게 하니까, 데이터가 갑자기 이야기가 돼요.
- 처음엔 도쿄와 오사카 같은 대도시 주변에 점이 깜빡이며 생겨나요.
- 그러다 메이지 시대 산업화와 함께 철도가 줄기처럼 지방으로 뻗어나가요.
- 2차 대전 전후, 고도성장기를 거치며 점들이 폭발적으로 늘어나요.
- 인구 감소가 시작되는 최근으로 오면 신규 개통 속도가 눈에 띄게 느려져요.
기술적으로 들여다보면
이런 작업을 만들려면 몇 가지 조각이 필요해요. 먼저 데이터예요. 9,300개 역의 위도·경도 좌표와 개통 연도가 있어야 하는데, 일본은 다행히 이런 철도 오픈데이터가 잘 정리돼 있는 편이에요.
그다음은 지도 렌더링이에요. 점이 9천 개가 넘으면 일반적인 DOM 요소(HTML 태그)로 하나씩 그리면 브라우저가 버벅거려요. 그래서 보통 Canvas나 WebGL 같은 기술을 써요. 이게 뭐냐면, HTML 요소를 잔뜩 만드는 대신 그래픽카드의 힘을 빌려 픽셀 단위로 한 번에 그려내는 방식이라, 수천~수만 개의 점도 부드럽게 움직일 수 있어요. 지도 시각화 라이브러리로는 deck.gl, Mapbox GL, D3.js 같은 게 대표적이에요.
마지막은 시간 기반 애니메이션이에요. 연도라는 값을 타임라인으로 삼아서, 현재 연도보다 이전에 개통된 역만 화면에 누적해서 보여주는 거죠. requestAnimationFrame(브라우저가 화면을 다시 그릴 때마다 호출해주는 함수)으로 매 프레임 연도를 조금씩 늘려가며 보간하면 자연스러운 흐름이 만들어져요.
업계 맥락
이런 "시간에 따라 변하는 지도" 시각화는 데이터 저널리즘 분야에서 강력한 무기로 자리 잡았어요. 뉴욕타임스나 파이낸셜타임스의 인터랙티브 기사, 코로나 확산 지도, 도시 성장 시각화 같은 게 다 같은 계열이에요. 한스 로슬링의 그 유명한 '거품 차트' 애니메이션처럼, 시간 축을 더하는 순간 정적인 통계가 살아 움직이는 서사로 바뀐다는 공통점이 있죠. 단순히 예쁜 토이가 아니라, 복잡한 데이터를 대중에게 전달하는 검증된 방법론이에요.
한국 개발자에게 주는 시사점
한국도 철도, 지하철, 버스 노선, 인구 이동, 상권 변화 같은 공공 오픈데이터가 꽤 풍부해요. 같은 기법을 그대로 한국에 적용해볼 수 있다는 거죠. 예를 들어 "수도권 지하철역이 1974년부터 어떻게 늘어났는지", "전국 스타벅스 매장이 연도별로 어떻게 퍼졌는지" 같은 걸 만들면 포트폴리오로도 훌륭하고, 데이터 시각화 실력을 기르기에도 좋아요.
핵심 학습 포인트는 세 가지예요. 좌표 데이터를 다루는 법, 대량의 점을 성능 좋게 렌더링하는 법(Canvas·WebGL), 그리고 시간을 애니메이션으로 풀어내는 법이에요. 이 세 가지는 대시보드든 게임이든 지도 서비스든 두루 쓰이는 기본기예요.
마무리
데이터에 '시간'이라는 한 축을 더했을 뿐인데, 딱딱한 좌표 목록이 한 나라의 역사로 변신했어요. 여러분이라면 어떤 한국 오픈데이터에 시간 축을 입혀 보고 싶으세요? 한번 아이디어를 나눠봐요.
🔗 출처: Hacker News