Files
GhiVideo_v4/docs/발표_핵심기술_드론좌표를_영상에_맞추기_쉬운설명.md
b23042andClaude Fable 5 d38b842e8d GhiVideo 소스 복제 — v4 작업 시작 기준
기존 GhiVideo 저장소 HEAD의 트래킹 소스 362개 파일을 복제.
(node_modules·storage·빌드 산출물·대용량 미디어는 .gitignore 규칙대로 제외)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-09 14:32:51 +09:00

25 KiB

드론이 본 것을 지도랑 '딱' 맞추는 마법 (발표용 쉬운 설명서)

이 글은 초등학생도 이해할 수 있게 그림과 이야기로 쓴 발표 자료예요. 주제: "드론이 찍은 영상 위에, 지도 속 터널·다리 이름표를 어떻게 정확한 자리에 붙일까?" (진짜 수학 공식은 geoProjection.ts 참고)

<style> figure.fig{margin:22px 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;} .big{font-size:1.05em;line-height:1.7;} </style>

0. 한 문장으로 말하면

"드론이 지금 어디서, 어느 쪽을 보고 있는지" 를 알기 때문에, "지도 속 터널이 영상 화면의 어느 점에 보일지" 를 계산해서 이름표를 딱 붙이는 기술이에요.

🎯 비유: 내가 서 있는 자리와 바라보는 방향을 알면, "저 멀리 나무가 내 눈앞 어디쯤 보일지" 알 수 있죠? 그걸 컴퓨터가 대신 해 주는 거예요.


1. 우리가 풀고 싶은 문제 — 드론은 '앞을 보며' 날아가요

드론은 가만히 아래를 내려다보는 게 아니라, 앞으로 날아가면서 자기 앞쪽 땅을 비스듬히 봐요. (자동차 운전할 때 바로 앞 범퍼가 아니라, 저~ 앞 도로를 보는 것과 똑같아요! 🚗)

드론 이동 방향 ▶ 카메라 시선 (앞·아래로 비스듬히) 드론 바로 밑 🚇 회덕터널 (드론보다 앞!)
드론은 앞으로 날며(파란 화살표), 자기보다 앞쪽 땅을 비스듬히 본다(주황 시선). 그래서 터널은 드론 바로 밑이 아니라 앞쪽에 찍힌다.

어려운 점: 드론은 계속 날아가고 바람에 흔들려요. 그래서 이름표도 터널을 졸졸 따라다녀야 해요. → "이 터널이 지금 화면의 어느 점에 보이는지"를 매 순간(1초에 60번!) 계산해야 해요.


2. 우리가 가진 '단서' 4가지 🔍

탐정처럼, 우리는 이미 몇 가지를 알고 있어요. 이 4개만 있으면 계산이 돼요!

📍 ① 드론 위치 하늘의 '주소' (GPS 위도·경도·높이) 🧭 ② 보는 방향 어디를·얼마나 기울여 보나 🚇 ③ 터널 위치 땅의 '주소' (지도 GPS) 🔎 ④ 렌즈 정보 얼마나 당겨 찍나 (줌)
이 4가지 단서로 "터널이 화면 어디에 보일지"를 계산한다.

3. 핵심 아이디어 — '창문에 스티커 붙이기' 🪟

이 그림 하나만 이해하면 끝! 가장 중요한 부분이에요.

내가 창문 안에서 밖의 나무를 봐요. 내 눈에서 나무로 직선을 쭉 그으면, 그 선이 창문 유리를 통과하는 점이 있죠? 거기에 스티커를 붙이면 나무 위에 딱 겹쳐요!

👁️ 카메라(눈) 🌳 터널(나무) 창문 = 영상 화면 스티커! (이름표 붙는 자리)
카메라(눈)에서 터널(나무)로 선을 긋고, 그 선이 화면(창문)을 뚫는 점에 이름표를 붙인다.

👉 그래서 하는 일은 딱 하나예요: "카메라에서 터널로 선을 긋고, 그 선이 화면을 뚫는 점을 찾는다."


4. 실제 계산은 3번에 나눠서 해요 ✏️

계산 ① 터널은 '나(드론) 기준으로' 어디 있지?

GPS 주소(위도·경도)는 지구본 위 각도라 계산이 불편해요. 그래서 먼저 모눈종이(미터 단위) 로 바꿔요. 그다음 드론을 중심(0,0)에 놓고 거리를 재요.

지구본 각도 (위도·경도) ➡ 바꾸기 드론(0,0) 🚇 드론 기준으로 재보니… • 앞으로 200 m • 오른쪽으로 50 m • 아래로 80 m
각도를 미터로 바꾼 뒤, 드론을 중심에 놓고 "앞/옆/아래로 몇 m"인지 잰다.

계산 ② 그런데 내 카메라가 기울어져 있잖아

드론 카메라는 3가지로 방향이 틀어질 수 있어요. 사람이 고개를 움직이는 것과 똑같아요.

🙂 yaw (좌우로 돌기) 고개 도리도리 🙂 pitch (위아래 숙이기) 고개 끄덕끄덕 🙂 roll (옆으로 갸웃) 고개 갸우뚱
①에서 잰 위치를, 카메라가 실제로 보는 방향(yaw·pitch·roll)에 맞게 살짝 돌려준다.

특히 우리 드론은 앞을 비스듬히 봐요(pitch). 그래서 터널이 화면 위쪽(멀리)에 작게 보일지, 아래쪽(가까이)에 크게 보일지가 딱 맞아떨어져요.

계산 ③ 3D를 납작한 화면에 눌러 담기

이제 3번의 창문 스티커를 실제로 계산해요. 멀수록 가운데로 작게, 가까울수록 크게·바깥으로!

📷 화면 🌳 가까움→크게 🌲 멀면→작게
3D 방향을 납작한 화면 좌표로 바꾸면 → "화면 가로 60%, 세로 70%" 같은 정확한 점이 나온다.

드디어 답: "터널은 화면의 가로 60%, 세로 70% 지점에 보인다!" → 거기에 이름표 딱! 🎯


5. 마지막 문제 — 드론이 흔들려요 🌬️

드론은 바람에 흔들려서, 그냥 두면 이름표가 부들부들 떨려요. 그래서 여러 순간(프레임)의 위치를 평균 내서 부드럽게 만들어요. (친구가 손을 떨며 가리켜도, 우리가 "대충 저기구나" 하고 부드럽게 알아보는 것과 같아요.)


6. 그래서 '진짜 기술'은 뭘 썼을까? 🛠️

지금까지는 비유로 설명했어요. 이제 컴퓨터가 실제로 쓴 진짜 도구(기술) 이름을 알려줄게요. 어려운 이름이 나오지만, 오른쪽 칸을 보면 한 줄로 쉽게 이해돼요. 😊

우리가 한 일(비유) 진짜 기술 이름 쉽게 말하면 지구본 각도 → 모눈종이 proj4 · EPSG:5186 좌표계 둥근 지구를 평평한 지도로 펴기 카메라 기울기 반영 회전행렬 (Rotation Matrix) 방향을 숫자표로 만들어 한 번에 돌리기 3D → 화면 점 (창문 스티커) 핀홀 카메라 모델 · 초점거리 바늘구멍 사진기 원리로 점 찍기 30장 사이 부드럽게 보간 (Interpolation) 사진 사이 중간 그림 상상해 채우기 흔들림 잡기 이동평균 · EMA 평활 여러 값 평균 내 부들거림 없애기 1초에 60번 다시 그리기 requestAnimationFrame · Canvas 화면 새로 칠할 때마다 그림 그리기 영상마다 프레임 수 맞추기 fps 자동 산출 (프레임수÷길이) 1초에 몇 장인지 스스로 알아내기 전체 화면·버튼·상태 React · TypeScript 화면을 블록처럼 조립하는 도구
왼쪽(비유) → 가운데(진짜 기술) → 오른쪽(쉬운 뜻). 이 표 한 장이 발표의 '기술 요약 슬라이드'예요.

💡 재미있는 사실: 이 계산의 원래 버전은 파이썬(Python) 으로 만든 실험 프로그램(advanced_tuner_v2.py)이었어요. 그걸 웹 브라우저에서 바로 돌아가게 TypeScript로 옮겨서, 설치 없이 인터넷 창에서 실행돼요. 🌐


7. 중요한 기술 3개만 더 깊이 (그래도 쉽게!) 🔎

7-1. 둥근 지구를 평평하게 펴기 — 좌표계 변환 (proj4 · EPSG:5186)

지구는 공(球) 이라서, 위치를 "각도(위도·경도)"로 말해요. 그런데 각도로는 "몇 미터 떨어졌지?" 계산이 어려워요. 그래서 지구 표면을 평평한 종이에 펴서(투영), 미터 단위로 바꿔요. 이때 쓰는 게 proj4 라는 도구고, 우리나라에 딱 맞게 만든 지도 규격이 EPSG:5186 (한국 TM 좌표계) 예요.

둥근 지구 (각도) ➡ proj4 로 펴기 평평한 지도 (미터) · EPSG:5186
각도로 된 위치를 '자로 잴 수 있는 미터'로 바꾸면, 드론과 터널 사이 거리를 정확히 계산할 수 있다.

7-2. 방향을 '숫자표'로 만들어 한 번에 돌리기 — 회전행렬

카메라가 좌우(yaw)·위아래(pitch)·갸웃(roll)로 기울어져 있죠? 이 세 방향을 하나씩 따로 돌리면 복잡하고 실수해요. 그래서 수학에서는 방향 정보를 작은 숫자표(행렬) 로 만들어요. 이 숫자표를 위치에 한 번 곱하면, 세 방향 회전이 동시에 딱 적용돼요.

🎯 비유: 요리할 때 양념을 하나씩 넣는 대신, 미리 섞어둔 '만능 양념장' 한 숟갈을 넣으면 끝나는 것과 같아요. 회전행렬 = "방향 돌리기 만능 양념장" 이에요. (우리 코드에선 R_align · R_b2w^T 라는 양념장을 써요.)

7-3. 바늘구멍 사진기 원리 — 핀홀 카메라 모델

3D 세상을 납작한 사진 한 장으로 만드는 원리예요. 옛날 바늘구멍 사진기를 떠올려요: 작은 구멍으로 빛이 들어와 뒤쪽 벽에 그림이 맺혀요. 이때 멀리 있는 건 작게, 가까운 건 크게 맺혀요(원근).

터널(실제, 큼) 바늘구멍(=렌즈) 맺힌 상(작고 거꾸로 ↕)
구멍(렌즈)을 지나며 3D가 화면에 맺힌다. '얼마나 당겨 찍나(초점거리)'로 크기가 정해진다.

컴퓨터는 이 원리를 곱셈·나눗셈 몇 번으로 계산해서, "터널이 화면의 정확히 어느 점"인지 구해요. 여기서 초점거리(focal length) 가 클수록(망원처럼 당길수록) 물체가 화면에서 크게 보여요.


8. 한 장 요약 (마지막 슬라이드) 🎁

드론 위치 + 보는 방향 + 터널 위치 + 렌즈 정보 ① 미터로 바꿔 "드론 기준 위치" 재기 ② 카메라 기울기만큼 방향 돌리기 ③ 창문에 스티커 붙이듯 화면 점 찾기 🎯 화면의 정확한 자리에 이름표 붙이기!

한 문장 결론: "드론이 어디서·어느 쪽을 보는지 알기 때문에, 지도 속 터널이 영상 화면 어디에 보일지를 계산해서 이름표를 딱 붙이는 기술" 이에요.

이 "드론 좌표 → 영상 픽셀 3D 투영"이 GhiVideo를 보통 영상 플레이어와 다르게 만드는 가장 특별한 기술이랍니다.