# 드론이 본 것을 지도랑 '딱' 맞추는 마법 (발표용 쉬운 설명서) > 이 글은 **초등학생도 이해할 수 있게** 그림과 이야기로 쓴 발표 자료예요. > 주제: **"드론이 찍은 영상 위에, 지도 속 터널·다리 이름표를 어떻게 정확한 자리에 붙일까?"** > (진짜 수학 공식은 [geoProjection.ts](../client/src/utils/geoProjection.ts) 참고) --- ## 0. 한 문장으로 말하면 **"드론이 지금 어디서, 어느 쪽을 보고 있는지"** 를 알기 때문에, **"지도 속 터널이 영상 화면의 어느 점에 보일지"** 를 계산해서 이름표를 딱 붙이는 기술이에요. > 🎯 **비유**: 내가 서 있는 자리와 바라보는 방향을 알면, > "저 멀리 나무가 내 눈앞 어디쯤 보일지" 알 수 있죠? 그걸 컴퓨터가 대신 해 주는 거예요. --- ## 1. 우리가 풀고 싶은 문제 — 드론은 '앞을 보며' 날아가요 드론은 가만히 아래를 내려다보는 게 아니라, **앞으로 날아가면서 자기 앞쪽 땅을 비스듬히** 봐요. (자동차 운전할 때 바로 앞 범퍼가 아니라, 저~ 앞 도로를 보는 것과 똑같아요! 🚗)

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

**어려운 점:** 드론은 계속 날아가고 바람에 흔들려요. 그래서 이름표도 터널을 **졸졸 따라다녀야** 해요. → "이 터널이 지금 화면의 **어느 점**에 보이는지"를 매 순간(1초에 60번!) 계산해야 해요. --- ## 2. 우리가 가진 '단서' 4가지 🔍 탐정처럼, 우리는 이미 몇 가지를 알고 있어요. 이 4개만 있으면 계산이 돼요!

이 4가지 단서로 "터널이 화면 어디에 보일지"를 계산한다.

--- ## 3. 핵심 아이디어 — '창문에 스티커 붙이기' 🪟 **이 그림 하나만 이해하면 끝!** 가장 중요한 부분이에요. 내가 창문 안에서 밖의 나무를 봐요. **내 눈에서 나무로 직선**을 쭉 그으면, 그 선이 **창문 유리를 통과하는 점**이 있죠? 거기에 스티커를 붙이면 나무 위에 딱 겹쳐요!

카메라(눈)에서 터널(나무)로 선을 긋고, 그 선이 화면(창문)을 뚫는 점에 이름표를 붙인다.

> 👉 그래서 하는 일은 딱 하나예요: > **"카메라에서 터널로 선을 긋고, 그 선이 화면을 뚫는 점을 찾는다."** --- ## 4. 실제 계산은 3번에 나눠서 해요 ✏️ ### 계산 ① 터널은 '나(드론) 기준으로' 어디 있지? GPS 주소(위도·경도)는 **지구본 위 각도**라 계산이 불편해요. 그래서 먼저 **모눈종이(미터 단위)** 로 바꿔요. 그다음 드론을 중심(0,0)에 놓고 거리를 재요.

각도를 미터로 바꾼 뒤, 드론을 중심에 놓고 "앞/옆/아래로 몇 m"인지 잰다.

### 계산 ② 그런데 내 카메라가 기울어져 있잖아 드론 카메라는 3가지로 방향이 틀어질 수 있어요. 사람이 고개를 움직이는 것과 똑같아요.

①에서 잰 위치를, 카메라가 실제로 보는 방향(yaw·pitch·roll)에 맞게 살짝 돌려준다.

특히 우리 드론은 **앞을 비스듬히** 봐요(pitch). 그래서 터널이 화면 위쪽(멀리)에 작게 보일지, 아래쪽(가까이)에 크게 보일지가 딱 맞아떨어져요. ### 계산 ③ 3D를 납작한 화면에 눌러 담기 이제 3번의 **창문 스티커**를 실제로 계산해요. 멀수록 가운데로 작게, 가까울수록 크게·바깥으로!

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

> 드디어 답: **"터널은 화면의 가로 60%, 세로 70% 지점에 보인다!"** → 거기에 이름표 딱! 🎯 --- ## 5. 마지막 문제 — 드론이 흔들려요 🌬️ 드론은 바람에 흔들려서, 그냥 두면 이름표가 **부들부들** 떨려요. 그래서 **여러 순간(프레임)의 위치를 평균 내서 부드럽게** 만들어요. (친구가 손을 떨며 가리켜도, 우리가 "대충 저기구나" 하고 부드럽게 알아보는 것과 같아요.) --- ## 6. 그래서 '진짜 기술'은 뭘 썼을까? 🛠️ 지금까지는 **비유**로 설명했어요. 이제 컴퓨터가 실제로 쓴 **진짜 도구(기술)** 이름을 알려줄게요. 어려운 이름이 나오지만, 오른쪽 칸을 보면 **한 줄로 쉽게** 이해돼요. 😊

왼쪽(비유) → 가운데(진짜 기술) → 오른쪽(쉬운 뜻). 이 표 한 장이 발표의 '기술 요약 슬라이드'예요.

> 💡 **재미있는 사실:** 이 계산의 원래 버전은 **파이썬(Python)** 으로 만든 실험 프로그램(`advanced_tuner_v2.py`)이었어요. > 그걸 **웹 브라우저에서 바로 돌아가게 TypeScript로 옮겨서**, 설치 없이 인터넷 창에서 실행돼요. 🌐 --- ## 7. 중요한 기술 3개만 더 깊이 (그래도 쉽게!) 🔎 ### 7-1. 둥근 지구를 평평하게 펴기 — 좌표계 변환 (proj4 · EPSG:5186) 지구는 **공(球)** 이라서, 위치를 "각도(위도·경도)"로 말해요. 그런데 각도로는 **"몇 미터 떨어졌지?"** 계산이 어려워요. 그래서 지구 표면을 **평평한 종이에 펴서(투영)**, 미터 단위로 바꿔요. 이때 쓰는 게 **proj4** 라는 도구고, 우리나라에 딱 맞게 만든 지도 규격이 **EPSG:5186 (한국 TM 좌표계)** 예요.

각도로 된 위치를 '자로 잴 수 있는 미터'로 바꾸면, 드론과 터널 사이 거리를 정확히 계산할 수 있다.

### 7-2. 방향을 '숫자표'로 만들어 한 번에 돌리기 — 회전행렬 카메라가 좌우(yaw)·위아래(pitch)·갸웃(roll)로 기울어져 있죠? 이 세 방향을 **하나씩 따로** 돌리면 복잡하고 실수해요. 그래서 수학에서는 방향 정보를 **작은 숫자표(행렬)** 로 만들어요. 이 숫자표를 위치에 **한 번 곱하면**, 세 방향 회전이 **동시에 딱** 적용돼요. > 🎯 **비유:** 요리할 때 양념을 하나씩 넣는 대신, **미리 섞어둔 '만능 양념장' 한 숟갈**을 넣으면 끝나는 것과 같아요. > 회전행렬 = "방향 돌리기 만능 양념장" 이에요. (우리 코드에선 `R_align · R_b2w^T` 라는 양념장을 써요.) ### 7-3. 바늘구멍 사진기 원리 — 핀홀 카메라 모델 3D 세상을 **납작한 사진 한 장**으로 만드는 원리예요. 옛날 **바늘구멍 사진기**를 떠올려요: 작은 구멍으로 빛이 들어와 뒤쪽 벽에 그림이 맺혀요. 이때 **멀리 있는 건 작게, 가까운 건 크게** 맺혀요(원근).

구멍(렌즈)을 지나며 3D가 화면에 맺힌다. '얼마나 당겨 찍나(초점거리)'로 크기가 정해진다.

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

> **한 문장 결론:** > **"드론이 어디서·어느 쪽을 보는지 알기 때문에, 지도 속 터널이 영상 화면 어디에 보일지를 계산해서 이름표를 딱 붙이는 기술"** 이에요. 이 "드론 좌표 → 영상 픽셀 3D 투영"이 GhiVideo를 **보통 영상 플레이어와 다르게 만드는 가장 특별한 기술**이랍니다. ✨