영국의 모든 기차가 지도 위를 실시간으로 달린다 - signalbox.io는 어떻게 만들어졌나

지도 위에서 진짜로 움직이는 기차들

영국 전역의 철도망을 실시간으로 보여주는 웹 지도 signalbox.io가 공개됐어요. 사이트에 들어가면 영국 섬 전체 지도 위에 지금 이 순간 달리고 있는 수천 대의 기차가 작은 점으로 찍혀서, 실제로 선로를 따라 스르륵 움직이는 걸 눈으로 볼 수 있거든요. 런던 근교의 촘촘한 통근 열차부터 스코틀랜드로 올라가는 장거리 열차까지, 마치 지도가 살아 숨 쉬는 것 같은 느낌이에요.

"그냥 예쁜 지도 하나 만든 거 아니야?" 싶을 수도 있는데요, 사실 이게 생각보다 훨씬 까다로운 엔지니어링 문제예요. 오늘은 이런 실시간 지도가 도대체 어떤 데이터로, 어떻게 만들어지는지 선배가 옆에서 알려주듯이 하나씩 풀어볼게요.

기차 위치는 대체 어디서 오는 걸까

먼저 데이터부터 이야기해야 해요. 영국은 철도 운영 데이터를 공공 데이터로 개방하고 있거든요. Network Rail이라는 기관이 'Data Feeds'라는 이름으로 실시간 피드(끊임없이 흘러들어오는 데이터 스트림)를 제공하는데, 개발자가 신청만 하면 누구나 받아볼 수 있어요.

여기서 핵심은, 이 데이터가 우리가 흔히 상상하는 GPS 좌표(위도·경도)가 아니라는 점이에요. 대표적인 피드가 TD(Train Describer)인데, 이게 뭐냐면 '몇 번 신호구간에 어떤 열차가 들어왔다'는 식으로만 알려줘요. 선로를 잘게 쪼갠 구역(berth라고 불러요)에 번호를 붙여놓고, 열차가 그 구역에 진입할 때마다 신호를 던져주는 거죠. 정확한 좌표를 주는 게 아니라 '지금 이 열차는 A구역 어딘가에 있다' 정도만 알려주는 거예요. 또 TRUST라는 피드는 '이 열차가 몇 시 몇 분에 어느 역을 통과·도착했다'는 이벤트를 보내줍니다.

그래서 지도를 만드는 사람 입장에서는, 이 구역 번호와 통과 이벤트를 실제 지도상의 위치로 '번역'하는 작업이 필요해요. 선로가 실제로 어떤 모양으로 휘어져 있는지(geometry라고 해요)를 미리 확보해두고, '이 열차는 A구역에서 B구역으로 가는 중이니까 지금쯤 이 선로의 이 지점을 지나고 있겠구나' 하고 추정해서 점을 찍는 거예요.

뚝뚝 끊기지 않고 부드럽게 움직이는 비결

문제는 이 신호가 초 단위로 실시간 좌표를 주는 게 아니라는 거예요. 열차가 다음 구역에 진입할 때까지는 새 신호가 안 와요. 그럼 그 사이에 화면에서 기차가 멈춰 있어야 할까요? 그러면 뚝뚝 끊겨서 보기 안 좋겠죠.

그래서 쓰는 기법이 보간(interpolation)이에요. 이게 뭐냐면, '이 열차가 이 구역을 평소 몇 초에 통과하니까, 그 시간 동안 선로 위를 이만큼씩 미끄러지듯 이동시키자' 하고 중간 위치를 계산으로 채워 넣는 거예요. 두 점 사이를 부드러운 애니메이션으로 이어주는 거죠. 그래서 우리 눈에는 기차가 자연스럽게 달리는 것처럼 보이는 거고요.

화면을 그리는 쪽도 신경 쓸 게 많아요. 수천 개의 점이 동시에 움직이는데 지도를 이미지로 처리하면 버벅거리거든요. 그래서 요즘은 MapLibre GL 같은 벡터 타일(vector tile) 기반 지도 라이브러리를 많이 써요. 지도를 그림이 아니라 좌표와 선의 데이터로 다뤄서 GPU로 빠르게 그리는 방식이에요. 그리고 서버에서 브라우저로 데이터를 계속 밀어 넣어야 하니까 WebSocket처럼 연결을 열어두고 실시간으로 주고받는 통신 방식을 쓰게 되죠.

업계에서는 이런 게 흔한 걸까

사실 '오픈 레일 데이터'를 활용한 취미 프로젝트는 영국에 꽤 두터운 커뮤니티가 있어요. OpenRailData 같은 그룹을 중심으로 개인 개발자들이 열차 지연 분석, 시간표 검색, 위치 추적 같은 걸 오랫동안 만들어 왔거든요. signalbox.io도 그런 흐름 위에 있는데, 그중에서도 시각적 완성도와 실시간성을 잘 다듬은 사례라고 볼 수 있어요.

비슷한 결의 프로젝트로는 항공기를 추적하는 Flightradar24나 선박을 보여주는 MarineTraffic이 있죠. 원리는 비슷해요. 흩어진 위치 신호를 모아서, 실제 지리 좌표로 변환하고, 부드럽게 보간해서 지도에 뿌린다. 데이터 소스만 다를 뿐 '실시간 위치 시각화'라는 공통 뼈대를 공유하는 거예요.

한국 개발자에게 주는 힌트

우리나라도 쓸 만한 데이터가 꽤 열려 있어요. 서울 지하철 실시간 도착정보 API, 공공데이터포털의 버스·열차 위치 정보 같은 걸 활용하면 비슷한 프로젝트를 충분히 만들어볼 수 있거든요. 특히 이런 실시간 시각화 프로젝트는 포트폴리오로도 강력해요. 데이터 수집, 좌표 변환, 스트리밍 통신, 지도 렌더링 최적화까지 프론트와 백엔드를 아우르는 기술이 한 번에 들어가니까요.

한 가지 배워둘 포인트는, '데이터가 완벽한 좌표로 오지 않을 때 어떻게 그럴듯하게 채워 넣을 것인가'라는 문제 해결 감각이에요. 실무에서 IoT 센서나 물류 추적 같은 걸 다루다 보면 데이터가 띄엄띄엄 오는 상황이 정말 흔하거든요. 이럴 때 보간과 추정을 어떻게 설계하느냐가 서비스 품질을 가르는 지점이 됩니다.

한 줄 정리: 흩어진 신호를 실제 위치로 번역하고, 사이를 부드럽게 채워 넣는 것 — 실시간 지도의 마법은 화려한 그래픽이 아니라 이 '데이터 번역'에 있어요.

여러분이라면 어떤 실시간 데이터로 이런 살아있는 지도를 만들어보고 싶으세요? 서울 버스? 아니면 배달 오토바이의 움직임 같은 것도 재밌지 않을까요?