신도시 버스정보 지도서비스
광역자치단체가 신도시 주민을 위해 만든 버스정보 웹 지도 서비스의 개발에 참여했습니다. 주민은 노선별 버스 위치와 정류장 도착 예정 시간을 지도 위에서 실시간으로 확인합니다. 대중교통이 아직 낯선 신규 입주민이 쓰는 정보라, 노선 · 정류장 · 버스가 한눈에 읽히지 않으면 서비스를 쓸 이유가 없었습니다. 정유사 웹 지도에서 다진 지도 기술을 공공 교통에 맞게 넓히고, 교통 데이터를 지도 화면까지 잇는 일을 맡았습니다.
버스가 지금 어디 있고 언제 오는지 보여 주는 지도
신도시 버스정보 지도 서비스는 주민이 노선별 버스 위치와 도착 정보를 웹 지도 위에서 실시간으로 확인하는 공공 서비스입니다. 버스정보 시스템에서는 버스마다 단 단말기가 위성으로 잡은 위치를 센터에 보내고, 센터는 그 위치로 정류장마다 도착 예정 시간을 계산해 인터넷과 정류장 안내 전광판에 띄웁니다. 웹 지도는 주민이 버스를 타러 나가기 전에 그 정보를 확인하는 창구입니다. 버스 노선을 아직 모르는 신규 입주민이 주로 쓰는 정보라, 지도를 열면 정류장과 다가오는 버스가 바로 보여야 했습니다. 이 화면을 구현하는 개발에 참여했습니다.

노선 · 정류장 · 버스를 지도 한 장에 겹친 시각화
버스 정보는 노선, 정류장, 버스 위치, 도착 정보가 서로 얽힌 데이터입니다. 버스정보 서비스를 여는 주민이 알고 싶은 것은 대개 둘입니다. 내가 탈 정류장이 어디인지, 내 버스가 지금 몇 정류장 앞에 있는지입니다. 이 데이터를 표로 늘어놓으면 주민은 자기 노선을 찾는 데서부터 막힙니다. 네 가지를 지도 위에 함께 그려, 어떤 노선의 버스가 어느 정류장 가까이 와 있는지를 지도 한 장에서 읽게 했습니다.

정유사 웹 지도에서 공공 교통으로 넓힌 지도 기술
버스정보 지도는 앞서 정유사 웹 지도와 주유소 위치 안내 서비스에서 다진 지도 기술 위에 만들었습니다. 지도 표시, 이동, 확대 · 축소, 위치 표현을 버스정보 서비스가 요구하는 대로 넓혔습니다. 제자리에 있는 주유소를 보여 주던 지도가 이 서비스에서는 노선을 따라 움직이는 버스를 보여 주게 됐습니다.

많은 교통 데이터를 지도 화면까지 잇는 처리 흐름
버스 위치와 도착 정보는 계속 들어오는 많은 양의 교통 데이터입니다. 이 데이터를 받아 웹 지도 화면에 필요한 형태로 바꾸는 처리 흐름을 구성하고, 지도 화면과 연동했습니다. 실제 신도시 주민이 쓰고 의견이 돌아오는 서비스였고, 이후 공공 서비스와 지도 서비스를 이어 가는 출발점이 됐습니다.

이 작업의 포인트
노선별 버스 위치와 도착 정보를 지도 위에 실시간 표시
웹 지도 기술을 공공 교통 서비스에 맞게 확장
많은 양의 교통 데이터를 지도 화면까지 잇는 처리 흐름
인사이트
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



