b23042andClaude Opus 4.8
fe25ce00f1
- 발표자료(좌표투영·측점기반재생) 갱신 + 그림/PDF - 특허 출원 초안 및 도면 - AI 영상요약 서비스 작업기록(docs/history) - 관련 scripts 추가 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
234 lines
18 KiB
Markdown
234 lines
18 KiB
Markdown
# GhiVideo 핵심 기술 두 가지 (발표 자료)
|
|
|
|
> 드론 주행영상 플레이어 **GhiVideo** 의 두 가지 핵심 기술을 **초등학생도 이해할 수 있게** 그림으로 설명합니다.
|
|
> **① 드론 좌표를 영상에 딱 맞추기(좌표 투영)** · **② 시간이 아니라 '측점'으로 움직이는 재생 바**
|
|
|
|
<style>
|
|
figure.fig{margin:20px 0;text-align:center;page-break-inside:avoid;break-inside:avoid;}
|
|
figure.fig svg{width:100%;max-width:700px;height:auto;border:1px solid #e7e0d2;border-radius:10px;background:#fffdf8;}
|
|
figure.fig figcaption{font-size:0.9em;color:#777;margin-top:6px;}
|
|
text{font-family:'Malgun Gothic','Hancom Gothic',sans-serif;}
|
|
h2{border-top:3px solid #e7e0d2;padding-top:14px;margin-top:34px;}
|
|
</style>
|
|
|
|
---
|
|
|
|
## 0. 한눈에 — GhiVideo는 뭐가 특별한가요?
|
|
|
|
보통 영상 플레이어는 "그냥 영상 재생"이 끝이에요. GhiVideo는 여기에 **두 가지 마법**을 더했어요.
|
|
|
|
<figure class="fig">
|
|
<svg viewBox="0 0 700 210" role="img" aria-label="GhiVideo 두 가지 핵심">
|
|
<rect x="30" y="30" width="300" height="150" rx="12" fill="#eff6ff" stroke="#2563eb"/>
|
|
<text x="180" y="58" text-anchor="middle" font-size="14" font-weight="bold" fill="#1e3a8a">① 좌표 투영</text>
|
|
<text x="180" y="86" text-anchor="middle" font-size="11" fill="#1e40af">지도 속 터널·다리 위치를</text>
|
|
<text x="180" y="106" text-anchor="middle" font-size="11" fill="#1e40af">영상 화면의 정확한 자리에</text>
|
|
<text x="180" y="126" text-anchor="middle" font-size="11" fill="#1e40af">이름표로 딱 붙이기</text>
|
|
<text x="180" y="158" text-anchor="middle" font-size="22">🚇🏷️</text>
|
|
<rect x="370" y="30" width="300" height="150" rx="12" fill="#f0fdf4" stroke="#16a34a"/>
|
|
<text x="520" y="58" text-anchor="middle" font-size="14" font-weight="bold" fill="#166534">② 측점 기반 재생 바</text>
|
|
<text x="520" y="86" text-anchor="middle" font-size="11" fill="#15803d">시간(0:00) 대신</text>
|
|
<text x="520" y="106" text-anchor="middle" font-size="11" fill="#15803d">철도 '측점(160k130)'으로</text>
|
|
<text x="520" y="126" text-anchor="middle" font-size="11" fill="#15803d">찾아가는 재생 바</text>
|
|
<text x="520" y="158" text-anchor="middle" font-size="22">📏▶️</text>
|
|
</svg>
|
|
</figure>
|
|
|
|
---
|
|
|
|
# Part 1. 드론 좌표를 영상에 '딱' 맞추기 🎯
|
|
|
|
## 1-1. 풀고 싶은 문제
|
|
|
|
드론이 **앞으로 날며** 앞쪽 땅을 비스듬히 찍어요. 이 영상 위에 **"여기가 회덕터널!"** 이름표를 붙이고 싶어요.
|
|
드론이 계속 움직이니까 이름표도 **졸졸 따라다녀야** 해요.
|
|
|
|
<figure class="fig">
|
|
<svg viewBox="0 0 700 220" role="img" aria-label="드론이 앞을 보며 촬영">
|
|
<defs>
|
|
<marker id="mv" markerWidth="12" markerHeight="12" refX="8" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="#2563eb"/></marker>
|
|
<marker id="mc" markerWidth="12" markerHeight="12" refX="8" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="#ea580c"/></marker>
|
|
</defs>
|
|
<rect x="0" y="0" width="700" height="150" fill="#eef6ff"/><rect x="0" y="150" width="700" height="70" fill="#eaf7ea"/>
|
|
<line x1="0" y1="150" x2="700" y2="150" stroke="#bcd8bc" stroke-width="2"/>
|
|
<g transform="translate(110,50)"><rect x="-24" y="-7" width="48" height="14" rx="4" fill="#334155"/><circle cx="-24" cy="0" r="8" fill="none" stroke="#334155" stroke-width="3"/><circle cx="24" cy="0" r="8" fill="none" stroke="#334155" stroke-width="3"/><text x="0" y="-14" text-anchor="middle" font-size="12" font-weight="bold" fill="#334155">드론</text></g>
|
|
<line x1="140" y1="50" x2="280" y2="50" stroke="#2563eb" stroke-width="3" stroke-dasharray="7 5" marker-end="url(#mv)"/><text x="220" y="40" text-anchor="middle" font-size="12" fill="#2563eb" font-weight="bold">이동 방향 ▶</text>
|
|
<line x1="118" y1="58" x2="470" y2="148" stroke="#ea580c" stroke-width="3" marker-end="url(#mc)"/><text x="300" y="105" text-anchor="middle" font-size="12" fill="#ea580c" font-weight="bold">카메라 시선(앞·아래로 비스듬히)</text>
|
|
<text x="485" y="145" font-size="20">🚇</text><text x="520" y="175" text-anchor="middle" font-size="12" font-weight="bold" fill="#166534">회덕터널 (앞쪽!)</text>
|
|
<line x1="60" y1="200" x2="660" y2="200" stroke="#8a7a5c" stroke-width="5"/>
|
|
</svg>
|
|
<figcaption>드론은 앞으로 날며 앞쪽 땅을 비스듬히 본다. 터널은 드론 바로 밑이 아니라 '앞쪽'에 찍힌다.</figcaption>
|
|
</figure>
|
|
|
|
## 1-2. 핵심 아이디어 — '창문에 스티커 붙이기' 🪟
|
|
|
|
카메라(눈)에서 터널로 **선을 긋고**, 그 선이 **화면(창문)을 뚫는 점**에 이름표를 붙여요.
|
|
|
|
<figure class="fig">
|
|
<svg viewBox="0 0 700 210" role="img" aria-label="창문 스티커 원리">
|
|
<defs><marker id="me" markerWidth="12" markerHeight="12" refX="8" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="#0f766e"/></marker></defs>
|
|
<text x="70" y="115" text-anchor="middle" font-size="30">👁️</text><text x="70" y="150" text-anchor="middle" font-size="12" fill="#0f766e" font-weight="bold">카메라(눈)</text>
|
|
<text x="620" y="100" text-anchor="middle" font-size="36">🌳</text><text x="620" y="140" text-anchor="middle" font-size="12" fill="#166534" font-weight="bold">터널(나무)</text>
|
|
<line x1="95" y1="108" x2="600" y2="88" stroke="#0f766e" stroke-width="2.5" marker-end="url(#me)"/>
|
|
<rect x="330" y="35" width="80" height="150" rx="6" fill="#e0f2fe" stroke="#0284c7" stroke-width="2" opacity="0.8"/><text x="370" y="200" text-anchor="middle" font-size="12" fill="#0369a1" font-weight="bold">창문 = 영상 화면</text>
|
|
<circle cx="370" cy="97" r="8" fill="#ef4444"/><text x="370" y="78" text-anchor="middle" font-size="12" fill="#b91c1c" font-weight="bold">스티커!(이름표 자리)</text>
|
|
</svg>
|
|
</figure>
|
|
|
|
## 1-3. 실제로는 3단계로 계산해요
|
|
|
|
<figure class="fig">
|
|
<svg viewBox="0 0 700 140" role="img" aria-label="투영 3단계">
|
|
<defs><marker id="a3" markerWidth="11" markerHeight="11" refX="7" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7 Z" fill="#7c3aed"/></marker></defs>
|
|
<rect x="20" y="45" width="190" height="50" rx="8" fill="#ecfdf5" stroke="#16a34a"/><text x="115" y="68" text-anchor="middle" font-size="12" font-weight="bold" fill="#166534">① 미터로 바꿔</text><text x="115" y="85" text-anchor="middle" font-size="10" fill="#166534">드론 기준 위치 재기</text>
|
|
<line x1="210" y1="70" x2="245" y2="70" stroke="#7c3aed" stroke-width="2" marker-end="url(#a3)"/>
|
|
<rect x="250" y="45" width="190" height="50" rx="8" fill="#eff6ff" stroke="#2563eb"/><text x="345" y="68" text-anchor="middle" font-size="12" font-weight="bold" fill="#1e3a8a">② 카메라 기울기만큼</text><text x="345" y="85" text-anchor="middle" font-size="10" fill="#1e3a8a">방향 돌리기(회전)</text>
|
|
<line x1="440" y1="70" x2="475" y2="70" stroke="#7c3aed" stroke-width="2" marker-end="url(#a3)"/>
|
|
<rect x="480" y="45" width="200" height="50" rx="8" fill="#fdf2f8" stroke="#db2777"/><text x="580" y="68" text-anchor="middle" font-size="12" font-weight="bold" fill="#9d174d">③ 화면 점 찾기</text><text x="580" y="85" text-anchor="middle" font-size="10" fill="#9d174d">(창문 스티커 · 핀홀)</text>
|
|
</svg>
|
|
<figcaption>결과: "터널은 화면 가로 60%, 세로 70% 지점" → 거기에 이름표를 딱!</figcaption>
|
|
</figure>
|
|
|
|
| 단계 | 진짜 기술 | 쉽게 말하면 |
|
|
|---|---|---|
|
|
| ① 미터로 바꾸기 | proj4 · EPSG:5186(한국 TM) | 둥근 지구를 평평한 미터 지도로 펴기 |
|
|
| ② 방향 돌리기 | 회전행렬(yaw·pitch·roll) | 카메라 기울기를 숫자표로 한 번에 적용 |
|
|
| ③ 화면 점 찾기 | 핀홀 카메라 모델·초점거리 | 바늘구멍 사진기 원리로 점 찍기 |
|
|
| (+) 부드럽게 | 보간 · EMA 평활 | 30장 사이 채우고 드론 떨림 없애기 |
|
|
|
|
> 💡 원래 파이썬 실험 프로그램(`advanced_tuner_v2.py`)의 계산을 **웹 브라우저(TypeScript)로 이식** → 설치 없이 실행.
|
|
|
|
---
|
|
|
|
# Part 2. 시간이 아니라 '측점'으로 움직이는 재생 바 📏
|
|
|
|
## 2-1. 무엇이 다른가요?
|
|
|
|
보통 플레이어의 아래 막대는 **시간(0:00 ~ 끝)** 기준이에요. 그런데 철도 점검은 **"몇 분"이 아니라 "몇 측점"** 으로 말해요. 그래서 GhiVideo는 막대를 **측점(측점값, 예: 160k130)** 기준으로 바꿨어요.
|
|
|
|
<figure class="fig">
|
|
<svg viewBox="0 0 700 230" role="img" aria-label="시간 축 재생바 vs 측점 축 재생바">
|
|
<text x="350" y="24" text-anchor="middle" font-size="13" font-weight="bold" fill="#475569">보통 플레이어 (시간 축)</text>
|
|
<rect x="40" y="38" width="620" height="26" rx="6" fill="#e5e7eb" stroke="#9ca3af"/>
|
|
<rect x="40" y="38" width="260" height="26" rx="6" fill="#9ca3af"/>
|
|
<circle cx="300" cy="51" r="10" fill="#374151"/>
|
|
<text x="45" y="82" font-size="11" fill="#374151">0:00</text><text x="330" y="82" font-size="11" fill="#374151">03:12</text><text x="632" y="82" font-size="11" fill="#374151">09:28</text>
|
|
<text x="350" y="104" text-anchor="middle" font-size="11" fill="#6b7280">"3분 12초 지점" — 여기가 어디 선로인지 모름 😵</text>
|
|
<text x="350" y="150" text-anchor="middle" font-size="13" font-weight="bold" fill="#166534">GhiVideo (측점 축)</text>
|
|
<rect x="40" y="164" width="620" height="26" rx="6" fill="#fde9c8" stroke="#e0a94f"/>
|
|
<rect x="40" y="164" width="300" height="26" rx="6" fill="#f59e0b"/>
|
|
<circle cx="340" cy="177" r="11" fill="#ea580c"/><text x="340" y="181" text-anchor="middle" font-size="9" fill="#fff" font-weight="bold">160k</text>
|
|
<line x1="200" y1="160" x2="200" y2="194" stroke="#0284c7" stroke-width="2"/><text x="200" y="210" text-anchor="middle" font-size="9" fill="#0369a1">회덕터널</text>
|
|
<line x1="470" y1="160" x2="470" y2="194" stroke="#0284c7" stroke-width="2"/><text x="470" y="210" text-anchor="middle" font-size="9" fill="#0369a1">회덕천교</text>
|
|
<text x="45" y="228" font-size="11" fill="#166534">대전조차장</text><text x="600" y="228" font-size="11" fill="#166534">신탄진</text>
|
|
</svg>
|
|
<figcaption>시간 축은 "몇 분"만 안다. 측점 축은 "지금 어느 선로 위치(측점)"와 "무슨 구조물 근처"인지 바로 보인다.</figcaption>
|
|
</figure>
|
|
|
|
## 2-2. 측점이 뭐예요? 📍
|
|
|
|
철도에서 **출발점부터 몇 미터 왔는지**를 나타내는 '거리 이정표'예요.
|
|
`160k130` = 출발점에서 **160km + 130m** 지점. (도로의 'km 표지판'과 똑같아요!)
|
|
|
|
## 2-3. 어떻게 만들었나 — "시간↔측점 대응표" 🗺️
|
|
|
|
비밀은 **드론 GPS**예요. 영상의 **매 프레임(사진 한 장)** 마다 두 가지를 계산해 **짝지어** 둬요:
|
|
|
|
<figure class="fig">
|
|
<svg viewBox="0 0 700 250" role="img" aria-label="프레임마다 시간과 측점을 짝짓기">
|
|
<defs><marker id="ad" markerWidth="10" markerHeight="10" refX="7" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7 Z" fill="#7c3aed"/></marker></defs>
|
|
<rect x="250" y="15" width="200" height="40" rx="8" fill="#f1f5f9" stroke="#475569"/>
|
|
<text x="350" y="33" text-anchor="middle" font-size="12" font-weight="bold" fill="#334155">영상 프레임 (사진 1장)</text>
|
|
<text x="350" y="49" text-anchor="middle" font-size="10" fill="#475569">번호 + 드론 GPS 기록</text>
|
|
<line x1="300" y1="55" x2="200" y2="80" stroke="#7c3aed" stroke-width="2" marker-end="url(#ad)"/>
|
|
<line x1="400" y1="55" x2="500" y2="80" stroke="#7c3aed" stroke-width="2" marker-end="url(#ad)"/>
|
|
<rect x="70" y="82" width="260" height="52" rx="8" fill="#eff6ff" stroke="#2563eb"/>
|
|
<text x="200" y="103" text-anchor="middle" font-size="12" font-weight="bold" fill="#1e3a8a">프레임번호 ÷ fps = 시간</text>
|
|
<text x="200" y="122" text-anchor="middle" font-size="10" fill="#1e40af">예: 5760번 ÷ 30 = 192초</text>
|
|
<rect x="370" y="82" width="270" height="52" rx="8" fill="#f0fdf4" stroke="#16a34a"/>
|
|
<text x="505" y="103" text-anchor="middle" font-size="12" font-weight="bold" fill="#166534">GPS → 측점 (선로에 투영)</text>
|
|
<text x="505" y="122" text-anchor="middle" font-size="10" fill="#15803d">예: 위/경도 → 160k130</text>
|
|
<line x1="200" y1="134" x2="330" y2="170" stroke="#7c3aed" stroke-width="2" marker-end="url(#ad)"/>
|
|
<line x1="505" y1="134" x2="370" y2="170" stroke="#7c3aed" stroke-width="2" marker-end="url(#ad)"/>
|
|
<rect x="210" y="172" width="280" height="46" rx="8" fill="#fef3c7" stroke="#ca8a04"/>
|
|
<text x="350" y="193" text-anchor="middle" font-size="12" font-weight="bold" fill="#854d0e">시간 ↔ 측점 대응표 완성!</text>
|
|
<text x="350" y="210" text-anchor="middle" font-size="10" fill="#a16207">"192초 = 160k130" 처럼 서로 변환 가능</text>
|
|
</svg>
|
|
<figcaption>프레임마다 (시간)과 (측점)을 계산해 짝지으면, 시간↔측점을 자유롭게 오갈 수 있다 — 재생 기준을 '시간'에서 '스테이션(측점)'으로 전환하기 위한 색인 구조.</figcaption>
|
|
</figure>
|
|
|
|
**GPS를 측점으로 바꾸는 법(②):** 드론 GPS 점을 **선로(측점들을 이은 선)에 수직으로 툭 떨어뜨려**, 그 발자국이 몇 측점인지 읽어요. (코드: `projectToChain` / `projectChainage`)
|
|
|
|
<figure class="fig">
|
|
<svg viewBox="0 0 700 160" role="img" aria-label="드론 GPS를 선로에 수직 투영">
|
|
<line x1="60" y1="110" x2="640" y2="70" stroke="#8a7a5c" stroke-width="6"/>
|
|
<text x="70" y="135" font-size="11" fill="#6b4f2a">선로(측점들을 이은 선)</text>
|
|
<circle cx="360" cy="30" r="7" fill="#2563eb"/><text x="360" y="22" text-anchor="middle" font-size="10" fill="#1e3a8a">드론 GPS</text>
|
|
<line x1="360" y1="30" x2="373" y2="93" stroke="#ef4444" stroke-width="2" stroke-dasharray="4 3"/>
|
|
<circle cx="373" cy="93" r="5" fill="#ef4444"/><text x="410" y="96" font-size="11" fill="#b91c1c" font-weight="bold">발자국 = 160k130</text>
|
|
</svg>
|
|
<figcaption>드론이 선로 바로 위가 아니어도, 수직으로 내린 발자국 위치로 '측점값'을 정확히 읽는다.</figcaption>
|
|
</figure>
|
|
|
|
## 2-4. 똑똑한 점 3가지 ✨
|
|
|
|
### ① 막대의 가로축 = '시간'이 아니라 '실제 이동 거리'
|
|
|
|
드론이 **멈춰서 맴돌면 시간은 흐르지만 위치는 그대로**예요. 이때 막대 커서가 계속 가면 이상하죠.
|
|
그래서 가로축을 **실제 이동한 거리(측점 변화량 누적)** 로 만들었어요. → **멈추면 커서도 멈추고, 움직이면 전진.**
|
|
|
|
<figure class="fig">
|
|
<svg viewBox="0 0 700 150" role="img" aria-label="이동거리 축 - 멈추면 커서 정지">
|
|
<text x="175" y="22" text-anchor="middle" font-size="12" font-weight="bold" fill="#475569">시간 축(옛방식)</text>
|
|
<rect x="40" y="34" width="270" height="20" rx="5" fill="#e5e7eb" stroke="#9ca3af"/><circle cx="230" cy="44" r="8" fill="#374151"/>
|
|
<text x="175" y="78" text-anchor="middle" font-size="10" fill="#b91c1c">드론이 멈춰도 커서가 계속 감 😵</text>
|
|
<text x="525" y="22" text-anchor="middle" font-size="12" font-weight="bold" fill="#166534">이동거리 축(새방식)</text>
|
|
<rect x="390" y="34" width="270" height="20" rx="5" fill="#fde9c8" stroke="#e0a94f"/><circle cx="560" cy="44" r="8" fill="#ea580c"/>
|
|
<text x="525" y="78" text-anchor="middle" font-size="10" fill="#166534">멈추면 커서도 멈춤, 움직일 때만 전진 😎</text>
|
|
</svg>
|
|
</figure>
|
|
|
|
### ② 방향을 색으로 — 측점이 늘면 주황, 줄면 하늘색
|
|
|
|
드론이 앞으로 가면(측점 증가) **주황**, 되돌아오면(측점 감소) **하늘색** 으로 칠해 **진행 방향**을 한눈에 보여줘요.
|
|
|
|
### ③ 구조물을 제자리에 — 교량·터널·역은 '측점값'에 배치
|
|
|
|
교량·터널·역사를 각자의 **측점값 위치**에 표시해서, "이 구조물이 어디쯤인지" 막대만 봐도 알 수 있어요.
|
|
|
|
## 2-5. 측점으로 '찾아가기'(Seek)
|
|
|
|
측점값을 입력하거나 막대를 누르면 → **그 측점이 나오는 시간을 지도에서 찾아 → 그 시간으로 이동**해요.
|
|
(시간↔측점 대응표가 있으니 가능한 일!)
|
|
|
|
<figure class="fig">
|
|
<svg viewBox="0 0 700 90" role="img" aria-label="측점 입력으로 이동">
|
|
<defs><marker id="as" markerWidth="10" markerHeight="10" refX="7" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7 Z" fill="#7c3aed"/></marker></defs>
|
|
<rect x="30" y="30" width="180" height="34" rx="6" fill="#f0fdf4" stroke="#16a34a"/><text x="120" y="52" text-anchor="middle" font-size="12" fill="#166534">"160k130" 입력</text>
|
|
<line x1="210" y1="47" x2="255" y2="47" stroke="#7c3aed" stroke-width="2" marker-end="url(#as)"/>
|
|
<rect x="260" y="30" width="200" height="34" rx="6" fill="#fef3c7" stroke="#ca8a04"/><text x="360" y="52" text-anchor="middle" font-size="11" fill="#854d0e">지도에서 시간 찾기(192초)</text>
|
|
<line x1="460" y1="47" x2="505" y2="47" stroke="#7c3aed" stroke-width="2" marker-end="url(#as)"/>
|
|
<rect x="510" y="30" width="160" height="34" rx="6" fill="#eff6ff" stroke="#2563eb"/><text x="590" y="52" text-anchor="middle" font-size="12" fill="#1e3a8a">그 시간으로 재생</text>
|
|
</svg>
|
|
</figure>
|
|
|
|
## 2-6. 핵심 기술 / 파일
|
|
|
|
| 하는 일 | 기술 | 파일 · 함수 |
|
|
|---|---|---|
|
|
| GPS → 측점값 | 선분에 수직 투영 | [chainage.ts](../client/src/utils/chainage.ts) `projectToChain` |
|
|
| 프레임 → 시간 | fps 자동 산출 | VideoPlayer.tsx `effectiveFps` |
|
|
| 시간↔측점 대응표 | 프레임별 precompute | [StationBar.tsx](../client/src/stationbar/StationBar.tsx) |
|
|
| 이동거리 축 | 측점 변화량 누적(정규화) | StationBar.tsx `frac` |
|
|
| 방향 색·구조물 배치 | 측점값 기준 렌더 | stationbar/components/* |
|
|
|
|
---
|
|
|
|
## 마무리 — 한 문장씩 🎁
|
|
|
|
- **Part 1 (좌표 투영):** "드론이 **어디서·어느 쪽**을 보는지 알기 때문에, 지도 속 터널이 **영상 화면 어디**에 보일지 계산해 이름표를 딱 붙인다."
|
|
- **Part 2 (측점 기반):** "드론 **GPS로 매 프레임의 측점**을 계산해 **시간↔측점 대응표**를 만들어, **시간이 아니라 측점으로** 영상을 탐색한다."
|
|
|
|
> 두 기술 모두 **드론의 GPS·자세 데이터**를 똑똑하게 활용한 결과예요.
|
|
> 그래서 GhiVideo는 단순 영상이 아니라 **"선로 위 어디를 보고 있는지 아는" 주행영상 플레이어**가 됩니다. 🚁📏
|