하늘 위 비행기를 3D 조종석 시점으로 실시간 따라가는 웹앱, flight-viz

비행기 추적, 이제 조종석에서 직접 보세요

비행기 추적 서비스라고 하면 Flightradar24 같은 걸 떠올리실 텐데요. 지도 위에 비행기 아이콘이 천천히 움직이는, 그 익숙한 2D 화면 말이에요. flight-viz라는 프로젝트는 여기서 한 발 더 나아갔어요. 실제 조종석에 앉은 것처럼, 해당 비행기의 콕핏 시점에서 하늘과 지상을 3D로 내려다볼 수 있게 만든 거예요.

주변에 보이는 아무 비행기나 골라서 "저 비행기 조종사는 지금 뭘 보고 있을까?"를 브라우저에서 바로 체험할 수 있다고 생각하면 돼요. 별도 앱 설치도 필요 없이, 웹 브라우저 하나면 충분하고요.

어떻게 동작하나요?

flight-viz의 핵심은 두 가지 기술의 조합이에요. 실시간 항공 데이터와 웹 기반 3D 렌더링이죠.

먼저 항공 데이터 쪽을 볼게요. 비행기는 ADS-B(Automatic Dependent Surveillance-Broadcast)라는 시스템을 통해 자기 위치, 고도, 속도, 방향 같은 정보를 주기적으로 무선 신호로 쏘고 있어요. 이게 뭐냐면, 비행기가 "나 지금 여기 있고, 이 높이에서, 이 방향으로, 이 속도로 날고 있어"라고 계속 주변에 알려주는 거예요. 원래는 항공 관제를 위한 시스템인데, 이 신호는 누구나 수신할 수 있어서 Flightradar24 같은 민간 서비스도 이 데이터를 기반으로 만들어진 거예요.

flight-viz는 이 ADS-B 데이터를 받아서, 해당 비행기의 위치와 방향에 맞게 3D 카메라를 배치해요. 조종석 위치에 카메라를 놓고, 비행기가 향하는 방향을 바라보게 설정하는 거죠. 그러면 브라우저에서 마치 그 비행기를 직접 조종하는 것 같은 시점이 만들어져요.

기술적으로 눈여겨볼 포인트

웹 브라우저에서 이런 3D 비행 시뮬레이션급 화면을 보여주려면 몇 가지 기술적 과제를 풀어야 해요.

첫째, 3D 렌더링이에요. WebGL이나 Three.js 같은 라이브러리를 써서 브라우저 안에서 실시간으로 3D 장면을 그려내야 해요. 지형 데이터를 불러와서 산, 평야, 도시, 활주로 등을 표현하고, 하늘과 구름도 그려야 하고요. 고도 3,000피트에서 내려다보는 시야각과 지형의 스케일을 정확하게 맞추는 게 보기보다 까다로운 작업이에요. 너무 가까이 보이면 어색하고, 너무 멀면 밋밋해지거든요.

둘째, 실시간 데이터와 3D 장면의 동기화예요. 비행기 위치 데이터는 보통 몇 초 간격으로 업데이트되는데, 3D 장면은 초당 60프레임으로 부드럽게 움직여야 해요. 이 간극을 메우려면 데이터 업데이트 사이의 움직임을 보간(interpolation)해야 해요. 이게 뭐냐면, "5초 전에 여기 있었고 지금 저기 있으니까, 그 사이는 이렇게 움직였을 거야"라고 추정해서 부드럽게 이어주는 거예요. 이걸 안 하면 비행기가 순간이동하는 것처럼 뚝뚝 끊겨 보이거든요.

셋째, URL 기반 상태 설계예요. flight-viz의 URL을 보면 lat=40.64&lon=-73.78&alt=3000&hdg=220&spd=130&cs=DAL123 이런 파라미터가 붙어 있어요. 위도(lat), 경도(lon), 고도(alt), 방향(hdg), 속도(spd), 항공편 콜사인(cs)을 URL로 지정할 수 있는 거예요. 이렇게 하면 링크 하나만 공유해도 다른 사람이 똑같은 비행기를 똑같은 시점에서 볼 수 있어요. 이런 "공유 가능한 상태를 URL로 표현하기"는 웹 앱 설계에서 되게 중요한 패턴인데, 잘 적용된 좋은 사례예요.

비슷한 서비스들과 뭐가 다른가요?

항공기 추적 분야에서 가장 유명한 건 단연 Flightradar24예요. 전 세계 항공기를 실시간으로 추적할 수 있고, 3D 뷰도 제공하긴 하는데 주로 비행기를 바깥에서 바라보는 외부 시점이에요. 콕핏 안에서 보는 느낌과는 다르죠.

FlightAware도 비슷한 서비스를 제공하고, Google Earth에서도 항공기 데이터와 3D 지형을 결합할 수 있지만 별도 앱이 필요하고 실시간 스트리밍에 최적화되어 있지는 않아요.

오픈소스 쪽에서는 tar1090 같은 ADS-B 데이터 시각화 프로젝트가 있는데, 대부분 2D 지도 기반이에요. 웹 브라우저에서 별도 설치 없이 콕핏 1인칭 시점을 3D로 보여주는 건 flight-viz만의 꽤 독특한 접근이라고 할 수 있어요.

한국 개발자에게 주는 시사점

이 프로젝트가 보여주는 핵심 아이디어는 "공개 데이터 + 웹 3D 기술 = 인상적인 결과물"이에요. 데이터를 직접 만들 필요가 없어요. 이미 공개된 실시간 데이터를 어떻게 보여줄지만 잘 고민하면, 이렇게 임팩트 있는 프로젝트가 나올 수 있는 거예요.

한국에서도 공공데이터포털(data.go.kr)에서 다양한 실시간 데이터를 API로 제공하고 있거든요. 서울시 버스 실시간 위치, 지하철 도착 정보, 전국 대기질 데이터, 공공자전거 대여 현황 같은 것들이요. 이런 데이터를 3D로 시각화하면 어떨까요? 예를 들어, 서울 지하철 노선을 3D로 그리고 열차가 실시간으로 달리는 걸 보여준다거나, 전국 미세먼지 농도를 3D 지형 위에 히트맵으로 표현한다거나요.

웹 3D 기술도 요즘 많이 성숙해졌어요. Three.js는 여전히 강력하고, React Three Fiber를 쓰면 React 개발자도 비교적 쉽게 3D 웹 앱을 만들 수 있어요. Mapbox GL JS나 Cesium 같은 지도 + 3D 라이브러리를 활용하면 지형 렌더링은 직접 구현하지 않아도 되고요. 사이드 프로젝트나 포트폴리오로도 눈에 확 띄는 결과물을 만들 수 있는 조합이에요.

마무리

flight-viz는 공개 항공 데이터와 웹 3D 기술을 결합해서, "하늘 위 비행기의 시점을 브라우저에서 체험한다"는 재밌는 아이디어를 깔끔하게 구현한 프로젝트예요. 여러분이라면 어떤 공개 데이터를 3D로 시각화해보고 싶으세요? 서울 버스의 1인칭 시점? 배달 라이더의 실시간 경로? 상상해보면 꽤 재밌는 아이디어가 나올 것 같아요.