b23042andClaude Fable 5
d38b842e8d
기존 GhiVideo 저장소 HEAD의 트래킹 소스 362개 파일을 복제. (node_modules·storage·빌드 산출물·대용량 미디어는 .gitignore 규칙대로 제외) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
33 KiB
지도 위의 POI를 영상에 '딱' 붙이는 기술들 (그림 설명서)
<style> figure.fig{margin:20px 0;text-align:center;page-break-inside:avoid;break-inside:avoid;} figure.fig svg{width:100%;max-width:680px;height:auto;border:1px solid #e7e0d2;border-radius:8px;background:#fffdf8;} figure.fig figcaption{font-size:0.9em;color:#777;margin-top:6px;} text{font-family:'Malgun Gothic','Hancom Gothic',sans-serif;} </style>이 글은 초등학생도 이해할 수 있게 쓴 설명서예요. "지도에 적힌 다리·터널·역의 위치(POI)를, 드론 영상의 정확한 화면 자리에 어떻게 붙이는가?" 그 비밀을 그림과 이야기로 하나씩 풀어 줄게요. (진짜 수학 공식은 같은 폴더의 기술문서 geoProjection.ts를 보세요.)
0. 한 문장으로 말하면
"지도에서는 ○○다리가 여기 있어요" 라는 위치 정보(POI)를 받아서, "그럼 드론 영상 화면에서는 바로 이 자리에 보이겠네!" 하고 글자를 딱 붙여 주는 기술이에요.
🎯 비유: 보물지도에 "보물은 큰 나무 옆"이라고 적혀 있을 때, 내가 지금 서 있는 자리와 보는 방향을 알면 "저 나무가 내 눈앞 어디쯤 보일지" 알 수 있죠. 그걸 컴퓨터가 하는 거예요.
1. 큰 그림 먼저 — POI가 화면에 붙기까지 여행
POI 하나가 화면에 붙으려면 여러 단계의 변신을 거쳐요. 마치 공장의 컨베이어 벨트처럼요.
2. 사용한 기술 한눈에 보기
| 번호 | 기술 이름 | 쉽게 말하면 | 자세히 |
|---|---|---|---|
| ① | 좌표계 변환 (proj4) | 위도·경도(각도)를 '미터'로 바꾸기 | 3장 |
| ② | ENU 월드 좌표 | "기준점에서 동·북·위로 몇 m" | 4장 |
| ③ | 지오이드 높이 보정 | 두 가지 높이 기준을 맞추기 | 5장 |
| ④ | 자세 회전 행렬 (yaw/pitch/roll) | 드론이 어느 쪽을 보는지 계산 | 6장 |
| ⑤ | 상대 위치 벡터 | 드론에서 POI까지의 방향·거리 | 7장 |
| ⑥ | 핀홀 카메라 원근투영 | 3D 세상을 납작한 화면에 그리기 | 8장 |
| ⑦ | 화각(초점거리·센서) | "얼마나 넓게 보나" 맞추기 | 9장 |
| ⑧ | 카메라 뒤 지우기(클리핑) | 뒤에 있는 건 안 그리기 | 10장 |
| ⑨ | POI 높이 추측 | 실제 높이 없을 때 똑똑하게 짐작 | 11장 |
| ⑩ | 거리 필터 | 너무 먼 건 숨기기 | 12장 |
| ⑪ | 역투영 보정 | 손으로 끌어 거꾸로 고치기 | 13장 |
| ⑫ | 화면 크롭 맞춤(cover) | 영상 잘림에 글자도 맞추기 | 14장 |
이제 하나씩 그림으로 볼게요!
3. 기술 ① — 위도·경도를 '미터'로 바꾸기 (proj4)
지도 위치는 보통 위도·경도 (예: 북위 36.3°, 동경 127.4°)로 말해요. 그런데 이건 각도라서 "두 곳이 몇 m 떨어졌나?" 같은 계산이 어려워요.
그래서 "기준점에서 동쪽 몇 m, 북쪽 몇 m" 같은 미터(m) 좌표로 바꿔요.
우리나라 전용 지도 격자인 EPSG:5186 (한국 TM) 을 써서 바꿔요. 이 변신은 proj4라는 도구가 해 줍니다.
📏 비유: "동경 127.4도"라고 하면 와닿지 않지만, "학교에서 동쪽으로 500m"라고 하면 바로 이해되죠.
4. 기술 ② — "동·북·위로 몇 m" 3D 좌표 (ENU)
이제 위치를 세 개의 숫자로 나타내요. 기준점에서:
- East (동쪽으로 몇 m)
- North (북쪽으로 몇 m)
- Up (위로 몇 m = 높이)
이 세 글자를 따서 ENU라고 불러요. 이렇게 하면 지구 위 모든 위치를 3D 공간의 한 점으로 다룰 수 있어요.
🧊 비유: 교실에서 물건 위치를 "칠판에서 오른쪽 2m, 앞으로 3m, 바닥에서 1m 높이"라고 말하는 것과 같아요.
5. 기술 ③ — 두 가지 '높이 기준' 맞추기 (지오이드 보정)
높이를 재는 기준이 두 가지라서 헷갈려요.
- GPS 높이: 지구를 매끈한 타원이라 보고 잰 높이 (드론이 기록하는 높이)
- 지도 해발고도: 평균 바닷물 높이 기준 (지도에 적힌 높이) = 지오이드
이 둘은 지역마다 수십 m 차이 나요. (대전은 약 25.8m!) 안 맞추면 글자가 위아래로 엉뚱하게 떠요. 그래서 지도 높이에 25.8m를 더해 드론의 높이 기준과 똑같이 맞춰 줘요.
🌊 비유: "1층 바닥 기준 높이"와 "지하주차장 바닥 기준 높이"는 같은 창문인데 숫자가 다르죠. 비교하려면 기준을 하나로 맞춰야 해요.
6. 기술 ④ — 드론이 '어느 쪽을 보는지' (자세 회전)
드론은 가만히 있지 않아요. 좌우로 돌고(yaw), 아래로 숙이고(pitch), 옆으로 기울어요(roll). 이 세 가지를 알아야 "카메라가 정확히 어느 방향을 보는지" 계산할 수 있어요.
이걸 회전 행렬이라는 수학 도구로 한 번에 계산해요. (세 방향 회전을 합치는 마법 표라고 생각하면 돼요.)
7. 기술 ⑤ — 드론에서 POI까지 '상대 위치'
이제 POI의 위치 − 드론의 위치를 빼서, "드론에서 봤을 때 POI가 어느 쪽에, 얼마나 멀리" 있는지 구해요. 그리고 ④에서 구한 드론의 보는 방향을 적용하면, "카메라 눈 기준으로" POI가 어디 있는지 나와요.
👉 비유: 친구가 어디 서서 어느 쪽을 보는지 알면, "친구 눈에는 저 건물이 왼쪽 앞에 보이겠네" 하고 알 수 있죠.
8. 기술 ⑥ — 3D를 납작한 화면에 그리기 (핀홀 카메라 원근투영)
이제 핵심! 입체(3D)를 납작한 화면(2D)에 그려요. 규칙은 누구나 알아요: 가까운 건 크게, 먼 건 작게. 이게 바로 원근법이고, 카메라는 바늘구멍 사진기처럼 작동해요.
계산은 의외로 간단해요. "옆으로 간 거리 ÷ 앞으로 간 거리" 를 하면 화면의 좌우 위치가 나와요. (위아래도 똑같이!) 멀수록(앞으로 간 거리가 클수록) 나누는 값이 커져서 → 화면 가운데로 작게 모여요.
📷 비유: 기찻길이 멀어질수록 한 점으로 모이는 것 — 그게 바로 이 나눗셈의 결과예요.
9. 기술 ⑦ — '얼마나 넓게 보나' 화각 맞추기 (초점거리·센서)
같은 자리에서도 광각 렌즈는 넓게, 줌 렌즈는 좁게 보여요. 이 "얼마나 넓게 보나"가 화각이에요. 화각은 초점거리(focal, 기본 24mm) 와 센서 크기(36mm, 16:9) 로 정해져요.
화각이 안 맞으면 글자가 위아래·좌우로 어긋나요. 그래서 8장의 나눗셈에 이 값을 곱해서 정확히 맞춰 줘요.
🔍 비유: 같은 창밖 풍경도 망원경(줌)으로 보면 좁고 크게, 그냥 보면 넓고 작게 보이죠.
10. 기술 ⑧ — 카메라 '뒤'에 있는 건 안 그리기 (클리핑)
POI가 드론 뒤쪽이나 너무 가까이에 있으면, 계산이 이상해져서 글자가 화면 반대편으로 휙 튀어요. 그래서 "앞으로 간 거리(Zc)가 너무 작거나 마이너스면 = 카메라 뒤/너무 가까움" → 그냥 안 그려요.
🙈 비유: 내 뒤통수 쪽 물건은 내 눈에 안 보이죠. 안 보이는 건 화면에도 안 그리는 게 맞아요.
11. 기술 ⑨ — POI 높이를 똑똑하게 '추측'하기
문제가 하나 있어요. 다리·역의 위도·경도는 정확히 아는데, 정확한 높이는 모를 때가 많아요. 비싼 3D 지형 데이터(DEM)를 사면 알 수 있지만, 안 사고도 똑똑하게 짐작해요. 두 가지 방법:
- 가장 가까운 선로(중심선)의 높이를 빌려 써요. → 선로 굴곡(오르막/내리막)까지 자연스럽게 반영! 👍
- 또는 "드론 높이 − 일정값(약 24m)" 으로 가정해요.
그리고 사람이 직접 고친 높이가 있으면(드래그/DEM) 그걸 가장 먼저 써요.
🏔️ 비유: 친구 키를 모를 때, 바로 옆에 선 비슷한 친구 키를 참고해 짐작하는 것과 같아요.
12. 기술 ⑩ — 너무 먼 건 숨기기 (거리 필터)
화면에 모든 POI를 다 그리면 너무 복잡해요. 그래서 드론과의 수평 직선거리가 정해진 범위(기본 1000m)보다 멀면 숨겨요. 가까운 것만 보여 주는 거죠.
또 "앞에 있나 / 옆에 있나"도 따로 구분해서 더 똑똑하게 걸러낼 수 있어요.
🔭 비유: 지도 앱에서 너무 멀리 있는 가게 이름은 안 보이다가, 가까이 가면 나타나는 것과 같아요.
13. 기술 ⑪ — 손으로 끌어 거꾸로 고치기 (역투영)
지도 위치가 가끔 살짝 틀려요. 그러면 화면에서 글자를 제자리로 쓱 끌면, 컴퓨터가 그 화면 위치를 거꾸로 따라가 실제 위치(또는 높이)를 다시 계산해 고쳐요. (8장을 반대로!) 고친 값은 저장돼서 다음에도, 다른 장면에서도 계속 맞아요.
이렇게 거꾸로 푸는 방법이 여러 개 있어요:
- 화면점 → 실제 위치 복원 (위·아래 동시 보정)
- 높이만 다시 풀기 (앞으로 밀려 보일 때)
- 광선을 땅과 만나게 해서 좌우 위치 고치기
- 글자를 끌면 화각(초점거리)을 스스로 다시 맞추기
🎯 비유: 다트가 빗나가면, 맞은 자리를 보고 "팔을 이만큼 틀어야겠다" 하고 거꾸로 교정하는 것과 같아요.
14. 기술 ⑫ — 영상 잘림에 글자도 맞추기 (cover 변환)
영상은 화면을 비율 유지하며 꽉 채우다 보니 가장자리가 살짝 잘려요(CSS object-fit: cover).
그래서 글자도 똑같이 잘린 영상에 맞춰 위치를 옮겨야 정확히 붙어요.
8장에서 구한 "0~1 사이의 화면 비율 위치"를, 실제 화면 픽셀로 바꿀 때 이 잘림을 똑같이 반영해 줘요.
🖼️ 비유: 액자(화면)에 사진(영상)을 꽉 채우면 사진 가장자리가 조금 잘리죠. 사진 위에 붙일 스티커(글자)도 그 잘린 만큼 같이 옮겨 줘야 제자리예요.
15. 전체를 한 줄로 다시 정리
16. 왜 이게 대단할까? (특허감 포인트)
- 측량 선로 높이로, 비싼 3D 지형 없이도 정합 (11장) + 두 높이 기준 자동 맞춤(5장).
- 한 번 끌어서 위치·높이·화각을 동시에 거꾸로 보정 (13장) — 보통은 깊이 측정 장비가 필요한 일을 장비 없이.
- 드론 자세·화각·지오이드·원근법을 모두 합친 정확한 투영 (6~9장) — 영상 위에 글자를 픽셀 단위로 정합.
⚠️ 단, 특허는 비슷한 게 이미 있는지(선행기술) 전문가가 꼭 찾아봐야 확정돼요.
17. 쉬운 용어 사전
| 어려운 말 | 쉬운 뜻 |
|---|---|
| POI | 다리·터널·역처럼 지도에 표시된 '관심 지점'(Point Of Interest) |
| 좌표계 변환 / proj4 | 위도·경도(각도)를 미터 격자로 바꾸는 것 (한국 TM = EPSG:5186) |
| ENU | 기준점에서 동(E)·북(N)·위(U)로 몇 m인지 나타내는 3D 좌표 |
| 지오이드 | '해발고도'의 기준(평균 바닷물 높이). GPS 높이와 달라 보정 필요 |
| yaw / pitch / roll | 좌우로 돈 / 위아래 숙인 / 옆으로 기운 정도 (드론 자세) |
| 회전 행렬 | 세 가지 회전을 한 번에 계산하는 수학 도구 |
| 투영(projection) | 입체(3D)를 납작한 화면(2D)에 그리는 것 (원근법) |
| 핀홀 카메라 | 바늘구멍 사진기 — 가까운 건 크게, 먼 건 작게 |
| 화각(FOV) / 초점거리 | 카메라가 얼마나 넓게 보는지 (광각=넓게, 줌=좁게) |
| 클리핑 | 카메라 뒤/너무 가까운 것을 안 그리고 잘라내는 것 |
| DEM | 땅의 높낮이를 담은 3D 지형 데이터 (보통 비쌈) |
| 역투영 | 투영의 반대 — 화면의 한 점이 실제 어디인지 거꾸로 찾는 것 |
| object-fit: cover | 영상을 비율 유지하며 화면을 꽉 채우는 방식(가장자리 잘림) |
18. 마치며
지도에 적힌 "○○다리는 여기" 라는 위치 하나가 화면에 붙기까지, 위경도→미터 변환 → 높이 맞추기 → 드론 자세·상대위치 → 원근법 투영 → 거리·겹침 정리 라는 여러 기술이 차례로 일을 해요.
복잡해 보여도, 사실은 "학교에서 동쪽 몇 m, 친구가 보는 방향, 기찻길이 멀어지면 작아지는 원근법" 같은 일상의 생각들을 컴퓨터로 정밀하게 이어 붙인 것뿐이랍니다. 🙂