작업 보고서 — 주행영상 플레이어 스테이션바/UI 개선
- 작성일: 2026-06-29
- 대상: 스테이션(측점) 기반 주행영상 플레이어 (GhiVideo)
- 범위: 하단 스테이션바 마커 정확도 개선, 영상 컨트롤 UI 재구성, 표시 일관성 정리
1. 개요
하단 스테이션바의 측점 마커 표시 정확도 문제 2건을 수정하고, 영상 화면의 표시 옵션 컨트롤을 재생바로 통합·정리하여 조작 동선을 단순화했습니다. 또한 활성 상태 색상을 통일해 UI 일관성을 높였습니다.
2. 버그 수정 (정확도)
2-1. 역(驛) 재진입 시 마커 누락 수정 ★
- 현상: 대전조차장처럼 드론이 같은 역을 두 번 지날 때, 한쪽 통과(예: 측점 162k080)에 역 마커(동그라미)가 표시되지 않음.
- 원인: 역 마커를 '측점선 투영값' 한 가지 방식으로만 탐지 → 종점/조차장처럼 선형이 복잡한 구역에서는 투영 오차로 일부 통과가 인정 범위(±20m) 밖으로 벗어나 누락.
- 조치: 측점 기준 탐지에 좌표 근접 탐지를 합집합으로 보강(중복은 자동 제거). 누락되던 재진입 통과까지 마커가 정상 표출.
- 효과: 동일 역 다중 통과 구간의 마커 신뢰도 향상.
2-2. 측점값 라벨 겹침 정리
- 현상: 근접 통과 시 측점값(예: 157k990) 텍스트가 서로 겹쳐 판독 불가.
- 조치: 라벨이 시각적으로 겹치면 먼저 나온(좌측) 값만 표시하고 뒤엣값은 숨김(아이콘·연결 점선은 유지).
- 효과: 측점값 가독성 확보.
3. UI/UX 개선 (영상 컨트롤 재구성)
기존에 '화면표시 옵션' 창에 흩어져 있던 표시 토글을 하단 재생바로 통합하여, 영상을 보면서 바로 켜고 끌 수 있도록 동선을 개선했습니다.
3-1. 표시 토글을 재생바로 이동
- 선형(중심선), 드론 궤적, 좌측 노선 패널 토글을 재생바 버튼으로 이동.
- 기존 '화면표시 옵션' 창의 중복 버튼은 제거(기능은 동일, 단일 위치로 일원화).
- 상태를 설정 저장소로 통합 → 어디서 켜도 즉시 반영되고 새로고침해도 유지.
3-2. 항상 표시 항목 정리
- 드론 GPS·절대고도 정보: ON/OFF 버튼 제거하고 상시 표시로 변경(요청사항).
- 경로 표고 / 투명도 슬라이더: 드론 궤적 ON/OFF와 무관하게 항상 노출.
3-3. 재생바 요소 배치 정리
- 최종 순서: 좌측 패널 → 선형 → 드론궤적 → 드론 위치정보(GPS·고도) → 시설등급
- 드론 궤적 버튼과 드론 위치정보를 인접 배치, 시설등급 옵션을 그 우측에 배치.
- 잘 쓰지 않는 'POI 겹침제외' 버튼은 숨김(기능/상태는 보존, 기본 ON).
3-4. 활성 상태 색상 통일
- 제각각이던 활성(ON) 색(파랑/초록/빨강/하늘색)을 앰버(겨자·오렌지 계열)로 통일 → UI 일관성 향상.
4. 운영 메모 (배포 방식)
- 사용자 화면(포트 55000)은 빌드 결과물을 서빙하는 구조로, 소스 수정 후 클라이언트 빌드 → 새로고침해야 반영됩니다. (이번 작업 중 빌드 누락으로 변경이 보이지 않던 이슈를 확인·정리)
- 데이터(드론 프레임/POI)는 폴더 선택으로 로드되므로, 새로고침 시 폴더 재선택 필요.
5. 검증
- 모든 변경 TypeScript 타입검사 + 프로덕션 빌드 통과.
- 역 재진입 마커 표출은 실제 화면(55000)에서 표시 확인 완료.
6. 향후 참고(선택 개선안)
- 측점값 라벨 폭 추정 상수는 폰트 변경 시 재조정 필요.
- 활성 색조(앰버 명도)는 가독성에 따라 미세 조정 가능.
- 'POI 겹침제외'는 현재 숨김 상태이므로, 재노출이 필요하면 토글 복원 가능.