지도 위에서 움직이는 진짜 열차들
가끔 '지금 이 순간 도시의 모든 열차가 어디를 달리고 있을까?' 궁금했던 적 없으세요? 런던의 한 개발자가 그 궁금증을 눈으로 볼 수 있게 만들었어요. ride.nexttrain.london이라는 웹사이트인데요, 브라우저만 열면 런던의 지하철(튜브)과 열차들이 3D 지도 위에서 실시간으로 움직이는 걸 볼 수 있습니다. 화면은 게임 같은데 다 실제 데이터예요.
어떻게 만들었을까
이게 가능한 비결은 두 가지예요. 첫째는 공개 데이터입니다. 런던 교통국(TfL, Transport for London)은 지하철·버스 운행 정보를 누구나 쓸 수 있게 API(프로그램끼리 데이터를 주고받는 창구)로 공개하고 있거든요. 어느 노선의 열차가 다음 역까지 몇 초 남았는지 같은 정보를 실시간으로 내려받을 수 있어요.
그런데 여기서 재미있는 기술적 고민이 생겨요. TfL이 주는 데이터는 '이 열차가 A역에서 B역 사이 어디쯤, 도착까지 30초'처럼 띄엄띄엄한 정보거든요. 열차의 정확한 GPS 좌표를 실시간으로 주는 게 아니에요. 그래서 개발자는 이 조각난 정보를 가지고 '그럼 지금 이 열차는 선로의 이 지점에 있겠구나' 하고 위치를 추정(interpolation, 보간)해서 실제 선로 모양을 따라 부드럽게 움직이도록 계산해야 합니다.
둘째는 3D 렌더링 기술이에요. 웹브라우저에서 3D 그래픽을 그리려면 WebGL이라는 기술을 쓰는데, 보통 three.js나 deck.gl, MapLibre 같은 라이브러리로 다룹니다. 지형과 선로 위에 수백 대의 열차를 3D로 얹고, 매 프레임마다 위치를 갱신하면서도 브라우저가 버벅이지 않게 만드는 게 은근히 까다로운 최적화 과제예요.
비슷한 시도들
이런 실시간 교통 시각화는 계보가 있어요. 도쿄의 Mini Tokyo 3D가 유명하죠—도쿄 전철을 3D로 실시간으로 보여주는 프로젝트인데, 이 런던 버전과 발상이 똑 닮았습니다. 하늘에는 항공기를 지도에 뿌려주는 Flightradar24가 있고요. 공통점은 '공개된 실시간 데이터 + 웹 3D 시각화'의 조합이라는 거예요. 공공 데이터가 잘 열려 있는 도시일수록 이런 멋진 개인 프로젝트가 많이 나옵니다.
한국 개발자에게
우리나라도 재료는 충분해요. 서울 지하철 실시간 도착 정보 API, 공공데이터포털의 버스 위치 정보 같은 게 이미 공개돼 있거든요. 이걸 three.js나 deck.gl로 시각화하면 '서울 지하철 3D 실시간 지도'도 충분히 만들 수 있어요. 포트폴리오용으로도 훌륭하고, 실시간 데이터 처리·보간·3D 렌더링 최적화를 한 번에 연습할 수 있는 좋은 토이 프로젝트죠.
핵심 학습 포인트를 정리하면, 실시간 API 폴링(주기적으로 데이터 받아오기), 불완전한 데이터를 자연스럽게 이어주는 보간 기법, 그리고 대량의 오브젝트를 60프레임으로 그리는 WebGL 최적화입니다. 이 세 가지는 지도 앱뿐 아니라 실시간 대시보드나 게임에도 그대로 쓰이는 기술이에요.
한줄 정리: 공개 데이터에 3D 시각화를 얹으면, 도시의 맥박을 눈으로 보는 작품이 됩니다. 여러분이라면 어떤 공공 데이터를 3D로 살려보고 싶으세요?
🔗 출처: Hacker News