b23042andClaude Fable 5
d38b842e8d
기존 GhiVideo 저장소 HEAD의 트래킹 소스 362개 파일을 복제. (node_modules·storage·빌드 산출물·대용량 미디어는 .gitignore 규칙대로 제외) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
159 lines
7.5 KiB
HTML
159 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang xml:lang>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="generator" content="pandoc" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
|
<title>보고서_2026-06-29_스테이션바_UI개선</title>
|
|
<style>
|
|
code{white-space: pre-wrap;}
|
|
span.smallcaps{font-variant: small-caps;}
|
|
span.underline{text-decoration: underline;}
|
|
div.column{display: inline-block; vertical-align: top; width: 50%;}
|
|
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
|
ul.task-list{list-style: none;}
|
|
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
|
</style>
|
|
<style type="text/css">@page {
|
|
size: A4;
|
|
margin: 18mm 16mm 16mm 16mm;
|
|
@bottom-center {
|
|
content: counter(page) " / " counter(pages);
|
|
font-family: "Malgun Gothic", sans-serif;
|
|
font-size: 9pt;
|
|
color: #999;
|
|
}
|
|
}
|
|
html { font-size: 11pt; }
|
|
body {
|
|
font-family: "Malgun Gothic", "Hancom Gothic", sans-serif;
|
|
color: #23272e;
|
|
line-height: 1.65;
|
|
max-width: 920px;
|
|
margin: 0 auto;
|
|
padding: 24px;
|
|
}
|
|
h1 {
|
|
font-size: 1.7rem;
|
|
color: #b45309;
|
|
border-bottom: 3px solid #f59e0b;
|
|
padding-bottom: 8px;
|
|
margin: 0 0 4px;
|
|
}
|
|
h2 {
|
|
font-size: 1.25rem;
|
|
color: #b45309;
|
|
border-bottom: 1px solid #e5d3b3;
|
|
padding-bottom: 5px;
|
|
margin-top: 1.6em;
|
|
}
|
|
h3 { font-size: 1.05rem; color: #92400e; margin-top: 1.1em; }
|
|
a { color: #b45309; }
|
|
hr { border: none; border-top: 1px solid #e2e2e2; margin: 1.6em 0; }
|
|
ul { padding-left: 1.25em; }
|
|
li { margin: 0.18em 0; }
|
|
strong { color: #1f2937; }
|
|
code {
|
|
font-family: "D2Coding", Consolas, monospace;
|
|
background: #f4f1ea;
|
|
border: 1px solid #e7e0d2;
|
|
border-radius: 3px;
|
|
padding: 0.5px 5px;
|
|
font-size: 0.92em;
|
|
}
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: 0.8em 0;
|
|
font-size: 0.95em;
|
|
}
|
|
th, td { border: 1px solid #d8d2c4; padding: 6px 10px; text-align: left; vertical-align: top; }
|
|
th { background: #fdf3df; color: #7c2d12; }
|
|
blockquote {
|
|
border-left: 4px solid #f59e0b;
|
|
margin: 0.8em 0;
|
|
padding: 0.2em 0 0.2em 14px;
|
|
color: #555;
|
|
background: #fffbf2;
|
|
}
|
|
|
|
h1, h2, h3 { break-after: avoid; }
|
|
</style>
|
|
<!--[if lt IE 9]>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<header id="title-block-header">
|
|
<h1 class="title">보고서_2026-06-29_스테이션바_UI개선</h1>
|
|
</header>
|
|
<h1 id="작업-보고서--주행영상-플레이어-스테이션바ui-개선">작업 보고서 — 주행영상 플레이어 스테이션바/UI 개선</h1>
|
|
<ul>
|
|
<li><strong>작성일</strong>: 2026-06-29</li>
|
|
<li><strong>대상</strong>: 스테이션(측점) 기반 주행영상 플레이어 (GhiVideo)</li>
|
|
<li><strong>범위</strong>: 하단 스테이션바 마커 정확도 개선, 영상 컨트롤 UI 재구성, 표시 일관성 정리</li>
|
|
</ul>
|
|
<hr />
|
|
<h2 id="1-개요">1. 개요</h2>
|
|
<p>하단 스테이션바의 <strong>측점 마커 표시 정확도 문제 2건을 수정</strong>하고, 영상 화면의 <strong>표시 옵션 컨트롤을 재생바로 통합·정리</strong>하여 조작 동선을 단순화했습니다. 또한 활성 상태 색상을 통일해 UI 일관성을 높였습니다.</p>
|
|
<hr />
|
|
<h2 id="2-버그-수정-정확도">2. 버그 수정 (정확도)</h2>
|
|
<h3 id="2-1-역驛-재진입-시-마커-누락-수정-">2-1. 역(驛) 재진입 시 마커 누락 수정 ★</h3>
|
|
<ul>
|
|
<li><strong>현상</strong>: 대전조차장처럼 드론이 같은 역을 두 번 지날 때, 한쪽 통과(예: 측점 162k080)에 역 마커(동그라미)가 표시되지 않음.</li>
|
|
<li><strong>원인</strong>: 역 마커를 '측점선 투영값' 한 가지 방식으로만 탐지 → 종점/조차장처럼 선형이 복잡한 구역에서는 투영 오차로 일부 통과가 인정 범위(±20m) 밖으로 벗어나 누락.</li>
|
|
<li><strong>조치</strong>: 측점 기준 탐지에 <strong>좌표 근접 탐지를 합집합으로 보강</strong>(중복은 자동 제거). 누락되던 재진입 통과까지 마커가 정상 표출.</li>
|
|
<li><strong>효과</strong>: 동일 역 다중 통과 구간의 마커 신뢰도 향상.</li>
|
|
</ul>
|
|
<h3 id="2-2-측점값-라벨-겹침-정리">2-2. 측점값 라벨 겹침 정리</h3>
|
|
<ul>
|
|
<li><strong>현상</strong>: 근접 통과 시 측점값(예: 157k990) 텍스트가 서로 겹쳐 판독 불가.</li>
|
|
<li><strong>조치</strong>: 라벨이 시각적으로 겹치면 <strong>먼저 나온(좌측) 값만 표시하고 뒤엣값은 숨김</strong>(아이콘·연결 점선은 유지).</li>
|
|
<li><strong>효과</strong>: 측점값 가독성 확보.</li>
|
|
</ul>
|
|
<hr />
|
|
<h2 id="3-uiux-개선-영상-컨트롤-재구성">3. UI/UX 개선 (영상 컨트롤 재구성)</h2>
|
|
<p>기존에 '화면표시 옵션' 창에 흩어져 있던 표시 토글을 <strong>하단 재생바로 통합</strong>하여, 영상을 보면서 바로 켜고 끌 수 있도록 동선을 개선했습니다.</p>
|
|
<h3 id="3-1-표시-토글을-재생바로-이동">3-1. 표시 토글을 재생바로 이동</h3>
|
|
<ul>
|
|
<li><strong>선형(중심선)</strong>, <strong>드론 궤적</strong>, <strong>좌측 노선 패널</strong> 토글을 재생바 버튼으로 이동.</li>
|
|
<li>기존 '화면표시 옵션' 창의 중복 버튼은 제거(기능은 동일, 단일 위치로 일원화).</li>
|
|
<li>상태를 설정 저장소로 통합 → 어디서 켜도 즉시 반영되고 <strong>새로고침해도 유지</strong>.</li>
|
|
</ul>
|
|
<h3 id="3-2-항상-표시-항목-정리">3-2. 항상 표시 항목 정리</h3>
|
|
<ul>
|
|
<li><strong>드론 GPS·절대고도 정보</strong>: ON/OFF 버튼 제거하고 <strong>상시 표시</strong>로 변경(요청사항).</li>
|
|
<li><strong>경로 표고 / 투명도</strong> 슬라이더: 드론 궤적 ON/OFF와 무관하게 <strong>항상 노출</strong>.</li>
|
|
</ul>
|
|
<h3 id="3-3-재생바-요소-배치-정리">3-3. 재생바 요소 배치 정리</h3>
|
|
<ul>
|
|
<li>최종 순서: <strong>좌측 패널 → 선형 → 드론궤적 → 드론 위치정보(GPS·고도) → 시설등급</strong></li>
|
|
<li>드론 궤적 버튼과 드론 위치정보를 인접 배치, 시설등급 옵션을 그 우측에 배치.</li>
|
|
<li>잘 쓰지 않는 'POI 겹침제외' 버튼은 숨김(기능/상태는 보존, 기본 ON).</li>
|
|
</ul>
|
|
<h3 id="3-4-활성-상태-색상-통일">3-4. 활성 상태 색상 통일</h3>
|
|
<ul>
|
|
<li>제각각이던 활성(ON) 색(파랑/초록/빨강/하늘색)을 <strong>앰버(겨자·오렌지 계열)로 통일</strong> → UI 일관성 향상.</li>
|
|
</ul>
|
|
<hr />
|
|
<h2 id="4-운영-메모-배포-방식">4. 운영 메모 (배포 방식)</h2>
|
|
<ul>
|
|
<li>사용자 화면(포트 55000)은 <strong>빌드 결과물을 서빙</strong>하는 구조로, 소스 수정 후 <strong>클라이언트 빌드 → 새로고침</strong>해야 반영됩니다. (이번 작업 중 빌드 누락으로 변경이 보이지 않던 이슈를 확인·정리)</li>
|
|
<li>데이터(드론 프레임/POI)는 폴더 선택으로 로드되므로, 새로고침 시 <strong>폴더 재선택</strong> 필요.</li>
|
|
</ul>
|
|
<hr />
|
|
<h2 id="5-검증">5. 검증</h2>
|
|
<ul>
|
|
<li>모든 변경 TypeScript 타입검사 + 프로덕션 빌드 통과.</li>
|
|
<li>역 재진입 마커 표출은 실제 화면(55000)에서 표시 확인 완료.</li>
|
|
</ul>
|
|
<hr />
|
|
<h2 id="6-향후-참고선택-개선안">6. 향후 참고(선택 개선안)</h2>
|
|
<ul>
|
|
<li>측점값 라벨 폭 추정 상수는 폰트 변경 시 재조정 필요.</li>
|
|
<li>활성 색조(앰버 명도)는 가독성에 따라 미세 조정 가능.</li>
|
|
<li>'POI 겹침제외'는 현재 숨김 상태이므로, 재노출이 필요하면 토글 복원 가능.</li>
|
|
</ul>
|
|
</body>
|
|
</html>
|